@tamagui/next-theme 1.1.3 → 1.1.4
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 +9 -273
- package/dist/cjs/NextTheme.js.map +3 -3
- package/dist/cjs/NextThemeProvider.js +245 -0
- package/dist/cjs/NextThemeProvider.js.map +7 -0
- package/dist/cjs/ThemeSettingContext.js +36 -0
- package/dist/cjs/ThemeSettingContext.js.map +7 -0
- package/dist/cjs/UseThemeProps.js +17 -0
- package/dist/cjs/UseThemeProps.js.map +7 -0
- package/dist/cjs/constants.js +35 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/helpers.js +52 -0
- package/dist/cjs/helpers.js.map +7 -0
- package/dist/cjs/types.js +17 -0
- package/dist/cjs/types.js.map +7 -0
- package/dist/cjs/useIsomorphicLayoutEffect.js +30 -0
- package/dist/cjs/useIsomorphicLayoutEffect.js.map +7 -0
- package/dist/cjs/useRootTheme.js +49 -0
- package/dist/cjs/useRootTheme.js.map +7 -0
- package/dist/cjs/useTheme.js +34 -0
- package/dist/cjs/useTheme.js.map +7 -0
- package/dist/esm/NextTheme.js +8 -265
- package/dist/esm/NextTheme.js.map +3 -3
- package/dist/esm/NextThemeProvider.js +215 -0
- package/dist/esm/NextThemeProvider.js.map +7 -0
- package/dist/esm/ThemeSettingContext.js +12 -0
- package/dist/esm/ThemeSettingContext.js.map +7 -0
- package/dist/esm/UseThemeProps.js +1 -0
- package/dist/esm/UseThemeProps.js.map +7 -0
- package/dist/esm/constants.js +9 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/helpers.js +26 -0
- package/dist/esm/helpers.js.map +7 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +7 -0
- package/dist/esm/useIsomorphicLayoutEffect.js +6 -0
- package/dist/esm/useIsomorphicLayoutEffect.js.map +7 -0
- package/dist/esm/useRootTheme.js +19 -0
- package/dist/esm/useRootTheme.js.map +7 -0
- package/dist/esm/useTheme.js +9 -0
- package/dist/esm/useTheme.js.map +7 -0
- package/package.json +3 -3
- package/src/NextTheme.tsx +10 -408
- package/src/NextThemeProvider.tsx +297 -0
- package/src/ThemeSettingContext.tsx +9 -0
- package/src/UseThemeProps.tsx +46 -0
- package/src/constants.tsx +3 -0
- package/src/helpers.tsx +25 -0
- package/src/types.tsx +5 -0
- package/src/useIsomorphicLayoutEffect.tsx +4 -0
- package/src/useRootTheme.tsx +21 -0
- package/src/useTheme.tsx +11 -0
- package/types/NextTheme.d.ts +8 -53
- package/types/NextThemeProvider.d.ts +4 -0
- package/types/ThemeSettingContext.d.ts +4 -0
- package/types/UseThemeProps.d.ts +43 -0
- package/types/constants.d.ts +4 -0
- package/types/helpers.d.ts +4 -0
- package/types/types.d.ts +5 -0
- package/types/useIsomorphicLayoutEffect.d.ts +3 -0
- package/types/useRootTheme.d.ts +3 -0
- package/types/useTheme.d.ts +6 -0
|
@@ -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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAIvB,MAAM,0BAAsB,4BAA6B;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,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var UseThemeProps_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(UseThemeProps_exports);
|
|
17
|
+
//# sourceMappingURL=UseThemeProps.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/UseThemeProps.tsx"],
|
|
4
|
+
"sourcesContent": ["import { ValueObject } from './types'\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 set: (theme: string) => void\n toggle: () => void\n /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n current?: string\n /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n theme?: string\n /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n resolvedTheme?: string\n /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n children?: any\n /** List of all available theme names */\n themes?: string[]\n /** Forced theme name for the current page */\n forcedTheme?: string\n /** Whether to switch between dark and light themes based on prefers-color-scheme */\n enableSystem?: boolean\n systemTheme?: string\n /** Disable all CSS transitions when switching themes */\n disableTransitionOnChange?: boolean\n /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n enableColorScheme?: boolean\n /** Key used to store theme setting in localStorage */\n storageKey?: string\n /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n defaultTheme?: string\n /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n attribute?: string | 'class'\n /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n value?: ValueObject\n onChangeTheme?: (name: string) => void\n\n // avoids warning\n skipNextHead?: boolean\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var constants_exports = {};
|
|
20
|
+
__export(constants_exports, {
|
|
21
|
+
MEDIA: () => MEDIA,
|
|
22
|
+
colorSchemes: () => colorSchemes,
|
|
23
|
+
constants: () => constants
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(constants_exports);
|
|
26
|
+
const constants = {};
|
|
27
|
+
const colorSchemes = ["light", "dark"];
|
|
28
|
+
const MEDIA = "(prefers-color-scheme: dark)";
|
|
29
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
30
|
+
0 && (module.exports = {
|
|
31
|
+
MEDIA,
|
|
32
|
+
colorSchemes,
|
|
33
|
+
constants
|
|
34
|
+
});
|
|
35
|
+
//# sourceMappingURL=constants.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,YAAY,CAAC;AACnB,MAAM,eAAe,CAAC,SAAS,MAAM;AACrC,MAAM,QAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var helpers_exports = {};
|
|
20
|
+
__export(helpers_exports, {
|
|
21
|
+
getSystemTheme: () => getSystemTheme,
|
|
22
|
+
getTheme: () => getTheme,
|
|
23
|
+
helpers: () => helpers
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(helpers_exports);
|
|
26
|
+
var import_constants = require("./constants");
|
|
27
|
+
const helpers = {};
|
|
28
|
+
const getTheme = (key, fallback) => {
|
|
29
|
+
if (typeof window === "undefined")
|
|
30
|
+
return void 0;
|
|
31
|
+
let theme;
|
|
32
|
+
try {
|
|
33
|
+
theme = localStorage.getItem(key) || void 0;
|
|
34
|
+
} catch (e) {
|
|
35
|
+
}
|
|
36
|
+
return theme || fallback;
|
|
37
|
+
};
|
|
38
|
+
const getSystemTheme = (e) => {
|
|
39
|
+
if (!e) {
|
|
40
|
+
e = window.matchMedia(import_constants.MEDIA);
|
|
41
|
+
}
|
|
42
|
+
const isDark = e.matches;
|
|
43
|
+
const systemTheme = isDark ? "dark" : "light";
|
|
44
|
+
return systemTheme;
|
|
45
|
+
};
|
|
46
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
47
|
+
0 && (module.exports = {
|
|
48
|
+
getSystemTheme,
|
|
49
|
+
getTheme,
|
|
50
|
+
helpers
|
|
51
|
+
});
|
|
52
|
+
//# sourceMappingURL=helpers.js.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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;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,sBAAK;AAAA,EAC7B;AAEA,QAAM,SAAS,EAAE;AACjB,QAAM,cAAc,SAAS,SAAS;AACtC,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var types_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(types_exports);
|
|
17
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useIsomorphicLayoutEffect_exports = {};
|
|
20
|
+
__export(useIsomorphicLayoutEffect_exports, {
|
|
21
|
+
useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(useIsomorphicLayoutEffect_exports);
|
|
24
|
+
var import_react = require("react");
|
|
25
|
+
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
|
|
26
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
27
|
+
0 && (module.exports = {
|
|
28
|
+
useIsomorphicLayoutEffect
|
|
29
|
+
});
|
|
30
|
+
//# sourceMappingURL=useIsomorphicLayoutEffect.js.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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAEpC,MAAM,4BACX,OAAO,WAAW,cAAc,+BAAkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var useRootTheme_exports = {};
|
|
26
|
+
__export(useRootTheme_exports, {
|
|
27
|
+
useRootTheme: () => useRootTheme
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(useRootTheme_exports);
|
|
30
|
+
var React = __toESM(require("react"));
|
|
31
|
+
var import_react = require("react");
|
|
32
|
+
const useRootTheme = () => {
|
|
33
|
+
const [val, setVal] = (0, import_react.useState)("light");
|
|
34
|
+
if (typeof document !== "undefined") {
|
|
35
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
36
|
+
const classes = [...document.documentElement.classList];
|
|
37
|
+
const isDark = classes.includes("t_dark");
|
|
38
|
+
React.startTransition(() => {
|
|
39
|
+
setVal(isDark ? "dark" : "light");
|
|
40
|
+
});
|
|
41
|
+
}, []);
|
|
42
|
+
}
|
|
43
|
+
return [val, setVal];
|
|
44
|
+
};
|
|
45
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
46
|
+
0 && (module.exports = {
|
|
47
|
+
useRootTheme
|
|
48
|
+
});
|
|
49
|
+
//# sourceMappingURL=useRootTheme.js.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;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAA0C;AAInC,MAAM,eAAe,MAAM;AAChC,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,OAAO;AAEtC,MAAI,OAAO,aAAa,aAAa;AACnC,sCAAgB,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,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useTheme_exports = {};
|
|
20
|
+
__export(useTheme_exports, {
|
|
21
|
+
useTheme: () => useTheme,
|
|
22
|
+
useThemeSetting: () => useThemeSetting
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(useTheme_exports);
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
var import_ThemeSettingContext = require("./ThemeSettingContext");
|
|
27
|
+
const useTheme = () => (0, import_react.useContext)(import_ThemeSettingContext.ThemeSettingContext);
|
|
28
|
+
const useThemeSetting = () => (0, import_react.useContext)(import_ThemeSettingContext.ThemeSettingContext);
|
|
29
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
30
|
+
0 && (module.exports = {
|
|
31
|
+
useTheme,
|
|
32
|
+
useThemeSetting
|
|
33
|
+
});
|
|
34
|
+
//# sourceMappingURL=useTheme.js.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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAE3B,iCAAoC;AAM7B,MAAM,WAAW,UAAM,yBAAW,8CAAmB;AAErD,MAAM,kBAAkB,UAAM,yBAAW,8CAAmB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/NextTheme.js
CHANGED
|
@@ -1,266 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
useEffect,
|
|
10
|
-
useLayoutEffect,
|
|
11
|
-
useMemo,
|
|
12
|
-
useRef,
|
|
13
|
-
useState
|
|
14
|
-
} from "react";
|
|
15
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
16
|
-
const ThemeSettingContext = createContext({
|
|
17
|
-
toggle: () => {
|
|
18
|
-
},
|
|
19
|
-
set: (_) => {
|
|
20
|
-
},
|
|
21
|
-
themes: []
|
|
22
|
-
});
|
|
23
|
-
const useTheme = () => useContext(ThemeSettingContext);
|
|
24
|
-
const useThemeSetting = () => useContext(ThemeSettingContext);
|
|
25
|
-
const colorSchemes = ["light", "dark"];
|
|
26
|
-
const MEDIA = "(prefers-color-scheme: dark)";
|
|
27
|
-
const useRootTheme = () => {
|
|
28
|
-
const [val, setVal] = useState("light");
|
|
29
|
-
if (typeof document !== "undefined") {
|
|
30
|
-
useLayoutEffect(() => {
|
|
31
|
-
const classes = [...document.documentElement.classList];
|
|
32
|
-
const isDark = classes.includes("t_dark");
|
|
33
|
-
React.startTransition(() => {
|
|
34
|
-
setVal(isDark ? "dark" : "light");
|
|
35
|
-
});
|
|
36
|
-
}, []);
|
|
37
|
-
}
|
|
38
|
-
return [val, setVal];
|
|
39
|
-
};
|
|
40
|
-
const NextThemeProvider = ({
|
|
41
|
-
forcedTheme,
|
|
42
|
-
disableTransitionOnChange = true,
|
|
43
|
-
enableSystem = true,
|
|
44
|
-
enableColorScheme = true,
|
|
45
|
-
storageKey = "theme",
|
|
46
|
-
themes = colorSchemes,
|
|
47
|
-
defaultTheme = enableSystem ? "system" : "light",
|
|
48
|
-
attribute = "class",
|
|
49
|
-
skipNextHead,
|
|
50
|
-
onChangeTheme,
|
|
51
|
-
value = {
|
|
52
|
-
dark: "t_dark",
|
|
53
|
-
light: "t_light"
|
|
54
|
-
},
|
|
55
|
-
children
|
|
56
|
-
}) => {
|
|
57
|
-
const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
|
|
58
|
-
const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
|
|
59
|
-
const attrs = !value ? themes : Object.values(value);
|
|
60
|
-
const handleMediaQuery = useEvent((e) => {
|
|
61
|
-
const systemTheme2 = getSystemTheme(e);
|
|
62
|
-
React.startTransition(() => {
|
|
63
|
-
setResolvedTheme(systemTheme2);
|
|
64
|
-
});
|
|
65
|
-
if (theme === "system" && !forcedTheme) {
|
|
66
|
-
handleChangeTheme(systemTheme2, false);
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
const mediaListener = useRef(handleMediaQuery);
|
|
70
|
-
mediaListener.current = handleMediaQuery;
|
|
71
|
-
const handleChangeTheme = useEvent((theme2, updateStorage = true, updateDOM = true) => {
|
|
72
|
-
let name = (value == null ? void 0 : value[theme2]) || theme2;
|
|
73
|
-
if (updateStorage) {
|
|
74
|
-
try {
|
|
75
|
-
localStorage.setItem(storageKey, theme2);
|
|
76
|
-
} catch (e) {
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
if (theme2 === "system" && enableSystem) {
|
|
80
|
-
const resolved = getSystemTheme();
|
|
81
|
-
name = (value == null ? void 0 : value[resolved]) || resolved;
|
|
82
|
-
}
|
|
83
|
-
onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
|
|
84
|
-
if (updateDOM) {
|
|
85
|
-
const d = document.documentElement;
|
|
86
|
-
if (attribute === "class") {
|
|
87
|
-
d.classList.remove(...attrs);
|
|
88
|
-
d.classList.add(name);
|
|
89
|
-
} else {
|
|
90
|
-
d.setAttribute(attribute, name);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
useIsomorphicLayoutEffect(() => {
|
|
95
|
-
const handler = (...args) => mediaListener.current(...args);
|
|
96
|
-
const media = window.matchMedia(MEDIA);
|
|
97
|
-
media.addListener(handler);
|
|
98
|
-
handler(media);
|
|
99
|
-
return () => {
|
|
100
|
-
media.removeListener(handler);
|
|
101
|
-
};
|
|
102
|
-
}, []);
|
|
103
|
-
const set = useEvent((newTheme) => {
|
|
104
|
-
if (forcedTheme) {
|
|
105
|
-
handleChangeTheme(newTheme, true, false);
|
|
106
|
-
} else {
|
|
107
|
-
handleChangeTheme(newTheme);
|
|
108
|
-
}
|
|
109
|
-
setThemeState(newTheme);
|
|
110
|
-
});
|
|
111
|
-
useEffect(() => {
|
|
112
|
-
const handleStorage = (e) => {
|
|
113
|
-
if (e.key !== storageKey) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
const theme2 = e.newValue || defaultTheme;
|
|
117
|
-
set(theme2);
|
|
118
|
-
};
|
|
119
|
-
window.addEventListener("storage", handleStorage);
|
|
120
|
-
return () => {
|
|
121
|
-
window.removeEventListener("storage", handleStorage);
|
|
122
|
-
};
|
|
123
|
-
}, [defaultTheme, set, storageKey]);
|
|
124
|
-
useIsomorphicLayoutEffect(() => {
|
|
125
|
-
if (!enableColorScheme)
|
|
126
|
-
return;
|
|
127
|
-
const colorScheme = forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : theme && colorSchemes.includes(theme) ? theme : theme === "system" ? resolvedTheme || null : null;
|
|
128
|
-
const userPrefers = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
129
|
-
const wePrefer = colorScheme || "light";
|
|
130
|
-
if (userPrefers !== wePrefer) {
|
|
131
|
-
document.documentElement.style.setProperty("color-scheme", colorScheme);
|
|
132
|
-
}
|
|
133
|
-
}, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
|
|
134
|
-
const toggle = useEvent(() => {
|
|
135
|
-
const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
|
|
136
|
-
const next = order[(order.indexOf(theme) + 1) % order.length];
|
|
137
|
-
set(next);
|
|
138
|
-
});
|
|
139
|
-
const contextResolvedTheme = theme === "system" ? resolvedTheme : theme;
|
|
140
|
-
const systemTheme = enableSystem ? resolvedTheme : void 0;
|
|
141
|
-
const contextValue = useMemo(() => {
|
|
142
|
-
const value2 = {
|
|
143
|
-
theme,
|
|
144
|
-
current: theme,
|
|
145
|
-
set,
|
|
146
|
-
toggle,
|
|
147
|
-
forcedTheme,
|
|
148
|
-
resolvedTheme: contextResolvedTheme,
|
|
149
|
-
themes: enableSystem ? [...themes, "system"] : themes,
|
|
150
|
-
systemTheme
|
|
151
|
-
};
|
|
152
|
-
return value2;
|
|
153
|
-
}, [
|
|
154
|
-
theme,
|
|
155
|
-
set,
|
|
156
|
-
toggle,
|
|
157
|
-
forcedTheme,
|
|
158
|
-
contextResolvedTheme,
|
|
159
|
-
enableSystem,
|
|
160
|
-
themes,
|
|
161
|
-
systemTheme
|
|
162
|
-
]);
|
|
163
|
-
return /* @__PURE__ */ jsxs(ThemeSettingContext.Provider, {
|
|
164
|
-
value: contextValue,
|
|
165
|
-
children: [
|
|
166
|
-
/* @__PURE__ */ jsx(ThemeScript, {
|
|
167
|
-
...{
|
|
168
|
-
forcedTheme,
|
|
169
|
-
storageKey,
|
|
170
|
-
systemTheme: resolvedTheme,
|
|
171
|
-
attribute,
|
|
172
|
-
value,
|
|
173
|
-
enableSystem,
|
|
174
|
-
defaultTheme,
|
|
175
|
-
attrs,
|
|
176
|
-
skipNextHead
|
|
177
|
-
}
|
|
178
|
-
}),
|
|
179
|
-
useMemo(() => children, [children])
|
|
180
|
-
]
|
|
181
|
-
});
|
|
182
|
-
};
|
|
183
|
-
const ThemeScript = memo(
|
|
184
|
-
({
|
|
185
|
-
forcedTheme,
|
|
186
|
-
storageKey,
|
|
187
|
-
attribute,
|
|
188
|
-
enableSystem,
|
|
189
|
-
defaultTheme,
|
|
190
|
-
value,
|
|
191
|
-
attrs,
|
|
192
|
-
skipNextHead
|
|
193
|
-
}) => {
|
|
194
|
-
const optimization = (() => {
|
|
195
|
-
if (attribute === "class") {
|
|
196
|
-
const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
|
|
197
|
-
return `var d=document.documentElement.classList;${removeClasses};`;
|
|
198
|
-
} else {
|
|
199
|
-
return `var d=document.documentElement;`;
|
|
200
|
-
}
|
|
201
|
-
})();
|
|
202
|
-
const updateDOM = (name, literal) => {
|
|
203
|
-
name = (value == null ? void 0 : value[name]) || name;
|
|
204
|
-
const val = literal ? name : `'${name}'`;
|
|
205
|
-
if (attribute === "class") {
|
|
206
|
-
return `d.add(${val})`;
|
|
207
|
-
}
|
|
208
|
-
return `d.setAttribute('${attribute}', ${val})`;
|
|
209
|
-
};
|
|
210
|
-
const defaultSystem = defaultTheme === "system";
|
|
211
|
-
const contents = /* @__PURE__ */ jsx(Fragment, {
|
|
212
|
-
children: forcedTheme ? /* @__PURE__ */ jsx("script", {
|
|
213
|
-
dangerouslySetInnerHTML: {
|
|
214
|
-
__html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
|
|
215
|
-
}
|
|
216
|
-
}, "next-themes-script") : enableSystem ? /* @__PURE__ */ jsx("script", {
|
|
217
|
-
dangerouslySetInnerHTML: {
|
|
218
|
-
__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(
|
|
219
|
-
"dark"
|
|
220
|
-
)}:${updateDOM("light")}}else if(e) ${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}catch(e){}}()`
|
|
221
|
-
}
|
|
222
|
-
}, "next-themes-script") : /* @__PURE__ */ jsx("script", {
|
|
223
|
-
dangerouslySetInnerHTML: {
|
|
224
|
-
__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(
|
|
225
|
-
defaultTheme
|
|
226
|
-
)};}}catch(t){}}();`
|
|
227
|
-
}
|
|
228
|
-
}, "next-themes-script")
|
|
229
|
-
});
|
|
230
|
-
if (skipNextHead)
|
|
231
|
-
return contents;
|
|
232
|
-
return /* @__PURE__ */ jsx(NextHead, {
|
|
233
|
-
children: contents
|
|
234
|
-
});
|
|
235
|
-
},
|
|
236
|
-
(prevProps, nextProps) => {
|
|
237
|
-
if (prevProps.forcedTheme !== nextProps.forcedTheme)
|
|
238
|
-
return false;
|
|
239
|
-
return true;
|
|
240
|
-
}
|
|
241
|
-
);
|
|
242
|
-
const getTheme = (key, fallback) => {
|
|
243
|
-
if (typeof window === "undefined")
|
|
244
|
-
return void 0;
|
|
245
|
-
let theme;
|
|
246
|
-
try {
|
|
247
|
-
theme = localStorage.getItem(key) || void 0;
|
|
248
|
-
} catch (e) {
|
|
249
|
-
}
|
|
250
|
-
return theme || fallback;
|
|
251
|
-
};
|
|
252
|
-
const getSystemTheme = (e) => {
|
|
253
|
-
if (!e) {
|
|
254
|
-
e = window.matchMedia(MEDIA);
|
|
255
|
-
}
|
|
256
|
-
const isDark = e.matches;
|
|
257
|
-
const systemTheme = isDark ? "dark" : "light";
|
|
258
|
-
return systemTheme;
|
|
259
|
-
};
|
|
260
|
-
export {
|
|
261
|
-
NextThemeProvider,
|
|
262
|
-
useRootTheme,
|
|
263
|
-
useTheme,
|
|
264
|
-
useThemeSetting
|
|
265
|
-
};
|
|
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";
|
|
266
9
|
//# sourceMappingURL=NextTheme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NextTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily due to buggy theme change\n\nimport { useEvent } from '@tamagui/use-event'\nimport NextHead from 'next/head'\nimport * as React from 'react'\nimport {\n createContext,\n memo,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nconst useIsomorphicLayoutEffect =\n 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 set: (theme: string) => void\n toggle: () => void\n /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n current?: string\n /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n theme?: string\n /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n resolvedTheme?: string\n /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n children?: any\n /** List of all available theme names */\n themes?: string[]\n /** Forced theme name for the current page */\n forcedTheme?: string\n /** Whether to switch between dark and light themes based on prefers-color-scheme */\n enableSystem?: boolean\n systemTheme?: string\n /** Disable all CSS transitions when switching themes */\n disableTransitionOnChange?: boolean\n /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n enableColorScheme?: boolean\n /** Key used to store theme setting in localStorage */\n storageKey?: string\n /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n defaultTheme?: string\n /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n attribute?: string | 'class'\n /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n value?: ValueObject\n onChangeTheme?: (name: string) => void\n\n // avoids warning\n\n skipNextHead?: boolean\n}\n\nconst ThemeSettingContext = createContext<UseThemeProps>({\n toggle: () => {},\n set: (_) => {},\n themes: [],\n})\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\nexport const useTheme = () => useContext(ThemeSettingContext)\n\nexport const useThemeSetting = () => useContext(ThemeSettingContext)\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\n\ninterface ValueObject {\n [themeName: string]: string\n}\n\n// note this only works for light being default for now...\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\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) {\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}\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\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 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 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 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\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n if (typeof window === 'undefined') return undefined\n let theme\n try {\n theme = localStorage.getItem(key) || undefined\n } catch (e) {\n // Unsupported\n }\n return theme || fallback\n}\n\nconst getSystemTheme = (e?: MediaQueryList) => {\n if (!e) {\n e = window.matchMedia(MEDIA)\n }\n\n const isDark = e.matches\n const systemTheme = isDark ? 'dark' : 'light'\n return systemTheme\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
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
7
|
}
|