fixed dark mode
This commit is contained in:
+14
-18
@@ -28,40 +28,36 @@ function paintAuth() {
|
||||
}
|
||||
}
|
||||
|
||||
const r = document; // alias to keep things smol
|
||||
|
||||
const prefersDark = r.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches === true,
|
||||
stored = localStorage.getItem('theme'),
|
||||
initial = stored ?? (prefersDark ? 'dark' : 'light');
|
||||
// theme toggle stuff!
|
||||
const prefersLight = document.defaultView?.matchMedia?.('(prefers-color-scheme: light)').matches === true,
|
||||
saved = localStorage.getItem('theme'),
|
||||
initial = saved ?? (prefersLight ? 'light' : 'dark');
|
||||
|
||||
const applyTheme = (mode) => {
|
||||
const b = r.body;
|
||||
const b = document.body;
|
||||
b.classList.remove('theme-dark', 'theme-light');
|
||||
b.classList.add(mode === 'dark' ? 'theme-dark' : 'theme-light');
|
||||
|
||||
const icon = r.querySelector('#themeToggleIcon'),
|
||||
label = r.querySelector('#themeToggleLabel');
|
||||
|
||||
const icon = document.querySelector('#themeToggleIcon'),
|
||||
label = document.querySelector('#themeToggleLabel');
|
||||
if (icon && label) {
|
||||
const dark = mode === 'dark';
|
||||
icon.textContent = dark ? '🌙' : '☀️';
|
||||
label.textContent = dark ? 'Dark' : 'Light';
|
||||
const isDark = mode === 'dark';
|
||||
icon.textContent = isDark ? '🌙' : '☀️';
|
||||
label.textContent = isDark ? 'Dark' : 'Light';
|
||||
}
|
||||
|
||||
const btn = r.querySelector('#themeToggle');
|
||||
if (btn) btn.setAttribute('aria-pressed', String(mode === 'dark'));
|
||||
document.querySelector('#themeToggle')?.setAttribute('aria-pressed', String(mode === 'dark'));
|
||||
};
|
||||
|
||||
applyTheme(initial);
|
||||
|
||||
r.querySelector('#themeToggle')?.addEventListener('click', () => {
|
||||
const isDark = r.body.classList.contains('theme-dark'),
|
||||
next = isDark ? 'light' : 'dark';
|
||||
|
||||
document.querySelector('#themeToggle')?.addEventListener('click', () => {
|
||||
const next = document.body.classList.contains('theme-dark') ? 'light' : 'dark';
|
||||
applyTheme(next);
|
||||
try { localStorage.setItem('theme', next); } catch (_) { /* ignore */ }
|
||||
});
|
||||
|
||||
|
||||
if (window.matchMedia) {
|
||||
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
mq.addEventListener?.("change", (e) => {
|
||||
|
||||
Reference in New Issue
Block a user