// the deskbar's look menu picks a palette and light, dark or following the system. both are
// saved, and Window.astro's head script applies them. the menus are plain popovers, this only
// puts focus in them when they open so ↑↓ work.
import { DEFAULT_PALETTE, THEMES } from "../lib/themes";
import { focusIn } from "./menukeys";
for (const menu of document.querySelectorAll<HTMLElement>("#leaf-menu, #look-menu")) {
menu.addEventListener("toggle", (e) => (e as ToggleEvent).newState === "open" && focusIn(menu));
}
const menu = document.querySelector<HTMLElement>("#look-menu");
const btn = document.querySelector<HTMLElement>("[data-look-btn]");
if (menu && btn) setup(menu, btn);
function setup(menu: HTMLElement, btn: HTMLElement) {
const root = document.documentElement;
const mark = () => {
const palette = root.dataset.palette ?? DEFAULT_PALETTE;
const pick = root.dataset.themePick ?? "auto";
menu.querySelectorAll<HTMLElement>("[data-palette-pick]").forEach((b) => b.toggleAttribute("aria-current", b.dataset.palettePick === palette));
menu.querySelectorAll<HTMLElement>("[data-theme-set]").forEach((b) => b.toggleAttribute("aria-current", b.dataset.themeSet === pick));
btn.title = `${palette}, ${THEMES.find((t) => t.pick === pick)?.label ?? pick}`;
btn.setAttribute("aria-label", `look: ${btn.title}`);
};
const save = (key: string, value: string | undefined) => {
if (value) localStorage.setItem(key, value);
else localStorage.removeItem(key);
window.dispatchEvent(new Event("hydrant-theme"));
mark();
};
mark();
// the menu stays open, so both halves can be picked while the page changes behind it
menu.addEventListener("click", (e) => {
const b = (e.target as HTMLElement).closest<HTMLElement>("button");
if (b?.dataset.palettePick) save("hydrant-palette", b.dataset.palettePick === DEFAULT_PALETTE ? undefined : b.dataset.palettePick);
if (b?.dataset.themeSet) save("hydrant-theme", b.dataset.themeSet === "auto" ? undefined : b.dataset.themeSet);
});
addEventListener("storage", mark);
}
export {};