@a2f0/skyline 0.2.22 → 0.2.24

package/docs/package.md

@@ -10,6 +10,19 @@ To start an embed in sunny-day colour, pass `colour: true` to `mountSkyline` alo
 Omitting `colour` keeps the existing greyscale default. The setting belongs to that instance;
 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, 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`.
+Destroy and remount when the host theme changes. The standalone viewer also accepts
+`?theme=light&colour=1` (or `?theme=dark`); each instance keeps its own setting.
+
 ## Install from npm
 
 ```sh

package/lib/skyline-package.d.ts

@@ -18,6 +18,8 @@ export interface SkylineOptions {
     readonly controls?: "open" | "closed";
     /** Start in the opt-in sunny-day colour view. Greyscale by default. */
     readonly colour?: boolean;
+    /** Loading backdrop and trace. Defaults to light with colour: true, dark otherwise. */
+    readonly theme?: "light" | "dark";
     /**
      * Show the OpenStreetMap credit with the 3D scene's controls. Shown by default. OpenStreetMap's
      * licence requires that credit wherever its data appears, so hide it only when the host page
@@ -38,4 +40,4 @@ export interface SkylineOptions {
  * size and placement: give it an explicit height. Call `destroy` when the hosting component
  * leaves.
  */
-export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, controls, colour, attribution, three }: SkylineOptions): SkylineInstance;
+export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, controls, colour, theme, attribution, three }: SkylineOptions): SkylineInstance;

package/lib/skyline-package.js

@@ -8,10 +8,10 @@ import { mountViewer } from "./skyline-shell.js";
  * size and placement: give it an explicit height. Call `destroy` when the hosting component
  * leaves.
  */
-export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", controls = "closed", colour = false, attribution = true, three }) {
+export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", controls = "closed", colour = false, theme, attribution = true, three }) {
     if (controls !== "open" && controls !== "closed")
         throw new TypeError('Skyline controls must be "open" or "closed".');
     if (typeof colour !== "boolean")
         throw new TypeError("Skyline colour must be a boolean.");
-    return mountViewer(container, { assetsUrl, title, controls, colour, attribution, navigation: false, page: false, three });
+    return mountViewer(container, { assetsUrl, title, controls, colour, theme, attribution, navigation: false, page: false, three });
 }

package/lib/skyline-shell.d.ts

@@ -13,6 +13,8 @@ export interface ViewerContext {
     readonly controls: "open" | "closed";
     /** Start the scene and its building details in sunny-day colour. */
     readonly colour?: boolean;
+    /** 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;
     /**
@@ -56,7 +58,8 @@ export interface SkylineInstance {
      */
     destroy(): void;
 }
-export interface ViewerOptions extends Omit<ViewerContext, "assets" | "signal"> {
+export interface ViewerOptions extends Omit<ViewerContext, "assets" | "signal" | "theme"> {
+    readonly theme?: "light" | "dark" | undefined;
     /** The assets' directory; relative URLs resolve against the container's document. */
     readonly assetsUrl: string | URL;
     /** The viewer's accessible name: `element` is a region with this label. */

package/lib/skyline-shell.js

@@ -33,7 +33,7 @@ function loaded(link) {
 // mirroring the viewer's layout, and the rest sizes it to fill the container.
 const HOST_STYLE = "all:initial;direction:ltr;display:block;position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden";
 // The failure message's own look, since the viewer's stylesheets may be what failed.
-const FAILURE_STYLE = "box-sizing:border-box;height:100%;margin:0;padding:24px;background:#000;color:#aaa;font:12px/1.5 ui-monospace,monospace";
+const FAILURE_STYLE = "box-sizing:border-box;height:100%;margin:0;padding:24px;background:inherit;color:inherit;font:12px/1.5 ui-monospace,monospace";
 /** Shows why the viewer couldn't start, in place of the viewer. */
 function showFailure(root, error) {
     const message = root.ownerDocument.createElement("p");
@@ -49,8 +49,16 @@ function showFailure(root, error) {
 export function mountViewer(container, { assetsUrl, title, ...options }) {
     const document = container.ownerDocument;
     const assets = assetsBase(document, assetsUrl);
+    const theme = options.theme === undefined ? (options.colour ? "light" : "dark") : options.theme;
+    if (theme !== "light" && theme !== "dark")
+        throw new TypeError('Skyline theme must be "light" or "dark".');
     const element = document.createElement("div");
     element.style.cssText = HOST_STYLE;
+    // Paint before any assets arrive, including when a stylesheet fails to load.
+    // Keep the boot palette in sync with viewer.css and index.html.
+    element.style.colorScheme = theme;
+    element.style.backgroundColor = theme === "light" ? "#f5f5f5" : "#000";
+    element.style.color = theme === "light" ? "#444" : "#aaa";
     element.setAttribute("role", "region");
     element.setAttribute("aria-label", title);
     element.setAttribute("aria-busy", "true");
@@ -70,7 +78,7 @@ export function mountViewer(container, { assetsUrl, title, ...options }) {
         Promise.resolve(options.three).catch(() => { });
     const controller = new AbortController();
     let destroyed = false, mounted = false;
-    const context = { ...options, assets, signal: controller.signal };
+    const context = { ...options, theme, assets, signal: controller.signal };
     const ready = new Promise((resolve, reject) => {
         Promise.all([importViewer(new URL(VIEWER, assets).href), ...stylesheets.map(loaded)])
             .then(async ([viewer]) => {

package/package.json

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

package/site/index.html

@@ -25,7 +25,7 @@
         height: 100%;
         margin: 0;
         overflow: hidden;
-        background: #000;
+        background: inherit;
       }
 
       .notice {
@@ -35,7 +35,20 @@
         color: #aaa;
         font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       }
+      /* Keep the boot palette in sync with skyline-shell.ts and viewer.css. */
+      :root[data-theme="light"] { color-scheme: light; background: #f5f5f5; }
+      :root[data-theme="light"] .notice { color: #444; }
     </style>
+    <script>
+      // Apply the backdrop before first paint, while the viewer modules load.
+      {
+        const settings = new URLSearchParams(location.search);
+        const light = settings.get("theme") === "light" ||
+          (settings.get("theme") !== "dark" && settings.get("colour") === "1");
+        document.documentElement.dataset.theme = light ? "light" : "dark";
+        document.querySelector('meta[name="theme-color"]').content = light ? "#f5f5f5" : "#000000";
+      }
+    </script>
   </head>
   <body>
     <!-- The viewer renders into a shadow root inside this element, as in a host's page. -->

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-shell.js

@@ -33,7 +33,7 @@ function loaded(link) {
 // mirroring the viewer's layout, and the rest sizes it to fill the container.
 const HOST_STYLE = "all:initial;direction:ltr;display:block;position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden";
 // The failure message's own look, since the viewer's stylesheets may be what failed.
-const FAILURE_STYLE = "box-sizing:border-box;height:100%;margin:0;padding:24px;background:#000;color:#aaa;font:12px/1.5 ui-monospace,monospace";
+const FAILURE_STYLE = "box-sizing:border-box;height:100%;margin:0;padding:24px;background:inherit;color:inherit;font:12px/1.5 ui-monospace,monospace";
 /** Shows why the viewer couldn't start, in place of the viewer. */
 function showFailure(root, error) {
     const message = root.ownerDocument.createElement("p");
@@ -49,8 +49,16 @@ function showFailure(root, error) {
 export function mountViewer(container, { assetsUrl, title, ...options }) {
     const document = container.ownerDocument;
     const assets = assetsBase(document, assetsUrl);
+    const theme = options.theme === undefined ? (options.colour ? "light" : "dark") : options.theme;
+    if (theme !== "light" && theme !== "dark")
+        throw new TypeError('Skyline theme must be "light" or "dark".');
     const element = document.createElement("div");
     element.style.cssText = HOST_STYLE;
+    // Paint before any assets arrive, including when a stylesheet fails to load.
+    // Keep the boot palette in sync with viewer.css and index.html.
+    element.style.colorScheme = theme;
+    element.style.backgroundColor = theme === "light" ? "#f5f5f5" : "#000";
+    element.style.color = theme === "light" ? "#444" : "#aaa";
     element.setAttribute("role", "region");
     element.setAttribute("aria-label", title);
     element.setAttribute("aria-busy", "true");
@@ -70,7 +78,7 @@ export function mountViewer(container, { assetsUrl, title, ...options }) {
         Promise.resolve(options.three).catch(() => { });
     const controller = new AbortController();
     let destroyed = false, mounted = false;
-    const context = { ...options, assets, signal: controller.signal };
+    const context = { ...options, theme, assets, signal: controller.signal };
     const ready = new Promise((resolve, reject) => {
         Promise.all([importViewer(new URL(VIEWER, assets).href), ...stylesheets.map(loaded)])
             .then(async ([viewer]) => {

package/site/skyline-viewer.js

@@ -22,7 +22,7 @@ function element(document, tag, properties = {}, attributes = {}) {
         created.setAttribute(name, value);
     return created;
 }
-export function mount(root, { assets, signal, controls, colour, attribution, navigation, page, three }) {
+export function mount(root, { assets, signal, controls, colour, theme, attribution, navigation, page, three }) {
     const document = root.ownerDocument;
     const host = root.host;
     const listening = { signal };
@@ -35,10 +35,12 @@ export function mount(root, { assets, signal, controls, colour, attribution, nav
     const sceneMarkup = loadMarkup(new URL("skyline-3d.html", assets), signal);
     sceneMarkup.catch(() => { });
     const viewer = element(document, "div", { className: "skyline-viewer" });
+    viewer.dataset["theme"] = theme;
     if (!navigation)
         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 });
@@ -52,6 +54,7 @@ export function mount(root, { assets, signal, controls, colour, attribution, nav
     const frames = {};
     const toolbar = navigation ? createToolbar() : null;
     function updateView() {
+        viewer.toggleAttribute("data-booting", sceneUnavailable && mode === "3d");
         scene.hidden = mode !== "3d";
         if (mode === "original" && !drawing.getAttribute("src"))
             drawing.src = new URL("skyline-original-fit.svg", assets).href;

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) {

package/site/viewer-page.js

@@ -6,6 +6,7 @@ import { mountViewer } from "./skyline-shell.js";
 // bar open or folded; and `?attribution=hidden` leaves out the OpenStreetMap credit. The site
 // starts the bar open, to show what the scene can do; embedded, it starts folded behind its
 // star, as `mountSkyline` does.
+// `?colour=1` starts in daylight; `?theme=light` or `?theme=dark` overrides the boot palette.
 const settings = new URLSearchParams(location.search);
 const embedded = settings.get("embed") === "1";
 const controls = settings.get("controls");
@@ -15,6 +16,7 @@ mountViewer(document.querySelector("#viewer"), {
     controls: controls === "open" || controls === "closed" ? controls : embedded ? "closed" : "open",
     attribution: settings.get("attribution") !== "hidden",
     colour: settings.get("colour") === "1",
+    theme: document.documentElement.dataset["theme"] === "light" ? "light" : "dark",
     navigation: !embedded,
     page: true,
 });

package/site/viewer.css

@@ -35,6 +35,19 @@
   pointer-events: none;
 }
 
+/* Keep this boot palette in sync with skyline-shell.ts and index.html. It gives
+   way to the scene's own sky at the first frame. The original drawing always
+   keeps its dark sky, including when opened during loading or after a failure. */
+.skyline-viewer[data-theme="light"][data-booting] { color-scheme: light; background: #f5f5f5; color: #444; }
+.skyline-viewer[data-theme="light"][data-booting] > .stars { visibility: hidden; }
+.skyline-viewer[data-theme="light"][data-booting] .loading { color: #444; }
+.skyline-viewer[data-theme="light"][data-booting] .skyline-trace { stroke: #555; }
+.skyline-viewer[data-theme="light"][data-booting] .skyline-trace-tip { stroke: #222; filter: drop-shadow(0 0 9px #22222266); }
+.skyline-viewer[data-theme="light"][data-booting] .controls { color: #444; }
+.skyline-viewer[data-theme="light"][data-booting] .motion-status { color: #555; }
+.skyline-viewer[data-theme="light"][data-booting] .controls :is(button, a):is(:hover, :focus-visible, [aria-pressed="true"]) { color: #111; }
+.skyline-viewer[data-theme="light"][data-booting] .controls :focus-visible { outline-color: #111; }
+
 .stars svg {
   display: block;
   width: 100%;