fix toggling of theme

This commit is contained in:
Michael DiLeo
2025-08-16 09:43:25 -05:00
parent f316a049a6
commit 18abe47f5c

View File

@@ -3,7 +3,7 @@
const themeIcon = document.getElementById('theme-icon'); const themeIcon = document.getElementById('theme-icon');
function getStoredTheme() { function getStoredTheme() {
return localStorage.getItem('picoPreferredColorScheme') || 'auto'; return localStorage.getItem('picoPreferredColorScheme') || document.documentElement.getAttribute('data-theme') || 'auto';
} }
function storeTheme(theme) { function storeTheme(theme) {
@@ -14,19 +14,10 @@
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
} }
function applyTheme() { function applyTheme(theme) {
const storedTheme = getStoredTheme(); document.documentElement.setAttribute('data-theme', theme);
let actualTheme;
if (storedTheme === 'auto') { if (theme === 'dark') {
actualTheme = getSystemTheme();
} else {
actualTheme = storedTheme;
}
document.documentElement.setAttribute('data-theme', actualTheme);
if (actualTheme === 'dark') {
themeIcon.textContent = '☀️'; themeIcon.textContent = '☀️';
themeToggle.setAttribute('aria-pressed', 'true'); themeToggle.setAttribute('aria-pressed', 'true');
} else { } else {
@@ -36,19 +27,19 @@
} }
function toggleTheme() { function toggleTheme() {
const currentStored = getStoredTheme(); let currentStored = getStoredTheme();
if (currentStored === 'auto') {
currentStored = getSystemTheme();
}
if (currentStored === 'auto') {
currentStored = 'light';
}
let nextTheme; let nextTheme;
if (currentStored === 'auto') { nextTheme = currentStored === 'light' ? 'dark' : 'light';
nextTheme = 'light';
} else if (currentStored === 'light') {
nextTheme = 'dark';
} else {
nextTheme = 'auto';
}
storeTheme(nextTheme); storeTheme(nextTheme);
applyTheme(); applyTheme(nextTheme);
} }
function init() { function init() {