@a2f0/skyline 0.2.23 → 0.2.24

package/docs/package.md

@@ -11,9 +11,12 @@ Omitting `colour` keeps the existing greyscale default. The setting belongs to t
 it does not use storage or affect another embed. The standalone viewer accepts `?colour=1`.
 
 Pass `theme: "light"` or `theme: "dark"` from the host's active theme to choose the
-loading backdrop, animated outline and error palette. It applies synchronously,
+loading backdrop, animated outline, error palette and bottom control bar.
+The loading palette applies synchronously,
 before the viewer's code or stylesheets load. After the first frame, the scene
 supplies its own sky; returning to greyscale restores the black sky and stars.
+The control bar keeps the host's theme, including its buttons, focus outlines,
+time slider and celebration badges, independently of the scene's time or materials.
 Without `theme`, `colour: true`
 boots light and greyscale boots dark. The theme does not select scene materials or
 time of day: for a light host, pass both `theme: "light"` and `colour: true`.

package/lib/skyline-shell.d.ts

@@ -13,7 +13,7 @@ export interface ViewerContext {
     readonly controls: "open" | "closed";
     /** Start the scene and its building details in sunny-day colour. */
     readonly colour?: boolean;
-    /** Loading backdrop and trace; defaults to light for colour, dark otherwise. */
+    /** Loading palette and control bar; defaults to light for colour, dark otherwise. */
     readonly theme: "light" | "dark";
     /** Show the OpenStreetMap credit with the scene's controls. */
     readonly attribution: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/skyline-3d.html

@@ -92,6 +92,8 @@
       // markup in its shadow root, applies its own options the same way (skyline-viewer.ts).
       (() => {
         const settings = new URLSearchParams(location.search);
+        const theme = settings.get("theme");
+        document.body.dataset.theme = theme === "light" || (theme !== "dark" && settings.get("colour") === "1") ? "light" : "dark";
         if (settings.get("controls") === "open") {
           const toggle = document.querySelector("#menu-toggle");
           toggle.setAttribute("aria-expanded", "true");

package/site/skyline-viewer.js

@@ -40,6 +40,7 @@ export function mount(root, { assets, signal, controls, colour, theme, attributi
         viewer.dataset["embedded"] = "";
     const stars = element(document, "div", { className: "stars", id: "stars" }, { "aria-hidden": "true" });
     const scene = element(document, "div", { className: "skyline-3d", id: "skyline-3d-scene" });
+    scene.dataset["theme"] = theme;
     const drawing = element(document, "img", { className: "scene drawing", id: "drawing", alt: "Original Chicago skyline", hidden: true });
     const originalReturn = element(document, "button", { type: "button", className: "original-return", id: "return-skyline-3d", title: home.title, hidden: true, textContent: home.label });
     const embeddedOriginal = element(document, "button", { type: "button", className: "original-return", id: "embedded-original", title: toggles.original.title, hidden: true, textContent: toggles.original.label });

package/site/study.css

@@ -185,6 +185,21 @@ body.skyline-3d { height: 100vh; height: 100dvh; }
 .control-bar .menu-toggle:hover { color: #fff; background: #ffffff14; }
 .menu-toggle svg { width: 20px; height: 20px; fill: currentColor; transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
 .menu-toggle[aria-expanded="true"] svg { rotate: 30deg; }
+/* The host theme owns the bar throughout loading and interaction, independently
+   of the scene's materials or time of day. The standalone page uses the same
+   theme/colour defaults as mountSkyline. Keep the other studies' palette intact. */
+.skyline-3d[data-theme="light"] .control-bar { color-scheme: light; background: #f5f5f5; border-color: #bbb; color: #444; }
+.skyline-3d[data-theme="light"] .control-bar button { --control-button-background: #fff; background: var(--control-button-background); border-color: #888; color: #444; -webkit-tap-highlight-color: #00000022; }
+.skyline-3d[data-theme="light"] .control-bar button:is(:hover, [aria-pressed="true"]) { --control-button-background: #e0e0e0; border-color: #666; color: #111; }
+.skyline-3d[data-theme="light"] .control-bar :focus-visible { outline-color: #111; }
+.skyline-3d[data-theme="light"] .time-controls :is(label, output) { color: #444; }
+.skyline-3d[data-theme="light"] :is(.time-controls #time-date, .celebration-caption) { color: #666; }
+.skyline-3d[data-theme="light"] .time-controls input { accent-color: #666; }
+.skyline-3d[data-theme="light"] .celebration-controls .logo-cut { stroke: var(--control-button-background); }
+.skyline-3d[data-theme="light"] .celebration-controls button[aria-pressed="true"] { border-color: #666; box-shadow: inset 0 -2px #444; }
+.skyline-3d[data-theme="light"] .celebration-controls button[aria-pressed="mixed"] { color: #333; border-color: #666; }
+.skyline-3d[data-theme="light"] .control-bar .menu-toggle { background: none; color: #666; }
+.skyline-3d[data-theme="light"] .control-bar .menu-toggle:hover { background: #00000014; color: #111; }
 /* Compact badges leave room for the time slider. Smaller screens retain 36px
    touch targets. */
 @container skyline (min-width: 1440px) {