@tamagui/next-theme 1.0.9 → 1.0.11

package/dist/cjs/NextTheme.js

@@ -25,6 +25,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var NextTheme_exports = {};
 __export(NextTheme_exports, {
   NextThemeProvider: () => NextThemeProvider,
+  Theme: () => Theme,
   useRootTheme: () => useRootTheme,
   useTheme: () => useTheme,
   useThemeSetting: () => useThemeSetting
@@ -32,19 +33,12 @@ __export(NextTheme_exports, {
 module.exports = __toCommonJS(NextTheme_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_use_event = require("@tamagui/use-event");
-var import_head = __toESM(require("next/head"));
 var React = __toESM(require("react"));
 var import_react = require("react");
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
-const ThemeSettingContext = (0, import_react.createContext)({
-  toggle: () => {
-  },
-  set: (_) => {
-  },
-  themes: []
-});
-const useTheme = () => (0, import_react.useContext)(ThemeSettingContext);
-const useThemeSetting = () => (0, import_react.useContext)(ThemeSettingContext);
+const ThemeContext = (0, import_react.createContext)(null);
+const useTheme = () => (0, import_react.useContext)(ThemeContext);
+const useThemeSetting = () => (0, import_react.useContext)(ThemeContext);
 const colorSchemes = ["light", "dark"];
 const MEDIA = "(prefers-color-scheme: dark)";
 const useRootTheme = () => {
@@ -60,7 +54,19 @@ const useRootTheme = () => {
   }
   return [val, setVal];
 };
-const NextThemeProvider = ({
+const NextThemeProvider = (props) => {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (context) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: props.children
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, {
+    ...props
+  });
+};
+const Theme = ({
+  nonce,
   forcedTheme,
   disableTransitionOnChange = true,
   enableSystem = true,
@@ -90,31 +96,29 @@ const NextThemeProvider = ({
   });
   const mediaListener = (0, import_react.useRef)(handleMediaQuery);
   mediaListener.current = handleMediaQuery;
-  const handleChangeTheme = (0, import_use_event.useEvent)(
-    (theme2, updateStorage = true, updateDOM = true) => {
-      let name = (value == null ? void 0 : value[theme2]) || theme2;
-      if (updateStorage) {
-        try {
-          localStorage.setItem(storageKey, theme2);
-        } catch (e) {
-        }
-      }
-      if (theme2 === "system" && enableSystem) {
-        const resolved = getSystemTheme();
-        name = (value == null ? void 0 : value[resolved]) || resolved;
+  const handleChangeTheme = (0, import_use_event.useEvent)((theme2, updateStorage = true, updateDOM = true) => {
+    let name = (value == null ? void 0 : value[theme2]) || theme2;
+    if (updateStorage) {
+      try {
+        localStorage.setItem(storageKey, theme2);
+      } catch (e) {
       }
-      onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
-      if (updateDOM) {
-        const d = document.documentElement;
-        if (attribute === "class") {
-          d.classList.remove(...attrs);
-          d.classList.add(name);
-        } else {
-          d.setAttribute(attribute, name);
-        }
+    }
+    if (theme2 === "system" && enableSystem) {
+      const resolved = getSystemTheme();
+      name = (value == null ? void 0 : value[resolved]) || resolved;
+    }
+    onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
+    if (updateDOM) {
+      const d = document.documentElement;
+      if (attribute === "class") {
+        d.classList.remove(...attrs);
+        d.classList.add(name);
+      } else {
+        d.setAttribute(attribute, name);
       }
     }
-  );
+  });
   useIsomorphicLayoutEffect(() => {
     const handler = (...args) => mediaListener.current(...args);
     const media = window.matchMedia(MEDIA);
@@ -184,19 +188,23 @@ const NextThemeProvider = ({
     themes,
     systemTheme
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThemeSettingContext.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThemeContext.Provider, {
     value: contextValue,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeScript, {
         ...{
           forcedTheme,
+          disableTransitionOnChange,
           storageKey,
           systemTheme: resolvedTheme,
           attribute,
+          enableColorScheme,
           value,
+          themes,
           enableSystem,
           defaultTheme,
-          attrs
+          attrs,
+          nonce
         }
       }),
       (0, import_react.useMemo)(() => children, [children])
@@ -209,52 +217,73 @@ const ThemeScript = (0, import_react.memo)(
     storageKey,
     attribute,
     enableSystem,
+    enableColorScheme,
     defaultTheme,
     value,
-    attrs
+    attrs,
+    nonce
   }) => {
+    const defaultSystem = defaultTheme === "system";
     const optimization = (() => {
       if (attribute === "class") {
-        const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
-        return `var d=document.documentElement.classList;${removeClasses};`;
+        const removeClasses = `c.remove(${attrs.map((t) => `'${t}'`).join(",")})`;
+        return `var d=document.documentElement,c=d.classList;${removeClasses};`;
       } else {
-        return `var d=document.documentElement;`;
+        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;
       }
     })();
-    const updateDOM = (name, literal) => {
-      name = (value == null ? void 0 : value[name]) || name;
-      const val = literal ? name : `'${name}'`;
-      if (attribute === "class") {
-        return `d.add(${val})`;
+    const fallbackColorScheme = (() => {
+      if (!enableColorScheme) {
+        return "";
       }
-      return `d.setAttribute('${attribute}', ${val})`;
-    };
-    const defaultSystem = defaultTheme === "system";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_head.default, {
-      children: forcedTheme ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
-        }
-      }, "next-themes-script") : enableSystem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${!defaultSystem ? updateDOM(defaultTheme) + ";" : ""}if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(
-            "dark"
-          )}:${updateDOM("light")}}else if(e) ${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}catch(e){}}()`
+      const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null;
+      if (fallback) {
+        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+      } else {
+        return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+      }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+      const resolvedName = value ? value[name] : name;
+      const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+      let text = "";
+      if (enableColorScheme && setColorScheme && !literal && colorSchemes.includes(name)) {
+        text += `d.style.colorScheme = '${name}';`;
+      }
+      if (attribute === "class") {
+        if (literal || resolvedName) {
+          text += `c.add(${val})`;
+        } else {
+          text += `null`;
         }
-      }, "next-themes-script") : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){try{${optimization}var e=localStorage.getItem("${storageKey}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}else{${updateDOM(
-            defaultTheme
-          )};}}catch(t){}}();`
+      } else {
+        if (resolvedName) {
+          text += `d[s](n,${val})`;
         }
-      }, "next-themes-script")
+      }
+      return text;
+    };
+    const scriptSrc = (() => {
+      if (forcedTheme) {
+        return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+      }
+      if (enableSystem) {
+        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(
+          "dark"
+        )}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem ? `else{` + updateDOM(defaultTheme, false, false) + "}" : ""}${fallbackColorScheme}}catch(e){}}()`;
+      }
+      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(
+        defaultTheme,
+        false,
+        false
+      )};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
+      nonce,
+      dangerouslySetInnerHTML: { __html: scriptSrc }
     });
   },
-  (prevProps, nextProps) => {
-    if (prevProps.forcedTheme !== nextProps.forcedTheme)
-      return false;
-    return true;
-  }
+  () => true
 );
 const getTheme = (key, fallback) => {
   if (typeof window === "undefined")
@@ -277,6 +306,7 @@ const getSystemTheme = (e) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NextThemeProvider,
+  Theme,
   useRootTheme,
   useTheme,
   useThemeSetting

package/dist/cjs/NextTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/NextTheme.tsx"],
-  "sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { useEvent } from '@tamagui/use-event'\nimport NextHead from 'next/head'\nimport * as React from 'react'\nimport {\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport interface UseThemeProps {\n  /** List of all available theme names */\n  themes: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Update the theme */\n  set: (theme: string) => void\n  toggle: () => void\n  /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n  current?: string\n  /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n  theme?: string\n  /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n  resolvedTheme?: string\n  /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n  systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n  children?: any\n  /** List of all available theme names */\n  themes?: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Whether to switch between dark and light themes based on prefers-color-scheme */\n  enableSystem?: boolean\n  systemTheme?: string\n  /** Disable all CSS transitions when switching themes */\n  disableTransitionOnChange?: boolean\n  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n  enableColorScheme?: boolean\n  /** Key used to store theme setting in localStorage */\n  storageKey?: string\n  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n  defaultTheme?: string\n  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n  attribute?: string | 'class'\n  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n  value?: ValueObject\n  onChangeTheme?: (name: string) => void\n}\n\nconst ThemeSettingContext = createContext<UseThemeProps>({\n  toggle: () => {},\n  set: (_) => {},\n  themes: [],\n})\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\nexport const useTheme = () => useContext(ThemeSettingContext)\n\nexport const useThemeSetting = () => useContext(ThemeSettingContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n  [themeName: string]: string\n}\n\n// note this only works for light being default for now...\nexport const useRootTheme = () => {\n  const [val, setVal] = useState('light')\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      // @ts-ignore\n      const classes = [...document.documentElement.classList]\n      const isDark = classes.includes('t_dark')\n      React.startTransition(() => {\n        setVal(isDark ? 'dark' : 'light')\n      })\n    }, [])\n  }\n\n  return [val, setVal] as const\n}\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = ({\n  forcedTheme,\n  disableTransitionOnChange = true,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = colorSchemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'class',\n  onChangeTheme,\n  value = {\n    dark: 't_dark',\n    light: 't_light',\n  },\n  children,\n}) => {\n  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))\n  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))\n  // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)\n  const attrs = !value ? themes : Object.values(value)\n\n  const handleMediaQuery = useEvent((e?) => {\n    const systemTheme = getSystemTheme(e)\n    React.startTransition(() => {\n      setResolvedTheme(systemTheme)\n    })\n    if (theme === 'system' && !forcedTheme) {\n      handleChangeTheme(systemTheme, false)\n    }\n  })\n\n  // Ref hack to avoid adding handleMediaQuery as a dep\n  const mediaListener = useRef(handleMediaQuery)\n  mediaListener.current = handleMediaQuery\n\n  const handleChangeTheme = useEvent(\n    (theme, updateStorage = true, updateDOM = true) => {\n      let name = value?.[theme] || theme\n\n      if (updateStorage) {\n        try {\n          localStorage.setItem(storageKey, theme)\n        } catch (e) {\n          // Unsupported\n        }\n      }\n\n      if (theme === 'system' && enableSystem) {\n        const resolved = getSystemTheme()\n        name = value?.[resolved] || resolved\n      }\n\n      onChangeTheme?.(name.replace('t_', ''))\n\n      if (updateDOM) {\n        const d = document.documentElement\n        if (attribute === 'class') {\n          d.classList.remove(...attrs)\n          d.classList.add(name)\n        } else {\n          d.setAttribute(attribute, name)\n        }\n      }\n    },\n  )\n\n  useIsomorphicLayoutEffect(() => {\n    const handler = (...args: any) => mediaListener.current(...args)\n    // Always listen to System preference\n    const media = window.matchMedia(MEDIA)\n    // Intentionally use deprecated listener methods to support iOS & old browsers\n    media.addListener(handler)\n    handler(media)\n    return () => {\n      media.removeListener(handler)\n    }\n  }, [])\n\n  const set = useEvent((newTheme) => {\n    if (forcedTheme) {\n      handleChangeTheme(newTheme, true, false)\n    } else {\n      handleChangeTheme(newTheme)\n    }\n    setThemeState(newTheme)\n  })\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return\n      }\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme\n      set(theme)\n    }\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [defaultTheme, set, storageKey])\n\n  // color-scheme handling\n  useIsomorphicLayoutEffect(() => {\n    if (!enableColorScheme) return\n\n    const colorScheme =\n      // If theme is forced to light or dark, use that\n      forcedTheme && colorSchemes.includes(forcedTheme)\n        ? forcedTheme\n        : // If regular theme is light or dark\n        theme && colorSchemes.includes(theme)\n        ? theme\n        : // If theme is system, use the resolved version\n        theme === 'system'\n        ? resolvedTheme || null\n        : null\n\n    // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.\n    // if color-scheme is null, this will remove the property\n    const userPrefers =\n      typeof window !== 'undefined' &&\n      window.matchMedia &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n\n    const wePrefer = colorScheme || 'light'\n\n    // avoid running this because it causes full page reflow\n    if (userPrefers !== wePrefer) {\n      document.documentElement.style.setProperty('color-scheme', colorScheme)\n    }\n  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n  const toggle = useEvent(() => {\n    const order =\n      resolvedTheme === 'dark'\n        ? ['system', 'light', 'dark']\n        : ['system', 'dark', 'light']\n    const next = order[(order.indexOf(theme) + 1) % order.length]\n    set(next)\n  })\n\n  const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme\n  const systemTheme = (enableSystem ? resolvedTheme : undefined) as\n    | 'light'\n    | 'dark'\n    | undefined\n  const contextValue = useMemo(() => {\n    const value: UseThemeProps = {\n      theme,\n      current: theme,\n      set,\n      toggle,\n      forcedTheme,\n      resolvedTheme: contextResolvedTheme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme,\n    } as const\n    return value\n  }, [\n    theme,\n    set,\n    toggle,\n    forcedTheme,\n    contextResolvedTheme,\n    enableSystem,\n    themes,\n    systemTheme,\n  ])\n\n  return (\n    <ThemeSettingContext.Provider value={contextValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          storageKey,\n          systemTheme: resolvedTheme,\n          attribute,\n          value,\n          enableSystem,\n          defaultTheme,\n          attrs,\n        }}\n      />\n      {/* because on SSR we re-run and can avoid whole tree re-render */}\n      {useMemo(() => children, [children])}\n    </ThemeSettingContext.Provider>\n  )\n}\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    defaultTheme,\n    value,\n    attrs,\n  }: {\n    forcedTheme?: string\n    storageKey: string\n    attribute?: string\n    enableSystem?: boolean\n    defaultTheme: string\n    value?: ValueObject\n    attrs: any\n  }) => {\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = attrs.map((t: string) => `d.remove('${t}')`).join(';')\n        return `var d=document.documentElement.classList;${removeClasses};`\n      } else {\n        return `var d=document.documentElement;`\n      }\n    })()\n\n    const updateDOM = (name: string, literal?: boolean) => {\n      name = value?.[name] || name\n      const val = literal ? name : `'${name}'`\n\n      if (attribute === 'class') {\n        return `d.add(${val})`\n      }\n\n      return `d.setAttribute('${attribute}', ${val})`\n    }\n\n    const defaultSystem = defaultTheme === 'system'\n\n    return (\n      <NextHead>\n        {forcedTheme ? (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              // These are minified via Terser and then updated by hand, don't recommend\n              __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,\n            }}\n          />\n        ) : enableSystem ? (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${\n                !defaultSystem ? updateDOM(defaultTheme) + ';' : ''\n              }if(\"system\"===e||(!e&&${defaultSystem})){var t=\"${MEDIA}\",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(\n                'dark',\n              )}:${updateDOM('light')}}else if(e) ${\n                value ? `var x=${JSON.stringify(value)};` : ''\n              }${updateDOM(value ? 'x[e]' : 'e', true)}}catch(e){}}()`,\n            }}\n          />\n        ) : (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              __html: `!function(){try{${optimization}var e=localStorage.getItem(\"${storageKey}\");if(e){${\n                value ? `var x=${JSON.stringify(value)};` : ''\n              }${updateDOM(value ? 'x[e]' : 'e', true)}}else{${updateDOM(\n                defaultTheme,\n              )};}}catch(t){}}();`,\n            }}\n          />\n        )}\n      </NextHead>\n    )\n  },\n  (prevProps, nextProps) => {\n    // Only re-render when forcedTheme changes\n    // the rest of the props should be completely stable\n    if (prevProps.forcedTheme !== nextProps.forcedTheme) return false\n    return true\n  },\n)\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (typeof window === 'undefined') return undefined\n  let theme\n  try {\n    theme = localStorage.getItem(key) || undefined\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback\n}\n\nconst getSystemTheme = (e?: MediaQueryList) => {\n  if (!e) {\n    e = window.matchMedia(MEDIA)\n  }\n\n  const isDark = e.matches\n  const systemTheme = isDark ? 'dark' : 'light'\n  return systemTheme\n}\n"],
-  "mappings": "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",
-  "names": ["systemTheme", "theme", "value", "NextHead"]
+  "sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { useEvent } from '@tamagui/use-event'\nimport * as React from 'react'\nimport {\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport interface UseThemeProps {\n  /** List of all available theme names */\n  themes: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Update the theme */\n  set: (theme: string) => void\n  toggle: () => void\n  /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n  current?: string\n  /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n  theme?: string\n  /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n  resolvedTheme?: string\n  /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n  systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n  children?: any\n  /** List of all available theme names */\n  themes?: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Whether to switch between dark and light themes based on prefers-color-scheme */\n  enableSystem?: boolean\n  systemTheme?: string\n  /** Disable all CSS transitions when switching themes */\n  disableTransitionOnChange?: boolean\n  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n  enableColorScheme?: boolean\n  /** Key used to store theme setting in localStorage */\n  storageKey?: string\n  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n  defaultTheme?: string\n  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n  attribute?: string | 'class'\n  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n  value?: ValueObject\n  onChangeTheme?: (name: string) => void\n  nonce?: string\n}\n\nconst ThemeContext = createContext<UseThemeProps | null>(null)\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\nexport const useTheme = () => useContext(ThemeContext)\n\nexport const useThemeSetting = () => useContext(ThemeContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n  [themeName: string]: string\n}\n\n// note this only works for light being default for now...\nexport const useRootTheme = () => {\n  const [val, setVal] = useState('light')\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      // @ts-ignore\n      const classes = [...document.documentElement.classList]\n      const isDark = classes.includes('t_dark')\n      React.startTransition(() => {\n        setVal(isDark ? 'dark' : 'light')\n      })\n    }, [])\n  }\n\n  return [val, setVal] as const\n}\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = (props) => {\n  const context = useContext(ThemeContext)\n  // Ignore nested context providers, just passthrough children\n  if (context) {\n    return <>{props.children}</>\n  }\n  return <Theme {...props} />\n}\n\nexport const Theme: React.FC<ThemeProviderProps> = ({\n  nonce,\n  forcedTheme,\n  disableTransitionOnChange = true,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = colorSchemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'class',\n  onChangeTheme,\n  value = {\n    dark: 't_dark',\n    light: 't_light',\n  },\n  children,\n}) => {\n  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))\n  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))\n  // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)\n  const attrs = !value ? themes : Object.values(value)\n\n  const handleMediaQuery = useEvent((e?) => {\n    const systemTheme = getSystemTheme(e)\n    React.startTransition(() => {\n      setResolvedTheme(systemTheme)\n    })\n    if (theme === 'system' && !forcedTheme) {\n      handleChangeTheme(systemTheme, false)\n    }\n  })\n\n  // Ref hack to avoid adding handleMediaQuery as a dep\n  const mediaListener = useRef(handleMediaQuery)\n  mediaListener.current = handleMediaQuery\n\n  const handleChangeTheme = useEvent((theme, updateStorage = true, updateDOM = true) => {\n    let name = value?.[theme] || theme\n\n    if (updateStorage) {\n      try {\n        localStorage.setItem(storageKey, theme)\n      } catch (e) {\n        // Unsupported\n      }\n    }\n\n    if (theme === 'system' && enableSystem) {\n      const resolved = getSystemTheme()\n      name = value?.[resolved] || resolved\n    }\n\n    onChangeTheme?.(name.replace('t_', ''))\n\n    if (updateDOM) {\n      const d = document.documentElement\n      if (attribute === 'class') {\n        d.classList.remove(...attrs)\n        d.classList.add(name)\n      } else {\n        d.setAttribute(attribute, name)\n      }\n    }\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    const handler = (...args: any) => mediaListener.current(...args)\n    // Always listen to System preference\n    const media = window.matchMedia(MEDIA)\n    // Intentionally use deprecated listener methods to support iOS & old browsers\n    media.addListener(handler)\n    handler(media)\n    return () => {\n      media.removeListener(handler)\n    }\n  }, [])\n\n  const set = useEvent((newTheme) => {\n    if (forcedTheme) {\n      handleChangeTheme(newTheme, true, false)\n    } else {\n      handleChangeTheme(newTheme)\n    }\n    setThemeState(newTheme)\n  })\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return\n      }\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme\n      set(theme)\n    }\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [defaultTheme, set, storageKey])\n\n  // color-scheme handling\n  useIsomorphicLayoutEffect(() => {\n    if (!enableColorScheme) return\n\n    const colorScheme =\n      // If theme is forced to light or dark, use that\n      forcedTheme && colorSchemes.includes(forcedTheme)\n        ? forcedTheme\n        : // If regular theme is light or dark\n        theme && colorSchemes.includes(theme)\n        ? theme\n        : // If theme is system, use the resolved version\n        theme === 'system'\n        ? resolvedTheme || null\n        : null\n\n    // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.\n    // if color-scheme is null, this will remove the property\n    const userPrefers =\n      typeof window !== 'undefined' &&\n      window.matchMedia &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n\n    const wePrefer = colorScheme || 'light'\n\n    // avoid running this because it causes full page reflow\n    if (userPrefers !== wePrefer) {\n      document.documentElement.style.setProperty('color-scheme', colorScheme)\n    }\n  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n  const toggle = useEvent(() => {\n    const order =\n      resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']\n    const next = order[(order.indexOf(theme) + 1) % order.length]\n    set(next)\n  })\n\n  const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme\n  const systemTheme = (enableSystem ? resolvedTheme : undefined) as\n    | 'light'\n    | 'dark'\n    | undefined\n  const contextValue = useMemo(() => {\n    const value: UseThemeProps = {\n      theme,\n      current: theme,\n      set,\n      toggle,\n      forcedTheme,\n      resolvedTheme: contextResolvedTheme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme,\n    } as const\n    return value\n  }, [\n    theme,\n    set,\n    toggle,\n    forcedTheme,\n    contextResolvedTheme,\n    enableSystem,\n    themes,\n    systemTheme,\n  ])\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          disableTransitionOnChange,\n          storageKey,\n          systemTheme: resolvedTheme,\n          attribute,\n          enableColorScheme,\n          value,\n          themes,\n          enableSystem,\n          defaultTheme,\n          attrs,\n          nonce,\n        }}\n      />\n      {/* because on SSR we re-run and can avoid whole tree re-render */}\n      {useMemo(() => children, [children])}\n    </ThemeContext.Provider>\n  )\n}\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    enableColorScheme,\n    defaultTheme,\n    value,\n    attrs,\n    nonce,\n  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n    const defaultSystem = defaultTheme === 'system'\n\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = `c.remove(${attrs.map((t: string) => `'${t}'`).join(',')})`\n\n        return `var d=document.documentElement,c=d.classList;${removeClasses};`\n      } else {\n        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`\n      }\n    })()\n\n    const fallbackColorScheme = (() => {\n      if (!enableColorScheme) {\n        return ''\n      }\n\n      const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null\n\n      if (fallback) {\n        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`\n      } else {\n        return `if(e==='light'||e==='dark')d.style.colorScheme=e`\n      }\n    })()\n\n    const updateDOM = (name: string, literal: boolean = false, setColorScheme = true) => {\n      const resolvedName = value ? value[name] : name\n      const val = literal ? name + `|| ''` : `'${resolvedName}'`\n      let text = ''\n\n      // MUCH faster to set colorScheme alongside HTML attribute/class\n      // as it only incurs 1 style recalculation rather than 2\n      // This can save over 250ms of work for pages with big DOM\n      if (\n        enableColorScheme &&\n        setColorScheme &&\n        !literal &&\n        colorSchemes.includes(name)\n      ) {\n        text += `d.style.colorScheme = '${name}';`\n      }\n\n      if (attribute === 'class') {\n        if (literal || resolvedName) {\n          text += `c.add(${val})`\n        } else {\n          text += `null`\n        }\n      } else {\n        if (resolvedName) {\n          text += `d[s](n,${val})`\n        }\n      }\n\n      return text\n    }\n\n    const scriptSrc = (() => {\n      if (forcedTheme) {\n        return `!function(){${optimization}${updateDOM(forcedTheme)}}()`\n      }\n\n      if (enableSystem) {\n        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n          'dark'\n        )}}else{${updateDOM('light')}}}else if(e){${\n          value ? `var x=${JSON.stringify(value)};` : ''\n        }${updateDOM(value ? `x[e]` : 'e', true)}}${\n          !defaultSystem ? `else{` + updateDOM(defaultTheme, false, false) + '}' : ''\n        }${fallbackColorScheme}}catch(e){}}()`\n      }\n\n      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n        value ? `var x=${JSON.stringify(value)};` : ''\n      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(\n        defaultTheme,\n        false,\n        false\n      )};}${fallbackColorScheme}}catch(t){}}();`\n    })()\n\n    return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n  },\n  // Never re-render this component\n  () => true\n)\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (typeof window === 'undefined') return undefined\n  let theme\n  try {\n    theme = localStorage.getItem(key) || undefined\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback\n}\n\nconst getSystemTheme = (e?: MediaQueryList) => {\n  if (!e) {\n    e = window.matchMedia(MEDIA)\n  }\n\n  const isDark = e.matches\n  const systemTheme = isDark ? 'dark' : 'light'\n  return systemTheme\n}\n"],
+  "mappings": "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",
+  "names": ["systemTheme", "theme", "value"]
 }

package/dist/esm/NextTheme.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEvent } from "@tamagui/use-event";
-import NextHead from "next/head";
 import * as React from "react";
 import {
   createContext,
@@ -13,15 +12,9 @@ import {
   useState
 } from "react";
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-const ThemeSettingContext = createContext({
-  toggle: () => {
-  },
-  set: (_) => {
-  },
-  themes: []
-});
-const useTheme = () => useContext(ThemeSettingContext);
-const useThemeSetting = () => useContext(ThemeSettingContext);
+const ThemeContext = createContext(null);
+const useTheme = () => useContext(ThemeContext);
+const useThemeSetting = () => useContext(ThemeContext);
 const colorSchemes = ["light", "dark"];
 const MEDIA = "(prefers-color-scheme: dark)";
 const useRootTheme = () => {
@@ -37,7 +30,19 @@ const useRootTheme = () => {
   }
   return [val, setVal];
 };
-const NextThemeProvider = ({
+const NextThemeProvider = (props) => {
+  const context = useContext(ThemeContext);
+  if (context) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: props.children
+    });
+  }
+  return /* @__PURE__ */ jsx(Theme, {
+    ...props
+  });
+};
+const Theme = ({
+  nonce,
   forcedTheme,
   disableTransitionOnChange = true,
   enableSystem = true,
@@ -67,31 +72,29 @@ const NextThemeProvider = ({
   });
   const mediaListener = useRef(handleMediaQuery);
   mediaListener.current = handleMediaQuery;
-  const handleChangeTheme = useEvent(
-    (theme2, updateStorage = true, updateDOM = true) => {
-      let name = (value == null ? void 0 : value[theme2]) || theme2;
-      if (updateStorage) {
-        try {
-          localStorage.setItem(storageKey, theme2);
-        } catch (e) {
-        }
+  const handleChangeTheme = useEvent((theme2, updateStorage = true, updateDOM = true) => {
+    let name = (value == null ? void 0 : value[theme2]) || theme2;
+    if (updateStorage) {
+      try {
+        localStorage.setItem(storageKey, theme2);
+      } catch (e) {
       }
-      if (theme2 === "system" && enableSystem) {
-        const resolved = getSystemTheme();
-        name = (value == null ? void 0 : value[resolved]) || resolved;
-      }
-      onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
-      if (updateDOM) {
-        const d = document.documentElement;
-        if (attribute === "class") {
-          d.classList.remove(...attrs);
-          d.classList.add(name);
-        } else {
-          d.setAttribute(attribute, name);
-        }
+    }
+    if (theme2 === "system" && enableSystem) {
+      const resolved = getSystemTheme();
+      name = (value == null ? void 0 : value[resolved]) || resolved;
+    }
+    onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
+    if (updateDOM) {
+      const d = document.documentElement;
+      if (attribute === "class") {
+        d.classList.remove(...attrs);
+        d.classList.add(name);
+      } else {
+        d.setAttribute(attribute, name);
       }
     }
-  );
+  });
   useIsomorphicLayoutEffect(() => {
     const handler = (...args) => mediaListener.current(...args);
     const media = window.matchMedia(MEDIA);
@@ -161,19 +164,23 @@ const NextThemeProvider = ({
     themes,
     systemTheme
   ]);
-  return /* @__PURE__ */ jsxs(ThemeSettingContext.Provider, {
+  return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
     value: contextValue,
     children: [
       /* @__PURE__ */ jsx(ThemeScript, {
         ...{
           forcedTheme,
+          disableTransitionOnChange,
           storageKey,
           systemTheme: resolvedTheme,
           attribute,
+          enableColorScheme,
           value,
+          themes,
           enableSystem,
           defaultTheme,
-          attrs
+          attrs,
+          nonce
         }
       }),
       useMemo(() => children, [children])
@@ -186,52 +193,73 @@ const ThemeScript = memo(
     storageKey,
     attribute,
     enableSystem,
+    enableColorScheme,
     defaultTheme,
     value,
-    attrs
+    attrs,
+    nonce
   }) => {
+    const defaultSystem = defaultTheme === "system";
     const optimization = (() => {
       if (attribute === "class") {
-        const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
-        return `var d=document.documentElement.classList;${removeClasses};`;
+        const removeClasses = `c.remove(${attrs.map((t) => `'${t}'`).join(",")})`;
+        return `var d=document.documentElement,c=d.classList;${removeClasses};`;
       } else {
-        return `var d=document.documentElement;`;
+        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;
       }
     })();
-    const updateDOM = (name, literal) => {
-      name = (value == null ? void 0 : value[name]) || name;
-      const val = literal ? name : `'${name}'`;
-      if (attribute === "class") {
-        return `d.add(${val})`;
+    const fallbackColorScheme = (() => {
+      if (!enableColorScheme) {
+        return "";
       }
-      return `d.setAttribute('${attribute}', ${val})`;
-    };
-    const defaultSystem = defaultTheme === "system";
-    return /* @__PURE__ */ jsx(NextHead, {
-      children: forcedTheme ? /* @__PURE__ */ jsx("script", {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
-        }
-      }, "next-themes-script") : enableSystem ? /* @__PURE__ */ jsx("script", {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${!defaultSystem ? updateDOM(defaultTheme) + ";" : ""}if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(
-            "dark"
-          )}:${updateDOM("light")}}else if(e) ${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}catch(e){}}()`
+      const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null;
+      if (fallback) {
+        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+      } else {
+        return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+      }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+      const resolvedName = value ? value[name] : name;
+      const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+      let text = "";
+      if (enableColorScheme && setColorScheme && !literal && colorSchemes.includes(name)) {
+        text += `d.style.colorScheme = '${name}';`;
+      }
+      if (attribute === "class") {
+        if (literal || resolvedName) {
+          text += `c.add(${val})`;
+        } else {
+          text += `null`;
         }
-      }, "next-themes-script") : /* @__PURE__ */ jsx("script", {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){try{${optimization}var e=localStorage.getItem("${storageKey}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}else{${updateDOM(
-            defaultTheme
-          )};}}catch(t){}}();`
+      } else {
+        if (resolvedName) {
+          text += `d[s](n,${val})`;
         }
-      }, "next-themes-script")
+      }
+      return text;
+    };
+    const scriptSrc = (() => {
+      if (forcedTheme) {
+        return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+      }
+      if (enableSystem) {
+        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(
+          "dark"
+        )}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem ? `else{` + updateDOM(defaultTheme, false, false) + "}" : ""}${fallbackColorScheme}}catch(e){}}()`;
+      }
+      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(
+        defaultTheme,
+        false,
+        false
+      )};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    return /* @__PURE__ */ jsx("script", {
+      nonce,
+      dangerouslySetInnerHTML: { __html: scriptSrc }
     });
   },
-  (prevProps, nextProps) => {
-    if (prevProps.forcedTheme !== nextProps.forcedTheme)
-      return false;
-    return true;
-  }
+  () => true
 );
 const getTheme = (key, fallback) => {
   if (typeof window === "undefined")
@@ -253,6 +281,7 @@ const getSystemTheme = (e) => {
 };
 export {
   NextThemeProvider,
+  Theme,
   useRootTheme,
   useTheme,
   useThemeSetting

package/dist/esm/NextTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/NextTheme.tsx"],
-  "sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { useEvent } from '@tamagui/use-event'\nimport NextHead from 'next/head'\nimport * as React from 'react'\nimport {\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport interface UseThemeProps {\n  /** List of all available theme names */\n  themes: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Update the theme */\n  set: (theme: string) => void\n  toggle: () => void\n  /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n  current?: string\n  /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n  theme?: string\n  /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n  resolvedTheme?: string\n  /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n  systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n  children?: any\n  /** List of all available theme names */\n  themes?: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Whether to switch between dark and light themes based on prefers-color-scheme */\n  enableSystem?: boolean\n  systemTheme?: string\n  /** Disable all CSS transitions when switching themes */\n  disableTransitionOnChange?: boolean\n  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n  enableColorScheme?: boolean\n  /** Key used to store theme setting in localStorage */\n  storageKey?: string\n  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n  defaultTheme?: string\n  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n  attribute?: string | 'class'\n  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n  value?: ValueObject\n  onChangeTheme?: (name: string) => void\n}\n\nconst ThemeSettingContext = createContext<UseThemeProps>({\n  toggle: () => {},\n  set: (_) => {},\n  themes: [],\n})\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\nexport const useTheme = () => useContext(ThemeSettingContext)\n\nexport const useThemeSetting = () => useContext(ThemeSettingContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n  [themeName: string]: string\n}\n\n// note this only works for light being default for now...\nexport const useRootTheme = () => {\n  const [val, setVal] = useState('light')\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      // @ts-ignore\n      const classes = [...document.documentElement.classList]\n      const isDark = classes.includes('t_dark')\n      React.startTransition(() => {\n        setVal(isDark ? 'dark' : 'light')\n      })\n    }, [])\n  }\n\n  return [val, setVal] as const\n}\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = ({\n  forcedTheme,\n  disableTransitionOnChange = true,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = colorSchemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'class',\n  onChangeTheme,\n  value = {\n    dark: 't_dark',\n    light: 't_light',\n  },\n  children,\n}) => {\n  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))\n  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))\n  // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)\n  const attrs = !value ? themes : Object.values(value)\n\n  const handleMediaQuery = useEvent((e?) => {\n    const systemTheme = getSystemTheme(e)\n    React.startTransition(() => {\n      setResolvedTheme(systemTheme)\n    })\n    if (theme === 'system' && !forcedTheme) {\n      handleChangeTheme(systemTheme, false)\n    }\n  })\n\n  // Ref hack to avoid adding handleMediaQuery as a dep\n  const mediaListener = useRef(handleMediaQuery)\n  mediaListener.current = handleMediaQuery\n\n  const handleChangeTheme = useEvent(\n    (theme, updateStorage = true, updateDOM = true) => {\n      let name = value?.[theme] || theme\n\n      if (updateStorage) {\n        try {\n          localStorage.setItem(storageKey, theme)\n        } catch (e) {\n          // Unsupported\n        }\n      }\n\n      if (theme === 'system' && enableSystem) {\n        const resolved = getSystemTheme()\n        name = value?.[resolved] || resolved\n      }\n\n      onChangeTheme?.(name.replace('t_', ''))\n\n      if (updateDOM) {\n        const d = document.documentElement\n        if (attribute === 'class') {\n          d.classList.remove(...attrs)\n          d.classList.add(name)\n        } else {\n          d.setAttribute(attribute, name)\n        }\n      }\n    },\n  )\n\n  useIsomorphicLayoutEffect(() => {\n    const handler = (...args: any) => mediaListener.current(...args)\n    // Always listen to System preference\n    const media = window.matchMedia(MEDIA)\n    // Intentionally use deprecated listener methods to support iOS & old browsers\n    media.addListener(handler)\n    handler(media)\n    return () => {\n      media.removeListener(handler)\n    }\n  }, [])\n\n  const set = useEvent((newTheme) => {\n    if (forcedTheme) {\n      handleChangeTheme(newTheme, true, false)\n    } else {\n      handleChangeTheme(newTheme)\n    }\n    setThemeState(newTheme)\n  })\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return\n      }\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme\n      set(theme)\n    }\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [defaultTheme, set, storageKey])\n\n  // color-scheme handling\n  useIsomorphicLayoutEffect(() => {\n    if (!enableColorScheme) return\n\n    const colorScheme =\n      // If theme is forced to light or dark, use that\n      forcedTheme && colorSchemes.includes(forcedTheme)\n        ? forcedTheme\n        : // If regular theme is light or dark\n        theme && colorSchemes.includes(theme)\n        ? theme\n        : // If theme is system, use the resolved version\n        theme === 'system'\n        ? resolvedTheme || null\n        : null\n\n    // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.\n    // if color-scheme is null, this will remove the property\n    const userPrefers =\n      typeof window !== 'undefined' &&\n      window.matchMedia &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n\n    const wePrefer = colorScheme || 'light'\n\n    // avoid running this because it causes full page reflow\n    if (userPrefers !== wePrefer) {\n      document.documentElement.style.setProperty('color-scheme', colorScheme)\n    }\n  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n  const toggle = useEvent(() => {\n    const order =\n      resolvedTheme === 'dark'\n        ? ['system', 'light', 'dark']\n        : ['system', 'dark', 'light']\n    const next = order[(order.indexOf(theme) + 1) % order.length]\n    set(next)\n  })\n\n  const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme\n  const systemTheme = (enableSystem ? resolvedTheme : undefined) as\n    | 'light'\n    | 'dark'\n    | undefined\n  const contextValue = useMemo(() => {\n    const value: UseThemeProps = {\n      theme,\n      current: theme,\n      set,\n      toggle,\n      forcedTheme,\n      resolvedTheme: contextResolvedTheme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme,\n    } as const\n    return value\n  }, [\n    theme,\n    set,\n    toggle,\n    forcedTheme,\n    contextResolvedTheme,\n    enableSystem,\n    themes,\n    systemTheme,\n  ])\n\n  return (\n    <ThemeSettingContext.Provider value={contextValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          storageKey,\n          systemTheme: resolvedTheme,\n          attribute,\n          value,\n          enableSystem,\n          defaultTheme,\n          attrs,\n        }}\n      />\n      {/* because on SSR we re-run and can avoid whole tree re-render */}\n      {useMemo(() => children, [children])}\n    </ThemeSettingContext.Provider>\n  )\n}\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    defaultTheme,\n    value,\n    attrs,\n  }: {\n    forcedTheme?: string\n    storageKey: string\n    attribute?: string\n    enableSystem?: boolean\n    defaultTheme: string\n    value?: ValueObject\n    attrs: any\n  }) => {\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = attrs.map((t: string) => `d.remove('${t}')`).join(';')\n        return `var d=document.documentElement.classList;${removeClasses};`\n      } else {\n        return `var d=document.documentElement;`\n      }\n    })()\n\n    const updateDOM = (name: string, literal?: boolean) => {\n      name = value?.[name] || name\n      const val = literal ? name : `'${name}'`\n\n      if (attribute === 'class') {\n        return `d.add(${val})`\n      }\n\n      return `d.setAttribute('${attribute}', ${val})`\n    }\n\n    const defaultSystem = defaultTheme === 'system'\n\n    return (\n      <NextHead>\n        {forcedTheme ? (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              // These are minified via Terser and then updated by hand, don't recommend\n              __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,\n            }}\n          />\n        ) : enableSystem ? (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${\n                !defaultSystem ? updateDOM(defaultTheme) + ';' : ''\n              }if(\"system\"===e||(!e&&${defaultSystem})){var t=\"${MEDIA}\",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(\n                'dark',\n              )}:${updateDOM('light')}}else if(e) ${\n                value ? `var x=${JSON.stringify(value)};` : ''\n              }${updateDOM(value ? 'x[e]' : 'e', true)}}catch(e){}}()`,\n            }}\n          />\n        ) : (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              __html: `!function(){try{${optimization}var e=localStorage.getItem(\"${storageKey}\");if(e){${\n                value ? `var x=${JSON.stringify(value)};` : ''\n              }${updateDOM(value ? 'x[e]' : 'e', true)}}else{${updateDOM(\n                defaultTheme,\n              )};}}catch(t){}}();`,\n            }}\n          />\n        )}\n      </NextHead>\n    )\n  },\n  (prevProps, nextProps) => {\n    // Only re-render when forcedTheme changes\n    // the rest of the props should be completely stable\n    if (prevProps.forcedTheme !== nextProps.forcedTheme) return false\n    return true\n  },\n)\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (typeof window === 'undefined') return undefined\n  let theme\n  try {\n    theme = localStorage.getItem(key) || undefined\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback\n}\n\nconst getSystemTheme = (e?: MediaQueryList) => {\n  if (!e) {\n    e = window.matchMedia(MEDIA)\n  }\n\n  const isDark = e.matches\n  const systemTheme = isDark ? 'dark' : 'light'\n  return systemTheme\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { useEvent } from '@tamagui/use-event'\nimport * as React from 'react'\nimport {\n  createContext,\n  memo,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport interface UseThemeProps {\n  /** List of all available theme names */\n  themes: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Update the theme */\n  set: (theme: string) => void\n  toggle: () => void\n  /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n  current?: string\n  /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n  theme?: string\n  /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n  resolvedTheme?: string\n  /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n  systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n  children?: any\n  /** List of all available theme names */\n  themes?: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Whether to switch between dark and light themes based on prefers-color-scheme */\n  enableSystem?: boolean\n  systemTheme?: string\n  /** Disable all CSS transitions when switching themes */\n  disableTransitionOnChange?: boolean\n  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n  enableColorScheme?: boolean\n  /** Key used to store theme setting in localStorage */\n  storageKey?: string\n  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n  defaultTheme?: string\n  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n  attribute?: string | 'class'\n  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n  value?: ValueObject\n  onChangeTheme?: (name: string) => void\n  nonce?: string\n}\n\nconst ThemeContext = createContext<UseThemeProps | null>(null)\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\nexport const useTheme = () => useContext(ThemeContext)\n\nexport const useThemeSetting = () => useContext(ThemeContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n  [themeName: string]: string\n}\n\n// note this only works for light being default for now...\nexport const useRootTheme = () => {\n  const [val, setVal] = useState('light')\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      // @ts-ignore\n      const classes = [...document.documentElement.classList]\n      const isDark = classes.includes('t_dark')\n      React.startTransition(() => {\n        setVal(isDark ? 'dark' : 'light')\n      })\n    }, [])\n  }\n\n  return [val, setVal] as const\n}\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = (props) => {\n  const context = useContext(ThemeContext)\n  // Ignore nested context providers, just passthrough children\n  if (context) {\n    return <>{props.children}</>\n  }\n  return <Theme {...props} />\n}\n\nexport const Theme: React.FC<ThemeProviderProps> = ({\n  nonce,\n  forcedTheme,\n  disableTransitionOnChange = true,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = colorSchemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'class',\n  onChangeTheme,\n  value = {\n    dark: 't_dark',\n    light: 't_light',\n  },\n  children,\n}) => {\n  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))\n  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))\n  // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)\n  const attrs = !value ? themes : Object.values(value)\n\n  const handleMediaQuery = useEvent((e?) => {\n    const systemTheme = getSystemTheme(e)\n    React.startTransition(() => {\n      setResolvedTheme(systemTheme)\n    })\n    if (theme === 'system' && !forcedTheme) {\n      handleChangeTheme(systemTheme, false)\n    }\n  })\n\n  // Ref hack to avoid adding handleMediaQuery as a dep\n  const mediaListener = useRef(handleMediaQuery)\n  mediaListener.current = handleMediaQuery\n\n  const handleChangeTheme = useEvent((theme, updateStorage = true, updateDOM = true) => {\n    let name = value?.[theme] || theme\n\n    if (updateStorage) {\n      try {\n        localStorage.setItem(storageKey, theme)\n      } catch (e) {\n        // Unsupported\n      }\n    }\n\n    if (theme === 'system' && enableSystem) {\n      const resolved = getSystemTheme()\n      name = value?.[resolved] || resolved\n    }\n\n    onChangeTheme?.(name.replace('t_', ''))\n\n    if (updateDOM) {\n      const d = document.documentElement\n      if (attribute === 'class') {\n        d.classList.remove(...attrs)\n        d.classList.add(name)\n      } else {\n        d.setAttribute(attribute, name)\n      }\n    }\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    const handler = (...args: any) => mediaListener.current(...args)\n    // Always listen to System preference\n    const media = window.matchMedia(MEDIA)\n    // Intentionally use deprecated listener methods to support iOS & old browsers\n    media.addListener(handler)\n    handler(media)\n    return () => {\n      media.removeListener(handler)\n    }\n  }, [])\n\n  const set = useEvent((newTheme) => {\n    if (forcedTheme) {\n      handleChangeTheme(newTheme, true, false)\n    } else {\n      handleChangeTheme(newTheme)\n    }\n    setThemeState(newTheme)\n  })\n\n  // localStorage event handling\n  useEffect(() => {\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return\n      }\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      const theme = e.newValue || defaultTheme\n      set(theme)\n    }\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [defaultTheme, set, storageKey])\n\n  // color-scheme handling\n  useIsomorphicLayoutEffect(() => {\n    if (!enableColorScheme) return\n\n    const colorScheme =\n      // If theme is forced to light or dark, use that\n      forcedTheme && colorSchemes.includes(forcedTheme)\n        ? forcedTheme\n        : // If regular theme is light or dark\n        theme && colorSchemes.includes(theme)\n        ? theme\n        : // If theme is system, use the resolved version\n        theme === 'system'\n        ? resolvedTheme || null\n        : null\n\n    // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.\n    // if color-scheme is null, this will remove the property\n    const userPrefers =\n      typeof window !== 'undefined' &&\n      window.matchMedia &&\n      window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n\n    const wePrefer = colorScheme || 'light'\n\n    // avoid running this because it causes full page reflow\n    if (userPrefers !== wePrefer) {\n      document.documentElement.style.setProperty('color-scheme', colorScheme)\n    }\n  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n  const toggle = useEvent(() => {\n    const order =\n      resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']\n    const next = order[(order.indexOf(theme) + 1) % order.length]\n    set(next)\n  })\n\n  const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme\n  const systemTheme = (enableSystem ? resolvedTheme : undefined) as\n    | 'light'\n    | 'dark'\n    | undefined\n  const contextValue = useMemo(() => {\n    const value: UseThemeProps = {\n      theme,\n      current: theme,\n      set,\n      toggle,\n      forcedTheme,\n      resolvedTheme: contextResolvedTheme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme,\n    } as const\n    return value\n  }, [\n    theme,\n    set,\n    toggle,\n    forcedTheme,\n    contextResolvedTheme,\n    enableSystem,\n    themes,\n    systemTheme,\n  ])\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemeScript\n        {...{\n          forcedTheme,\n          disableTransitionOnChange,\n          storageKey,\n          systemTheme: resolvedTheme,\n          attribute,\n          enableColorScheme,\n          value,\n          themes,\n          enableSystem,\n          defaultTheme,\n          attrs,\n          nonce,\n        }}\n      />\n      {/* because on SSR we re-run and can avoid whole tree re-render */}\n      {useMemo(() => children, [children])}\n    </ThemeContext.Provider>\n  )\n}\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    enableColorScheme,\n    defaultTheme,\n    value,\n    attrs,\n    nonce,\n  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n    const defaultSystem = defaultTheme === 'system'\n\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = `c.remove(${attrs.map((t: string) => `'${t}'`).join(',')})`\n\n        return `var d=document.documentElement,c=d.classList;${removeClasses};`\n      } else {\n        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`\n      }\n    })()\n\n    const fallbackColorScheme = (() => {\n      if (!enableColorScheme) {\n        return ''\n      }\n\n      const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null\n\n      if (fallback) {\n        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`\n      } else {\n        return `if(e==='light'||e==='dark')d.style.colorScheme=e`\n      }\n    })()\n\n    const updateDOM = (name: string, literal: boolean = false, setColorScheme = true) => {\n      const resolvedName = value ? value[name] : name\n      const val = literal ? name + `|| ''` : `'${resolvedName}'`\n      let text = ''\n\n      // MUCH faster to set colorScheme alongside HTML attribute/class\n      // as it only incurs 1 style recalculation rather than 2\n      // This can save over 250ms of work for pages with big DOM\n      if (\n        enableColorScheme &&\n        setColorScheme &&\n        !literal &&\n        colorSchemes.includes(name)\n      ) {\n        text += `d.style.colorScheme = '${name}';`\n      }\n\n      if (attribute === 'class') {\n        if (literal || resolvedName) {\n          text += `c.add(${val})`\n        } else {\n          text += `null`\n        }\n      } else {\n        if (resolvedName) {\n          text += `d[s](n,${val})`\n        }\n      }\n\n      return text\n    }\n\n    const scriptSrc = (() => {\n      if (forcedTheme) {\n        return `!function(){${optimization}${updateDOM(forcedTheme)}}()`\n      }\n\n      if (enableSystem) {\n        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n          'dark'\n        )}}else{${updateDOM('light')}}}else if(e){${\n          value ? `var x=${JSON.stringify(value)};` : ''\n        }${updateDOM(value ? `x[e]` : 'e', true)}}${\n          !defaultSystem ? `else{` + updateDOM(defaultTheme, false, false) + '}' : ''\n        }${fallbackColorScheme}}catch(e){}}()`\n      }\n\n      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n        value ? `var x=${JSON.stringify(value)};` : ''\n      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(\n        defaultTheme,\n        false,\n        false\n      )};}${fallbackColorScheme}}catch(t){}}();`\n    })()\n\n    return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n  },\n  // Never re-render this component\n  () => true\n)\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n  if (typeof window === 'undefined') return undefined\n  let theme\n  try {\n    theme = localStorage.getItem(key) || undefined\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback\n}\n\nconst getSystemTheme = (e?: MediaQueryList) => {\n  if (!e) {\n    e = window.matchMedia(MEDIA)\n  }\n\n  const isDark = e.matches\n  const systemTheme = isDark ? 'dark' : 'light'\n  return systemTheme\n}\n"],
+  "mappings": "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",
   "names": ["systemTheme", "theme", "value"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/next-theme",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -16,13 +16,13 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/use-event": "^1.0.9"
+    "@tamagui/use-event": "^1.0.11"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.9",
+    "@tamagui/build": "^1.0.11",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/src/NextTheme.tsx

@@ -2,7 +2,6 @@
 // forked temporarily due to buggy theme change
 
 import { useEvent } from '@tamagui/use-event'
-import NextHead from 'next/head'
 import * as React from 'react'
 import {
   createContext,
@@ -58,20 +57,17 @@ export interface ThemeProviderProps {
   /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
   value?: ValueObject
   onChangeTheme?: (name: string) => void
+  nonce?: string
 }
 
-const ThemeSettingContext = createContext<UseThemeProps>({
-  toggle: () => {},
-  set: (_) => {},
-  themes: [],
-})
+const ThemeContext = createContext<UseThemeProps | null>(null)
 
 /**
  * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
  */
-export const useTheme = () => useContext(ThemeSettingContext)
+export const useTheme = () => useContext(ThemeContext)
 
-export const useThemeSetting = () => useContext(ThemeSettingContext)
+export const useThemeSetting = () => useContext(ThemeContext)
 
 const colorSchemes = ['light', 'dark']
 const MEDIA = '(prefers-color-scheme: dark)'
@@ -98,7 +94,17 @@ export const useRootTheme = () => {
   return [val, setVal] as const
 }
 
-export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
+export const NextThemeProvider: React.FC<ThemeProviderProps> = (props) => {
+  const context = useContext(ThemeContext)
+  // Ignore nested context providers, just passthrough children
+  if (context) {
+    return <>{props.children}</>
+  }
+  return <Theme {...props} />
+}
+
+export const Theme: React.FC<ThemeProviderProps> = ({
+  nonce,
   forcedTheme,
   disableTransitionOnChange = true,
   enableSystem = true,
@@ -133,36 +139,34 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
   const mediaListener = useRef(handleMediaQuery)
   mediaListener.current = handleMediaQuery
 
-  const handleChangeTheme = useEvent(
-    (theme, updateStorage = true, updateDOM = true) => {
-      let name = value?.[theme] || theme
+  const handleChangeTheme = useEvent((theme, updateStorage = true, updateDOM = true) => {
+    let name = value?.[theme] || theme
 
-      if (updateStorage) {
-        try {
-          localStorage.setItem(storageKey, theme)
-        } catch (e) {
-          // Unsupported
-        }
+    if (updateStorage) {
+      try {
+        localStorage.setItem(storageKey, theme)
+      } catch (e) {
+        // Unsupported
       }
+    }
 
-      if (theme === 'system' && enableSystem) {
-        const resolved = getSystemTheme()
-        name = value?.[resolved] || resolved
-      }
+    if (theme === 'system' && enableSystem) {
+      const resolved = getSystemTheme()
+      name = value?.[resolved] || resolved
+    }
 
-      onChangeTheme?.(name.replace('t_', ''))
+    onChangeTheme?.(name.replace('t_', ''))
 
-      if (updateDOM) {
-        const d = document.documentElement
-        if (attribute === 'class') {
-          d.classList.remove(...attrs)
-          d.classList.add(name)
-        } else {
-          d.setAttribute(attribute, name)
-        }
+    if (updateDOM) {
+      const d = document.documentElement
+      if (attribute === 'class') {
+        d.classList.remove(...attrs)
+        d.classList.add(name)
+      } else {
+        d.setAttribute(attribute, name)
       }
-    },
-  )
+    }
+  })
 
   useIsomorphicLayoutEffect(() => {
     const handler = (...args: any) => mediaListener.current(...args)
@@ -236,9 +240,7 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
 
   const toggle = useEvent(() => {
     const order =
-      resolvedTheme === 'dark'
-        ? ['system', 'light', 'dark']
-        : ['system', 'dark', 'light']
+      resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']
     const next = order[(order.indexOf(theme) + 1) % order.length]
     set(next)
   })
@@ -272,22 +274,26 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
   ])
 
   return (
-    <ThemeSettingContext.Provider value={contextValue}>
+    <ThemeContext.Provider value={contextValue}>
       <ThemeScript
         {...{
           forcedTheme,
+          disableTransitionOnChange,
           storageKey,
           systemTheme: resolvedTheme,
           attribute,
+          enableColorScheme,
           value,
+          themes,
           enableSystem,
           defaultTheme,
           attrs,
+          nonce,
         }}
       />
       {/* because on SSR we re-run and can avoid whole tree re-render */}
       {useMemo(() => children, [children])}
-    </ThemeSettingContext.Provider>
+    </ThemeContext.Provider>
   )
 }
 
@@ -297,85 +303,99 @@ const ThemeScript = memo(
     storageKey,
     attribute,
     enableSystem,
+    enableColorScheme,
     defaultTheme,
     value,
     attrs,
-  }: {
-    forcedTheme?: string
-    storageKey: string
-    attribute?: string
-    enableSystem?: boolean
-    defaultTheme: string
-    value?: ValueObject
-    attrs: any
-  }) => {
+    nonce,
+  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {
+    const defaultSystem = defaultTheme === 'system'
+
     // Code-golfing the amount of characters in the script
     const optimization = (() => {
       if (attribute === 'class') {
-        const removeClasses = attrs.map((t: string) => `d.remove('${t}')`).join(';')
-        return `var d=document.documentElement.classList;${removeClasses};`
+        const removeClasses = `c.remove(${attrs.map((t: string) => `'${t}'`).join(',')})`
+
+        return `var d=document.documentElement,c=d.classList;${removeClasses};`
+      } else {
+        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`
+      }
+    })()
+
+    const fallbackColorScheme = (() => {
+      if (!enableColorScheme) {
+        return ''
+      }
+
+      const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null
+
+      if (fallback) {
+        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`
       } else {
-        return `var d=document.documentElement;`
+        return `if(e==='light'||e==='dark')d.style.colorScheme=e`
       }
     })()
 
-    const updateDOM = (name: string, literal?: boolean) => {
-      name = value?.[name] || name
-      const val = literal ? name : `'${name}'`
+    const updateDOM = (name: string, literal: boolean = false, setColorScheme = true) => {
+      const resolvedName = value ? value[name] : name
+      const val = literal ? name + `|| ''` : `'${resolvedName}'`
+      let text = ''
+
+      // MUCH faster to set colorScheme alongside HTML attribute/class
+      // as it only incurs 1 style recalculation rather than 2
+      // This can save over 250ms of work for pages with big DOM
+      if (
+        enableColorScheme &&
+        setColorScheme &&
+        !literal &&
+        colorSchemes.includes(name)
+      ) {
+        text += `d.style.colorScheme = '${name}';`
+      }
 
       if (attribute === 'class') {
-        return `d.add(${val})`
+        if (literal || resolvedName) {
+          text += `c.add(${val})`
+        } else {
+          text += `null`
+        }
+      } else {
+        if (resolvedName) {
+          text += `d[s](n,${val})`
+        }
       }
 
-      return `d.setAttribute('${attribute}', ${val})`
+      return text
     }
 
-    const defaultSystem = defaultTheme === 'system'
+    const scriptSrc = (() => {
+      if (forcedTheme) {
+        return `!function(){${optimization}${updateDOM(forcedTheme)}}()`
+      }
 
-    return (
-      <NextHead>
-        {forcedTheme ? (
-          <script
-            key="next-themes-script"
-            dangerouslySetInnerHTML={{
-              // These are minified via Terser and then updated by hand, don't recommend
-              __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,
-            }}
-          />
-        ) : enableSystem ? (
-          <script
-            key="next-themes-script"
-            dangerouslySetInnerHTML={{
-              __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${
-                !defaultSystem ? updateDOM(defaultTheme) + ';' : ''
-              }if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(
-                'dark',
-              )}:${updateDOM('light')}}else if(e) ${
-                value ? `var x=${JSON.stringify(value)};` : ''
-              }${updateDOM(value ? 'x[e]' : 'e', true)}}catch(e){}}()`,
-            }}
-          />
-        ) : (
-          <script
-            key="next-themes-script"
-            dangerouslySetInnerHTML={{
-              __html: `!function(){try{${optimization}var e=localStorage.getItem("${storageKey}");if(e){${
-                value ? `var x=${JSON.stringify(value)};` : ''
-              }${updateDOM(value ? 'x[e]' : 'e', true)}}else{${updateDOM(
-                defaultTheme,
-              )};}}catch(t){}}();`,
-            }}
-          />
-        )}
-      </NextHead>
-    )
-  },
-  (prevProps, nextProps) => {
-    // Only re-render when forcedTheme changes
-    // the rest of the props should be completely stable
-    if (prevProps.forcedTheme !== nextProps.forcedTheme) return false
-    return true
+      if (enableSystem) {
+        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(
+          'dark'
+        )}}else{${updateDOM('light')}}}else if(e){${
+          value ? `var x=${JSON.stringify(value)};` : ''
+        }${updateDOM(value ? `x[e]` : 'e', true)}}${
+          !defaultSystem ? `else{` + updateDOM(defaultTheme, false, false) + '}' : ''
+        }${fallbackColorScheme}}catch(e){}}()`
+      }
+
+      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${
+        value ? `var x=${JSON.stringify(value)};` : ''
+      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(
+        defaultTheme,
+        false,
+        false
+      )};}${fallbackColorScheme}}catch(t){}}();`
+    })()
+
+    return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />
   },
+  // Never re-render this component
+  () => true
 )
 
 // Helpers

package/types/NextTheme.d.ts

@@ -38,16 +38,18 @@ export interface ThemeProviderProps {
     /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
     value?: ValueObject;
     onChangeTheme?: (name: string) => void;
+    nonce?: string;
 }
 /**
  * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
  */
-export declare const useTheme: () => UseThemeProps;
-export declare const useThemeSetting: () => UseThemeProps;
+export declare const useTheme: () => UseThemeProps | null;
+export declare const useThemeSetting: () => UseThemeProps | null;
 interface ValueObject {
     [themeName: string]: string;
 }
 export declare const useRootTheme: () => readonly [string, React.Dispatch<React.SetStateAction<string>>];
 export declare const NextThemeProvider: React.FC<ThemeProviderProps>;
+export declare const Theme: React.FC<ThemeProviderProps>;
 export {};
 //# sourceMappingURL=NextTheme.d.ts.map