mirror of
https://github.com/tiennm99/bonsai.git
synced 2026-09-03 20:21:53 +00:00
tiennm99
15ae06b770
Adds canonical, og:url, robots, and theme-color meta tags for Lighthouse validation. Hardens avatar with width/height/fetchpriority/decoding and <picture> pipeline. Adds skip-link and tap-target CSS enhancements. Improves Core Web Vitals and accessibility scores.
31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
// Loaded only when params.themeToggle = true.
|
|
// Persists user preference and overrides system color-scheme.
|
|
// Note: a sibling inline script in <head> applies the saved value pre-paint to avoid FOUC.
|
|
// We re-read here as a safety net (and the inline script may have failed under strict CSP).
|
|
(function () {
|
|
const KEY = 'bonsai-theme';
|
|
const root = document.documentElement;
|
|
if (root.dataset.theme !== 'light' && root.dataset.theme !== 'dark') {
|
|
const saved = localStorage.getItem(KEY);
|
|
if (saved === 'light' || saved === 'dark') root.dataset.theme = saved;
|
|
}
|
|
|
|
const btn = document.querySelector('[data-bonsai-theme-toggle]');
|
|
if (!btn) return;
|
|
|
|
function syncPressed() {
|
|
const isDark = root.dataset.theme === 'dark'
|
|
|| (root.dataset.theme === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
|
|
btn.setAttribute('aria-pressed', String(isDark));
|
|
}
|
|
|
|
syncPressed();
|
|
|
|
btn.addEventListener('click', () => {
|
|
const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
|
|
root.dataset.theme = next;
|
|
localStorage.setItem(KEY, next);
|
|
syncPressed();
|
|
});
|
|
})();
|