@a2f0/skyline 0.2.22 → 0.2.23

package/docs/package.md

@@ -10,6 +10,16 @@ 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 and error palette. It 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.
+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 backdrop and trace; 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.23",
   "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-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,6 +35,7 @@ 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" });
@@ -52,6 +53,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/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%;