mirrors/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2025-12-22 07:59:30 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Formatting

Browse Source
This commit is contained in:
rockerBOO
2025-04-30 20:41:51 -04:00
parent 1f7ce1890a
commit 70b36ed1a1
19 changed files with 4429 additions and 1583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/js/themes.js
View File

@@ -1,46 +1,46 @@
'use strict';
var toggle_theme = document.getElementById('toggle_theme');
"use strict";
var toggle_theme = document.getElementById("toggle_theme");
const STORAGE_KEY_THEME = 'dark_mode';
const THEME_DARK = 'dark';
const THEME_LIGHT = 'light';
const STORAGE_KEY_THEME = "dark_mode";
const THEME_DARK = "dark";
const THEME_LIGHT = "light";
// TODO: theme state controlled by system
toggle_theme.addEventListener('click', function (e) {
e.preventDefault();
const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
const newTheme = isDarkTheme ? THEME_LIGHT : THEME_DARK;
setTheme(newTheme);
helpers.storage.set(STORAGE_KEY_THEME, newTheme);
helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
toggle_theme.addEventListener("click", function (e) {
e.preventDefault();
const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
const newTheme = isDarkTheme ? THEME_LIGHT : THEME_DARK;
setTheme(newTheme);
helpers.storage.set(STORAGE_KEY_THEME, newTheme);
helpers.xhr("GET", "/toggle_theme?redirect=false", {}, {});
});
/** @param {THEME_DARK|THEME_LIGHT} theme */
function setTheme(theme) {
// By default body element has .no-theme class that uses OS theme via CSS @media rules
// It rewrites using hard className below
if (theme === THEME_DARK) {
toggle_theme.children[0].className = 'icon ion-ios-sunny';
document.body.className = 'dark-theme';
} else if (theme === THEME_LIGHT) {
toggle_theme.children[0].className = 'icon ion-ios-moon';
document.body.className = 'light-theme';
} else {
document.body.className = 'no-theme';
}
// By default body element has .no-theme class that uses OS theme via CSS @media rules
// It rewrites using hard className below
if (theme === THEME_DARK) {
toggle_theme.children[0].className = "icon ion-ios-sunny";
document.body.className = "dark-theme";
} else if (theme === THEME_LIGHT) {
toggle_theme.children[0].className = "icon ion-ios-moon";
document.body.className = "light-theme";
} else {
document.body.className = "no-theme";
}
}
// Handles theme change event caused by other tab
addEventListener('storage', function (e) {
if (e.key === STORAGE_KEY_THEME)
setTheme(helpers.storage.get(STORAGE_KEY_THEME));
addEventListener("storage", function (e) {
if (e.key === STORAGE_KEY_THEME)
setTheme(helpers.storage.get(STORAGE_KEY_THEME));
});
// Set theme from preferences on page load
addEventListener('DOMContentLoaded', function () {
const prefTheme = document.getElementById('dark_mode_pref').textContent;
if (prefTheme) {
setTheme(prefTheme);
helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
}
addEventListener("DOMContentLoaded", function () {
const prefTheme = document.getElementById("dark_mode_pref").textContent;
if (prefTheme) {
setTheme(prefTheme);
helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
}
});