@dbcdk/react-components 0.0.172 → 0.0.174

package/dist/components/theme-button/ThemeButton.js

@@ -1,40 +1,47 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Palette, Monitor, Sun, Moon } from 'lucide-react';
+import { Check, Palette } from 'lucide-react';
 import { Button } from '../../components/button/Button';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
 import { useTheme } from '../../hooks/useTheme';
+import { THEME_LABELS } from '../../styles/themes/types';
 
-const THEME_OPTIONS = [
-  { value: "system", label: "System", icon: /* @__PURE__ */ jsx(Monitor, { size: 16 }) },
-  { value: "light", label: "Lyst", icon: /* @__PURE__ */ jsx(Sun, { size: 16 }) },
-  { value: "dark", label: "M\xF8rkt", icon: /* @__PURE__ */ jsx(Moon, { size: 16 }) }
-];
-function ThemeMenuSection() {
-  const { theme, switchTheme } = useTheme();
+function ThemeMenuSection({ themes, hrefs }) {
+  const { theme, switchTheme } = useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
-    THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Menu.Header, { children: "Tema" }),
+    themes.map((id) => /* @__PURE__ */ jsx(
       Menu.RadioItem,
       {
         name: "theme",
-        value: option.value,
-        checked: theme === option.value,
-        label: option.label,
-        onValueChange: (value) => switchTheme(value)
+        value: id,
+        checked: theme === id,
+        label: THEME_LABELS[id],
+        onValueChange: () => switchTheme(id)
       },
-      option.value
+      id
     ))
   ] });
 }
-function ThemeButton({ size, variant = "outlined" }) {
-  const { theme, switchTheme } = useTheme();
+function ThemeButton({
+  themes,
+  hrefs,
+  size,
+  variant = "outlined"
+}) {
+  const { theme, switchTheme } = useTheme({
+    defaultTheme: themes[0],
+    hrefs
+  });
   return /* @__PURE__ */ jsx(
     Popover,
     {
       matchTriggerWidth: false,
-      minWidth: "140px",
+      minWidth: "160px",
       trigger: (handleClick, chevron) => /* @__PURE__ */ jsxs(
         Button,
         {
@@ -50,20 +57,20 @@ function ThemeButton({ size, variant = "outlined" }) {
         }
       ),
       children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
-        /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
-        THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: theme === option.value, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Menu.Header, { children: "Tema" }),
+        themes.map((id) => /* @__PURE__ */ jsx(Menu.Item, { active: theme === id, children: /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => {
-              switchTheme(option.value);
+              switchTheme(id);
               close();
             },
             children: [
-              option.icon,
-              option.label
+              THEME_LABELS[id],
+              theme === id && /* @__PURE__ */ jsx(Check, { size: 16 })
             ]
           }
-        ) }, option.value))
+        ) }, id))
       ] })
     }
   );

package/dist/components/theme-script/ThemeScript.cjs

@@ -1,22 +1,60 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var colorScheme_constants = require('../../utils/color-scheme.constants');
 var theme_constants = require('../../utils/theme.constants');
 
-function buildThemeInitScript(defaultTheme) {
-  return `(function(){try{
-  var KEY=${JSON.stringify(theme_constants.THEME_STORAGE_KEY)};
-  var VARIANTS=${JSON.stringify(theme_constants.THEME_VARIANTS)};
-  function isVariant(x){return !!x && VARIANTS.indexOf(x)!==-1}
+function buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey) {
+  const hrefById = {};
+  for (const [id, href] of Object.entries(hrefs)) {
+    if (id !== defaultTheme && href) hrefById[id] = href;
+  }
+  const themeBlock = defaultTheme === void 0 ? "" : `try{
+  var THEME_KEY=${JSON.stringify(storageKey)};
+  var THEME_DEFAULT=${JSON.stringify(defaultTheme)};
+  var HREFS=${JSON.stringify(hrefById)};
+  var LINK_ID=${JSON.stringify(linkId)};
+  var resolvedTheme=getCookie(THEME_KEY);
+  if(!resolvedTheme){try{resolvedTheme=localStorage.getItem(THEME_KEY)}catch(e){}}
+  if(!resolvedTheme)resolvedTheme=THEME_DEFAULT;
+  if(resolvedTheme!==THEME_DEFAULT&&HREFS[resolvedTheme]){
+    var link=document.createElement('link');
+    link.id=LINK_ID;
+    link.rel='stylesheet';
+    link.href=HREFS[resolvedTheme];
+    document.head.appendChild(link);
+  }
+  document.documentElement.dataset.productTheme=resolvedTheme;
+}catch(e){}`;
+  return `(function(){
   function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
-  var resolved=${JSON.stringify(defaultTheme)};
-  var fromCookie=getCookie(KEY);
-  if(isVariant(fromCookie)){resolved=fromCookie}else{try{var fromStorage=localStorage.getItem(KEY);if(isVariant(fromStorage))resolved=fromStorage}catch(e){}}
-  document.documentElement.dataset.theme=resolved;
-}catch(e){}})();`;
+  try{
+  var SCHEME_KEY=${JSON.stringify(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY)};
+  var SCHEMES=${JSON.stringify(colorScheme_constants.COLOR_SCHEMES)};
+  function isScheme(x){return !!x && SCHEMES.indexOf(x)!==-1}
+  var resolvedScheme=${JSON.stringify(defaultColorScheme)};
+  var fromCookie=getCookie(SCHEME_KEY);
+  if(isScheme(fromCookie)){resolvedScheme=fromCookie}else{try{var fromStorage=localStorage.getItem(SCHEME_KEY);if(isScheme(fromStorage))resolvedScheme=fromStorage}catch(e){}}
+  document.documentElement.dataset.theme=resolvedScheme;
+  }catch(e){}
+  ${themeBlock}
+})();`;
 }
-function ThemeScript({ defaultTheme = "system" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("script", { dangerouslySetInnerHTML: { __html: buildThemeInitScript(defaultTheme) } });
+function ThemeScript({
+  defaultColorScheme = "system",
+  defaultTheme,
+  hrefs = {},
+  linkId = theme_constants.THEME_LINK_ID,
+  storageKey = theme_constants.THEME_STORAGE_KEY
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey)
+      }
+    }
+  );
 }
 
 exports.ThemeScript = ThemeScript;

package/dist/components/theme-script/ThemeScript.d.ts

@@ -1,25 +1,48 @@
-import type { ThemeVariant } from '../../utils/theme.constants';
+import type { ThemeHrefs, ThemeId } from '../../styles/themes/types';
+import type { ColorScheme } from '../../utils/color-scheme.constants';
 export interface ThemeScriptProps {
-    /** Theme applied when nothing is stored yet. Defaults to 'system'. */
-    defaultTheme?: ThemeVariant;
+    /** Color scheme applied when nothing is stored yet. Defaults to 'system'. */
+    defaultColorScheme?: ColorScheme;
+    /**
+     * The product theme the app already loads via a normal static import. Omit
+     * entirely if the app only ever ships one theme (e.g. just dbc) — no
+     * `data-product-theme` handling happens at all in that case.
+     */
+    defaultTheme?: ThemeId;
+    /** Per-theme CSS URL, for any theme not already loaded some other way. */
+    hrefs?: ThemeHrefs;
+    /** DOM id for the `<link>` this script (and useTheme) manage. */
+    linkId?: string;
+    storageKey?: string;
 }
 /**
- * Renders a blocking inline <script> that reads the persisted theme (cookie,
- * falling back to localStorage) and sets `data-theme` on <html> synchronously
- * — before the page paints and before React hydrates.
+ * Renders a blocking inline <script> that restores both the persisted color
+ * scheme (light/dark/system) and, if `defaultTheme` is given, the persisted
+ * product theme — synchronously, before the page paints and before React
+ * hydrates. One tag covers both axes, so most apps only ever need this one
+ * component in `<head>`.
  *
- * `useTheme()` alone cannot prevent a flash of the wrong theme on load: its
- * resolution runs inside a `useEffect`, which by definition only fires after
- * the first render has already been committed (and, server-side, there is no
- * `document` to read a cookie from at all). Closing that gap requires code
- * that runs outside React's render lifecycle — this component is that code.
+ * Neither `useColorScheme()` nor `useTheme()` alone can prevent a flash of
+ * the wrong value on load: their resolution runs inside a `useEffect`, which
+ * only fires after the first render has already been committed (and,
+ * server-side, there is no `document` to read a cookie from at all). Closing
+ * that gap requires code that runs outside React's render lifecycle — this
+ * component is that code.
  *
  * Place it as early as possible in <head>, e.g. in Next.js's `_document.js`:
  *
  * ```tsx
  * <Head>
+ *   <ThemeScript defaultTheme="filmstriben" />
+ * </Head>
+ * ```
+ *
+ * Or, for an app with only one product theme (no `defaultTheme` needed):
+ *
+ * ```tsx
+ * <Head>
  *   <ThemeScript />
  * </Head>
  * ```
  */
-export declare function ThemeScript({ defaultTheme }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeScript({ defaultColorScheme, defaultTheme, hrefs, linkId, storageKey, }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/theme-script/ThemeScript.js

@@ -1,20 +1,58 @@
 import { jsx } from 'react/jsx-runtime';
-import { THEME_STORAGE_KEY, THEME_VARIANTS } from '../../utils/theme.constants';
+import { COLOR_SCHEME_STORAGE_KEY, COLOR_SCHEMES } from '../../utils/color-scheme.constants';
+import { THEME_LINK_ID, THEME_STORAGE_KEY } from '../../utils/theme.constants';
 
-function buildThemeInitScript(defaultTheme) {
-  return `(function(){try{
-  var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
-  var VARIANTS=${JSON.stringify(THEME_VARIANTS)};
-  function isVariant(x){return !!x && VARIANTS.indexOf(x)!==-1}
+function buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey) {
+  const hrefById = {};
+  for (const [id, href] of Object.entries(hrefs)) {
+    if (id !== defaultTheme && href) hrefById[id] = href;
+  }
+  const themeBlock = defaultTheme === void 0 ? "" : `try{
+  var THEME_KEY=${JSON.stringify(storageKey)};
+  var THEME_DEFAULT=${JSON.stringify(defaultTheme)};
+  var HREFS=${JSON.stringify(hrefById)};
+  var LINK_ID=${JSON.stringify(linkId)};
+  var resolvedTheme=getCookie(THEME_KEY);
+  if(!resolvedTheme){try{resolvedTheme=localStorage.getItem(THEME_KEY)}catch(e){}}
+  if(!resolvedTheme)resolvedTheme=THEME_DEFAULT;
+  if(resolvedTheme!==THEME_DEFAULT&&HREFS[resolvedTheme]){
+    var link=document.createElement('link');
+    link.id=LINK_ID;
+    link.rel='stylesheet';
+    link.href=HREFS[resolvedTheme];
+    document.head.appendChild(link);
+  }
+  document.documentElement.dataset.productTheme=resolvedTheme;
+}catch(e){}`;
+  return `(function(){
   function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
-  var resolved=${JSON.stringify(defaultTheme)};
-  var fromCookie=getCookie(KEY);
-  if(isVariant(fromCookie)){resolved=fromCookie}else{try{var fromStorage=localStorage.getItem(KEY);if(isVariant(fromStorage))resolved=fromStorage}catch(e){}}
-  document.documentElement.dataset.theme=resolved;
-}catch(e){}})();`;
+  try{
+  var SCHEME_KEY=${JSON.stringify(COLOR_SCHEME_STORAGE_KEY)};
+  var SCHEMES=${JSON.stringify(COLOR_SCHEMES)};
+  function isScheme(x){return !!x && SCHEMES.indexOf(x)!==-1}
+  var resolvedScheme=${JSON.stringify(defaultColorScheme)};
+  var fromCookie=getCookie(SCHEME_KEY);
+  if(isScheme(fromCookie)){resolvedScheme=fromCookie}else{try{var fromStorage=localStorage.getItem(SCHEME_KEY);if(isScheme(fromStorage))resolvedScheme=fromStorage}catch(e){}}
+  document.documentElement.dataset.theme=resolvedScheme;
+  }catch(e){}
+  ${themeBlock}
+})();`;
 }
-function ThemeScript({ defaultTheme = "system" }) {
-  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: buildThemeInitScript(defaultTheme) } });
+function ThemeScript({
+  defaultColorScheme = "system",
+  defaultTheme,
+  hrefs = {},
+  linkId = THEME_LINK_ID,
+  storageKey = THEME_STORAGE_KEY
+}) {
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: buildInitScript(defaultColorScheme, hrefs, defaultTheme, linkId, storageKey)
+      }
+    }
+  );
 }
 
 export { ThemeScript };

package/dist/hooks/useColorScheme.cjs

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var colorScheme_constants = require('../utils/color-scheme.constants');
+var cookie_utils = require('../utils/cookie.utils');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function persistColorScheme(id) {
+  localStorage_utils.writeLocalStorage(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, id);
+  cookie_utils.writeCookie(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, id);
+}
+function getDomColorScheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyColorScheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+let currentColorScheme = null;
+let resolved = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return currentColorScheme;
+}
+function getServerSnapshot() {
+  return null;
+}
+function resolveInitialColorScheme(initialColorScheme) {
+  const fromDomAttribute = getDomColorScheme();
+  let resolvedColorScheme = colorScheme_constants.isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
+  const fromCookie = cookie_utils.readCookie(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY);
+  if (colorScheme_constants.isColorScheme(fromCookie)) {
+    resolvedColorScheme = fromCookie;
+  } else {
+    const fromStorage = localStorage_utils.readLocalStorage(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY);
+    if (colorScheme_constants.isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
+  }
+  return resolvedColorScheme;
+}
+function ensureResolved(initialColorScheme) {
+  if (resolved) return;
+  resolved = true;
+  const value = resolveInitialColorScheme(initialColorScheme);
+  applyColorScheme(value);
+  persistColorScheme(value);
+  currentColorScheme = value;
+  notify();
+}
+function switchColorScheme(id) {
+  applyColorScheme(id);
+  persistColorScheme(id);
+  currentColorScheme = id;
+  resolved = true;
+  notify();
+  return id;
+}
+function useColorScheme(initialColorScheme = "system") {
+  react.useEffect(() => {
+    ensureResolved(initialColorScheme);
+  }, [initialColorScheme]);
+  const colorScheme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return { colorScheme, switchColorScheme };
+}
+
+exports.useColorScheme = useColorScheme;

package/dist/hooks/useColorScheme.d.ts

@@ -0,0 +1,6 @@
+import type { ColorScheme } from '../utils/color-scheme.constants';
+export type { ColorScheme };
+export declare function useColorScheme(initialColorScheme?: ColorScheme): {
+    colorScheme: ColorScheme | null;
+    switchColorScheme: (id: ColorScheme) => ColorScheme;
+};

package/dist/hooks/useColorScheme.js

@@ -0,0 +1,72 @@
+'use client';
+import { useEffect, useSyncExternalStore } from 'react';
+import { isColorScheme, COLOR_SCHEME_STORAGE_KEY } from '../utils/color-scheme.constants';
+import { readCookie, writeCookie } from '../utils/cookie.utils';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+
+function persistColorScheme(id) {
+  writeLocalStorage(COLOR_SCHEME_STORAGE_KEY, id);
+  writeCookie(COLOR_SCHEME_STORAGE_KEY, id);
+}
+function getDomColorScheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyColorScheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+let currentColorScheme = null;
+let resolved = false;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return currentColorScheme;
+}
+function getServerSnapshot() {
+  return null;
+}
+function resolveInitialColorScheme(initialColorScheme) {
+  const fromDomAttribute = getDomColorScheme();
+  let resolvedColorScheme = isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
+  const fromCookie = readCookie(COLOR_SCHEME_STORAGE_KEY);
+  if (isColorScheme(fromCookie)) {
+    resolvedColorScheme = fromCookie;
+  } else {
+    const fromStorage = readLocalStorage(COLOR_SCHEME_STORAGE_KEY);
+    if (isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
+  }
+  return resolvedColorScheme;
+}
+function ensureResolved(initialColorScheme) {
+  if (resolved) return;
+  resolved = true;
+  const value = resolveInitialColorScheme(initialColorScheme);
+  applyColorScheme(value);
+  persistColorScheme(value);
+  currentColorScheme = value;
+  notify();
+}
+function switchColorScheme(id) {
+  applyColorScheme(id);
+  persistColorScheme(id);
+  currentColorScheme = id;
+  resolved = true;
+  notify();
+  return id;
+}
+function useColorScheme(initialColorScheme = "system") {
+  useEffect(() => {
+    ensureResolved(initialColorScheme);
+  }, [initialColorScheme]);
+  const colorScheme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return { colorScheme, switchColorScheme };
+}
+
+export { useColorScheme };

package/dist/hooks/useTheme.cjs

@@ -2,34 +2,59 @@
 'use strict';
 
 var react = require('react');
+var cookie_utils = require('../utils/cookie.utils');
+var localStorage_utils = require('../utils/localStorage.utils');
 var theme_constants = require('../utils/theme.constants');
 
-function getCookie(name) {
-  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-  return match ? decodeURIComponent(match[1]) : null;
-}
-function persistTheme(id) {
-  try {
-    localStorage.setItem(theme_constants.THEME_STORAGE_KEY, id);
-  } catch {
-    console.error("Failed to access localStorage");
-  }
-  try {
-    document.cookie = `${theme_constants.THEME_STORAGE_KEY}=${encodeURIComponent(
-      id
-    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-  } catch {
-    console.error("Failed to set theme cookie");
-  }
+const PRELOAD_ID_PREFIX = "dbc-theme-preload-";
+function persistTheme(storageKey, id) {
+  localStorage_utils.writeLocalStorage(storageKey, id);
+  cookie_utils.writeCookie(storageKey, id);
 }
 function getDomTheme() {
-  return document.documentElement.dataset.theme;
+  return document.documentElement.dataset.productTheme;
 }
 function applyTheme(id) {
-  document.documentElement.dataset.theme = id;
+  document.documentElement.dataset.productTheme = id;
+}
+function findLink(linkId) {
+  return document.getElementById(linkId);
+}
+function findPreloadLink(id) {
+  return document.getElementById(`${PRELOAD_ID_PREFIX}${id}`);
+}
+function ensureStylesheet(id, href, linkId, onReady) {
+  var _a;
+  if (!href) {
+    onReady();
+    return;
+  }
+  const active = findLink(linkId);
+  if (active && active.getAttribute("href") === href && active.rel === "stylesheet") {
+    onReady();
+    return;
+  }
+  const preload = findPreloadLink(id);
+  const link = (_a = active != null ? active : preload) != null ? _a : document.createElement("link");
+  const wasConnected = link.isConnected;
+  link.id = linkId;
+  link.rel = "stylesheet";
+  link.removeAttribute("as");
+  link.href = href;
+  if (preload && preload !== link) preload.remove();
+  let settled = false;
+  const finish = () => {
+    if (settled) return;
+    settled = true;
+    onReady();
+  };
+  link.addEventListener("load", finish, { once: true });
+  link.addEventListener("error", finish, { once: true });
+  if (!wasConnected) document.head.appendChild(link);
 }
 let currentTheme = null;
 let resolved = false;
+let preloadScheduled = false;
 const listeners = /* @__PURE__ */ new Set();
 function notify() {
   listeners.forEach((listener) => listener());
@@ -46,44 +71,85 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialTheme(initialTheme) {
-  const themeFromDataAttributes = getDomTheme();
-  let resolvedTheme = theme_constants.isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-  const fromCookie = getCookie(theme_constants.THEME_STORAGE_KEY);
-  if (theme_constants.isThemeVariant(fromCookie)) {
-    resolvedTheme = fromCookie;
-  } else {
-    try {
-      const fromStorage = localStorage.getItem(theme_constants.THEME_STORAGE_KEY);
-      if (theme_constants.isThemeVariant(fromStorage)) resolvedTheme = fromStorage;
-    } catch {
-      console.error("Failed to access localStorage");
-    }
-  }
-  return resolvedTheme;
+function resolveInitialTheme(storageKey, defaultTheme) {
+  const fromDom = getDomTheme();
+  if (fromDom) return fromDom;
+  const fromCookie = cookie_utils.readCookie(storageKey);
+  if (fromCookie) return fromCookie;
+  const fromStorage = localStorage_utils.readLocalStorage(storageKey);
+  if (fromStorage) return fromStorage;
+  return defaultTheme;
 }
-function ensureResolved(initialTheme) {
+function ensureResolved(hrefs, defaultTheme, storageKey, linkId) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialTheme(initialTheme);
-  applyTheme(value);
-  persistTheme(value);
-  currentTheme = value;
-  notify();
+  const value = resolveInitialTheme(storageKey, defaultTheme);
+  const finish = () => {
+    applyTheme(value);
+    persistTheme(storageKey, value);
+    currentTheme = value;
+    notify();
+  };
+  if (value === defaultTheme) {
+    finish();
+    return;
+  }
+  ensureStylesheet(value, hrefs[value], linkId, finish);
 }
-function switchTheme(id) {
-  applyTheme(id);
-  persistTheme(id);
-  currentTheme = id;
-  resolved = true;
-  notify();
-  return id;
+function schedulePreload(hrefs, defaultTheme) {
+  if (preloadScheduled) return;
+  preloadScheduled = true;
+  const run = () => {
+    var _a;
+    for (const [id, href] of Object.entries(hrefs)) {
+      if (id === defaultTheme || !href) continue;
+      if (((_a = findLink(theme_constants.THEME_LINK_ID)) == null ? void 0 : _a.getAttribute("href")) === href) continue;
+      if (findPreloadLink(id)) continue;
+      const link = document.createElement("link");
+      link.id = `${PRELOAD_ID_PREFIX}${id}`;
+      link.rel = "preload";
+      link.as = "style";
+      link.href = href;
+      document.head.appendChild(link);
+    }
+  };
+  const requestIdle = window.requestIdleCallback;
+  if (typeof requestIdle === "function") {
+    requestIdle(run);
+  } else {
+    setTimeout(run, 1);
+  }
 }
-function useTheme(initialTheme = "system") {
+function switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id) {
+  const finish = () => {
+    applyTheme(id);
+    persistTheme(storageKey, id);
+    currentTheme = id;
+    resolved = true;
+    notify();
+  };
+  if (id === defaultTheme) {
+    finish();
+    return;
+  }
+  ensureStylesheet(id, hrefs[id], linkId, finish);
+}
+function useTheme(options) {
+  const {
+    defaultTheme,
+    hrefs = {},
+    linkId = theme_constants.THEME_LINK_ID,
+    preloadOthers = true,
+    storageKey = theme_constants.THEME_STORAGE_KEY
+  } = options;
   react.useEffect(() => {
-    ensureResolved(initialTheme);
-  }, [initialTheme]);
+    ensureResolved(hrefs, defaultTheme, storageKey, linkId);
+    if (preloadOthers) schedulePreload(hrefs, defaultTheme);
+  }, []);
   const theme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  function switchTheme(id) {
+    switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id);
+  }
   return { theme, switchTheme };
 }