iv-org/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2025-05-02 06:26:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Apply dark theme immediately

Browse source 
Themes are now controlled with a class on the body element.

If a preference is set the body element will have either "dark-theme"
or "light-theme" class. If no preference is set or the preference is
empty the class will be "no-theme".

"dark-theme" and "light-theme" are handled by darktheme.css and
lighttheme.css respectively.

"no-theme" is handled by default.css where depending on the value of
"prefers-color-scheme" the styles corresponding to "dark-theme" or
"light-theme" are applied.

Unfortunately this means that both themes are duplicated, once in the
theme .css and once in default.css.
This commit is contained in:
saltycrys 2020-11-16 04:19:41 +01:00
parent aeed7deb2d
commit de777907f2
5 changed files with 108 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

15
assets/js/themes.js
View file

@ -2,7 +2,7 @@ var toggle_theme = document.getElementById('toggle_theme');
toggle_theme.href = 'javascript:void(0);';
toggle_theme.addEventListener('click', function () {
var dark_mode = document.getElementById('dark_theme').media === 'none';
var dark_mode = document.body.classList.contains("light-theme");
var url = '/toggle_theme?redirect=false';
var xhr = new XMLHttpRequest();
@ -22,7 +22,7 @@ window.addEventListener('storage', function (e) {
}
});
window.addEventListener('load', function () {
window.addEventListener('DOMContentLoaded', function () {
window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent);
// Update localStorage if dark mode preference changed on preferences page
update_mode(window.localStorage.dark_mode);
@ -50,13 +50,18 @@ function scheme_switch (e) {
}
function set_mode (bool) {
document.getElementById('dark_theme').media = !bool ? 'none' : '';
document.getElementById('light_theme').media = bool ? 'none' : '';
if (bool) {
// dark
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
document.body.classList.remove('no-theme');
document.body.classList.remove('light-theme');
document.body.classList.add('dark-theme');
} else {
// light
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
document.body.classList.remove('no-theme');
document.body.classList.remove('dark-theme');
document.body.classList.add('light-theme');
}
}