lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

JS theme switching simplified

Browse Source
This commit is contained in:
meow 2022-05-16 13:51:28 +03:00
parent e18b10297b
commit 2dead1a19b
1 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/js/themes.js
View File

@ -5,7 +5,6 @@ toggle_theme.href = 'javascript:void(0)';
const STORAGE_KEY_THEME = 'dark_mode'; const STORAGE_KEY_THEME = 'dark_mode';
const THEME_DARK = 'dark'; const THEME_DARK = 'dark';
const THEME_LIGHT = 'light'; const THEME_LIGHT = 'light';
const THEME_SYSTEM = '';
// TODO: theme state controlled by system // TODO: theme state controlled by system
toggle_theme.addEventListener('click', function () { toggle_theme.addEventListener('click', function () {
@ -16,28 +15,16 @@ toggle_theme.addEventListener('click', function () {
helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {}); helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
}); });
/** @param {THEME_DARK|THEME_LIGHT} theme */
// Ask system about dark theme
var systemDarkTheme = matchMedia('(prefers-color-scheme: dark)');
systemDarkTheme.addListener(function () {
// Ignore system events if theme set manually
if (!helpers.storage.get(STORAGE_KEY_THEME))
setTheme(THEME_SYSTEM);
});
/** @param {THEME_DARK|THEME_LIGHT|THEME_SYSTEM} theme */
function setTheme(theme) { function setTheme(theme) {
if (theme === THEME_DARK || (theme === THEME_SYSTEM && systemDarkTheme.matches)) { // By default body element has .no-theme class that uses OS theme via CSS @media rules
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny'); // It rewrites using hard className below
document.body.classList.remove('no-theme'); if (theme === THEME_DARK) {
document.body.classList.remove('light-theme'); toggle_theme.children[0].className = 'icon ion-ios-sunny';
document.body.classList.add('dark-theme'); document.body.className = 'dark-theme';
} else { } else {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon'); toggle_theme.children[0].className = 'icon ion-ios-moon';
document.body.classList.remove('no-theme'); document.body.className = 'light-theme';
document.body.classList.remove('dark-theme');
document.body.classList.add('light-theme');
} }
} }
@ -50,6 +37,8 @@ addEventListener('storage', function (e) {
// Set theme from preferences on page load // Set theme from preferences on page load
addEventListener('DOMContentLoaded', function () { addEventListener('DOMContentLoaded', function () {
const prefTheme = document.getElementById('dark_mode_pref').textContent; const prefTheme = document.getElementById('dark_mode_pref').textContent;
setTheme(prefTheme); if (prefTheme) {
helpers.storage.set(STORAGE_KEY_THEME, prefTheme); setTheme(prefTheme);
helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
}
}); });