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

Add prefers-color-scheme support

Browse Source 
This should fix <https://github.com/omarroth/invidious/issues/559>.
The cookie storage format has been changed from boolean
("true"/"false") to tri-state ("dark"/"light"/""), so that users
without a cookie set will get dark mode if they have enabled the dark
theme in their operating system. The code for handling the cookie
state, along with the user's operating system theme, has been factored
out into a new function `update_mode`, which is called both at window
load and at the "storage" event listener, because the "storage" event
listener is only trigerred when a change is made to the localStorage
from another tab/window (for more info - see
<https://stackoverflow.com/a/4679754>).
This commit is contained in:
psvenk 2019-06-18 15:20:53 -04:00 committed by Omar Roth
parent 19eceb4ecc
commit 365a261af3
No known key found for this signature in database
GPG Key ID: B8254FB7EC3D37F2
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/js/themes.js
View File

@ -11,18 +11,21 @@ toggle_theme.addEventListener('click', function () {
xhr.open('GET', url, true); xhr.open('GET', url, true);
set_mode(dark_mode); set_mode(dark_mode);
localStorage.setItem('dark_mode', dark_mode); localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');
xhr.send(); xhr.send();
}); });
window.addEventListener('storage', function (e) { window.addEventListener('storage', function (e) {
if (e.key == 'dark_mode') { if (e.key == 'dark_mode') {
var dark_mode = e.newValue === 'true'; update_mode(e.newValue);
set_mode(dark_mode);
} }
}); });
window.addEventListener('load', function () {
update_mode(window.localStorage.dark_mode);
});
function set_mode (bool) { function set_mode (bool) {
document.getElementById('dark_theme').media = !bool ? 'none' : ''; document.getElementById('dark_theme').media = !bool ? 'none' : '';
document.getElementById('light_theme').media = bool ? 'none' : ''; document.getElementById('light_theme').media = bool ? 'none' : '';
@ -33,3 +36,14 @@ function set_mode(bool) {
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon'); toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
} }
} }
function update_mode (mode) {
set_mode(
mode == 'true' // for backwards compatibility
|| mode == 'dark'
|| (mode != 'light'
&& window.matchMedia('(prefers-color-scheme: dark)').matches)
);
}