@tamagui/next-theme 1.36.5 → 1.37.0

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.
Files changed (18) hide show
  1. package/dist/cjs/NextThemeProvider.js +144 -140
  2. package/dist/cjs/NextThemeProvider.js.map +1 -1
  3. package/dist/esm/NextThemeProvider.js +144 -140
  4. package/dist/esm/NextThemeProvider.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/NextThemeProvider.tsx +171 -164
  7. package/types/NextTheme.d.ts.map +1 -0
  8. package/types/NextThemeProvider.d.ts +1 -1
  9. package/types/NextThemeProvider.d.ts.map +1 -0
  10. package/types/ThemeSettingContext.d.ts.map +1 -0
  11. package/types/UseThemeProps.d.ts.map +1 -0
  12. package/types/constants.d.ts.map +1 -0
  13. package/types/helpers.d.ts.map +1 -0
  14. package/types/index.d.ts.map +1 -0
  15. package/types/types.d.ts.map +1 -0
  16. package/types/useIsomorphicLayoutEffect.d.ts.map +1 -0
  17. package/types/useRootTheme.d.ts.map +1 -0
  18. package/types/useTheme.d.ts.map +1 -0
package/dist/cjs/NextThemeProvider.js CHANGED
@@ -40,158 +40,162 @@ var import_constants = require("./constants");
40
40
  var import_helpers = require("./helpers");
41
41
  var import_ThemeSettingContext = require("./ThemeSettingContext");
42
42
  var import_useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
43
- const NextThemeProvider = ({
44
- forcedTheme,
45
- disableTransitionOnChange = true,
46
- enableSystem = true,
47
- enableColorScheme = true,
48
- storageKey = "theme",
49
- themes = import_constants.colorSchemes,
50
- defaultTheme = enableSystem ? "system" : "light",
51
- attribute = "class",
52
- skipNextHead,
53
- onChangeTheme,
54
- value = {
55
- dark: "t_dark",
56
- light: "t_light"
57
- },
58
- children
59
- }) => {
60
- const [theme, setThemeState] = (0, import_react.useState)(() => (0, import_helpers.getTheme)(storageKey, defaultTheme));
61
- const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(() => (0, import_helpers.getTheme)(storageKey));
62
- const attrs = !value ? themes : Object.values(value);
63
- const handleMediaQuery = (0, import_use_event.useEvent)((e) => {
64
- const systemTheme2 = (0, import_helpers.getSystemTheme)(e);
65
- React.startTransition(() => {
66
- setResolvedTheme(systemTheme2);
43
+ const NextThemeProvider = (0, import_react.memo)(
44
+ ({
45
+ forcedTheme,
46
+ disableTransitionOnChange = true,
47
+ enableSystem = true,
48
+ enableColorScheme = true,
49
+ storageKey = "theme",
50
+ themes = import_constants.colorSchemes,
51
+ defaultTheme = enableSystem ? "system" : "light",
52
+ attribute = "class",
53
+ skipNextHead,
54
+ onChangeTheme,
55
+ value = {
56
+ dark: "t_dark",
57
+ light: "t_light"
58
+ },
59
+ children
60
+ }) => {
61
+ const [theme, setThemeState] = (0, import_react.useState)(() => (0, import_helpers.getTheme)(storageKey, defaultTheme));
62
+ const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(() => (0, import_helpers.getTheme)(storageKey));
63
+ const attrs = !value ? themes : Object.values(value);
64
+ const handleMediaQuery = (0, import_use_event.useEvent)((e) => {
65
+ const systemTheme2 = (0, import_helpers.getSystemTheme)(e);
66
+ React.startTransition(() => {
67
+ setResolvedTheme(systemTheme2);
68
+ });
69
+ if (theme === "system" && !forcedTheme) {
70
+ handleChangeTheme(systemTheme2, false);
71
+ }
67
72
  });
68
- if (theme === "system" && !forcedTheme) {
69
- handleChangeTheme(systemTheme2, false);
70
- }
71
- });
72
- const mediaListener = (0, import_react.useRef)(handleMediaQuery);
73
- mediaListener.current = handleMediaQuery;
74
- const handleChangeTheme = (0, import_use_event.useEvent)((theme2, updateStorage = true, updateDOM = true) => {
75
- let name = (value == null ? void 0 : value[theme2]) || theme2;
76
- if (updateStorage) {
77
- try {
78
- localStorage.setItem(storageKey, theme2);
79
- } catch (e) {
73
+ const mediaListener = (0, import_react.useRef)(handleMediaQuery);
74
+ mediaListener.current = handleMediaQuery;
75
+ const handleChangeTheme = (0, import_use_event.useEvent)(
76
+ (theme2, updateStorage = true, updateDOM = true) => {
77
+ let name = (value == null ? void 0 : value[theme2]) || theme2;
78
+ if (updateStorage) {
79
+ try {
80
+ localStorage.setItem(storageKey, theme2);
81
+ } catch (e) {
82
+ }
83
+ }
84
+ if (theme2 === "system" && enableSystem) {
85
+ const resolved = (0, import_helpers.getSystemTheme)();
86
+ name = (value == null ? void 0 : value[resolved]) || resolved;
87
+ }
88
+ onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
89
+ if (updateDOM) {
90
+ const d = document.documentElement;
91
+ if (attribute === "class") {
92
+ d.classList.remove(...attrs);
93
+ d.classList.add(name);
94
+ } else {
95
+ d.setAttribute(attribute, name);
96
+ }
97
+ }
80
98
  }
81
- }
82
- if (theme2 === "system" && enableSystem) {
83
- const resolved = (0, import_helpers.getSystemTheme)();
84
- name = (value == null ? void 0 : value[resolved]) || resolved;
85
- }
86
- onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
87
- if (updateDOM) {
88
- const d = document.documentElement;
89
- if (attribute === "class") {
90
- d.classList.remove(...attrs);
91
- d.classList.add(name);
99
+ );
100
+ (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
101
+ const handler = (...args) => mediaListener.current(...args);
102
+ const media = window.matchMedia(import_constants.MEDIA);
103
+ media.addListener(handler);
104
+ handler(media);
105
+ return () => {
106
+ media.removeListener(handler);
107
+ };
108
+ }, []);
109
+ const set = (0, import_use_event.useEvent)((newTheme) => {
110
+ if (forcedTheme) {
111
+ handleChangeTheme(newTheme, true, false);
92
112
  } else {
93
- d.setAttribute(attribute, name);
113
+ handleChangeTheme(newTheme);
94
114
  }
95
- }
96
- });
97
- (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
98
- const handler = (...args) => mediaListener.current(...args);
99
- const media = window.matchMedia(import_constants.MEDIA);
100
- media.addListener(handler);
101
- handler(media);
102
- return () => {
103
- media.removeListener(handler);
104
- };
105
- }, []);
106
- const set = (0, import_use_event.useEvent)((newTheme) => {
107
- if (forcedTheme) {
108
- handleChangeTheme(newTheme, true, false);
109
- } else {
110
- handleChangeTheme(newTheme);
111
- }
112
- setThemeState(newTheme);
113
- });
114
- (0, import_react.useEffect)(() => {
115
- const handleStorage = (e) => {
116
- if (e.key !== storageKey) {
115
+ setThemeState(newTheme);
116
+ });
117
+ (0, import_react.useEffect)(() => {
118
+ const handleStorage = (e) => {
119
+ if (e.key !== storageKey) {
120
+ return;
121
+ }
122
+ const theme2 = e.newValue || defaultTheme;
123
+ set(theme2);
124
+ };
125
+ window.addEventListener("storage", handleStorage);
126
+ return () => {
127
+ window.removeEventListener("storage", handleStorage);
128
+ };
129
+ }, [defaultTheme, set, storageKey]);
130
+ (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
131
+ if (!enableColorScheme)
117
132
  return;
118
- }
119
- const theme2 = e.newValue || defaultTheme;
120
- set(theme2);
121
- };
122
- window.addEventListener("storage", handleStorage);
123
- return () => {
124
- window.removeEventListener("storage", handleStorage);
125
- };
126
- }, [defaultTheme, set, storageKey]);
127
- (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
128
- if (!enableColorScheme)
129
- return;
130
- const colorScheme = (
131
- // If theme is forced to light or dark, use that
132
- forcedTheme && import_constants.colorSchemes.includes(forcedTheme) ? forcedTheme : (
133
- // If regular theme is light or dark
134
- theme && import_constants.colorSchemes.includes(theme) ? theme : (
135
- // If theme is system, use the resolved version
136
- theme === "system" ? resolvedTheme || null : null
133
+ const colorScheme = (
134
+ // If theme is forced to light or dark, use that
135
+ forcedTheme && import_constants.colorSchemes.includes(forcedTheme) ? forcedTheme : (
136
+ // If regular theme is light or dark
137
+ theme && import_constants.colorSchemes.includes(theme) ? theme : (
138
+ // If theme is system, use the resolved version
139
+ theme === "system" ? resolvedTheme || null : null
140
+ )
137
141
  )
138
- )
139
- );
140
- const userPrefers = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
141
- const wePrefer = colorScheme || "light";
142
- if (userPrefers !== wePrefer || wePrefer === "dark") {
143
- document.documentElement.style.setProperty("color-scheme", colorScheme);
144
- }
145
- }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
146
- const toggle = (0, import_use_event.useEvent)(() => {
147
- const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
148
- const next = order[(order.indexOf(theme) + 1) % order.length];
149
- set(next);
150
- });
151
- const contextResolvedTheme = theme === "system" ? resolvedTheme : theme;
152
- const systemTheme = enableSystem ? resolvedTheme : void 0;
153
- const contextValue = (0, import_react.useMemo)(() => {
154
- const value2 = {
142
+ );
143
+ const userPrefers = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
144
+ const wePrefer = colorScheme || "light";
145
+ if (userPrefers !== wePrefer || wePrefer === "dark") {
146
+ document.documentElement.style.setProperty("color-scheme", colorScheme);
147
+ }
148
+ }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
149
+ const toggle = (0, import_use_event.useEvent)(() => {
150
+ const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
151
+ const next = order[(order.indexOf(theme) + 1) % order.length];
152
+ set(next);
153
+ });
154
+ const contextResolvedTheme = theme === "system" ? resolvedTheme : theme;
155
+ const systemTheme = enableSystem ? resolvedTheme : void 0;
156
+ const contextValue = (0, import_react.useMemo)(() => {
157
+ const value2 = {
158
+ theme,
159
+ current: theme,
160
+ set,
161
+ toggle,
162
+ forcedTheme,
163
+ resolvedTheme: contextResolvedTheme,
164
+ themes: enableSystem ? [...themes, "system"] : themes,
165
+ systemTheme
166
+ };
167
+ return value2;
168
+ }, [
155
169
  theme,
156
- current: theme,
157
170
  set,
158
171
  toggle,
159
172
  forcedTheme,
160
- resolvedTheme: contextResolvedTheme,
161
- themes: enableSystem ? [...themes, "system"] : themes,
173
+ contextResolvedTheme,
174
+ enableSystem,
175
+ themes,
162
176
  systemTheme
163
- };
164
- return value2;
165
- }, [
166
- theme,
167
- set,
168
- toggle,
169
- forcedTheme,
170
- contextResolvedTheme,
171
- enableSystem,
172
- themes,
173
- systemTheme
174
- ]);
175
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ThemeSettingContext.ThemeSettingContext.Provider, { value: contextValue, children: [
176
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
177
- ThemeScript,
178
- {
179
- ...{
180
- forcedTheme,
181
- storageKey,
182
- systemTheme: resolvedTheme,
183
- attribute,
184
- value,
185
- enableSystem,
186
- defaultTheme,
187
- attrs,
188
- skipNextHead
177
+ ]);
178
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ThemeSettingContext.ThemeSettingContext.Provider, { value: contextValue, children: [
179
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
180
+ ThemeScript,
181
+ {
182
+ ...{
183
+ forcedTheme,
184
+ storageKey,
185
+ systemTheme: resolvedTheme,
186
+ attribute,
187
+ value,
188
+ enableSystem,
189
+ defaultTheme,
190
+ attrs,
191
+ skipNextHead
192
+ }
189
193
  }
190
- }
191
- ),
192
- (0, import_react.useMemo)(() => children, [children])
193
- ] });
194
- };
194
+ ),
195
+ (0, import_react.useMemo)(() => children, [children])
196
+ ] });
197
+ }
198
+ );
195
199
  const ThemeScript = (0, import_react.memo)(
196
200
  ({
197
201
  forcedTheme,
package/dist/cjs/NextThemeProvider.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/NextThemeProvider.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": ["systemTheme", "theme", "value", "NextHead"]
6
6
  }
package/dist/esm/NextThemeProvider.js CHANGED
@@ -7,158 +7,162 @@ import { MEDIA, colorSchemes } from "./constants";
7
7
  import { getSystemTheme, getTheme } from "./helpers";
8
8
  import { ThemeSettingContext } from "./ThemeSettingContext";
9
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);
10
+ const NextThemeProvider = memo(
11
+ ({
12
+ forcedTheme,
13
+ disableTransitionOnChange = true,
14
+ enableSystem = true,
15
+ enableColorScheme = true,
16
+ storageKey = "theme",
17
+ themes = colorSchemes,
18
+ defaultTheme = enableSystem ? "system" : "light",
19
+ attribute = "class",
20
+ skipNextHead,
21
+ onChangeTheme,
22
+ value = {
23
+ dark: "t_dark",
24
+ light: "t_light"
25
+ },
26
+ children
27
+ }) => {
28
+ const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
29
+ const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
30
+ const attrs = !value ? themes : Object.values(value);
31
+ const handleMediaQuery = useEvent((e) => {
32
+ const systemTheme2 = getSystemTheme(e);
33
+ React.startTransition(() => {
34
+ setResolvedTheme(systemTheme2);
35
+ });
36
+ if (theme === "system" && !forcedTheme) {
37
+ handleChangeTheme(systemTheme2, false);
38
+ }
34
39
  });
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) {
40
+ const mediaListener = useRef(handleMediaQuery);
41
+ mediaListener.current = handleMediaQuery;
42
+ const handleChangeTheme = useEvent(
43
+ (theme2, updateStorage = true, updateDOM = true) => {
44
+ let name = (value == null ? void 0 : value[theme2]) || theme2;
45
+ if (updateStorage) {
46
+ try {
47
+ localStorage.setItem(storageKey, theme2);
48
+ } catch (e) {
49
+ }
50
+ }
51
+ if (theme2 === "system" && enableSystem) {
52
+ const resolved = getSystemTheme();
53
+ name = (value == null ? void 0 : value[resolved]) || resolved;
54
+ }
55
+ onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
56
+ if (updateDOM) {
57
+ const d = document.documentElement;
58
+ if (attribute === "class") {
59
+ d.classList.remove(...attrs);
60
+ d.classList.add(name);
61
+ } else {
62
+ d.setAttribute(attribute, name);
63
+ }
64
+ }
47
65
  }
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);
66
+ );
67
+ useIsomorphicLayoutEffect(() => {
68
+ const handler = (...args) => mediaListener.current(...args);
69
+ const media = window.matchMedia(MEDIA);
70
+ media.addListener(handler);
71
+ handler(media);
72
+ return () => {
73
+ media.removeListener(handler);
74
+ };
75
+ }, []);
76
+ const set = useEvent((newTheme) => {
77
+ if (forcedTheme) {
78
+ handleChangeTheme(newTheme, true, false);
59
79
  } else {
60
- d.setAttribute(attribute, name);
80
+ handleChangeTheme(newTheme);
61
81
  }
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) {
82
+ setThemeState(newTheme);
83
+ });
84
+ useEffect(() => {
85
+ const handleStorage = (e) => {
86
+ if (e.key !== storageKey) {
87
+ return;
88
+ }
89
+ const theme2 = e.newValue || defaultTheme;
90
+ set(theme2);
91
+ };
92
+ window.addEventListener("storage", handleStorage);
93
+ return () => {
94
+ window.removeEventListener("storage", handleStorage);
95
+ };
96
+ }, [defaultTheme, set, storageKey]);
97
+ useIsomorphicLayoutEffect(() => {
98
+ if (!enableColorScheme)
84
99
  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
100
+ const colorScheme = (
101
+ // If theme is forced to light or dark, use that
102
+ forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : (
103
+ // If regular theme is light or dark
104
+ theme && colorSchemes.includes(theme) ? theme : (
105
+ // If theme is system, use the resolved version
106
+ theme === "system" ? resolvedTheme || null : null
107
+ )
104
108
  )
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 = {
109
+ );
110
+ const userPrefers = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
111
+ const wePrefer = colorScheme || "light";
112
+ if (userPrefers !== wePrefer || wePrefer === "dark") {
113
+ document.documentElement.style.setProperty("color-scheme", colorScheme);
114
+ }
115
+ }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
116
+ const toggle = useEvent(() => {
117
+ const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
118
+ const next = order[(order.indexOf(theme) + 1) % order.length];
119
+ set(next);
120
+ });
121
+ const contextResolvedTheme = theme === "system" ? resolvedTheme : theme;
122
+ const systemTheme = enableSystem ? resolvedTheme : void 0;
123
+ const contextValue = useMemo(() => {
124
+ const value2 = {
125
+ theme,
126
+ current: theme,
127
+ set,
128
+ toggle,
129
+ forcedTheme,
130
+ resolvedTheme: contextResolvedTheme,
131
+ themes: enableSystem ? [...themes, "system"] : themes,
132
+ systemTheme
133
+ };
134
+ return value2;
135
+ }, [
122
136
  theme,
123
- current: theme,
124
137
  set,
125
138
  toggle,
126
139
  forcedTheme,
127
- resolvedTheme: contextResolvedTheme,
128
- themes: enableSystem ? [...themes, "system"] : themes,
140
+ contextResolvedTheme,
141
+ enableSystem,
142
+ themes,
129
143
  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
144
+ ]);
145
+ return /* @__PURE__ */ jsxs(ThemeSettingContext.Provider, { value: contextValue, children: [
146
+ /* @__PURE__ */ jsx(
147
+ ThemeScript,
148
+ {
149
+ ...{
150
+ forcedTheme,
151
+ storageKey,
152
+ systemTheme: resolvedTheme,
153
+ attribute,
154
+ value,
155
+ enableSystem,
156
+ defaultTheme,
157
+ attrs,
158
+ skipNextHead
159
+ }
156
160
  }
157
- }
158
- ),
159
- useMemo(() => children, [children])
160
- ] });
161
- };
161
+ ),
162
+ useMemo(() => children, [children])
163
+ ] });
164
+ }
165
+ );
162
166
  const ThemeScript = memo(
163
167
  ({
164
168
  forcedTheme,
package/dist/esm/NextThemeProvider.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/NextThemeProvider.tsx"],
4
- "mappings": "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",
4
+ "mappings": "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",
5
5
  "names": ["systemTheme", "theme", "value"]
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/next-theme",
3
- "version": "1.36.5",
3
+ "version": "1.37.0",
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.36.5"
19
+ "@tamagui/use-event": "1.37.0"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "react": "*"
23
23
  },
24
24
  "devDependencies": {
25
- "@tamagui/build": "1.36.5",
25
+ "@tamagui/build": "1.37.0",
26
26
  "react": "^18.2.0"
27
27
  },
28
28
  "publishConfig": {
package/src/NextThemeProvider.tsx CHANGED
@@ -10,197 +10,204 @@ import { ValueObject } from './types'
10
10
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
11
11
  import { ThemeProviderProps, UseThemeProps } from './UseThemeProps'
12
12
 
13
- export const NextThemeProvider: React.FC<ThemeProviderProps> = ({
14
- forcedTheme,
15
- disableTransitionOnChange = true,
16
- enableSystem = true,
17
- enableColorScheme = true,
18
- storageKey = 'theme',
19
- themes = colorSchemes,
20
- defaultTheme = enableSystem ? 'system' : 'light',
21
- attribute = 'class',
22
- skipNextHead,
23
- onChangeTheme,
24
- value = {
25
- dark: 't_dark',
26
- light: 't_light',
27
- },
28
- children,
29
- }) => {
30
- const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))
31
- const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))
32
- // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)
33
- const attrs = !value ? themes : Object.values(value)
13
+ export const NextThemeProvider = memo(
14
+ ({
15
+ forcedTheme,
16
+ disableTransitionOnChange = true,
17
+ enableSystem = true,
18
+ enableColorScheme = true,
19
+ storageKey = 'theme',
20
+ themes = colorSchemes,
21
+ defaultTheme = enableSystem ? 'system' : 'light',
22
+ attribute = 'class',
23
+ skipNextHead,
24
+ onChangeTheme,
25
+ value = {
26
+ dark: 't_dark',
27
+ light: 't_light',
28
+ },
29
+ children,
30
+ }: ThemeProviderProps) => {
31
+ const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))
32
+ const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))
33
+ // const resolvedTheme = React.useDeferredValue(resolvedThemeFast)
34
+ const attrs = !value ? themes : Object.values(value)
34
35
 
35
- const handleMediaQuery = useEvent((e?) => {
36
- const systemTheme = getSystemTheme(e)
37
- React.startTransition(() => {
38
- setResolvedTheme(systemTheme)
36
+ const handleMediaQuery = useEvent((e?) => {
37
+ const systemTheme = getSystemTheme(e)
38
+ React.startTransition(() => {
39
+ setResolvedTheme(systemTheme)
40
+ })
41
+ if (theme === 'system' && !forcedTheme) {
42
+ handleChangeTheme(systemTheme, false)
43
+ }
39
44
  })
40
- if (theme === 'system' && !forcedTheme) {
41
- handleChangeTheme(systemTheme, false)
42
- }
43
- })
44
45
 
45
- // Ref hack to avoid adding handleMediaQuery as a dep
46
- const mediaListener = useRef(handleMediaQuery)
47
- mediaListener.current = handleMediaQuery
46
+ // Ref hack to avoid adding handleMediaQuery as a dep
47
+ const mediaListener = useRef(handleMediaQuery)
48
+ mediaListener.current = handleMediaQuery
48
49
 
49
- const handleChangeTheme = useEvent((theme, updateStorage = true, updateDOM = true) => {
50
- let name = value?.[theme] || theme
50
+ const handleChangeTheme = useEvent(
51
+ (theme, updateStorage = true, updateDOM = true) => {
52
+ let name = value?.[theme] || theme
51
53
 
52
- if (updateStorage) {
53
- try {
54
- localStorage.setItem(storageKey, theme)
55
- } catch (e) {
56
- // Unsupported
57
- }
58
- }
54
+ if (updateStorage) {
55
+ try {
56
+ localStorage.setItem(storageKey, theme)
57
+ } catch (e) {
58
+ // Unsupported
59
+ }
60
+ }
59
61
 
60
- if (theme === 'system' && enableSystem) {
61
- const resolved = getSystemTheme()
62
- name = value?.[resolved] || resolved
63
- }
62
+ if (theme === 'system' && enableSystem) {
63
+ const resolved = getSystemTheme()
64
+ name = value?.[resolved] || resolved
65
+ }
64
66
 
65
- onChangeTheme?.(name.replace('t_', ''))
67
+ onChangeTheme?.(name.replace('t_', ''))
66
68
 
67
- if (updateDOM) {
68
- const d = document.documentElement
69
- if (attribute === 'class') {
70
- d.classList.remove(...attrs)
71
- d.classList.add(name)
72
- } else {
73
- d.setAttribute(attribute, name)
69
+ if (updateDOM) {
70
+ const d = document.documentElement
71
+ if (attribute === 'class') {
72
+ d.classList.remove(...attrs)
73
+ d.classList.add(name)
74
+ } else {
75
+ d.setAttribute(attribute, name)
76
+ }
77
+ }
74
78
  }
75
- }
76
- })
79
+ )
77
80
 
78
- useIsomorphicLayoutEffect(() => {
79
- const handler = (...args: any) => mediaListener.current(...args)
80
- // Always listen to System preference
81
- const media = window.matchMedia(MEDIA)
82
- // Intentionally use deprecated listener methods to support iOS & old browsers
83
- media.addListener(handler)
84
- handler(media)
85
- return () => {
86
- media.removeListener(handler)
87
- }
88
- }, [])
81
+ useIsomorphicLayoutEffect(() => {
82
+ const handler = (...args: any) => mediaListener.current(...args)
83
+ // Always listen to System preference
84
+ const media = window.matchMedia(MEDIA)
85
+ // Intentionally use deprecated listener methods to support iOS & old browsers
86
+ media.addListener(handler)
87
+ handler(media)
88
+ return () => {
89
+ media.removeListener(handler)
90
+ }
91
+ }, [])
89
92
 
90
- const set = useEvent((newTheme) => {
91
- if (forcedTheme) {
92
- handleChangeTheme(newTheme, true, false)
93
- } else {
94
- handleChangeTheme(newTheme)
95
- }
96
- setThemeState(newTheme)
97
- })
93
+ const set = useEvent((newTheme) => {
94
+ if (forcedTheme) {
95
+ handleChangeTheme(newTheme, true, false)
96
+ } else {
97
+ handleChangeTheme(newTheme)
98
+ }
99
+ setThemeState(newTheme)
100
+ })
98
101
 
99
- // localStorage event handling
100
- useEffect(() => {
101
- const handleStorage = (e: StorageEvent) => {
102
- if (e.key !== storageKey) {
103
- return
102
+ // localStorage event handling
103
+ useEffect(() => {
104
+ const handleStorage = (e: StorageEvent) => {
105
+ if (e.key !== storageKey) {
106
+ return
107
+ }
108
+ // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
109
+ const theme = e.newValue || defaultTheme
110
+ set(theme)
104
111
  }
105
- // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
106
- const theme = e.newValue || defaultTheme
107
- set(theme)
108
- }
109
- window.addEventListener('storage', handleStorage)
110
- return () => {
111
- window.removeEventListener('storage', handleStorage)
112
- }
113
- }, [defaultTheme, set, storageKey])
112
+ window.addEventListener('storage', handleStorage)
113
+ return () => {
114
+ window.removeEventListener('storage', handleStorage)
115
+ }
116
+ }, [defaultTheme, set, storageKey])
114
117
 
115
- // color-scheme handling
116
- useIsomorphicLayoutEffect(() => {
117
- if (!enableColorScheme) return
118
+ // color-scheme handling
119
+ useIsomorphicLayoutEffect(() => {
120
+ if (!enableColorScheme) return
118
121
 
119
- const colorScheme =
120
- // If theme is forced to light or dark, use that
121
- forcedTheme && colorSchemes.includes(forcedTheme)
122
- ? forcedTheme
123
- : // If regular theme is light or dark
124
- theme && colorSchemes.includes(theme)
125
- ? theme
126
- : // If theme is system, use the resolved version
127
- theme === 'system'
128
- ? resolvedTheme || null
129
- : null
122
+ const colorScheme =
123
+ // If theme is forced to light or dark, use that
124
+ forcedTheme && colorSchemes.includes(forcedTheme)
125
+ ? forcedTheme
126
+ : // If regular theme is light or dark
127
+ theme && colorSchemes.includes(theme)
128
+ ? theme
129
+ : // If theme is system, use the resolved version
130
+ theme === 'system'
131
+ ? resolvedTheme || null
132
+ : null
130
133
 
131
- // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.
132
- // if color-scheme is null, this will remove the property
133
- const userPrefers =
134
- typeof window !== 'undefined' &&
135
- window.matchMedia &&
136
- window.matchMedia('(prefers-color-scheme: dark)').matches
137
- ? 'dark'
138
- : 'light'
134
+ // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.
135
+ // if color-scheme is null, this will remove the property
136
+ const userPrefers =
137
+ typeof window !== 'undefined' &&
138
+ window.matchMedia &&
139
+ window.matchMedia('(prefers-color-scheme: dark)').matches
140
+ ? 'dark'
141
+ : 'light'
139
142
 
140
- const wePrefer = colorScheme || 'light'
143
+ const wePrefer = colorScheme || 'light'
141
144
 
142
- // avoid running this because it causes full page reflow
143
- if (userPrefers !== wePrefer || wePrefer === 'dark') {
144
- document.documentElement.style.setProperty('color-scheme', colorScheme)
145
- }
146
- }, [enableColorScheme, theme, resolvedTheme, forcedTheme])
145
+ // avoid running this because it causes full page reflow
146
+ if (userPrefers !== wePrefer || wePrefer === 'dark') {
147
+ document.documentElement.style.setProperty('color-scheme', colorScheme)
148
+ }
149
+ }, [enableColorScheme, theme, resolvedTheme, forcedTheme])
147
150
 
148
- const toggle = useEvent(() => {
149
- const order =
150
- resolvedTheme === 'dark' ? ['system', 'light', 'dark'] : ['system', 'dark', 'light']
151
- const next = order[(order.indexOf(theme) + 1) % order.length]
152
- set(next)
153
- })
151
+ const toggle = useEvent(() => {
152
+ const order =
153
+ resolvedTheme === 'dark'
154
+ ? ['system', 'light', 'dark']
155
+ : ['system', 'dark', 'light']
156
+ const next = order[(order.indexOf(theme) + 1) % order.length]
157
+ set(next)
158
+ })
154
159
 
155
- const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme
156
- const systemTheme = (enableSystem ? resolvedTheme : undefined) as
157
- | 'light'
158
- | 'dark'
159
- | undefined
160
+ const contextResolvedTheme = theme === 'system' ? resolvedTheme : theme
161
+ const systemTheme = (enableSystem ? resolvedTheme : undefined) as
162
+ | 'light'
163
+ | 'dark'
164
+ | undefined
160
165
 
161
- const contextValue = useMemo(() => {
162
- const value: UseThemeProps = {
166
+ const contextValue = useMemo(() => {
167
+ const value: UseThemeProps = {
168
+ theme,
169
+ current: theme,
170
+ set,
171
+ toggle,
172
+ forcedTheme,
173
+ resolvedTheme: contextResolvedTheme,
174
+ themes: enableSystem ? [...themes, 'system'] : themes,
175
+ systemTheme,
176
+ } as const
177
+ return value
178
+ }, [
163
179
  theme,
164
- current: theme,
165
180
  set,
166
181
  toggle,
167
182
  forcedTheme,
168
- resolvedTheme: contextResolvedTheme,
169
- themes: enableSystem ? [...themes, 'system'] : themes,
183
+ contextResolvedTheme,
184
+ enableSystem,
185
+ themes,
170
186
  systemTheme,
171
- } as const
172
- return value
173
- }, [
174
- theme,
175
- set,
176
- toggle,
177
- forcedTheme,
178
- contextResolvedTheme,
179
- enableSystem,
180
- themes,
181
- systemTheme,
182
- ])
187
+ ])
188
+
189
+ return (
190
+ <ThemeSettingContext.Provider value={contextValue}>
191
+ <ThemeScript
192
+ {...{
193
+ forcedTheme,
194
+ storageKey,
195
+ systemTheme: resolvedTheme,
196
+ attribute,
197
+ value,
198
+ enableSystem,
199
+ defaultTheme,
200
+ attrs,
201
+ skipNextHead,
202
+ }}
203
+ />
204
+ {/* because on SSR we re-run and can avoid whole tree re-render */}
205
+ {useMemo(() => children, [children])}
206
+ </ThemeSettingContext.Provider>
207
+ )
208
+ }
209
+ )
183
210
 
184
- return (
185
- <ThemeSettingContext.Provider value={contextValue}>
186
- <ThemeScript
187
- {...{
188
- forcedTheme,
189
- storageKey,
190
- systemTheme: resolvedTheme,
191
- attribute,
192
- value,
193
- enableSystem,
194
- defaultTheme,
195
- attrs,
196
- skipNextHead,
197
- }}
198
- />
199
- {/* because on SSR we re-run and can avoid whole tree re-render */}
200
- {useMemo(() => children, [children])}
201
- </ThemeSettingContext.Provider>
202
- )
203
- }
204
211
  const ThemeScript = memo(
205
212
  ({
206
213
  forcedTheme,
package/types/NextTheme.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NextTheme.d.ts","sourceRoot":"","sources":["../src/NextTheme.tsx"],"names":[],"mappings":"AAGA,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA"}
package/types/NextThemeProvider.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { ThemeProviderProps } from './UseThemeProps';
3
- export declare const NextThemeProvider: React.FC<ThemeProviderProps>;
3
+ export declare const NextThemeProvider: React.MemoExoticComponent<({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, storageKey, themes, defaultTheme, attribute, skipNextHead, onChangeTheme, value, children, }: ThemeProviderProps) => JSX.Element>;
4
4
  //# sourceMappingURL=NextThemeProvider.d.ts.map
package/types/NextThemeProvider.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NextThemeProvider.d.ts","sourceRoot":"","sources":["../src/NextThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EAAE,kBAAkB,EAAiB,MAAM,iBAAiB,CAAA;AAEnE,eAAO,MAAM,iBAAiB,sMAiBzB,kBAAkB,iBAmLtB,CAAA"}
package/types/ThemeSettingContext.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeSettingContext.d.ts","sourceRoot":"","sources":["../src/ThemeSettingContext.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,eAAO,MAAM,mBAAmB,wCAI9B,CAAA"}
package/types/UseThemeProps.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UseThemeProps.d.ts","sourceRoot":"","sources":["../src/UseThemeProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uBAAuB;IACvB,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,uHAAuH;IACvH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4KAA4K;IAC5K,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4HAA4H;IAC5H,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,yHAAyH;IACzH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+HAA+H;IAC/H,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oJAAoJ;IACpJ,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,yHAAyH;IACzH,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAGtC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB"}
package/types/constants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,IAAK,CAAA;AAC3B,eAAO,MAAM,YAAY,UAAoB,CAAA;AAC7C,eAAO,MAAM,KAAK,iCAAiC,CAAA"}
package/types/helpers.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,IAAK,CAAA;AAGzB,eAAO,MAAM,QAAQ,QAAS,MAAM,aAAa,MAAM,QAStD,CAAA;AAED,eAAO,MAAM,cAAc,OAAQ,cAAc,qBAQhD,CAAA"}
package/types/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA"}
package/types/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAA;AAE1C,MAAM,WAAW,WAAW;IAC1B,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B"}
package/types/useIsomorphicLayoutEffect.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../src/useIsomorphicLayoutEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAE,MAAM,OAAO,CAAA;AAElD,eAAO,MAAM,yBAAyB,wBACuB,CAAA"}
package/types/useRootTheme.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useRootTheme.d.ts","sourceRoot":"","sources":["../src/useRootTheme.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,YAAY;;mGAqBxB,CAAA"}
package/types/useTheme.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,eAAO,MAAM,QAAQ,+CAAwC,CAAA;AAE7D,eAAO,MAAM,eAAe,+CAAwC,CAAA"}