@tamagui/next-theme 1.0.1-beta.72 → 1.0.1-beta.73
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 +16 -17
- package/dist/cjs/NextTheme.js.map +1 -1
- package/dist/esm/NextTheme.js +16 -18
- package/dist/esm/NextTheme.js.map +1 -1
- package/dist/jsx/NextTheme.js +16 -18
- package/package.json +3 -3
package/dist/cjs/NextTheme.js
CHANGED
|
@@ -18,7 +18,6 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
}
|
|
19
19
|
return a;
|
|
20
20
|
};
|
|
21
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
22
21
|
var __export = (target, all) => {
|
|
23
22
|
for (var name in all)
|
|
24
23
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -50,16 +49,16 @@ const ThemeContext = (0, import_react.createContext)({
|
|
|
50
49
|
},
|
|
51
50
|
themes: []
|
|
52
51
|
});
|
|
53
|
-
const useTheme =
|
|
52
|
+
const useTheme = () => (0, import_react.useContext)(ThemeContext);
|
|
54
53
|
const colorSchemes = ["light", "dark"];
|
|
55
54
|
const MEDIA = "(prefers-color-scheme: dark)";
|
|
56
|
-
const useRootTheme =
|
|
55
|
+
const useRootTheme = () => {
|
|
57
56
|
const isClient = typeof document !== "undefined";
|
|
58
57
|
const classes = isClient ? [...document.documentElement.classList] : [];
|
|
59
58
|
const isDark = classes.includes("t_dark");
|
|
60
59
|
return (0, import_react.useState)(isDark ? "dark" : "light");
|
|
61
|
-
}
|
|
62
|
-
const NextThemeProvider =
|
|
60
|
+
};
|
|
61
|
+
const NextThemeProvider = ({
|
|
63
62
|
forcedTheme,
|
|
64
63
|
disableTransitionOnChange = true,
|
|
65
64
|
enableSystem = true,
|
|
@@ -112,7 +111,7 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
112
111
|
}
|
|
113
112
|
}, []);
|
|
114
113
|
useIsomorphicLayoutEffect(() => {
|
|
115
|
-
const handler =
|
|
114
|
+
const handler = (...args) => mediaListener.current(...args);
|
|
116
115
|
const media = window.matchMedia(MEDIA);
|
|
117
116
|
media.addListener(handler);
|
|
118
117
|
handler(media);
|
|
@@ -129,13 +128,13 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
129
128
|
setThemeState(newTheme);
|
|
130
129
|
}, [forcedTheme]);
|
|
131
130
|
(0, import_react.useEffect)(() => {
|
|
132
|
-
const handleStorage =
|
|
131
|
+
const handleStorage = (e) => {
|
|
133
132
|
if (e.key !== storageKey) {
|
|
134
133
|
return;
|
|
135
134
|
}
|
|
136
135
|
const theme2 = e.newValue || defaultTheme;
|
|
137
136
|
setTheme(theme2);
|
|
138
|
-
}
|
|
137
|
+
};
|
|
139
138
|
window.addEventListener("storage", handleStorage);
|
|
140
139
|
return () => {
|
|
141
140
|
window.removeEventListener("storage", handleStorage);
|
|
@@ -174,7 +173,7 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
174
173
|
defaultTheme,
|
|
175
174
|
attrs
|
|
176
175
|
})), children);
|
|
177
|
-
}
|
|
176
|
+
};
|
|
178
177
|
const ThemeScript = (0, import_react.memo)(({
|
|
179
178
|
forcedTheme,
|
|
180
179
|
storageKey,
|
|
@@ -192,14 +191,14 @@ const ThemeScript = (0, import_react.memo)(({
|
|
|
192
191
|
return `var d=document.documentElement;`;
|
|
193
192
|
}
|
|
194
193
|
})();
|
|
195
|
-
const updateDOM =
|
|
194
|
+
const updateDOM = (name, literal) => {
|
|
196
195
|
name = (value == null ? void 0 : value[name]) || name;
|
|
197
196
|
const val = literal ? name : `'${name}'`;
|
|
198
197
|
if (attribute === "class") {
|
|
199
198
|
return `d.add(${val})`;
|
|
200
199
|
}
|
|
201
200
|
return `d.setAttribute('${attribute}', ${val})`;
|
|
202
|
-
}
|
|
201
|
+
};
|
|
203
202
|
const defaultSystem = defaultTheme === "system";
|
|
204
203
|
return /* @__PURE__ */ import_react.default.createElement(import_head.default, null, forcedTheme ? /* @__PURE__ */ import_react.default.createElement("script", {
|
|
205
204
|
key: "next-themes-script",
|
|
@@ -222,7 +221,7 @@ const ThemeScript = (0, import_react.memo)(({
|
|
|
222
221
|
return false;
|
|
223
222
|
return true;
|
|
224
223
|
});
|
|
225
|
-
const getTheme =
|
|
224
|
+
const getTheme = (key, fallback) => {
|
|
226
225
|
if (typeof window === "undefined")
|
|
227
226
|
return void 0;
|
|
228
227
|
let theme;
|
|
@@ -231,8 +230,8 @@ const getTheme = /* @__PURE__ */ __name((key, fallback) => {
|
|
|
231
230
|
} catch (e) {
|
|
232
231
|
}
|
|
233
232
|
return theme || fallback;
|
|
234
|
-
}
|
|
235
|
-
const disableAnimation =
|
|
233
|
+
};
|
|
234
|
+
const disableAnimation = () => {
|
|
236
235
|
const css = document.createElement("style");
|
|
237
236
|
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
238
237
|
document.head.appendChild(css);
|
|
@@ -243,15 +242,15 @@ const disableAnimation = /* @__PURE__ */ __name(() => {
|
|
|
243
242
|
document.head.removeChild(css);
|
|
244
243
|
}, 1);
|
|
245
244
|
};
|
|
246
|
-
}
|
|
247
|
-
const getSystemTheme =
|
|
245
|
+
};
|
|
246
|
+
const getSystemTheme = (e) => {
|
|
248
247
|
if (!e) {
|
|
249
248
|
e = window.matchMedia(MEDIA);
|
|
250
249
|
}
|
|
251
250
|
const isDark = e.matches;
|
|
252
251
|
const systemTheme = isDark ? "dark" : "light";
|
|
253
252
|
return systemTheme;
|
|
254
|
-
}
|
|
253
|
+
};
|
|
255
254
|
// Annotate the CommonJS export names for ESM import in node:
|
|
256
255
|
0 && (module.exports = {
|
|
257
256
|
NextThemeProvider,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NextTheme.tsx"],
|
|
4
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 React, {\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 /** 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\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 attrs = !value ? themes : Object.values(value)\n\n const handleMediaQuery = useCallback(\n (e?) => {\n const systemTheme = getSystemTheme(e)\n setResolvedTheme(systemTheme)\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 let 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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/NextTheme.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import NextHead from "next/head";
|
|
4
2
|
import React, {
|
|
5
3
|
createContext,
|
|
@@ -20,16 +18,16 @@ const ThemeContext = createContext({
|
|
|
20
18
|
},
|
|
21
19
|
themes: []
|
|
22
20
|
});
|
|
23
|
-
const useTheme =
|
|
21
|
+
const useTheme = () => useContext(ThemeContext);
|
|
24
22
|
const colorSchemes = ["light", "dark"];
|
|
25
23
|
const MEDIA = "(prefers-color-scheme: dark)";
|
|
26
|
-
const useRootTheme =
|
|
24
|
+
const useRootTheme = () => {
|
|
27
25
|
const isClient = typeof document !== "undefined";
|
|
28
26
|
const classes = isClient ? [...document.documentElement.classList] : [];
|
|
29
27
|
const isDark = classes.includes("t_dark");
|
|
30
28
|
return useState(isDark ? "dark" : "light");
|
|
31
|
-
}
|
|
32
|
-
const NextThemeProvider =
|
|
29
|
+
};
|
|
30
|
+
const NextThemeProvider = ({
|
|
33
31
|
forcedTheme,
|
|
34
32
|
disableTransitionOnChange = true,
|
|
35
33
|
enableSystem = true,
|
|
@@ -82,7 +80,7 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
82
80
|
}
|
|
83
81
|
}, []);
|
|
84
82
|
useIsomorphicLayoutEffect(() => {
|
|
85
|
-
const handler =
|
|
83
|
+
const handler = (...args) => mediaListener.current(...args);
|
|
86
84
|
const media = window.matchMedia(MEDIA);
|
|
87
85
|
media.addListener(handler);
|
|
88
86
|
handler(media);
|
|
@@ -99,13 +97,13 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
99
97
|
setThemeState(newTheme);
|
|
100
98
|
}, [forcedTheme]);
|
|
101
99
|
useEffect(() => {
|
|
102
|
-
const handleStorage =
|
|
100
|
+
const handleStorage = (e) => {
|
|
103
101
|
if (e.key !== storageKey) {
|
|
104
102
|
return;
|
|
105
103
|
}
|
|
106
104
|
const theme2 = e.newValue || defaultTheme;
|
|
107
105
|
setTheme(theme2);
|
|
108
|
-
}
|
|
106
|
+
};
|
|
109
107
|
window.addEventListener("storage", handleStorage);
|
|
110
108
|
return () => {
|
|
111
109
|
window.removeEventListener("storage", handleStorage);
|
|
@@ -146,7 +144,7 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
146
144
|
attrs
|
|
147
145
|
}
|
|
148
146
|
}), children);
|
|
149
|
-
}
|
|
147
|
+
};
|
|
150
148
|
const ThemeScript = memo(({
|
|
151
149
|
forcedTheme,
|
|
152
150
|
storageKey,
|
|
@@ -164,14 +162,14 @@ const ThemeScript = memo(({
|
|
|
164
162
|
return `var d=document.documentElement;`;
|
|
165
163
|
}
|
|
166
164
|
})();
|
|
167
|
-
const updateDOM =
|
|
165
|
+
const updateDOM = (name, literal) => {
|
|
168
166
|
name = (value == null ? void 0 : value[name]) || name;
|
|
169
167
|
const val = literal ? name : `'${name}'`;
|
|
170
168
|
if (attribute === "class") {
|
|
171
169
|
return `d.add(${val})`;
|
|
172
170
|
}
|
|
173
171
|
return `d.setAttribute('${attribute}', ${val})`;
|
|
174
|
-
}
|
|
172
|
+
};
|
|
175
173
|
const defaultSystem = defaultTheme === "system";
|
|
176
174
|
return /* @__PURE__ */ React.createElement(NextHead, null, forcedTheme ? /* @__PURE__ */ React.createElement("script", {
|
|
177
175
|
key: "next-themes-script",
|
|
@@ -194,7 +192,7 @@ const ThemeScript = memo(({
|
|
|
194
192
|
return false;
|
|
195
193
|
return true;
|
|
196
194
|
});
|
|
197
|
-
const getTheme =
|
|
195
|
+
const getTheme = (key, fallback) => {
|
|
198
196
|
if (typeof window === "undefined")
|
|
199
197
|
return void 0;
|
|
200
198
|
let theme;
|
|
@@ -203,8 +201,8 @@ const getTheme = /* @__PURE__ */ __name((key, fallback) => {
|
|
|
203
201
|
} catch (e) {
|
|
204
202
|
}
|
|
205
203
|
return theme || fallback;
|
|
206
|
-
}
|
|
207
|
-
const disableAnimation =
|
|
204
|
+
};
|
|
205
|
+
const disableAnimation = () => {
|
|
208
206
|
const css = document.createElement("style");
|
|
209
207
|
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
210
208
|
document.head.appendChild(css);
|
|
@@ -215,15 +213,15 @@ const disableAnimation = /* @__PURE__ */ __name(() => {
|
|
|
215
213
|
document.head.removeChild(css);
|
|
216
214
|
}, 1);
|
|
217
215
|
};
|
|
218
|
-
}
|
|
219
|
-
const getSystemTheme =
|
|
216
|
+
};
|
|
217
|
+
const getSystemTheme = (e) => {
|
|
220
218
|
if (!e) {
|
|
221
219
|
e = window.matchMedia(MEDIA);
|
|
222
220
|
}
|
|
223
221
|
const isDark = e.matches;
|
|
224
222
|
const systemTheme = isDark ? "dark" : "light";
|
|
225
223
|
return systemTheme;
|
|
226
|
-
}
|
|
224
|
+
};
|
|
227
225
|
export {
|
|
228
226
|
NextThemeProvider,
|
|
229
227
|
useRootTheme,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NextTheme.tsx"],
|
|
4
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 React, {\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 /** 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\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 attrs = !value ? themes : Object.values(value)\n\n const handleMediaQuery = useCallback(\n (e?) => {\n const systemTheme = getSystemTheme(e)\n setResolvedTheme(systemTheme)\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 let 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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/NextTheme.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import NextHead from "next/head";
|
|
4
2
|
import {
|
|
5
3
|
createContext,
|
|
@@ -20,16 +18,16 @@ const ThemeContext = createContext({
|
|
|
20
18
|
},
|
|
21
19
|
themes: []
|
|
22
20
|
});
|
|
23
|
-
const useTheme =
|
|
21
|
+
const useTheme = () => useContext(ThemeContext);
|
|
24
22
|
const colorSchemes = ["light", "dark"];
|
|
25
23
|
const MEDIA = "(prefers-color-scheme: dark)";
|
|
26
|
-
const useRootTheme =
|
|
24
|
+
const useRootTheme = () => {
|
|
27
25
|
const isClient = typeof document !== "undefined";
|
|
28
26
|
const classes = isClient ? [...document.documentElement.classList] : [];
|
|
29
27
|
const isDark = classes.includes("t_dark");
|
|
30
28
|
return useState(isDark ? "dark" : "light");
|
|
31
|
-
}
|
|
32
|
-
const NextThemeProvider =
|
|
29
|
+
};
|
|
30
|
+
const NextThemeProvider = ({
|
|
33
31
|
forcedTheme,
|
|
34
32
|
disableTransitionOnChange = true,
|
|
35
33
|
enableSystem = true,
|
|
@@ -82,7 +80,7 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
82
80
|
}
|
|
83
81
|
}, []);
|
|
84
82
|
useIsomorphicLayoutEffect(() => {
|
|
85
|
-
const handler =
|
|
83
|
+
const handler = (...args) => mediaListener.current(...args);
|
|
86
84
|
const media = window.matchMedia(MEDIA);
|
|
87
85
|
media.addListener(handler);
|
|
88
86
|
handler(media);
|
|
@@ -99,13 +97,13 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
99
97
|
setThemeState(newTheme);
|
|
100
98
|
}, [forcedTheme]);
|
|
101
99
|
useEffect(() => {
|
|
102
|
-
const handleStorage =
|
|
100
|
+
const handleStorage = (e) => {
|
|
103
101
|
if (e.key !== storageKey) {
|
|
104
102
|
return;
|
|
105
103
|
}
|
|
106
104
|
const theme2 = e.newValue || defaultTheme;
|
|
107
105
|
setTheme(theme2);
|
|
108
|
-
}
|
|
106
|
+
};
|
|
109
107
|
window.addEventListener("storage", handleStorage);
|
|
110
108
|
return () => {
|
|
111
109
|
window.removeEventListener("storage", handleStorage);
|
|
@@ -145,7 +143,7 @@ const NextThemeProvider = /* @__PURE__ */ __name(({
|
|
|
145
143
|
}} />
|
|
146
144
|
{children}
|
|
147
145
|
</ThemeContext.Provider>;
|
|
148
|
-
}
|
|
146
|
+
};
|
|
149
147
|
const ThemeScript = memo(({
|
|
150
148
|
forcedTheme,
|
|
151
149
|
storageKey,
|
|
@@ -163,14 +161,14 @@ const ThemeScript = memo(({
|
|
|
163
161
|
return `var d=document.documentElement;`;
|
|
164
162
|
}
|
|
165
163
|
})();
|
|
166
|
-
const updateDOM =
|
|
164
|
+
const updateDOM = (name, literal) => {
|
|
167
165
|
name = (value == null ? void 0 : value[name]) || name;
|
|
168
166
|
const val = literal ? name : `'${name}'`;
|
|
169
167
|
if (attribute === "class") {
|
|
170
168
|
return `d.add(${val})`;
|
|
171
169
|
}
|
|
172
170
|
return `d.setAttribute('${attribute}', ${val})`;
|
|
173
|
-
}
|
|
171
|
+
};
|
|
174
172
|
const defaultSystem = defaultTheme === "system";
|
|
175
173
|
return <NextHead>{forcedTheme ? <script key="next-themes-script" dangerouslySetInnerHTML={{
|
|
176
174
|
__html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
|
|
@@ -184,7 +182,7 @@ const ThemeScript = memo(({
|
|
|
184
182
|
return false;
|
|
185
183
|
return true;
|
|
186
184
|
});
|
|
187
|
-
const getTheme =
|
|
185
|
+
const getTheme = (key, fallback) => {
|
|
188
186
|
if (typeof window === "undefined")
|
|
189
187
|
return void 0;
|
|
190
188
|
let theme;
|
|
@@ -193,8 +191,8 @@ const getTheme = /* @__PURE__ */ __name((key, fallback) => {
|
|
|
193
191
|
} catch (e) {
|
|
194
192
|
}
|
|
195
193
|
return theme || fallback;
|
|
196
|
-
}
|
|
197
|
-
const disableAnimation =
|
|
194
|
+
};
|
|
195
|
+
const disableAnimation = () => {
|
|
198
196
|
const css = document.createElement("style");
|
|
199
197
|
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
200
198
|
document.head.appendChild(css);
|
|
@@ -205,15 +203,15 @@ const disableAnimation = /* @__PURE__ */ __name(() => {
|
|
|
205
203
|
document.head.removeChild(css);
|
|
206
204
|
}, 1);
|
|
207
205
|
};
|
|
208
|
-
}
|
|
209
|
-
const getSystemTheme =
|
|
206
|
+
};
|
|
207
|
+
const getSystemTheme = (e) => {
|
|
210
208
|
if (!e) {
|
|
211
209
|
e = window.matchMedia(MEDIA);
|
|
212
210
|
}
|
|
213
211
|
const isDark = e.matches;
|
|
214
212
|
const systemTheme = isDark ? "dark" : "light";
|
|
215
213
|
return systemTheme;
|
|
216
|
-
}
|
|
214
|
+
};
|
|
217
215
|
export {
|
|
218
216
|
NextThemeProvider,
|
|
219
217
|
useRootTheme,
|
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.73",
|
|
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.73"
|
|
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.73",
|
|
26
26
|
"react": "*"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|