Brendan Chen
b61cb986f1
Foundation + chrome for the bchen.dev static sites: design tokens, Spectral / Helvetica / IBM Plex Mono type, base + .prose typography, data-driven nav + footer, and prefers-color-scheme + [data-theme] dark mode with a pre-paint init. Colors are overridable CSS custom properties (defaults = newerror's palette); each site sets only its own colors.css. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C96hwEU9cM7mJpqATiv7R5
37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
/* static-design-system — theme-toggle.js
|
|
Shared chrome behavior: color-theme toggle + mobile (hamburger) menu.
|
|
Served to each site via a wrapper (assets/ds.js) and loaded at end of body.
|
|
Storage key must match ds/theme-init.js. */
|
|
(function () {
|
|
"use strict";
|
|
|
|
var THEME_KEY = "bchen-theme";
|
|
|
|
function effectiveTheme() {
|
|
var set = document.documentElement.getAttribute("data-theme");
|
|
if (set) return set;
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
}
|
|
|
|
/* ---- theme toggle ---- */
|
|
var toggleBtn = document.querySelector(".theme-toggle");
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener("click", function () {
|
|
var next = effectiveTheme() === "dark" ? "light" : "dark";
|
|
document.documentElement.setAttribute("data-theme", next);
|
|
try { localStorage.setItem(THEME_KEY, next); } catch (e) {}
|
|
});
|
|
}
|
|
|
|
/* ---- mobile menu ---- */
|
|
var hamburger = document.querySelector(".hamburger");
|
|
var mobileMenu = document.querySelector(".mobile-menu");
|
|
if (hamburger && mobileMenu) {
|
|
hamburger.addEventListener("click", function () {
|
|
var open = mobileMenu.classList.toggle("open");
|
|
hamburger.classList.toggle("is-open", open);
|
|
hamburger.setAttribute("aria-expanded", open ? "true" : "false");
|
|
});
|
|
}
|
|
})();
|