Commander1024/C1024_2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Honor user's preference for light/dark mode.

Browse Source
This commit is contained in:
Commander1024
2026-07-26 22:00:53 +02:00
parent a5f1b1ead3
commit c5cff94d5a
3 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/theme.js
+15 -9
View File
@@ -1,20 +1,26 @@
(() => {
const root = document.documentElement;
const colorModes = ['auto', 'light', 'dark'];
const storedTheme = localStorage.getItem('c1024-theme');
if (storedTheme) root.dataset.theme = storedTheme;
let colorMode = colorModes.includes(storedTheme) ? storedTheme : 'auto';
root.dataset.theme = colorMode;
const themeToggle = document.querySelector('[data-theme-toggle]');
if (themeToggle) {
const updateThemeLabel = () => {
const dark = root.dataset.theme === 'dark';
themeToggle.setAttribute('aria-pressed', String(dark));
themeToggle.setAttribute('aria-label', dark ? 'Use light mode' : 'Use dark mode');
const themeIcon = themeToggle.querySelector('[data-theme-icon]');
const labels = { auto: 'Automatic', light: 'Light', dark: 'Dark' };
const icons = { auto: '#icon-auto', light: '#icon-light', dark: '#icon-dark' };
const updateThemeControl = () => {
const nextMode = colorModes[(colorModes.indexOf(colorMode) + 1) % colorModes.length];
themeToggle.setAttribute('aria-label', `Color mode: ${labels[colorMode]}. Activate to use ${labels[nextMode]} mode.`);
themeIcon.setAttribute('href', icons[colorMode]);
};
updateThemeLabel();
updateThemeControl();
themeToggle.addEventListener('click', () => {
root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('c1024-theme', root.dataset.theme);
updateThemeLabel();
colorMode = colorModes[(colorModes.indexOf(colorMode) + 1) % colorModes.length];
root.dataset.theme = colorMode;
localStorage.setItem('c1024-theme', colorMode);
updateThemeControl();
});
}