mirror of
https://github.com/wallabag/wallabag.git
synced 2025-01-10 00:45:25 +00:00
Theme picker
This commit is contained in:
parent
a562f6b943
commit
66d5042af5
10 changed files with 115 additions and 28 deletions
app/Resources/static/themes/material
src/Wallabag/CoreBundle/Resources
web/wallassets
|
@ -11,6 +11,11 @@
|
|||
&.logo > a:hover {
|
||||
background: initial;
|
||||
}
|
||||
|
||||
& > a > i.material-icons.theme-toggle-icon {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -53,26 +53,64 @@ function darkTheme() {
|
|||
document.cookie = `${this.name}=${value};samesite=Lax;path=/;max-age=31536000`;
|
||||
},
|
||||
|
||||
removeCookie() {
|
||||
document.cookie = `${this.name}=auto;samesite=Lax;path=/;max-age=0`;
|
||||
},
|
||||
|
||||
exists() {
|
||||
return document.cookie.split(';').map((cookie) => cookie.split('=')).filter((cookie) => cookie[0] === 'theme').length;
|
||||
},
|
||||
};
|
||||
if (themeCookie.exists() === 0 && typeof window.matchMedia === 'function') {
|
||||
const isPreferedColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
|
||||
if (isPreferedColorSchemeDark) {
|
||||
themeDom.addClass(rootEl);
|
||||
}
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addListener(
|
||||
(e) => themeDom[e.matches ? 'addClass' : 'removeClass'](rootEl),
|
||||
);
|
||||
}
|
||||
const themeButton = document.querySelector('.js-theme-toggle');
|
||||
if (themeButton) {
|
||||
themeButton.addEventListener('click', () => {
|
||||
const isDarkTheme = themeDom.toggleClass(rootEl);
|
||||
themeCookie.setCookie(isDarkTheme);
|
||||
const preferedColorScheme = {
|
||||
choose() {
|
||||
if (this.isAvailable() && themeCookie.exists() === 0) {
|
||||
const isPreferedColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
|
||||
if (themeCookie.exists() === 0) {
|
||||
themeDom[isPreferedColorSchemeDark ? 'addClass' : 'removeClass'](rootEl);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
isAvailable() {
|
||||
return typeof window.matchMedia === 'function';
|
||||
},
|
||||
|
||||
init() {
|
||||
if (!this.isAvailable()) {
|
||||
return false;
|
||||
}
|
||||
this.choose();
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
|
||||
this.choose();
|
||||
});
|
||||
return true;
|
||||
},
|
||||
};
|
||||
preferedColorScheme.init();
|
||||
const lightThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="light"]');
|
||||
[...lightThemeButtons].map((lightThemeButton) => {
|
||||
lightThemeButton.addEventListener('click', () => {
|
||||
themeDom.removeClass(rootEl);
|
||||
themeCookie.setCookie(false);
|
||||
});
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const darkThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="dark"]');
|
||||
[...darkThemeButtons].map((darkThemeButton) => {
|
||||
darkThemeButton.addEventListener('click', () => {
|
||||
themeDom.addClass(rootEl);
|
||||
themeCookie.setCookie(true);
|
||||
});
|
||||
return true;
|
||||
});
|
||||
const autoThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="auto"]');
|
||||
[...autoThemeButtons].map((autoThemeButton) => {
|
||||
autoThemeButton.addEventListener('click', () => {
|
||||
themeCookie.removeCookie();
|
||||
preferedColorScheme.choose();
|
||||
});
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
const stickyNav = () => {
|
||||
|
|
|
@ -34,6 +34,9 @@ menu:
|
|||
site_credentials: Site credentials
|
||||
ignore_origin_instance_rules: 'Global ignore origin rules'
|
||||
quickstart: "Quickstart"
|
||||
theme_toggle_light: "Light theme"
|
||||
theme_toggle_dark: "Dark theme"
|
||||
theme_toggle_auto: "Automatic theme"
|
||||
top:
|
||||
add_new_entry: Add a new entry
|
||||
search: Search
|
||||
|
@ -273,6 +276,10 @@ entry:
|
|||
delete_public_link: delete public link
|
||||
export: Export
|
||||
print: Print
|
||||
theme_toggle: Theme toggle
|
||||
theme_toggle_light: Light
|
||||
theme_toggle_dark: Dark
|
||||
theme_toggle_auto: Automatic
|
||||
problem:
|
||||
label: Problems?
|
||||
description: Does this article appear wrong?
|
||||
|
|
|
@ -34,7 +34,9 @@ menu:
|
|||
site_credentials: Accès aux sites
|
||||
ignore_origin_instance_rules: "Règles globales d'omission d'origine"
|
||||
quickstart: "Pour bien débuter"
|
||||
theme_toggle: "Changer le thème"
|
||||
theme_toggle_light: "Thème clair"
|
||||
theme_toggle_dark: "Thème sombre"
|
||||
theme_toggle_auto: "Thème automatique"
|
||||
top:
|
||||
add_new_entry: Sauvegarder un nouvel article
|
||||
search: Rechercher
|
||||
|
@ -275,6 +277,9 @@ entry:
|
|||
export: Exporter
|
||||
print: Imprimer
|
||||
theme_toggle: Changer le thème
|
||||
theme_toggle_light: "Clair"
|
||||
theme_toggle_dark: "Sombre"
|
||||
theme_toggle_auto: "Automatique"
|
||||
problem:
|
||||
label: Un problème ?
|
||||
description: Est-ce que cet article s’affiche mal ?
|
||||
|
|
|
@ -98,10 +98,30 @@
|
|||
</li>
|
||||
|
||||
<li class="bold">
|
||||
<a class="waves-effect collapsible-header js-theme-toggle">
|
||||
<a class="waves-effect collapsible-header">
|
||||
<i class="material-icons small">brightness_medium</i>
|
||||
<span>{{ 'entry.view.left_menu.theme_toggle'|trans }}</span>
|
||||
</a>
|
||||
<ul class="collapsible-body">
|
||||
<li>
|
||||
<a href="#" class="js-theme-toggle" data-theme="light">
|
||||
<i class="theme-toggle-icon material-icons tiny">brightness_high</i>
|
||||
<span>{{ 'entry.view.left_menu.theme_toggle_light'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-theme-toggle" data-theme="dark">
|
||||
<i class="theme-toggle-icon material-icons tiny">brightness_low</i>
|
||||
<span>{{ 'entry.view.left_menu.theme_toggle_dark'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-theme-toggle" data-theme="auto">
|
||||
<i class="theme-toggle-icon material-icons tiny">brightness_auto</i>
|
||||
<span>{{ 'entry.view.left_menu.theme_toggle_auto'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{% if craue_setting('share_public')
|
||||
or craue_setting('share_twitter')
|
||||
|
|
|
@ -117,18 +117,30 @@
|
|||
<li><a href="{{ path('site_credentials_index') }}"><i class="material-icons">vpn_key</i> {{ 'menu.left.site_credentials'|trans }}</a></li>
|
||||
{% endif %}
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a class="waves-effect js-theme-toggle">
|
||||
<i class="material-icons small">brightness_medium</i>
|
||||
<span>{{ 'menu.left.theme_toggle'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
{% if is_granted('ROLE_SUPER_ADMIN') %}
|
||||
<li><a href="{{ path('user_index') }}"><i class="material-icons">people</i>{{ 'menu.left.users_management'|trans }}</a></li>
|
||||
<li><a href="{{ path('craue_config_settings_modify') }}"><i class="material-icons">settings</i> {{ 'menu.left.internal_settings'|trans }}</a></li>
|
||||
<li><a href="{{ path('ignore_origin_instance_rules_index') }}"><i class="material-icons">build</i> {{ 'menu.left.ignore_origin_instance_rules'|trans }}</a></li>
|
||||
<li class="divider"></li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<a href="#" class="js-theme-toggle" data-theme="light">
|
||||
<i class="theme-toggle-icon material-icons tiny">brightness_high</i>
|
||||
<span>{{ 'menu.left.theme_toggle_light'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-theme-toggle" data-theme="dark">
|
||||
<i class="theme-toggle-icon material-icons tiny">brightness_low</i>
|
||||
<span>{{ 'menu.left.theme_toggle_dark'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-theme-toggle" data-theme="auto">
|
||||
<i class="theme-toggle-icon material-icons tiny">brightness_auto</i>
|
||||
<span>{{ 'menu.left.theme_toggle_auto'|trans }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{ path('howto') }}"><i class="material-icons">live_help</i> {{ 'menu.left.howto'|trans }}</a></li>
|
||||
<li><a href="{{ path('quickstart') }}"><i class="material-icons">assistant_photo</i> {{ 'menu.left.quickstart'|trans }}</a></li>
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue