vh
35adc4a043
The board was on the Australis TERMINAL palette, which is dark-only by design
("Always dark first. No light mode in this system"). Skyfall is the dual-theme
web derivative of the same science, and its bundle turned out to be sitting in
this repo's own git history: a predecessor vendored it on 2026-08-19 and a
later commit deleted it. `git show 45c1995:...` returns colors.css with both
`:root` (dark) and `[data-theme="light"]` (Skyfall Day) intact, plus the
calm-depth layout tokens, the typography scale and Supreme 400/500/700. So the
light ramp is canonical rather than derived, which was the entire objection to
building one.
The visual language moves with the palette. Depth is now the recipe and not a
choice — every elevated surface carries a 1px hairline AND a two-layer shadow,
never one without the other. Radii move to Skyfall's scale, cards at
--radius-lg. Widget stat values move from the display face to mono, because
Skyfall is explicit that numbers and telemetry are always --font-mono. The
full-width aurora ribbon under the tab bar is gone: Skyfall sanctions exactly
two accent expressions, the active rail and hero-only glows, and a decorative
gradient across the chrome is neither — so the colour it carried now lands on
the active tab as a 2px accent bar plus an --accent-soft fill, which is the
rail. Every binding is written against the semantic layer; there are no raw
family tokens and no colour literals left in our own file.
build.py now guards the vendoring instead of advising it. The three token files
are hashed and a mismatch FAILS the build — a vendored file is either
byte-identical to the bundle or it is a fork wearing the bundle's name, and the
theme this one replaces had to be torn out twice for exactly that.
⚠ Homepage's own theme toggle is unreachable, and reaching for it breaks the
dashboard. It renders only when settings.yaml leaves `theme:` unpinned, and
with the key absent the page's data loader throws and its catch branch serves
`initialSettings: {}` — no tab bar, no layout, no i18n. Six force-recreates
over seven minutes all came up empty; restoring `theme: dark` rendered
correctly on the next recreate in 12 seconds, while /api/services returned 200
with fully correct content the whole time. That is the first confirmed cause of
the long-running "tab bar goes missing after a recreate" symptom, and it also
retires the homepage.log-size lead recorded earlier today: rolling the log
aside did nothing during this episode, so that coincidence was intermittency.
So the toggle is ours. conf/custom.js renders it and stores the choice;
build.py re-emits each vendored light block twice, once for an explicit
`data-theme` and once inside a prefers-color-scheme media query scoped to
`html:not([data-theme="dark"]):not([data-theme="light"])` — that :not() pair is
what lets a stored dark choice survive a light-mode OS. Verified against both
OS preferences: load, click, click back, reload, all four correct. `data-theme`
is the control surface; Homepage's own `dark` class stays on <html> and does
not fight, because our rules carry !important on the surfaces Tailwind's
`dark:` variants would otherwise claim.
Two font substitutions, both documented rather than silent: Space Grotesk for
Bespoke Sans and JetBrains Mono for Victor Mono. Only Supreme was ever vendored
here and Skyfall's own notes call Victor Mono user-supplied, so this is a
two-line swap when the real faces arrive.
Dark and light, all four tabs: http://10.100.10.50:8090/b/homepage-skyfall/
125 lines
4.7 KiB
JavaScript
125 lines
4.7 KiB
JavaScript
// Homepage — Australis Skyfall theme switch.
|
|
//
|
|
// WHY THIS EXISTS INSTEAD OF HOMEPAGE'S OWN TOGGLE
|
|
// Homepage renders a built-in light/dark switch only when settings.yaml does
|
|
// NOT pin `theme:`. We cannot unpin it: removing the key makes the page's data
|
|
// loader throw, and its catch branch serves `initialSettings: {}` — a dashboard
|
|
// with no tab bar, no layout and no i18n. Measured on 2026-08-24: with
|
|
// `theme: dark` present the payload is correct within ~12s of a recreate;
|
|
// with the key removed, six recreates over seven minutes all came up empty,
|
|
// and putting the key back fixed it on the next try. So the key stays, and the
|
|
// switch is ours.
|
|
//
|
|
// HOW IT WORKS
|
|
// Skyfall keys its light theme off `[data-theme="light"]` on <html>. Homepage
|
|
// keeps its own `dark` class there regardless — that is fine and was verified:
|
|
// with `class="dark scheme-dark theme-slate"` AND `data-theme="light"`, every
|
|
// themed surface resolves to Skyfall Day, because our rules carry !important
|
|
// on the surfaces Tailwind's `dark:` variants would otherwise claim.
|
|
//
|
|
// Precedence, highest first:
|
|
// 1. an explicit choice stored here in localStorage
|
|
// 2. the OS preference, via @media (prefers-color-scheme) in custom.css
|
|
// 3. dark — Skyfall's first-class default
|
|
//
|
|
// The stylesheet handles 2 and 3 on its own, so this file is only responsible
|
|
// for 1. It writes `data-theme` ONLY when there is a stored choice; leaving the
|
|
// attribute absent is what lets the media query take over.
|
|
|
|
(() => {
|
|
"use strict";
|
|
|
|
const KEY = "skyfall-theme"; // "light" | "dark" | absent = follow the OS
|
|
const root = document.documentElement;
|
|
|
|
const stored = () => {
|
|
try {
|
|
const v = localStorage.getItem(KEY);
|
|
return v === "light" || v === "dark" ? v : null;
|
|
} catch {
|
|
return null; // private mode / storage disabled — fall through to the OS
|
|
}
|
|
};
|
|
|
|
const systemPrefersLight = () =>
|
|
window.matchMedia?.("(prefers-color-scheme: light)").matches ?? false;
|
|
|
|
const apply = (mode) => {
|
|
if (mode) root.setAttribute("data-theme", mode);
|
|
else root.removeAttribute("data-theme");
|
|
};
|
|
|
|
// Run before first paint where possible, so a stored light choice does not
|
|
// flash dark on load.
|
|
apply(stored());
|
|
|
|
const effective = () => stored() ?? (systemPrefersLight() ? "light" : "dark");
|
|
|
|
const ICON = {
|
|
// Lucide sun / moon, 1.75 stroke per Skyfall's iconography note.
|
|
light:
|
|
'<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>',
|
|
dark: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
|
};
|
|
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "skyfall-theme-toggle";
|
|
button.setAttribute("aria-label", "Toggle light and dark theme");
|
|
|
|
const paint = () => {
|
|
const mode = effective();
|
|
// Show the icon for the mode you would switch TO, which is the convention
|
|
// every OS theme switch uses.
|
|
const next = mode === "light" ? "dark" : "light";
|
|
button.title = `Switch to ${next} theme`;
|
|
button.setAttribute("aria-pressed", String(mode === "light"));
|
|
button.innerHTML =
|
|
'<svg viewBox="0 0 24 24" width="16" height="16" fill="none" ' +
|
|
'stroke="currentColor" stroke-width="1.75" stroke-linecap="round" ' +
|
|
`stroke-linejoin="round">${ICON[next]}</svg>`;
|
|
};
|
|
|
|
button.addEventListener("click", () => {
|
|
const next = effective() === "light" ? "dark" : "light";
|
|
try {
|
|
localStorage.setItem(KEY, next);
|
|
} catch {
|
|
/* storage unavailable — the choice just will not survive a reload */
|
|
}
|
|
apply(next);
|
|
paint();
|
|
});
|
|
|
|
// Track the OS while no explicit choice is stored, so the icon stays honest.
|
|
window
|
|
.matchMedia?.("(prefers-color-scheme: light)")
|
|
.addEventListener?.("change", () => {
|
|
if (!stored()) paint();
|
|
});
|
|
|
|
// Homepage renders client-side and rebuilds its header, so a one-shot
|
|
// querySelector at load usually finds nothing and would silently no-op.
|
|
// Watch until the header strip exists, then stop watching.
|
|
const mount = () => {
|
|
if (document.getElementById("skyfall-theme-toggle")?.isConnected) return true;
|
|
const host = document.querySelector(
|
|
"div.flex.flex-row.self-center.flex-wrap.justify-between",
|
|
);
|
|
if (!host) return false;
|
|
paint();
|
|
host.appendChild(button);
|
|
return true;
|
|
};
|
|
|
|
if (!mount()) {
|
|
const observer = new MutationObserver(() => {
|
|
if (mount()) observer.disconnect();
|
|
});
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
// Backstop: never leave an observer running forever on a page that will
|
|
// not produce the host element.
|
|
setTimeout(() => observer.disconnect(), 30000);
|
|
}
|
|
})();
|