@tamagui/next-theme 1.2.9 → 1.2.10
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/esm/NextTheme.mjs +9 -0
- package/dist/esm/NextTheme.mjs.map +7 -0
- package/dist/esm/NextThemeProvider.mjs +233 -0
- package/dist/esm/NextThemeProvider.mjs.map +7 -0
- package/dist/esm/ThemeSettingContext.mjs +12 -0
- package/dist/esm/ThemeSettingContext.mjs.map +7 -0
- package/dist/esm/UseThemeProps.mjs +1 -0
- package/dist/esm/UseThemeProps.mjs.map +7 -0
- package/dist/esm/constants.mjs +9 -0
- package/dist/esm/constants.mjs.map +7 -0
- package/dist/esm/helpers.mjs +26 -0
- package/dist/esm/helpers.mjs.map +7 -0
- package/dist/esm/index.mjs +2 -0
- package/dist/esm/index.mjs.map +7 -0
- package/dist/esm/types.mjs +1 -0
- package/dist/esm/types.mjs.map +7 -0
- package/dist/esm/useIsomorphicLayoutEffect.mjs +6 -0
- package/dist/esm/useIsomorphicLayoutEffect.mjs.map +7 -0
- package/dist/esm/useRootTheme.mjs +19 -0
- package/dist/esm/useRootTheme.mjs.map +7 -0
- package/dist/esm/useTheme.mjs +9 -0
- package/dist/esm/useTheme.mjs.map +7 -0
- package/package.json +3 -3
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export * from "./NextThemeProvider";
|
|
2
|
+
export * from "./ThemeSettingContext";
|
|
3
|
+
export * from "./UseThemeProps";
|
|
4
|
+
export * from "./helpers";
|
|
5
|
+
export * from "./constants";
|
|
6
|
+
export * from "./useTheme";
|
|
7
|
+
export * from "./types";
|
|
8
|
+
export * from "./useRootTheme";
|
|
9
|
+
//# sourceMappingURL=NextTheme.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/NextTheme.tsx"],
|
|
4
|
+
"sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily\n\nexport * from './NextThemeProvider'\nexport * from './ThemeSettingContext'\nexport * from './UseThemeProps'\nexport * from './helpers'\nexport * from './constants'\nexport * from './useTheme'\nexport * from './types'\nexport * from './useRootTheme'\n"],
|
|
5
|
+
"mappings": "AAGA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEvent } from "@tamagui/use-event";
|
|
3
|
+
import NextHead from "next/head";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
|
6
|
+
import { MEDIA, colorSchemes } from "./constants";
|
|
7
|
+
import { getSystemTheme, getTheme } from "./helpers";
|
|
8
|
+
import { ThemeSettingContext } from "./ThemeSettingContext";
|
|
9
|
+
import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|
|
10
|
+
const NextThemeProvider = ({
|
|
11
|
+
forcedTheme,
|
|
12
|
+
disableTransitionOnChange = true,
|
|
13
|
+
enableSystem = true,
|
|
14
|
+
enableColorScheme = true,
|
|
15
|
+
storageKey = "theme",
|
|
16
|
+
themes = colorSchemes,
|
|
17
|
+
defaultTheme = enableSystem ? "system" : "light",
|
|
18
|
+
attribute = "class",
|
|
19
|
+
skipNextHead,
|
|
20
|
+
onChangeTheme,
|
|
21
|
+
value = {
|
|
22
|
+
dark: "t_dark",
|
|
23
|
+
light: "t_light"
|
|
24
|
+
},
|
|
25
|
+
children
|
|
26
|
+
}) => {
|
|
27
|
+
const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
|
|
28
|
+
const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
|
|
29
|
+
const attrs = !value ? themes : Object.values(value);
|
|
30
|
+
const handleMediaQuery = useEvent((e) => {
|
|
31
|
+
const systemTheme2 = getSystemTheme(e);
|
|
32
|
+
React.startTransition(() => {
|
|
33
|
+
setResolvedTheme(systemTheme2);
|
|
34
|
+
});
|
|
35
|
+
if (theme === "system" && !forcedTheme) {
|
|
36
|
+
handleChangeTheme(systemTheme2, false);
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const mediaListener = useRef(handleMediaQuery);
|
|
40
|
+
mediaListener.current = handleMediaQuery;
|
|
41
|
+
const handleChangeTheme = useEvent((theme2, updateStorage = true, updateDOM = true) => {
|
|
42
|
+
let name = (value == null ? void 0 : value[theme2]) || theme2;
|
|
43
|
+
if (updateStorage) {
|
|
44
|
+
try {
|
|
45
|
+
localStorage.setItem(storageKey, theme2);
|
|
46
|
+
} catch (e) {
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (theme2 === "system" && enableSystem) {
|
|
50
|
+
const resolved = getSystemTheme();
|
|
51
|
+
name = (value == null ? void 0 : value[resolved]) || resolved;
|
|
52
|
+
}
|
|
53
|
+
onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
|
|
54
|
+
if (updateDOM) {
|
|
55
|
+
const d = document.documentElement;
|
|
56
|
+
if (attribute === "class") {
|
|
57
|
+
d.classList.remove(...attrs);
|
|
58
|
+
d.classList.add(name);
|
|
59
|
+
} else {
|
|
60
|
+
d.setAttribute(attribute, name);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
useIsomorphicLayoutEffect(() => {
|
|
65
|
+
const handler = (...args) => mediaListener.current(...args);
|
|
66
|
+
const media = window.matchMedia(MEDIA);
|
|
67
|
+
media.addListener(handler);
|
|
68
|
+
handler(media);
|
|
69
|
+
return () => {
|
|
70
|
+
media.removeListener(handler);
|
|
71
|
+
};
|
|
72
|
+
}, []);
|
|
73
|
+
const set = useEvent((newTheme) => {
|
|
74
|
+
if (forcedTheme) {
|
|
75
|
+
handleChangeTheme(newTheme, true, false);
|
|
76
|
+
} else {
|
|
77
|
+
handleChangeTheme(newTheme);
|
|
78
|
+
}
|
|
79
|
+
setThemeState(newTheme);
|
|
80
|
+
});
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
const handleStorage = (e) => {
|
|
83
|
+
if (e.key !== storageKey) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
const theme2 = e.newValue || defaultTheme;
|
|
87
|
+
set(theme2);
|
|
88
|
+
};
|
|
89
|
+
window.addEventListener("storage", handleStorage);
|
|
90
|
+
return () => {
|
|
91
|
+
window.removeEventListener("storage", handleStorage);
|
|
92
|
+
};
|
|
93
|
+
}, [defaultTheme, set, storageKey]);
|
|
94
|
+
useIsomorphicLayoutEffect(() => {
|
|
95
|
+
if (!enableColorScheme)
|
|
96
|
+
return;
|
|
97
|
+
const colorScheme = (
|
|
98
|
+
// If theme is forced to light or dark, use that
|
|
99
|
+
forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : (
|
|
100
|
+
// If regular theme is light or dark
|
|
101
|
+
theme && colorSchemes.includes(theme) ? theme : (
|
|
102
|
+
// If theme is system, use the resolved version
|
|
103
|
+
theme === "system" ? resolvedTheme || null : null
|
|
104
|
+
)
|
|
105
|
+
)
|
|
106
|
+
);
|
|
107
|
+
const userPrefers = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
108
|
+
const wePrefer = colorScheme || "light";
|
|
109
|
+
if (userPrefers !== wePrefer || wePrefer === "dark") {
|
|
110
|
+
document.documentElement.style.setProperty("color-scheme", colorScheme);
|
|
111
|
+
}
|
|
112
|
+
}, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
|
|
113
|
+
const toggle = useEvent(() => {
|
|
114
|
+
const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
|
|
115
|
+
const next = order[(order.indexOf(theme) + 1) % order.length];
|
|
116
|
+
set(next);
|
|
117
|
+
});
|
|
118
|
+
const contextResolvedTheme = theme === "system" ? resolvedTheme : theme;
|
|
119
|
+
const systemTheme = enableSystem ? resolvedTheme : void 0;
|
|
120
|
+
const contextValue = useMemo(() => {
|
|
121
|
+
const value2 = {
|
|
122
|
+
theme,
|
|
123
|
+
current: theme,
|
|
124
|
+
set,
|
|
125
|
+
toggle,
|
|
126
|
+
forcedTheme,
|
|
127
|
+
resolvedTheme: contextResolvedTheme,
|
|
128
|
+
themes: enableSystem ? [...themes, "system"] : themes,
|
|
129
|
+
systemTheme
|
|
130
|
+
};
|
|
131
|
+
return value2;
|
|
132
|
+
}, [
|
|
133
|
+
theme,
|
|
134
|
+
set,
|
|
135
|
+
toggle,
|
|
136
|
+
forcedTheme,
|
|
137
|
+
contextResolvedTheme,
|
|
138
|
+
enableSystem,
|
|
139
|
+
themes,
|
|
140
|
+
systemTheme
|
|
141
|
+
]);
|
|
142
|
+
return /* @__PURE__ */ jsxs(ThemeSettingContext.Provider, { value: contextValue, children: [
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
ThemeScript,
|
|
145
|
+
{
|
|
146
|
+
...{
|
|
147
|
+
forcedTheme,
|
|
148
|
+
storageKey,
|
|
149
|
+
systemTheme: resolvedTheme,
|
|
150
|
+
attribute,
|
|
151
|
+
value,
|
|
152
|
+
enableSystem,
|
|
153
|
+
defaultTheme,
|
|
154
|
+
attrs,
|
|
155
|
+
skipNextHead
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
useMemo(() => children, [children])
|
|
160
|
+
] });
|
|
161
|
+
};
|
|
162
|
+
const ThemeScript = memo(
|
|
163
|
+
({
|
|
164
|
+
forcedTheme,
|
|
165
|
+
storageKey,
|
|
166
|
+
attribute,
|
|
167
|
+
enableSystem,
|
|
168
|
+
defaultTheme,
|
|
169
|
+
value,
|
|
170
|
+
attrs,
|
|
171
|
+
skipNextHead
|
|
172
|
+
}) => {
|
|
173
|
+
const optimization = (() => {
|
|
174
|
+
if (attribute === "class") {
|
|
175
|
+
const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
|
|
176
|
+
return `var d=document.documentElement.classList;${removeClasses};`;
|
|
177
|
+
} else {
|
|
178
|
+
return `var d=document.documentElement;`;
|
|
179
|
+
}
|
|
180
|
+
})();
|
|
181
|
+
const updateDOM = (name, literal) => {
|
|
182
|
+
name = (value == null ? void 0 : value[name]) || name;
|
|
183
|
+
const val = literal ? name : `'${name}'`;
|
|
184
|
+
if (attribute === "class") {
|
|
185
|
+
return `d.add(${val})`;
|
|
186
|
+
}
|
|
187
|
+
return `d.setAttribute('${attribute}', ${val})`;
|
|
188
|
+
};
|
|
189
|
+
const defaultSystem = defaultTheme === "system";
|
|
190
|
+
const contents = /* @__PURE__ */ jsx(Fragment, { children: forcedTheme ? /* @__PURE__ */ jsx(
|
|
191
|
+
"script",
|
|
192
|
+
{
|
|
193
|
+
dangerouslySetInnerHTML: {
|
|
194
|
+
// These are minified via Terser and then updated by hand, don't recommend
|
|
195
|
+
__html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
"next-themes-script"
|
|
199
|
+
) : enableSystem ? /* @__PURE__ */ jsx(
|
|
200
|
+
"script",
|
|
201
|
+
{
|
|
202
|
+
dangerouslySetInnerHTML: {
|
|
203
|
+
__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(
|
|
204
|
+
"dark"
|
|
205
|
+
)}:${updateDOM("light")}}else if(e) ${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}catch(e){}}()`
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
"next-themes-script"
|
|
209
|
+
) : /* @__PURE__ */ jsx(
|
|
210
|
+
"script",
|
|
211
|
+
{
|
|
212
|
+
dangerouslySetInnerHTML: {
|
|
213
|
+
__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(
|
|
214
|
+
defaultTheme
|
|
215
|
+
)};}}catch(t){}}();`
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
"next-themes-script"
|
|
219
|
+
) });
|
|
220
|
+
if (skipNextHead)
|
|
221
|
+
return contents;
|
|
222
|
+
return /* @__PURE__ */ jsx(NextHead, { children: contents });
|
|
223
|
+
},
|
|
224
|
+
(prevProps, nextProps) => {
|
|
225
|
+
if (prevProps.forcedTheme !== nextProps.forcedTheme)
|
|
226
|
+
return false;
|
|
227
|
+
return true;
|
|
228
|
+
}
|
|
229
|
+
);
|
|
230
|
+
export {
|
|
231
|
+
NextThemeProvider
|
|
232
|
+
};
|
|
233
|
+
//# sourceMappingURL=NextThemeProvider.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/NextThemeProvider.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useEvent } from '@tamagui/use-event'\nimport NextHead from 'next/head'\nimport * as React from 'react'\nimport { memo, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { MEDIA, colorSchemes } from './constants'\nimport { getSystemTheme, getTheme } from './helpers'\nimport { ThemeSettingContext } from './ThemeSettingContext'\nimport { ValueObject } from './types'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { ThemeProviderProps, UseThemeProps } from './UseThemeProps'\n\nexport const NextThemeProvider: React.FC<ThemeProviderProps> = ({\n forcedTheme,\n disableTransitionOnChange = true,\n enableSystem = true,\n enableColorScheme = true,\n storageKey = 'theme',\n themes = colorSchemes,\n defaultTheme = enableSystem ? 'system' : 'light',\n attribute = 'class',\n skipNextHead,\n onChangeTheme,\n value = {\n dark: 't_dark',\n light: 't_light',\n },\n children,\n}) => {\n const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))\n const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))\n // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)\n const attrs = !value ? themes : Object.values(value)\n\n const handleMediaQuery = useEvent((e?) => {\n const systemTheme = getSystemTheme(e)\n React.startTransition(() => {\n setResolvedTheme(systemTheme)\n })\n if (theme === 'system' && !forcedTheme) {\n handleChangeTheme(systemTheme, false)\n }\n })\n\n // Ref hack to avoid adding handleMediaQuery as a dep\n const mediaListener = useRef(handleMediaQuery)\n mediaListener.current = handleMediaQuery\n\n const handleChangeTheme = useEvent((theme, updateStorage = true, updateDOM = true) => {\n let name = value?.[theme] || theme\n\n if (updateStorage) {\n try {\n localStorage.setItem(storageKey, theme)\n } catch (e) {\n // Unsupported\n }\n }\n\n if (theme === 'system' && enableSystem) {\n const resolved = getSystemTheme()\n name = value?.[resolved] || resolved\n }\n\n onChangeTheme?.(name.replace('t_', ''))\n\n if (updateDOM) {\n const d = document.documentElement\n if (attribute === 'class') {\n d.classList.remove(...attrs)\n d.classList.add(name)\n } else {\n d.setAttribute(attribute, name)\n }\n }\n })\n\n useIsomorphicLayoutEffect(() => {\n const handler = (...args: any) => mediaListener.current(...args)\n // Always listen to System preference\n const media = window.matchMedia(MEDIA)\n // Intentionally use deprecated listener methods to support iOS & old browsers\n media.addListener(handler)\n handler(media)\n return () => {\n media.removeListener(handler)\n }\n }, [])\n\n const set = useEvent((newTheme) => {\n if (forcedTheme) {\n handleChangeTheme(newTheme, true, false)\n } else {\n handleChangeTheme(newTheme)\n }\n setThemeState(newTheme)\n })\n\n // localStorage event handling\n useEffect(() => {\n const handleStorage = (e: StorageEvent) => {\n if (e.key !== storageKey) {\n return\n }\n // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n const theme = e.newValue || defaultTheme\n set(theme)\n }\n window.addEventListener('storage', handleStorage)\n return () => {\n window.removeEventListener('storage', handleStorage)\n }\n }, [defaultTheme, set, storageKey])\n\n // color-scheme handling\n useIsomorphicLayoutEffect(() => {\n if (!enableColorScheme) return\n\n const colorScheme =\n // If theme is forced to light or dark, use that\n forcedTheme && colorSchemes.includes(forcedTheme)\n ? forcedTheme\n : // If regular theme is light or dark\n theme && colorSchemes.includes(theme)\n ? theme\n : // If theme is system, use the resolved version\n theme === 'system'\n ? resolvedTheme || null\n : null\n\n // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.\n // if color-scheme is null, this will remove the property\n const userPrefers =\n typeof window !== 'undefined' &&\n window.matchMedia &&\n window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n\n const wePrefer = colorScheme || 'light'\n\n // avoid running this because it causes full page reflow\n if (userPrefers !== wePrefer || wePrefer === 'dark') {\n document.documentElement.style.setProperty('color-scheme', colorScheme)\n }\n }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n const toggle = useEvent(() => {\n const order =\n resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']\n const next = order[(order.indexOf(theme) + 1) % order.length]\n set(next)\n })\n\n const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme\n const systemTheme = (enableSystem ? resolvedTheme : undefined) as\n | 'light'\n | 'dark'\n | undefined\n const contextValue = useMemo(() => {\n const value: UseThemeProps = {\n theme,\n current: theme,\n set,\n toggle,\n forcedTheme,\n resolvedTheme: contextResolvedTheme,\n themes: enableSystem ? [...themes, 'system'] : themes,\n systemTheme,\n } as const\n return value\n }, [\n theme,\n set,\n toggle,\n forcedTheme,\n contextResolvedTheme,\n enableSystem,\n themes,\n systemTheme,\n ])\n\n return (\n <ThemeSettingContext.Provider value={contextValue}>\n <ThemeScript\n {...{\n forcedTheme,\n storageKey,\n systemTheme: resolvedTheme,\n attribute,\n value,\n enableSystem,\n defaultTheme,\n attrs,\n skipNextHead,\n }}\n />\n {/* because on SSR we re-run and can avoid whole tree re-render */}\n {useMemo(() => children, [children])}\n </ThemeSettingContext.Provider>\n )\n}\nconst ThemeScript = memo(\n ({\n forcedTheme,\n storageKey,\n attribute,\n enableSystem,\n defaultTheme,\n value,\n attrs,\n skipNextHead,\n }: {\n forcedTheme?: string\n storageKey: string\n attribute?: string\n enableSystem?: boolean\n defaultTheme: string\n value?: ValueObject\n attrs: any\n skipNextHead?: boolean\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 const contents = (\n <>\n {forcedTheme ? (\n <script\n // nonce={nonce}\n key=\"next-themes-script\"\n dangerouslySetInnerHTML={{\n // These are minified via Terser and then updated by hand, don't recommend\n __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`,\n }}\n />\n ) : enableSystem ? (\n <script\n // nonce={nonce}\n key=\"next-themes-script\"\n dangerouslySetInnerHTML={{\n __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${\n !defaultSystem ? updateDOM(defaultTheme) + ';' : ''\n }if(\"system\"===e||(!e&&${defaultSystem})){var t=\"${MEDIA}\",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(\n 'dark'\n )}:${updateDOM('light')}}else if(e) ${\n value ? `var x=${JSON.stringify(value)};` : ''\n }${updateDOM(value ? 'x[e]' : 'e', true)}}catch(e){}}()`,\n }}\n />\n ) : (\n <script\n // nonce={nonce}\n key=\"next-themes-script\"\n dangerouslySetInnerHTML={{\n __html: `!function(){try{${optimization}var e=localStorage.getItem(\"${storageKey}\");if(e){${\n value ? `var x=${JSON.stringify(value)};` : ''\n }${updateDOM(value ? 'x[e]' : 'e', true)}}else{${updateDOM(\n defaultTheme\n )};}}catch(t){}}();`,\n }}\n />\n )}\n </>\n )\n\n if (skipNextHead) return contents\n\n return <NextHead>{contents}</NextHead>\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["systemTheme", "theme", "value"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/ThemeSettingContext.tsx"],
|
|
4
|
+
"sourcesContent": ["import { createContext } from 'react'\n\nimport { UseThemeProps } from './UseThemeProps'\n\nexport const ThemeSettingContext = createContext<UseThemeProps>({\n toggle: () => {},\n set: (_) => {},\n themes: [],\n})\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,sBAAsB,cAA6B;AAAA,EAC9D,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,KAAK,CAAC,MAAM;AAAA,EAAC;AAAA,EACb,QAAQ,CAAC;AACX,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=UseThemeProps.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/constants.tsx"],
|
|
4
|
+
"sourcesContent": ["export const constants = {}\nexport const colorSchemes = ['light', 'dark']\nexport const MEDIA = '(prefers-color-scheme: dark)'\n"],
|
|
5
|
+
"mappings": "AAAO,MAAM,YAAY,CAAC;AACnB,MAAM,eAAe,CAAC,SAAS,MAAM;AACrC,MAAM,QAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { MEDIA } from "./constants";
|
|
2
|
+
const helpers = {};
|
|
3
|
+
const getTheme = (key, fallback) => {
|
|
4
|
+
if (typeof window === "undefined")
|
|
5
|
+
return void 0;
|
|
6
|
+
let theme;
|
|
7
|
+
try {
|
|
8
|
+
theme = localStorage.getItem(key) || void 0;
|
|
9
|
+
} catch (e) {
|
|
10
|
+
}
|
|
11
|
+
return theme || fallback;
|
|
12
|
+
};
|
|
13
|
+
const getSystemTheme = (e) => {
|
|
14
|
+
if (!e) {
|
|
15
|
+
e = window.matchMedia(MEDIA);
|
|
16
|
+
}
|
|
17
|
+
const isDark = e.matches;
|
|
18
|
+
const systemTheme = isDark ? "dark" : "light";
|
|
19
|
+
return systemTheme;
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
getSystemTheme,
|
|
23
|
+
getTheme,
|
|
24
|
+
helpers
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=helpers.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers.tsx"],
|
|
4
|
+
"sourcesContent": ["import { MEDIA } from './constants'\n\nexport const helpers = {}\n// Helpers\n\nexport const 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\nexport const 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,SAAS,aAAa;AAEf,MAAM,UAAU,CAAC;AAGjB,MAAM,WAAW,CAAC,KAAa,aAAsB;AAC1D,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;AAEO,MAAM,iBAAiB,CAAC,MAAuB;AACpD,MAAI,CAAC,GAAG;AACN,QAAI,OAAO,WAAW,KAAK;AAAA,EAC7B;AAEA,QAAM,SAAS,EAAE;AACjB,QAAM,cAAc,SAAS,SAAS;AACtC,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useIsomorphicLayoutEffect.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,WAAW,uBAAuB;AAEpC,MAAM,4BACX,OAAO,WAAW,cAAc,kBAAkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useLayoutEffect, useState } from "react";
|
|
3
|
+
const useRootTheme = () => {
|
|
4
|
+
const [val, setVal] = useState("light");
|
|
5
|
+
if (typeof document !== "undefined") {
|
|
6
|
+
useLayoutEffect(() => {
|
|
7
|
+
const classes = [...document.documentElement.classList];
|
|
8
|
+
const isDark = classes.includes("t_dark");
|
|
9
|
+
React.startTransition(() => {
|
|
10
|
+
setVal(isDark ? "dark" : "light");
|
|
11
|
+
});
|
|
12
|
+
}, []);
|
|
13
|
+
}
|
|
14
|
+
return [val, setVal];
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
useRootTheme
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=useRootTheme.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useRootTheme.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { useLayoutEffect, useState } from 'react'\n\n// note this only works for light being default for now...\n\nexport const useRootTheme = () => {\n const [val, setVal] = useState('light')\n\n if (typeof document !== 'undefined') {\n useLayoutEffect(() => {\n // @ts-ignore\n const classes = [...document.documentElement.classList]\n const isDark = classes.includes('t_dark')\n React.startTransition(() => {\n setVal(isDark ? 'dark' : 'light')\n })\n }, [])\n }\n\n return [val, setVal] as const\n}\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AACvB,SAAS,iBAAiB,gBAAgB;AAInC,MAAM,eAAe,MAAM;AAChC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AAEtC,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AAEpB,YAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS;AACtD,YAAM,SAAS,QAAQ,SAAS,QAAQ;AACxC,YAAM,gBAAgB,MAAM;AAC1B,eAAO,SAAS,SAAS,OAAO;AAAA,MAClC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO,CAAC,KAAK,MAAM;AACrB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { ThemeSettingContext } from "./ThemeSettingContext";
|
|
3
|
+
const useTheme = () => useContext(ThemeSettingContext);
|
|
4
|
+
const useThemeSetting = () => useContext(ThemeSettingContext);
|
|
5
|
+
export {
|
|
6
|
+
useTheme,
|
|
7
|
+
useThemeSetting
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useTheme.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useTheme.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useContext } from 'react'\n\nimport { ThemeSettingContext } from './ThemeSettingContext'\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\n\nexport const useTheme = () => useContext(ThemeSettingContext)\n\nexport const useThemeSetting = () => useContext(ThemeSettingContext)\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,2BAA2B;AAM7B,MAAM,WAAW,MAAM,WAAW,mBAAmB;AAErD,MAAM,kBAAkB,MAAM,WAAW,mBAAmB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/next-theme",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.10",
|
|
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/use-event": "^1.2.
|
|
19
|
+
"@tamagui/use-event": "^1.2.10"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "*"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@tamagui/build": "^1.2.
|
|
25
|
+
"@tamagui/build": "^1.2.10",
|
|
26
26
|
"react": "^18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|