mirror of
https://github.com/iv-org/invidious.git
synced 2025-11-01 21:58:29 -05:00
bc705ff19d
This doesn't fix the issue of the bright flash but makes it shorter. The `load` event is fired when the page and all resources are fully loaded while the `DOMContentLoaded` event is fired when initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
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 url = '/toggle_theme?redirect=false';
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'json';
|
|
xhr.timeout = 10000;
|
|
xhr.open('GET', url, true);
|
|
|
|
set_mode(dark_mode);
|
|
window.localStorage.setItem('dark_mode', dark_mode ? 'dark' : 'light');
|
|
|
|
xhr.send();
|
|
});
|
|
|
|
window.addEventListener('storage', function (e) {
|
|
if (e.key === 'dark_mode') {
|
|
update_mode(e.newValue);
|
|
}
|
|
});
|
|
|
|
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);
|
|
});
|
|
|
|
|
|
var darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
|
var lightScheme = window.matchMedia('(prefers-color-scheme: light)');
|
|
|
|
darkScheme.addListener(scheme_switch);
|
|
lightScheme.addListener(scheme_switch);
|
|
|
|
function scheme_switch (e) {
|
|
// ignore this method if we have a preference set
|
|
if (localStorage.getItem('dark_mode')) {
|
|
return;
|
|
}
|
|
if (e.matches) {
|
|
if (e.media.includes("dark")) {
|
|
set_mode(true);
|
|
} else if (e.media.includes("light")) {
|
|
set_mode(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
function set_mode (bool) {
|
|
document.getElementById('dark_theme').media = !bool ? 'none' : '';
|
|
document.getElementById('light_theme').media = bool ? 'none' : '';
|
|
|
|
if (bool) {
|
|
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
|
|
} else {
|
|
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
|
|
}
|
|
}
|
|
|
|
function update_mode (mode) {
|
|
if (mode === 'true' /* for backwards compatibility */ || mode === 'dark') {
|
|
// If preference for dark mode indicated
|
|
set_mode(true);
|
|
}
|
|
else if (mode === 'false' /* for backwards compaibility */ || mode === 'light') {
|
|
// If preference for light mode indicated
|
|
set_mode(false);
|
|
}
|
|
else if (document.getElementById('dark_mode_pref').textContent === '' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
// If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme
|
|
set_mode(true);
|
|
}
|
|
// else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
|
|
}
|
|
|
|
|