@tamagui/next-theme 1.0.1-beta.100 → 1.0.1-beta.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/NextTheme.js +2 -16
- package/dist/cjs/NextTheme.js.map +2 -2
- package/dist/esm/NextTheme.js +1 -15
- package/dist/esm/NextTheme.js.map +2 -2
- package/package.json +3 -3
- package/src/NextTheme.tsx +1 -27
- package/types/NextTheme.d.ts.map +1 -1
package/dist/cjs/NextTheme.js
CHANGED
|
@@ -39,6 +39,7 @@ __export(NextTheme_exports, {
|
|
|
39
39
|
useTheme: () => useTheme
|
|
40
40
|
});
|
|
41
41
|
module.exports = __toCommonJS(NextTheme_exports);
|
|
42
|
+
var import_core = require("@tamagui/core");
|
|
42
43
|
var import_head = __toESM(require("next/head"));
|
|
43
44
|
var React = __toESM(require("react"));
|
|
44
45
|
var import_react = require("react");
|
|
@@ -59,7 +60,6 @@ const useRootTheme = () => {
|
|
|
59
60
|
const isDark = classes.includes("t_dark");
|
|
60
61
|
return (0, import_react.useState)(isDark ? "dark" : "light");
|
|
61
62
|
};
|
|
62
|
-
const startTransition = React.startTransition || ((cb) => cb());
|
|
63
63
|
const NextThemeProvider = ({
|
|
64
64
|
forcedTheme,
|
|
65
65
|
disableTransitionOnChange = true,
|
|
@@ -81,7 +81,7 @@ const NextThemeProvider = ({
|
|
|
81
81
|
const attrs = !value ? themes : Object.values(value);
|
|
82
82
|
const handleMediaQuery = (0, import_react.useCallback)((e) => {
|
|
83
83
|
const systemTheme = getSystemTheme(e);
|
|
84
|
-
startTransition(() => {
|
|
84
|
+
(0, import_core.startTransition)(() => {
|
|
85
85
|
setResolvedTheme(systemTheme);
|
|
86
86
|
});
|
|
87
87
|
if (theme === "system" && !forcedTheme)
|
|
@@ -91,7 +91,6 @@ const NextThemeProvider = ({
|
|
|
91
91
|
mediaListener.current = handleMediaQuery;
|
|
92
92
|
const handleChangeTheme = (0, import_react.useCallback)((theme2, updateStorage = true, updateDOM = true) => {
|
|
93
93
|
let name = (value == null ? void 0 : value[theme2]) || theme2;
|
|
94
|
-
const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
|
|
95
94
|
if (updateStorage) {
|
|
96
95
|
try {
|
|
97
96
|
localStorage.setItem(storageKey, theme2);
|
|
@@ -111,7 +110,6 @@ const NextThemeProvider = ({
|
|
|
111
110
|
} else {
|
|
112
111
|
d.setAttribute(attribute, name);
|
|
113
112
|
}
|
|
114
|
-
enable == null ? void 0 : enable();
|
|
115
113
|
}
|
|
116
114
|
}, []);
|
|
117
115
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -235,18 +233,6 @@ const getTheme = (key, fallback) => {
|
|
|
235
233
|
}
|
|
236
234
|
return theme || fallback;
|
|
237
235
|
};
|
|
238
|
-
const disableAnimation = () => {
|
|
239
|
-
const css = document.createElement("style");
|
|
240
|
-
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
241
|
-
document.head.appendChild(css);
|
|
242
|
-
return () => {
|
|
243
|
-
;
|
|
244
|
-
(() => window.getComputedStyle(document.body))();
|
|
245
|
-
setTimeout(() => {
|
|
246
|
-
document.head.removeChild(css);
|
|
247
|
-
}, 1);
|
|
248
|
-
};
|
|
249
|
-
};
|
|
250
236
|
const getSystemTheme = (e) => {
|
|
251
237
|
if (!e) {
|
|
252
238
|
e = window.matchMedia(MEDIA);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NextTheme.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAqB;AACrB,YAAuB;AACvB,mBAUO;AAEP,MAAM,4BAA4B,OAAO,WAAW,cAAc,+BAAkB;AA0CpF,MAAM,eAAe,gCAA6B;AAAA,EAChD,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,UAAU,CAAC,MAAM;AAAA,EAAC;AAAA,EAClB,QAAQ,CAAC;AACX,CAAC;AACM,MAAM,WAAW,MAAM,6BAAW,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,2BAAS,SAAS,SAAS,OAAO;AAC3C;
|
|
4
|
+
"sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { startTransition } from '@tamagui/core'\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\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 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 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 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/NextTheme.js
CHANGED
|
@@ -14,6 +14,7 @@ var __spreadValues = (a, b) => {
|
|
|
14
14
|
}
|
|
15
15
|
return a;
|
|
16
16
|
};
|
|
17
|
+
import { startTransition } from "@tamagui/core";
|
|
17
18
|
import NextHead from "next/head";
|
|
18
19
|
import * as React from "react";
|
|
19
20
|
import {
|
|
@@ -44,7 +45,6 @@ const useRootTheme = () => {
|
|
|
44
45
|
const isDark = classes.includes("t_dark");
|
|
45
46
|
return useState(isDark ? "dark" : "light");
|
|
46
47
|
};
|
|
47
|
-
const startTransition = React.startTransition || ((cb) => cb());
|
|
48
48
|
const NextThemeProvider = ({
|
|
49
49
|
forcedTheme,
|
|
50
50
|
disableTransitionOnChange = true,
|
|
@@ -76,7 +76,6 @@ const NextThemeProvider = ({
|
|
|
76
76
|
mediaListener.current = handleMediaQuery;
|
|
77
77
|
const handleChangeTheme = useCallback((theme2, updateStorage = true, updateDOM = true) => {
|
|
78
78
|
let name = (value == null ? void 0 : value[theme2]) || theme2;
|
|
79
|
-
const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
|
|
80
79
|
if (updateStorage) {
|
|
81
80
|
try {
|
|
82
81
|
localStorage.setItem(storageKey, theme2);
|
|
@@ -96,7 +95,6 @@ const NextThemeProvider = ({
|
|
|
96
95
|
} else {
|
|
97
96
|
d.setAttribute(attribute, name);
|
|
98
97
|
}
|
|
99
|
-
enable == null ? void 0 : enable();
|
|
100
98
|
}
|
|
101
99
|
}, []);
|
|
102
100
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -220,18 +218,6 @@ const getTheme = (key, fallback) => {
|
|
|
220
218
|
}
|
|
221
219
|
return theme || fallback;
|
|
222
220
|
};
|
|
223
|
-
const disableAnimation = () => {
|
|
224
|
-
const css = document.createElement("style");
|
|
225
|
-
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
226
|
-
document.head.appendChild(css);
|
|
227
|
-
return () => {
|
|
228
|
-
;
|
|
229
|
-
(() => window.getComputedStyle(document.body))();
|
|
230
|
-
setTimeout(() => {
|
|
231
|
-
document.head.removeChild(css);
|
|
232
|
-
}, 1);
|
|
233
|
-
};
|
|
234
|
-
};
|
|
235
221
|
const getSystemTheme = (e) => {
|
|
236
222
|
if (!e) {
|
|
237
223
|
e = window.matchMedia(MEDIA);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NextTheme.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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;
|
|
4
|
+
"sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { startTransition } from '@tamagui/core'\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\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 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 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 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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAGA;AACA;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;AAEO,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,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;AACnB,UAAI,cAAc,SAAS;AACzB,UAAE,UAAU,OAAO,GAAG,KAAK;AAC3B,UAAE,UAAU,IAAI,IAAI;AAAA,MACtB,OAAO;AACL,UAAE,aAAa,WAAW,IAAI;AAAA,MAChC;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,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/next-theme",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.103",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"watch": "tamagui-build --watch"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
19
|
+
"@tamagui/core": "^1.0.1-beta.103"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "*"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
25
|
+
"@tamagui/build": "^1.0.1-beta.103",
|
|
26
26
|
"react": "*"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|
package/src/NextTheme.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx
|
|
2
2
|
// forked temporarily due to buggy theme change
|
|
3
3
|
|
|
4
|
+
import { startTransition } from '@tamagui/core'
|
|
4
5
|
import NextHead from 'next/head'
|
|
5
6
|
import * as React from 'react'
|
|
6
7
|
import {
|
|
@@ -79,9 +80,6 @@ export const useRootTheme = () => {
|
|
|
79
80
|
return useState(isDark ? 'dark' : 'light')
|
|
80
81
|
}
|
|
81
82
|
|
|
82
|
-
// backwards compat
|
|
83
|
-
const startTransition = React.startTransition || ((cb) => cb())
|
|
84
|
-
|
|
85
83
|
export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
|
|
86
84
|
forcedTheme,
|
|
87
85
|
disableTransitionOnChange = true,
|
|
@@ -121,8 +119,6 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
|
|
|
121
119
|
const handleChangeTheme = useCallback((theme, updateStorage = true, updateDOM = true) => {
|
|
122
120
|
let name = value?.[theme] || theme
|
|
123
121
|
|
|
124
|
-
const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null
|
|
125
|
-
|
|
126
122
|
if (updateStorage) {
|
|
127
123
|
try {
|
|
128
124
|
localStorage.setItem(storageKey, theme)
|
|
@@ -140,14 +136,12 @@ export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
|
|
|
140
136
|
|
|
141
137
|
if (updateDOM) {
|
|
142
138
|
const d = document.documentElement
|
|
143
|
-
|
|
144
139
|
if (attribute === 'class') {
|
|
145
140
|
d.classList.remove(...attrs)
|
|
146
141
|
d.classList.add(name)
|
|
147
142
|
} else {
|
|
148
143
|
d.setAttribute(attribute, name)
|
|
149
144
|
}
|
|
150
|
-
enable?.()
|
|
151
145
|
}
|
|
152
146
|
}, [])
|
|
153
147
|
|
|
@@ -340,26 +334,6 @@ const getTheme = (key: string, fallback?: string) => {
|
|
|
340
334
|
return theme || fallback
|
|
341
335
|
}
|
|
342
336
|
|
|
343
|
-
const disableAnimation = () => {
|
|
344
|
-
const css = document.createElement('style')
|
|
345
|
-
css.appendChild(
|
|
346
|
-
document.createTextNode(
|
|
347
|
-
`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
|
|
348
|
-
)
|
|
349
|
-
)
|
|
350
|
-
document.head.appendChild(css)
|
|
351
|
-
|
|
352
|
-
return () => {
|
|
353
|
-
// Force restyle
|
|
354
|
-
;(() => window.getComputedStyle(document.body))()
|
|
355
|
-
|
|
356
|
-
// Wait for next tick before removing
|
|
357
|
-
setTimeout(() => {
|
|
358
|
-
document.head.removeChild(css)
|
|
359
|
-
}, 1)
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
|
|
363
337
|
const getSystemTheme = (e?: MediaQueryList) => {
|
|
364
338
|
if (!e) {
|
|
365
339
|
e = window.matchMedia(MEDIA)
|
package/types/NextTheme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NextTheme.d.ts","sourceRoot":"","sources":["../src/NextTheme.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NextTheme.d.ts","sourceRoot":"","sources":["../src/NextTheme.tsx"],"names":[],"mappings":"AAKA,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;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgK1D,CAAA"}
|