oss/wallabag
oss/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2025-08-01 17:38:38 +00:00
Code Wiki Activity

Theme picker

Browse source
This commit is contained in:
Simounet 2020-11-19 11:38:02 +01:00
parent a562f6b943
commit 66d5042af5
No known key found for this signature in database
GPG key ID: 77D3B7DC794EB770
10 changed files with 115 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/Resources/static/themes/material/css/sidenav.scss
View file

@ -11,6 +11,11 @@
&.logo > a:hover {
background: initial;
}
& > a > i.material-icons.theme-toggle-icon {
float: none;
margin-left: 0;
}
}
a {

68
app/Resources/static/themes/material/index.js
View file

@ -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 = () => {