@magicvr/schema-ui-theme 0.1.0

package/index.js

@@ -0,0 +1,71 @@
+function resolveTheme(input) {
+  if (input.stored === "dark" || input.stored === "light") {
+    return { theme: input.stored, colorScheme: input.stored };
+  }
+  if (input.systemDefault === "dark" || input.systemDefault === "light") {
+    return { theme: input.systemDefault, colorScheme: input.systemDefault };
+  }
+  const isDark = !input.stored && input.prefersDark;
+  const theme = isDark ? "dark" : "light";
+  return { theme, colorScheme: theme };
+}
+function applyThemeToElement(el, output) {
+  if (output.theme === "dark") {
+    el.classList.add("dark");
+  } else {
+    el.classList.remove("dark");
+  }
+  el.style.colorScheme = output.colorScheme;
+}
+function initTheme() {
+  let stored = null;
+  try {
+    stored = localStorage.getItem("theme");
+  } catch {
+  }
+  let prefersDark = false;
+  try {
+    prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  } catch {
+  }
+  const output = resolveTheme({ stored, prefersDark });
+  applyThemeToElement(document.documentElement, output);
+}
+function applySystemDefaultTheme(systemDefault) {
+  let stored = null;
+  try {
+    stored = localStorage.getItem("theme");
+  } catch {
+  }
+  if (stored === "dark" || stored === "light") {
+    return;
+  }
+  if (systemDefault !== "light" && systemDefault !== "dark") {
+    return;
+  }
+  let prefersDark = false;
+  try {
+    prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  } catch {
+  }
+  const output = resolveTheme({ stored, prefersDark, systemDefault });
+  applyThemeToElement(document.documentElement, output);
+}
+function setTheme(theme) {
+  try {
+    if (theme === null) {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", theme);
+    }
+  } catch {
+  }
+  initTheme();
+}
+export {
+  applySystemDefaultTheme,
+  applyThemeToElement,
+  initTheme,
+  resolveTheme,
+  setTheme
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@magicvr/schema-ui-theme",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "schema-ui-core 包面（VP-023 R3 六包化）",
+  "main": "index.js",
+  "types": "./theme/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./theme/index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "lib",
+    "theme",
+    "components",
+    "app",
+    "host",
+    "i18n",
+    "ui",
+    "renderer",
+    "render"
+  ],
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/theme/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @schema-ui/theme 聚合导出：语义 Token 解析与主题应用。
+ */
+export * from "./theme";

package/theme/theme.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Theme pure-logic unit (S1 · C3 + VP-007 S3 system default).
+ *
+ * `applyTheme` is a side-effect-free function that computes the desired theme
+ * and then applies it to the provided document root.  Keeping the decision
+ * logic in a plain function lets vitest exercise it without a browser.
+ *
+ * `initTheme` is the top-level boot call used by the synchronous external
+ * `/theme-init.js` script in index.html and by main.tsx (the module call is
+ * kept as a safety net for test/storybook entry points).
+ *
+ * VP-007 S3 priority (D-002, user-confirmed): user explicit choice →
+ * system default theme (from the public startup configuration, non-auto) →
+ * OS preference. The user's explicit choice always wins.
+ */
+export type Theme = "light" | "dark";
+export interface ThemeInput {
+    /** Value of `localStorage.getItem("theme")` — null when absent. */
+    stored: string | null;
+    /** `window.matchMedia("(prefers-color-scheme: dark)").matches` */
+    prefersDark: boolean;
+    /** System default theme from /api/branding (auto/light/dark); null = auto. */
+    systemDefault?: string | null;
+}
+export interface ThemeOutput {
+    theme: Theme;
+    /** CSS `color-scheme` value for the root element. */
+    colorScheme: "light" | "dark";
+}
+/**
+ * Pure function: decides the effective theme from storage + system default +
+ * OS preference. No DOM side-effects — safe to call in vitest.
+ */
+export declare function resolveTheme(input: ThemeInput): ThemeOutput;
+/**
+ * Applies the resolved theme to a DOM element (typically
+ * `document.documentElement`).  Adds or removes the `dark` class and sets
+ * the `color-scheme` style so native browser controls match.
+ */
+export declare function applyThemeToElement(el: HTMLElement, output: ThemeOutput): void;
+/**
+ * End-to-end theme boot: reads real browser APIs and mutates the DOM.
+ * Called from the synchronous external /theme-init.js script in index.html and from main.tsx.
+ *
+ * W4 P2-1: localStorage may throw when site storage is disabled (privacy
+ * mode). main.tsx calls initTheme at module top level — an uncaught throw
+ * would abort module evaluation and the app would never mount (white screen,
+ * not even the failure surface). Guard reads/writes exactly like tokens.ts.
+ */
+export declare function initTheme(): void;
+/**
+ * Applies the system default theme (from the public startup configuration)
+ * when the user has no explicit choice. VP-007 S3: the explicit user theme
+ * always wins; otherwise the system default (non-auto) beats the OS
+ * preference. Called after branding loads on the login page and the shell.
+ */
+export declare function applySystemDefaultTheme(systemDefault: string | null | undefined): void;
+/**
+ * Sets the user's preferred theme, persists it to localStorage, and applies
+ * it immediately.  Pass `null` to revert to OS preference. W4 P2-1: storage
+ * writes are best-effort — a disabled-storage environment still applies the
+ * theme for the current page.
+ */
+export declare function setTheme(theme: Theme | null): void;