@tamagui/next-theme 1.0.1-beta.100

package/dist/cjs/NextTheme.js

@@ -0,0 +1,264 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NextTheme_exports = {};
+__export(NextTheme_exports, {
+  NextThemeProvider: () => NextThemeProvider,
+  useRootTheme: () => useRootTheme,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(NextTheme_exports);
+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 ThemeContext = (0, import_react.createContext)({
+  toggleTheme: () => {
+  },
+  setTheme: (_) => {
+  },
+  themes: []
+});
+const useTheme = () => (0, import_react.useContext)(ThemeContext);
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const useRootTheme = () => {
+  const isClient = typeof document !== "undefined";
+  const classes = isClient ? [...document.documentElement.classList] : [];
+  const isDark = classes.includes("t_dark");
+  return (0, import_react.useState)(isDark ? "dark" : "light");
+};
+const startTransition = React.startTransition || ((cb) => cb());
+const NextThemeProvider = ({
+  forcedTheme,
+  disableTransitionOnChange = true,
+  enableSystem = true,
+  enableColorScheme = true,
+  storageKey = "theme",
+  themes = ["light", "dark"],
+  defaultTheme = enableSystem ? "system" : "light",
+  attribute = "class",
+  onChangeTheme,
+  value = {
+    dark: "t_dark",
+    light: "t_light"
+  },
+  children
+}) => {
+  const [theme, setThemeState] = (0, import_react.useState)(() => getTheme(storageKey, defaultTheme));
+  const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(() => getTheme(storageKey));
+  const attrs = !value ? themes : Object.values(value);
+  const handleMediaQuery = (0, import_react.useCallback)((e) => {
+    const systemTheme = getSystemTheme(e);
+    startTransition(() => {
+      setResolvedTheme(systemTheme);
+    });
+    if (theme === "system" && !forcedTheme)
+      handleChangeTheme(systemTheme, false);
+  }, [theme, forcedTheme]);
+  const mediaListener = (0, import_react.useRef)(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  const handleChangeTheme = (0, import_react.useCallback)((theme2, updateStorage = true, updateDOM = true) => {
+    let name = (value == null ? void 0 : value[theme2]) || theme2;
+    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
+    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);
+      }
+      enable == null ? void 0 : enable();
+    }
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const handler = (...args) => mediaListener.current(...args);
+    const media = window.matchMedia(MEDIA);
+    media.addListener(handler);
+    handler(media);
+    return () => {
+      media.removeListener(handler);
+    };
+  }, []);
+  const setTheme = (0, import_react.useCallback)((newTheme) => {
+    if (forcedTheme) {
+      handleChangeTheme(newTheme, true, false);
+    } else {
+      handleChangeTheme(newTheme);
+    }
+    setThemeState(newTheme);
+  }, [forcedTheme]);
+  (0, import_react.useEffect)(() => {
+    const handleStorage = (e) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+      const theme2 = e.newValue || defaultTheme;
+      setTheme(theme2);
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!enableColorScheme)
+      return;
+    const colorScheme = forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : theme && colorSchemes.includes(theme) ? theme : theme === "system" ? resolvedTheme || null : null;
+    document.documentElement.style.setProperty("color-scheme", colorScheme);
+  }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
+  const contextValue = (0, import_react.useMemo)(() => {
+    return {
+      theme,
+      setTheme,
+      toggleTheme() {
+        const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
+        const next = order[(order.indexOf(theme) + 1) % order.length];
+        setTheme(next);
+      },
+      forcedTheme,
+      resolvedTheme: theme === "system" ? resolvedTheme : theme,
+      themes: enableSystem ? [...themes, "system"] : themes,
+      systemTheme: enableSystem ? resolvedTheme : void 0
+    };
+  }, [theme, forcedTheme, resolvedTheme, enableSystem]);
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ React.createElement(ThemeScript, __spreadValues({}, {
+    forcedTheme,
+    storageKey,
+    systemTheme: resolvedTheme,
+    attribute,
+    value,
+    enableSystem,
+    defaultTheme,
+    attrs
+  })), children);
+};
+const ThemeScript = (0, import_react.memo)(({
+  forcedTheme,
+  storageKey,
+  attribute,
+  enableSystem,
+  defaultTheme,
+  value,
+  attrs
+}) => {
+  const optimization = (() => {
+    if (attribute === "class") {
+      const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
+      return `var d=document.documentElement.classList;${removeClasses};`;
+    } else {
+      return `var d=document.documentElement;`;
+    }
+  })();
+  const updateDOM = (name, literal) => {
+    name = (value == null ? void 0 : value[name]) || name;
+    const val = literal ? name : `'${name}'`;
+    if (attribute === "class") {
+      return `d.add(${val})`;
+    }
+    return `d.setAttribute('${attribute}', ${val})`;
+  };
+  const defaultSystem = defaultTheme === "system";
+  return /* @__PURE__ */ React.createElement(import_head.default, null, forcedTheme ? /* @__PURE__ */ React.createElement("script", {
+    key: "next-themes-script",
+    dangerouslySetInnerHTML: {
+      __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
+    }
+  }) : enableSystem ? /* @__PURE__ */ React.createElement("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){}}()`
+    }
+  }) : /* @__PURE__ */ React.createElement("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){}}();`
+    }
+  }));
+}, (prevProps, nextProps) => {
+  if (prevProps.forcedTheme !== nextProps.forcedTheme)
+    return false;
+  return true;
+});
+const getTheme = (key, fallback) => {
+  if (typeof window === "undefined")
+    return void 0;
+  let theme;
+  try {
+    theme = localStorage.getItem(key) || void 0;
+  } catch (e) {
+  }
+  return theme || fallback;
+};
+const disableAnimation = () => {
+  const css = document.createElement("style");
+  css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+  document.head.appendChild(css);
+  return () => {
+    ;
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+};
+const getSystemTheme = (e) => {
+  if (!e) {
+    e = window.matchMedia(MEDIA);
+  }
+  const isDark = e.matches;
+  const systemTheme = isDark ? "dark" : "light";
+  return systemTheme;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NextThemeProvider,
+  useRootTheme,
+  useTheme
+});
+//# sourceMappingURL=NextTheme.js.map

package/dist/cjs/NextTheme.js.map

@@ -0,0 +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 NextHead from 'next/head'\nimport * as React from 'react'\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect = 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  setTheme: (theme: string) => void\n  toggleTheme: () => void\n  /** Active theme name */\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 ThemeContext = createContext<UseThemeProps>({\n  toggleTheme: () => {},\n  setTheme: (_) => {},\n  themes: [],\n})\nexport const useTheme = () => useContext(ThemeContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n  [themeName: string]: string\n}\n\nexport const useRootTheme = () => {\n  const isClient = typeof document !== 'undefined'\n  // @ts-ignore\n  const classes = isClient ? [...document.documentElement.classList] : []\n  const isDark = classes.includes('t_dark')\n  return useState(isDark ? 'dark' : 'light')\n}\n\n// backwards compat\nconst startTransition = React.startTransition || ((cb) => cb())\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = ({\n  forcedTheme,\n  disableTransitionOnChange = true,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = ['light', 'dark'],\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 = useCallback(\n    (e?) => {\n      const systemTheme = getSystemTheme(e)\n      startTransition(() => {\n        setResolvedTheme(systemTheme)\n      })\n      if (theme === 'system' && !forcedTheme) handleChangeTheme(systemTheme, false)\n    },\n    [theme, forcedTheme]\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 = useCallback((theme, updateStorage = true, updateDOM = true) => {\n    let name = value?.[theme] || theme\n\n    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null\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\n      if (attribute === 'class') {\n        d.classList.remove(...attrs)\n        d.classList.add(name)\n      } else {\n        d.setAttribute(attribute, name)\n      }\n      enable?.()\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 setTheme = useCallback(\n    (newTheme) => {\n      if (forcedTheme) {\n        handleChangeTheme(newTheme, true, false)\n      } else {\n        handleChangeTheme(newTheme)\n      }\n      setThemeState(newTheme)\n    },\n    [forcedTheme]\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      setTheme(theme)\n    }\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [])\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    document.documentElement.style.setProperty('color-scheme', colorScheme)\n  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n  const contextValue = useMemo(() => {\n    return {\n      theme,\n      setTheme,\n      toggleTheme() {\n        const order =\n          resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']\n        const next = order[(order.indexOf(theme) + 1) % order.length]\n        setTheme(next)\n      },\n      forcedTheme,\n      resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined,\n    } as const\n  }, [theme, forcedTheme, resolvedTheme, enableSystem])\n\n  return (\n    <ThemeContext.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      {children}\n    </ThemeContext.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              // prettier-ignore\n              __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,\n            }}\n          />\n        ) : enableSystem ? (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              // prettier-ignore\n              __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){}}()`,\n            }}\n          />\n        ) : (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              // prettier-ignore\n              __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){}}();`,\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 disableAnimation = () => {\n  const css = document.createElement('style')\n  css.appendChild(\n    document.createTextNode(\n      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n    )\n  )\n  document.head.appendChild(css)\n\n  return () => {\n    // Force restyle\n    ;(() => window.getComputedStyle(document.body))()\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css)\n    }, 1)\n  }\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": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./NextTheme"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './NextTheme'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,wBAAd;",
+  "names": []
+}

package/dist/esm/NextTheme.js

@@ -0,0 +1,248 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import NextHead from "next/head";
+import * as React from "react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const ThemeContext = createContext({
+  toggleTheme: () => {
+  },
+  setTheme: (_) => {
+  },
+  themes: []
+});
+const useTheme = () => useContext(ThemeContext);
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const useRootTheme = () => {
+  const isClient = typeof document !== "undefined";
+  const classes = isClient ? [...document.documentElement.classList] : [];
+  const isDark = classes.includes("t_dark");
+  return useState(isDark ? "dark" : "light");
+};
+const startTransition = React.startTransition || ((cb) => cb());
+const NextThemeProvider = ({
+  forcedTheme,
+  disableTransitionOnChange = true,
+  enableSystem = true,
+  enableColorScheme = true,
+  storageKey = "theme",
+  themes = ["light", "dark"],
+  defaultTheme = enableSystem ? "system" : "light",
+  attribute = "class",
+  onChangeTheme,
+  value = {
+    dark: "t_dark",
+    light: "t_light"
+  },
+  children
+}) => {
+  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
+  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
+  const attrs = !value ? themes : Object.values(value);
+  const handleMediaQuery = useCallback((e) => {
+    const systemTheme = getSystemTheme(e);
+    startTransition(() => {
+      setResolvedTheme(systemTheme);
+    });
+    if (theme === "system" && !forcedTheme)
+      handleChangeTheme(systemTheme, false);
+  }, [theme, forcedTheme]);
+  const mediaListener = useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  const handleChangeTheme = useCallback((theme2, updateStorage = true, updateDOM = true) => {
+    let name = (value == null ? void 0 : value[theme2]) || theme2;
+    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
+    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);
+      }
+      enable == null ? void 0 : enable();
+    }
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const handler = (...args) => mediaListener.current(...args);
+    const media = window.matchMedia(MEDIA);
+    media.addListener(handler);
+    handler(media);
+    return () => {
+      media.removeListener(handler);
+    };
+  }, []);
+  const setTheme = useCallback((newTheme) => {
+    if (forcedTheme) {
+      handleChangeTheme(newTheme, true, false);
+    } else {
+      handleChangeTheme(newTheme);
+    }
+    setThemeState(newTheme);
+  }, [forcedTheme]);
+  useEffect(() => {
+    const handleStorage = (e) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+      const theme2 = e.newValue || defaultTheme;
+      setTheme(theme2);
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!enableColorScheme)
+      return;
+    const colorScheme = forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : theme && colorSchemes.includes(theme) ? theme : theme === "system" ? resolvedTheme || null : null;
+    document.documentElement.style.setProperty("color-scheme", colorScheme);
+  }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
+  const contextValue = useMemo(() => {
+    return {
+      theme,
+      setTheme,
+      toggleTheme() {
+        const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
+        const next = order[(order.indexOf(theme) + 1) % order.length];
+        setTheme(next);
+      },
+      forcedTheme,
+      resolvedTheme: theme === "system" ? resolvedTheme : theme,
+      themes: enableSystem ? [...themes, "system"] : themes,
+      systemTheme: enableSystem ? resolvedTheme : void 0
+    };
+  }, [theme, forcedTheme, resolvedTheme, enableSystem]);
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ React.createElement(ThemeScript, __spreadValues({}, {
+    forcedTheme,
+    storageKey,
+    systemTheme: resolvedTheme,
+    attribute,
+    value,
+    enableSystem,
+    defaultTheme,
+    attrs
+  })), children);
+};
+const ThemeScript = memo(({
+  forcedTheme,
+  storageKey,
+  attribute,
+  enableSystem,
+  defaultTheme,
+  value,
+  attrs
+}) => {
+  const optimization = (() => {
+    if (attribute === "class") {
+      const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
+      return `var d=document.documentElement.classList;${removeClasses};`;
+    } else {
+      return `var d=document.documentElement;`;
+    }
+  })();
+  const updateDOM = (name, literal) => {
+    name = (value == null ? void 0 : value[name]) || name;
+    const val = literal ? name : `'${name}'`;
+    if (attribute === "class") {
+      return `d.add(${val})`;
+    }
+    return `d.setAttribute('${attribute}', ${val})`;
+  };
+  const defaultSystem = defaultTheme === "system";
+  return /* @__PURE__ */ React.createElement(NextHead, null, forcedTheme ? /* @__PURE__ */ React.createElement("script", {
+    key: "next-themes-script",
+    dangerouslySetInnerHTML: {
+      __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
+    }
+  }) : enableSystem ? /* @__PURE__ */ React.createElement("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){}}()`
+    }
+  }) : /* @__PURE__ */ React.createElement("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){}}();`
+    }
+  }));
+}, (prevProps, nextProps) => {
+  if (prevProps.forcedTheme !== nextProps.forcedTheme)
+    return false;
+  return true;
+});
+const getTheme = (key, fallback) => {
+  if (typeof window === "undefined")
+    return void 0;
+  let theme;
+  try {
+    theme = localStorage.getItem(key) || void 0;
+  } catch (e) {
+  }
+  return theme || fallback;
+};
+const disableAnimation = () => {
+  const css = document.createElement("style");
+  css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+  document.head.appendChild(css);
+  return () => {
+    ;
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+};
+const getSystemTheme = (e) => {
+  if (!e) {
+    e = window.matchMedia(MEDIA);
+  }
+  const isDark = e.matches;
+  const systemTheme = isDark ? "dark" : "light";
+  return systemTheme;
+};
+export {
+  NextThemeProvider,
+  useRootTheme,
+  useTheme
+};
+//# sourceMappingURL=NextTheme.js.map

package/dist/esm/NextTheme.js.map

@@ -0,0 +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 NextHead from 'next/head'\nimport * as React from 'react'\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect = 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  setTheme: (theme: string) => void\n  toggleTheme: () => void\n  /** Active theme name */\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 ThemeContext = createContext<UseThemeProps>({\n  toggleTheme: () => {},\n  setTheme: (_) => {},\n  themes: [],\n})\nexport const useTheme = () => useContext(ThemeContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n  [themeName: string]: string\n}\n\nexport const useRootTheme = () => {\n  const isClient = typeof document !== 'undefined'\n  // @ts-ignore\n  const classes = isClient ? [...document.documentElement.classList] : []\n  const isDark = classes.includes('t_dark')\n  return useState(isDark ? 'dark' : 'light')\n}\n\n// backwards compat\nconst startTransition = React.startTransition || ((cb) => cb())\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = ({\n  forcedTheme,\n  disableTransitionOnChange = true,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = ['light', 'dark'],\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 = useCallback(\n    (e?) => {\n      const systemTheme = getSystemTheme(e)\n      startTransition(() => {\n        setResolvedTheme(systemTheme)\n      })\n      if (theme === 'system' && !forcedTheme) handleChangeTheme(systemTheme, false)\n    },\n    [theme, forcedTheme]\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 = useCallback((theme, updateStorage = true, updateDOM = true) => {\n    let name = value?.[theme] || theme\n\n    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null\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\n      if (attribute === 'class') {\n        d.classList.remove(...attrs)\n        d.classList.add(name)\n      } else {\n        d.setAttribute(attribute, name)\n      }\n      enable?.()\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 setTheme = useCallback(\n    (newTheme) => {\n      if (forcedTheme) {\n        handleChangeTheme(newTheme, true, false)\n      } else {\n        handleChangeTheme(newTheme)\n      }\n      setThemeState(newTheme)\n    },\n    [forcedTheme]\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      setTheme(theme)\n    }\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [])\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    document.documentElement.style.setProperty('color-scheme', colorScheme)\n  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n  const contextValue = useMemo(() => {\n    return {\n      theme,\n      setTheme,\n      toggleTheme() {\n        const order =\n          resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']\n        const next = order[(order.indexOf(theme) + 1) % order.length]\n        setTheme(next)\n      },\n      forcedTheme,\n      resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined,\n    } as const\n  }, [theme, forcedTheme, resolvedTheme, enableSystem])\n\n  return (\n    <ThemeContext.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      {children}\n    </ThemeContext.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              // prettier-ignore\n              __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,\n            }}\n          />\n        ) : enableSystem ? (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              // prettier-ignore\n              __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){}}()`,\n            }}\n          />\n        ) : (\n          <script\n            key=\"next-themes-script\"\n            dangerouslySetInnerHTML={{\n              // prettier-ignore\n              __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){}}();`,\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 disableAnimation = () => {\n  const css = document.createElement('style')\n  css.appendChild(\n    document.createTextNode(\n      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n    )\n  )\n  document.head.appendChild(css)\n\n  return () => {\n    // Force restyle\n    ;(() => window.getComputedStyle(document.body))()\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css)\n    }, 1)\n  }\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": ";;;;;;;;;;;;;;;;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,MAAM,4BAA4B,OAAO,WAAW,cAAc,kBAAkB;AA0CpF,MAAM,eAAe,cAA6B;AAAA,EAChD,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,UAAU,CAAC,MAAM;AAAA,EAAC;AAAA,EAClB,QAAQ,CAAC;AACX,CAAC;AACM,MAAM,WAAW,MAAM,WAAW,YAAY;AAErD,MAAM,eAAe,CAAC,SAAS,MAAM;AACrC,MAAM,QAAQ;AAMP,MAAM,eAAe,MAAM;AAChC,QAAM,WAAW,OAAO,aAAa;AAErC,QAAM,UAAU,WAAW,CAAC,GAAG,SAAS,gBAAgB,SAAS,IAAI,CAAC;AACtE,QAAM,SAAS,QAAQ,SAAS,QAAQ;AACxC,SAAO,SAAS,SAAS,SAAS,OAAO;AAC3C;AAGA,MAAM,kBAAkB,MAAM,mBAAoB,EAAC,OAAO,GAAG;AAEtD,MAAM,oBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,SAAS,CAAC,SAAS,MAAM;AAAA,EACzB,eAAe,eAAe,WAAW;AAAA,EACzC,YAAY;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,OAAO,iBAAiB,SAAS,MAAM,SAAS,YAAY,YAAY,CAAC;AAChF,QAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM,SAAS,UAAU,CAAC;AAE7E,QAAM,QAAQ,CAAC,QAAQ,SAAS,OAAO,OAAO,KAAK;AAEnD,QAAM,mBAAmB,YACvB,CAAC,MAAO;AACN,UAAM,cAAc,eAAe,CAAC;AACpC,oBAAgB,MAAM;AACpB,uBAAiB,WAAW;AAAA,IAC9B,CAAC;AACD,QAAI,UAAU,YAAY,CAAC;AAAa,wBAAkB,aAAa,KAAK;AAAA,EAC9E,GACA,CAAC,OAAO,WAAW,CACrB;AAGA,QAAM,gBAAgB,OAAO,gBAAgB;AAC7C,gBAAc,UAAU;AAExB,QAAM,oBAAoB,YAAY,CAAC,QAAO,gBAAgB,MAAM,YAAY,SAAS;AACvF,QAAI,OAAO,gCAAQ,YAAU;AAE7B,UAAM,SAAS,6BAA6B,YAAY,iBAAiB,IAAI;AAE7E,QAAI,eAAe;AACjB,UAAI;AACF,qBAAa,QAAQ,YAAY,MAAK;AAAA,MACxC,SAAS,GAAP;AAAA,MAEF;AAAA,IACF;AAEA,QAAI,WAAU,YAAY,cAAc;AACtC,YAAM,WAAW,eAAe;AAChC,aAAO,gCAAQ,cAAa;AAAA,IAC9B;AAEA,mDAAgB,KAAK,QAAQ,MAAM,EAAE;AAErC,QAAI,WAAW;AACb,YAAM,IAAI,SAAS;AAEnB,UAAI,cAAc,SAAS;AACzB,UAAE,UAAU,OAAO,GAAG,KAAK;AAC3B,UAAE,UAAU,IAAI,IAAI;AAAA,MACtB,OAAO;AACL,UAAE,aAAa,WAAW,IAAI;AAAA,MAChC;AACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,4BAA0B,MAAM;AAC9B,UAAM,UAAU,IAAI,SAAc,cAAc,QAAQ,GAAG,IAAI;AAE/D,UAAM,QAAQ,OAAO,WAAW,KAAK;AAErC,UAAM,YAAY,OAAO;AACzB,YAAQ,KAAK;AACb,WAAO,MAAM;AACX,YAAM,eAAe,OAAO;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,YACf,CAAC,aAAa;AACZ,QAAI,aAAa;AACf,wBAAkB,UAAU,MAAM,KAAK;AAAA,IACzC,OAAO;AACL,wBAAkB,QAAQ;AAAA,IAC5B;AACA,kBAAc,QAAQ;AAAA,EACxB,GACA,CAAC,WAAW,CACd;AAGA,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,MAAoB;AACzC,UAAI,EAAE,QAAQ,YAAY;AACxB;AAAA,MACF;AAEA,YAAM,SAAQ,EAAE,YAAY;AAC5B,eAAS,MAAK;AAAA,IAChB;AACA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,aAAa;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,4BAA0B,MAAM;AAC9B,QAAI,CAAC;AAAmB;AAExB,UAAM,cAEJ,eAAe,aAAa,SAAS,WAAW,IAC5C,cAEF,SAAS,aAAa,SAAS,KAAK,IAClC,QAEF,UAAU,WACR,iBAAiB,OACjB;AAIN,aAAS,gBAAgB,MAAM,YAAY,gBAAgB,WAAW;AAAA,EACxE,GAAG,CAAC,mBAAmB,OAAO,eAAe,WAAW,CAAC;AAEzD,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,cAAc;AACZ,cAAM,QACJ,kBAAkB,SAAS,CAAC,UAAU,SAAS,MAAM,IAAI,CAAC,UAAU,QAAQ,OAAO;AACrF,cAAM,OAAO,MAAO,OAAM,QAAQ,KAAK,IAAI,KAAK,MAAM;AACtD,iBAAS,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA,eAAe,UAAU,WAAW,gBAAgB;AAAA,MACpD,QAAQ,eAAe,CAAC,GAAG,QAAQ,QAAQ,IAAI;AAAA,MAC/C,aAAc,eAAe,gBAAgB;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,eAAe,YAAY,CAAC;AAEpD,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC,gCACK;AAAA,IACF;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EACF,GACC,QACH;AAEJ;AAEA,MAAM,cAAc,KAClB,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MASI;AAEJ,QAAM,eAAgB,OAAM;AAC1B,QAAI,cAAc,SAAS;AACzB,YAAM,gBAAgB,MAAM,IAAI,CAAC,MAAc,aAAa,KAAK,EAAE,KAAK,GAAG;AAC3E,aAAO,4CAA4C;AAAA,IACrD,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,CAAC,MAAc,YAAsB;AACrD,WAAO,gCAAQ,UAAS;AACxB,UAAM,MAAM,UAAU,OAAO,IAAI;AAEjC,QAAI,cAAc,SAAS;AACzB,aAAO,SAAS;AAAA,IAClB;AAEA,WAAO,mBAAmB,eAAe;AAAA,EAC3C;AAEA,QAAM,gBAAgB,iBAAiB;AAEvC,SACE,oCAAC,gBACE,cACC,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,yBAAyB;AAAA,MAGvB,QAAQ,eAAe,eAAe,UAAU,WAAW;AAAA,IAC7D;AAAA,GACF,IACE,eACF,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,yBAAyB;AAAA,MAEvB,QAAQ,oBAAoB,2CAA2C,gBAAgB,CAAC,gBAAgB,UAAU,YAAY,IAAI,MAAM,2BAA2B,0BAA0B,wDAAwD,UAAU,MAAM,KAAK,UAAU,OAAO,gBAAgB,QAAQ,SAAS,KAAK,UAAU,KAAK,OAAO,KAAK,UAAU,QAAQ,SAAS,KAAK,IAAI;AAAA,IAClY;AAAA,GACF,IAEA,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,yBAAyB;AAAA,MAEvB,QAAQ,mBAAmB,2CAA2C,sBAAsB,QAAQ,SAAS,KAAK,UAAU,KAAK,OAAO,KAAK,UAAU,QAAQ,SAAS,KAAK,IAAI,UAAU,UAAU,YAAY;AAAA,IACnN;AAAA,GACF,CAEJ;AAEJ,GACA,CAAC,WAAW,cAAc;AAGxB,MAAI,UAAU,gBAAgB,UAAU;AAAa,WAAO;AAC5D,SAAO;AACT,CACF;AAGA,MAAM,WAAW,CAAC,KAAa,aAAsB;AACnD,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,MAAI;AACJ,MAAI;AACF,YAAQ,aAAa,QAAQ,GAAG,KAAK;AAAA,EACvC,SAAS,GAAP;AAAA,EAEF;AACA,SAAO,SAAS;AAClB;AAEA,MAAM,mBAAmB,MAAM;AAC7B,QAAM,MAAM,SAAS,cAAc,OAAO;AAC1C,MAAI,YACF,SAAS,eACP,0JACF,CACF;AACA,WAAS,KAAK,YAAY,GAAG;AAE7B,SAAO,MAAM;AAEX;AAAC,IAAC,OAAM,OAAO,iBAAiB,SAAS,IAAI,GAAG;AAGhD,eAAW,MAAM;AACf,eAAS,KAAK,YAAY,GAAG;AAAA,IAC/B,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,iBAAiB,CAAC,MAAuB;AAC7C,MAAI,CAAC,GAAG;AACN,QAAI,OAAO,WAAW,KAAK;AAAA,EAC7B;AAEA,QAAM,SAAS,EAAE;AACjB,QAAM,cAAc,SAAS,SAAS;AACtC,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./NextTheme";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './NextTheme'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/NextTheme.js

@@ -0,0 +1,219 @@
+import NextHead from "next/head";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const ThemeContext = createContext({
+  toggleTheme: () => {
+  },
+  setTheme: (_) => {
+  },
+  themes: []
+});
+const useTheme = () => useContext(ThemeContext);
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const useRootTheme = () => {
+  const isClient = typeof document !== "undefined";
+  const classes = isClient ? [...document.documentElement.classList] : [];
+  const isDark = classes.includes("t_dark");
+  return useState(isDark ? "dark" : "light");
+};
+const NextThemeProvider = ({
+  forcedTheme,
+  disableTransitionOnChange = true,
+  enableSystem = true,
+  enableColorScheme = true,
+  storageKey = "theme",
+  themes = ["light", "dark"],
+  defaultTheme = enableSystem ? "system" : "light",
+  attribute = "class",
+  onChangeTheme,
+  value = {
+    dark: "t_dark",
+    light: "t_light"
+  },
+  children
+}) => {
+  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
+  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
+  const attrs = !value ? themes : Object.values(value);
+  const handleMediaQuery = useCallback((e) => {
+    const systemTheme = getSystemTheme(e);
+    setResolvedTheme(systemTheme);
+    if (theme === "system" && !forcedTheme)
+      handleChangeTheme(systemTheme, false);
+  }, [theme, forcedTheme]);
+  const mediaListener = useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  const handleChangeTheme = useCallback((theme2, updateStorage = true, updateDOM = true) => {
+    let name = (value == null ? void 0 : value[theme2]) || theme2;
+    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
+    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);
+      }
+      enable == null ? void 0 : enable();
+    }
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const handler = (...args) => mediaListener.current(...args);
+    const media = window.matchMedia(MEDIA);
+    media.addListener(handler);
+    handler(media);
+    return () => {
+      media.removeListener(handler);
+    };
+  }, []);
+  const setTheme = useCallback((newTheme) => {
+    if (forcedTheme) {
+      handleChangeTheme(newTheme, true, false);
+    } else {
+      handleChangeTheme(newTheme);
+    }
+    setThemeState(newTheme);
+  }, [forcedTheme]);
+  useEffect(() => {
+    const handleStorage = (e) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+      const theme2 = e.newValue || defaultTheme;
+      setTheme(theme2);
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!enableColorScheme)
+      return;
+    let colorScheme = forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : theme && colorSchemes.includes(theme) ? theme : theme === "system" ? resolvedTheme || null : null;
+    document.documentElement.style.setProperty("color-scheme", colorScheme);
+  }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
+  const contextValue = useMemo(() => {
+    return {
+      theme,
+      setTheme,
+      toggleTheme() {
+        const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
+        const next = order[(order.indexOf(theme) + 1) % order.length];
+        setTheme(next);
+      },
+      forcedTheme,
+      resolvedTheme: theme === "system" ? resolvedTheme : theme,
+      themes: enableSystem ? [...themes, "system"] : themes,
+      systemTheme: enableSystem ? resolvedTheme : void 0
+    };
+  }, [theme, forcedTheme, resolvedTheme, enableSystem]);
+  return <ThemeContext.Provider value={contextValue}>
+    <ThemeScript {...{
+      forcedTheme,
+      storageKey,
+      systemTheme: resolvedTheme,
+      attribute,
+      value,
+      enableSystem,
+      defaultTheme,
+      attrs
+    }} />
+    {children}
+  </ThemeContext.Provider>;
+};
+const ThemeScript = memo(({
+  forcedTheme,
+  storageKey,
+  attribute,
+  enableSystem,
+  defaultTheme,
+  value,
+  attrs
+}) => {
+  const optimization = (() => {
+    if (attribute === "class") {
+      const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
+      return `var d=document.documentElement.classList;${removeClasses};`;
+    } else {
+      return `var d=document.documentElement;`;
+    }
+  })();
+  const updateDOM = (name, literal) => {
+    name = (value == null ? void 0 : value[name]) || name;
+    const val = literal ? name : `'${name}'`;
+    if (attribute === "class") {
+      return `d.add(${val})`;
+    }
+    return `d.setAttribute('${attribute}', ${val})`;
+  };
+  const defaultSystem = defaultTheme === "system";
+  return <NextHead>{forcedTheme ? <script key="next-themes-script" dangerouslySetInnerHTML={{
+    __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) => {
+  if (prevProps.forcedTheme !== nextProps.forcedTheme)
+    return false;
+  return true;
+});
+const getTheme = (key, fallback) => {
+  if (typeof window === "undefined")
+    return void 0;
+  let theme;
+  try {
+    theme = localStorage.getItem(key) || void 0;
+  } catch (e) {
+  }
+  return theme || fallback;
+};
+const disableAnimation = () => {
+  const css = document.createElement("style");
+  css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+  document.head.appendChild(css);
+  return () => {
+    ;
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+};
+const getSystemTheme = (e) => {
+  if (!e) {
+    e = window.matchMedia(MEDIA);
+  }
+  const isDark = e.matches;
+  const systemTheme = isDark ? "dark" : "light";
+  return systemTheme;
+};
+export {
+  NextThemeProvider,
+  useRootTheme,
+  useTheme
+};

package/dist/jsx/index.js

@@ -0,0 +1 @@
+export * from "./NextTheme";

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tamagui/next-theme",
+  "version": "1.0.1-beta.100",
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/core": "^1.0.1-beta.100"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.100",
+    "react": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/NextTheme.tsx

@@ -0,0 +1,371 @@
+// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx
+// forked temporarily due to buggy theme change
+
+import NextHead from 'next/head'
+import * as React from 'react'
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+export interface UseThemeProps {
+  /** List of all available theme names */
+  themes: string[]
+  /** Forced theme name for the current page */
+  forcedTheme?: string
+  /** Update the theme */
+  setTheme: (theme: string) => void
+  toggleTheme: () => void
+  /** Active theme name */
+  theme?: string
+  /** 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` */
+  resolvedTheme?: string
+  /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+  systemTheme?: 'dark' | 'light'
+}
+
+export interface ThemeProviderProps {
+  children?: any
+  /** List of all available theme names */
+  themes?: string[]
+  /** Forced theme name for the current page */
+  forcedTheme?: string
+  /** Whether to switch between dark and light themes based on prefers-color-scheme */
+  enableSystem?: boolean
+  systemTheme?: string
+  /** Disable all CSS transitions when switching themes */
+  disableTransitionOnChange?: boolean
+  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+  enableColorScheme?: boolean
+  /** Key used to store theme setting in localStorage */
+  storageKey?: string
+  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+  defaultTheme?: string
+  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
+  attribute?: string | 'class'
+  /** 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
+}
+
+const ThemeContext = createContext<UseThemeProps>({
+  toggleTheme: () => {},
+  setTheme: (_) => {},
+  themes: [],
+})
+export const useTheme = () => useContext(ThemeContext)
+
+const colorSchemes = ['light', 'dark']
+const MEDIA = '(prefers-color-scheme: dark)'
+
+interface ValueObject {
+  [themeName: string]: string
+}
+
+export const useRootTheme = () => {
+  const isClient = typeof document !== 'undefined'
+  // @ts-ignore
+  const classes = isClient ? [...document.documentElement.classList] : []
+  const isDark = classes.includes('t_dark')
+  return useState(isDark ? 'dark' : 'light')
+}
+
+// backwards compat
+const startTransition = React.startTransition || ((cb) => cb())
+
+export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
+  forcedTheme,
+  disableTransitionOnChange = true,
+  enableSystem = true,
+  enableColorScheme = true,
+  storageKey = 'theme',
+  themes = ['light', 'dark'],
+  defaultTheme = enableSystem ? 'system' : 'light',
+  attribute = 'class',
+  onChangeTheme,
+  value = {
+    dark: 't_dark',
+    light: 't_light',
+  },
+  children,
+}) => {
+  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))
+  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))
+  // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)
+  const attrs = !value ? themes : Object.values(value)
+
+  const handleMediaQuery = useCallback(
+    (e?) => {
+      const systemTheme = getSystemTheme(e)
+      startTransition(() => {
+        setResolvedTheme(systemTheme)
+      })
+      if (theme === 'system' && !forcedTheme) handleChangeTheme(systemTheme, false)
+    },
+    [theme, forcedTheme]
+  )
+
+  // Ref hack to avoid adding handleMediaQuery as a dep
+  const mediaListener = useRef(handleMediaQuery)
+  mediaListener.current = handleMediaQuery
+
+  const handleChangeTheme = useCallback((theme, updateStorage = true, updateDOM = true) => {
+    let name = value?.[theme] || theme
+
+    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null
+
+    if (updateStorage) {
+      try {
+        localStorage.setItem(storageKey, theme)
+      } catch (e) {
+        // Unsupported
+      }
+    }
+
+    if (theme === 'system' && enableSystem) {
+      const resolved = getSystemTheme()
+      name = value?.[resolved] || resolved
+    }
+
+    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)
+      }
+      enable?.()
+    }
+  }, [])
+
+  useIsomorphicLayoutEffect(() => {
+    const handler = (...args: any) => mediaListener.current(...args)
+    // Always listen to System preference
+    const media = window.matchMedia(MEDIA)
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handler)
+    handler(media)
+    return () => {
+      media.removeListener(handler)
+    }
+  }, [])
+
+  const setTheme = useCallback(
+    (newTheme) => {
+      if (forcedTheme) {
+        handleChangeTheme(newTheme, true, false)
+      } else {
+        handleChangeTheme(newTheme)
+      }
+      setThemeState(newTheme)
+    },
+    [forcedTheme]
+  )
+
+  // localStorage event handling
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key !== storageKey) {
+        return
+      }
+      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+      const theme = e.newValue || defaultTheme
+      setTheme(theme)
+    }
+    window.addEventListener('storage', handleStorage)
+    return () => {
+      window.removeEventListener('storage', handleStorage)
+    }
+  }, [])
+
+  // color-scheme handling
+  useIsomorphicLayoutEffect(() => {
+    if (!enableColorScheme) return
+
+    const colorScheme =
+      // If theme is forced to light or dark, use that
+      forcedTheme && colorSchemes.includes(forcedTheme)
+        ? forcedTheme
+        : // If regular theme is light or dark
+        theme && colorSchemes.includes(theme)
+        ? theme
+        : // If theme is system, use the resolved version
+        theme === 'system'
+        ? resolvedTheme || null
+        : null
+
+    // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.
+    // if color-scheme is null, this will remove the property
+    document.documentElement.style.setProperty('color-scheme', colorScheme)
+  }, [enableColorScheme, theme, resolvedTheme, forcedTheme])
+
+  const contextValue = useMemo(() => {
+    return {
+      theme,
+      setTheme,
+      toggleTheme() {
+        const order =
+          resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']
+        const next = order[(order.indexOf(theme) + 1) % order.length]
+        setTheme(next)
+      },
+      forcedTheme,
+      resolvedTheme: theme === 'system' ? resolvedTheme : theme,
+      themes: enableSystem ? [...themes, 'system'] : themes,
+      systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined,
+    } as const
+  }, [theme, forcedTheme, resolvedTheme, enableSystem])
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      <ThemeScript
+        {...{
+          forcedTheme,
+          storageKey,
+          systemTheme: resolvedTheme,
+          attribute,
+          value,
+          enableSystem,
+          defaultTheme,
+          attrs,
+        }}
+      />
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+const ThemeScript = memo(
+  ({
+    forcedTheme,
+    storageKey,
+    attribute,
+    enableSystem,
+    defaultTheme,
+    value,
+    attrs,
+  }: {
+    forcedTheme?: string
+    storageKey: string
+    attribute?: string
+    enableSystem?: boolean
+    defaultTheme: string
+    value?: ValueObject
+    attrs: any
+  }) => {
+    // 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};`
+      } else {
+        return `var d=document.documentElement;`
+      }
+    })()
+
+    const updateDOM = (name: string, literal?: boolean) => {
+      name = value?.[name] || name
+      const val = literal ? name : `'${name}'`
+
+      if (attribute === 'class') {
+        return `d.add(${val})`
+      }
+
+      return `d.setAttribute('${attribute}', ${val})`
+    }
+
+    const defaultSystem = defaultTheme === 'system'
+
+    return (
+      <NextHead>
+        {forcedTheme ? (
+          <script
+            key="next-themes-script"
+            dangerouslySetInnerHTML={{
+              // These are minified via Terser and then updated by hand, don't recommend
+              // prettier-ignore
+              __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,
+            }}
+          />
+        ) : enableSystem ? (
+          <script
+            key="next-themes-script"
+            dangerouslySetInnerHTML={{
+              // prettier-ignore
+              __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={{
+              // prettier-ignore
+              __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
+  }
+)
+
+// Helpers
+const getTheme = (key: string, fallback?: string) => {
+  if (typeof window === 'undefined') return undefined
+  let theme
+  try {
+    theme = localStorage.getItem(key) || undefined
+  } catch (e) {
+    // Unsupported
+  }
+  return theme || fallback
+}
+
+const disableAnimation = () => {
+  const css = document.createElement('style')
+  css.appendChild(
+    document.createTextNode(
+      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+    )
+  )
+  document.head.appendChild(css)
+
+  return () => {
+    // Force restyle
+    ;(() => window.getComputedStyle(document.body))()
+
+    // Wait for next tick before removing
+    setTimeout(() => {
+      document.head.removeChild(css)
+    }, 1)
+  }
+}
+
+const getSystemTheme = (e?: MediaQueryList) => {
+  if (!e) {
+    e = window.matchMedia(MEDIA)
+  }
+
+  const isDark = e.matches
+  const systemTheme = isDark ? 'dark' : 'light'
+  return systemTheme
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './NextTheme'

package/types/NextTheme.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface UseThemeProps {
+    themes: string[];
+    forcedTheme?: string;
+    setTheme: (theme: string) => void;
+    toggleTheme: () => void;
+    theme?: string;
+    resolvedTheme?: string;
+    systemTheme?: 'dark' | 'light';
+}
+export interface ThemeProviderProps {
+    children?: any;
+    themes?: string[];
+    forcedTheme?: string;
+    enableSystem?: boolean;
+    systemTheme?: string;
+    disableTransitionOnChange?: boolean;
+    enableColorScheme?: boolean;
+    storageKey?: string;
+    defaultTheme?: string;
+    attribute?: string | 'class';
+    value?: ValueObject;
+    onChangeTheme?: (name: string) => void;
+}
+export declare const useTheme: () => UseThemeProps;
+interface ValueObject {
+    [themeName: string]: string;
+}
+export declare const useRootTheme: () => [string, React.Dispatch<React.SetStateAction<string>>];
+export declare const NextThemeProvider: React.FC<ThemeProviderProps>;
+export {};
+//# sourceMappingURL=NextTheme.d.ts.map

package/types/NextTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextTheme.d.ts","sourceRoot":"","sources":["../src/NextTheme.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,MAAM,WAAW,aAAa;IAE5B,MAAM,EAAE,MAAM,EAAE,CAAA;IAEhB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,MAAM,IAAI,CAAA;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAA;IAEd,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAOD,eAAO,MAAM,QAAQ,qBAAiC,CAAA;AAKtD,UAAU,WAAW;IACnB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B;AAED,eAAO,MAAM,YAAY,8DAMxB,CAAA;AAKD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoK1D,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NextTheme';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}