@vxrn/color-scheme 1.13.3 → 1.13.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/index.cjs +34 -25
- package/dist/cjs/index.native.js +34 -16
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/userScheme.cjs +47 -17
- package/dist/cjs/userScheme.native.js +53 -20
- package/dist/cjs/userScheme.native.js.map +1 -1
- package/dist/esm/index.js +35 -26
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +35 -26
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +35 -17
- package/dist/esm/index.native.js.map +1 -1
- package/dist/esm/userScheme.mjs +46 -18
- package/dist/esm/userScheme.mjs.map +1 -1
- package/dist/esm/userScheme.native.js +52 -21
- package/dist/esm/userScheme.native.js.map +1 -1
- package/package.json +2 -2
- package/src/index.tsx +52 -30
- package/src/userScheme.ts +71 -16
- package/types/index.d.ts +3 -1
- package/types/index.d.ts.map +1 -1
- package/types/userScheme.d.ts +7 -0
- package/types/userScheme.d.ts.map +1 -1
package/dist/esm/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
|
|
2
|
-
import { setUserScheme, useUserScheme } from "./userScheme.mjs";
|
|
2
|
+
import { getForceScheme, setForceScheme, setUserScheme, useUserScheme } from "./userScheme.mjs";
|
|
3
3
|
import { getSystemScheme, useSystemScheme } from "./systemScheme.mjs";
|
|
4
4
|
import { getUserScheme, onUserSchemeChange, setUserScheme as setUserScheme2, useUserScheme as useUserScheme2 } from "./userScheme.mjs";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -7,28 +7,32 @@ const storageKey = "vxrn-scheme";
|
|
|
7
7
|
function SchemeProvider({
|
|
8
8
|
children,
|
|
9
9
|
getClassName = name => `t_${name}`,
|
|
10
|
-
defaultScheme
|
|
10
|
+
defaultScheme,
|
|
11
|
+
forceScheme
|
|
11
12
|
}) {
|
|
13
|
+
setForceScheme(forceScheme ?? null);
|
|
12
14
|
const {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
value
|
|
16
|
+
} = useUserScheme(),
|
|
17
|
+
resolvedValue = forceScheme ?? value;
|
|
15
18
|
useIsomorphicLayoutEffect(() => {
|
|
16
|
-
defaultScheme && typeof localStorage < "u" && (localStorage.getItem(storageKey) || setUserScheme(defaultScheme));
|
|
17
|
-
}, []), useIsomorphicLayoutEffect(() => {
|
|
18
|
-
const toAdd = getClassName(
|
|
19
|
-
toRemove = getClassName(
|
|
19
|
+
!forceScheme && defaultScheme && typeof localStorage < "u" && (localStorage.getItem(storageKey) || setUserScheme(defaultScheme));
|
|
20
|
+
}, [defaultScheme, forceScheme]), useIsomorphicLayoutEffect(() => {
|
|
21
|
+
const toAdd = getClassName(resolvedValue),
|
|
22
|
+
toRemove = getClassName(resolvedValue === "light" ? "dark" : "light"),
|
|
20
23
|
{
|
|
21
24
|
classList
|
|
22
25
|
} = document.documentElement;
|
|
23
26
|
classList.remove(toRemove), classList.contains(toAdd) || classList.add(toAdd);
|
|
24
|
-
}, [
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
}, [getClassName, resolvedValue]);
|
|
28
|
+
let scriptContent;
|
|
29
|
+
if (forceScheme) scriptContent = `let d = document.documentElement.classList
|
|
30
|
+
d.remove('${getClassName("light")}')
|
|
31
|
+
d.remove('${getClassName("dark")}')
|
|
32
|
+
d.add('${getClassName(forceScheme)}')`;else {
|
|
33
|
+
const fallback = defaultScheme ? `'${defaultScheme}' === 'dark'` : "window.matchMedia('(prefers-color-scheme: dark)').matches",
|
|
34
|
+
seedStorage = defaultScheme ? `if(!e){localStorage.setItem('${storageKey}','${defaultScheme}')}` : "";
|
|
35
|
+
scriptContent = `let d = document.documentElement.classList
|
|
32
36
|
d.remove('${getClassName("light")}')
|
|
33
37
|
d.remove('${getClassName("dark")}')
|
|
34
38
|
let e = localStorage.getItem('${storageKey}')
|
|
@@ -36,8 +40,13 @@ ${seedStorage}
|
|
|
36
40
|
let t = 'system' === e || !e
|
|
37
41
|
? ${fallback}
|
|
38
42
|
: e === 'dark'
|
|
39
|
-
t ? d.add('${getClassName("dark")}') : d.add('${getClassName("light")}')
|
|
40
|
-
|
|
43
|
+
t ? d.add('${getClassName("dark")}') : d.add('${getClassName("light")}')`;
|
|
44
|
+
}
|
|
45
|
+
return /* @__PURE__ */jsxs(Fragment, {
|
|
46
|
+
children: [/* @__PURE__ */jsx("script", {
|
|
47
|
+
suppressHydrationWarning: !0,
|
|
48
|
+
dangerouslySetInnerHTML: {
|
|
49
|
+
__html: scriptContent
|
|
41
50
|
}
|
|
42
51
|
}), children]
|
|
43
52
|
});
|
|
@@ -48,8 +57,13 @@ function MetaTheme({
|
|
|
48
57
|
lightColor
|
|
49
58
|
}) {
|
|
50
59
|
const {
|
|
51
|
-
|
|
52
|
-
|
|
60
|
+
value
|
|
61
|
+
} = useUserScheme(),
|
|
62
|
+
forced = getForceScheme(),
|
|
63
|
+
scriptContent = forced ? `document.getElementById('vxrn-theme-color').setAttribute('content','${forced === "dark" ? darkColor : lightColor}')` : `let dc = document.getElementById('vxrn-theme-color')
|
|
64
|
+
let e1 = localStorage.getItem('${storageKey}')
|
|
65
|
+
let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
|
|
66
|
+
dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')`;
|
|
53
67
|
return /* @__PURE__ */jsxs(Fragment, {
|
|
54
68
|
children: [/* @__PURE__ */jsx("meta", {
|
|
55
69
|
suppressHydrationWarning: !0,
|
|
@@ -60,12 +74,7 @@ function MetaTheme({
|
|
|
60
74
|
suppressHydrationWarning: !0,
|
|
61
75
|
id: "meta-theme-hydrate",
|
|
62
76
|
dangerouslySetInnerHTML: {
|
|
63
|
-
__html:
|
|
64
|
-
let dc = document.getElementById('vxrn-theme-color')
|
|
65
|
-
let e1 = localStorage.getItem('${storageKey}')
|
|
66
|
-
let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
|
|
67
|
-
dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')
|
|
68
|
-
`
|
|
77
|
+
__html: scriptContent
|
|
69
78
|
}
|
|
70
79
|
})]
|
|
71
80
|
});
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIsomorphicLayoutEffect","setUserScheme","useUserScheme","getSystemScheme","useSystemScheme","getUserScheme","onUserSchemeChange","setUserScheme2","useUserScheme2","Fragment","jsx","jsxs","storageKey","SchemeProvider","children","getClassName","name","defaultScheme","value","localStorage","getItem","toAdd","toRemove","classList","document","documentElement","remove","contains","add","fallback","seedStorage","suppressHydrationWarning","dangerouslySetInnerHTML","__html","MetaTheme","color","darkColor","lightColor","id","content"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAE1C,
|
|
1
|
+
{"version":3,"names":["useIsomorphicLayoutEffect","getForceScheme","setForceScheme","setUserScheme","useUserScheme","getSystemScheme","useSystemScheme","getUserScheme","onUserSchemeChange","setUserScheme2","useUserScheme2","Fragment","jsx","jsxs","storageKey","SchemeProvider","children","getClassName","name","defaultScheme","forceScheme","value","resolvedValue","localStorage","getItem","toAdd","toRemove","classList","document","documentElement","remove","contains","add","scriptContent","fallback","seedStorage","suppressHydrationWarning","dangerouslySetInnerHTML","__html","MetaTheme","color","darkColor","lightColor","forced","id","content"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
package/dist/esm/index.native.js
CHANGED
|
@@ -1,21 +1,39 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useUserScheme } from "./userScheme.native.js";
|
|
2
|
+
import { getForceScheme, setForceScheme, useUserScheme } from "./userScheme.native.js";
|
|
3
3
|
import { getSystemScheme, useSystemScheme } from "./systemScheme.native.js";
|
|
4
4
|
import { getUserScheme, onUserSchemeChange, setUserScheme as setUserScheme2, useUserScheme as useUserScheme2 } from "./userScheme.native.js";
|
|
5
5
|
var storageKey = "vxrn-scheme";
|
|
6
6
|
function SchemeProvider(param) {
|
|
7
7
|
var {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
children,
|
|
9
|
+
getClassName = function (name) {
|
|
10
|
+
return `t_${name}`;
|
|
11
|
+
},
|
|
12
|
+
defaultScheme,
|
|
13
|
+
forceScheme
|
|
14
|
+
} = param;
|
|
15
|
+
setForceScheme(forceScheme ?? null);
|
|
16
|
+
var {
|
|
15
17
|
value
|
|
16
18
|
} = useUserScheme(),
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
resolvedValue = forceScheme ?? value,
|
|
20
|
+
scriptContent;
|
|
21
|
+
if (forceScheme) scriptContent = `let d = document.documentElement.classList
|
|
22
|
+
d.remove('${getClassName("light")}')
|
|
23
|
+
d.remove('${getClassName("dark")}')
|
|
24
|
+
d.add('${getClassName(forceScheme)}')`;else {
|
|
25
|
+
var fallback = defaultScheme ? `'${defaultScheme}' === 'dark'` : "window.matchMedia('(prefers-color-scheme: dark)').matches",
|
|
26
|
+
seedStorage = defaultScheme ? `if(!e){localStorage.setItem('${storageKey}','${defaultScheme}')}` : "";
|
|
27
|
+
scriptContent = `let d = document.documentElement.classList
|
|
28
|
+
d.remove('${getClassName("light")}')
|
|
29
|
+
d.remove('${getClassName("dark")}')
|
|
30
|
+
let e = localStorage.getItem('${storageKey}')
|
|
31
|
+
${seedStorage}
|
|
32
|
+
let t = 'system' === e || !e
|
|
33
|
+
? ${fallback}
|
|
34
|
+
: e === 'dark'
|
|
35
|
+
t ? d.add('${getClassName("dark")}') : d.add('${getClassName("light")}')`;
|
|
36
|
+
}
|
|
19
37
|
return /* @__PURE__ */_jsxs(_Fragment, {
|
|
20
38
|
children: [null, children]
|
|
21
39
|
});
|
|
@@ -28,7 +46,12 @@ function MetaTheme(param) {
|
|
|
28
46
|
} = param,
|
|
29
47
|
{
|
|
30
48
|
value
|
|
31
|
-
} = useUserScheme()
|
|
49
|
+
} = useUserScheme(),
|
|
50
|
+
forced = getForceScheme(),
|
|
51
|
+
scriptContent = forced ? `document.getElementById('vxrn-theme-color').setAttribute('content','${forced === "dark" ? darkColor : lightColor}')` : `let dc = document.getElementById('vxrn-theme-color')
|
|
52
|
+
let e1 = localStorage.getItem('${storageKey}')
|
|
53
|
+
let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
|
|
54
|
+
dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')`;
|
|
32
55
|
return /* @__PURE__ */_jsxs(_Fragment, {
|
|
33
56
|
children: [/* @__PURE__ */_jsx("meta", {
|
|
34
57
|
suppressHydrationWarning: !0,
|
|
@@ -39,12 +62,7 @@ function MetaTheme(param) {
|
|
|
39
62
|
suppressHydrationWarning: !0,
|
|
40
63
|
id: "meta-theme-hydrate",
|
|
41
64
|
dangerouslySetInnerHTML: {
|
|
42
|
-
__html:
|
|
43
|
-
let dc = document.getElementById('vxrn-theme-color')
|
|
44
|
-
let e1 = localStorage.getItem('${storageKey}')
|
|
45
|
-
let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
|
|
46
|
-
dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')
|
|
47
|
-
`
|
|
65
|
+
__html: scriptContent
|
|
48
66
|
}
|
|
49
67
|
})]
|
|
50
68
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useUserScheme","getSystemScheme","useSystemScheme","getUserScheme","onUserSchemeChange","setUserScheme","setUserScheme2","useUserScheme2","storageKey","SchemeProvider","param","children","getClassName","name","defaultScheme","value","fallback","seedStorage","MetaTheme","color","darkColor","lightColor","suppressHydrationWarning","id","content","dangerouslySetInnerHTML","__html"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAiC,IAAAC,SAAA;
|
|
1
|
+
{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","getForceScheme","setForceScheme","useUserScheme","getSystemScheme","useSystemScheme","getUserScheme","onUserSchemeChange","setUserScheme","setUserScheme2","useUserScheme2","storageKey","SchemeProvider","param","children","getClassName","name","defaultScheme","forceScheme","value","resolvedValue","scriptContent","fallback","seedStorage","MetaTheme","color","darkColor","lightColor","forced","suppressHydrationWarning","id","content","dangerouslySetInnerHTML","__html"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAiC,IAAAC,SAAA;AAE1C,SACEC,cAAA,EAAAC,cAAA,EAAAC,aAAA;AAAA,SACAC,eAAA,EAAAC,eAAA;AAAA,SACAC,aAAA,EAAAC,kBAAA,EAAAC,aAAA,IAAAC,cAAA,EAAAN,aAAA,IAAAO,cAAA;AAAA,IACAC,UAAA;AAAA,SACKC,eAAAC,KAAA;EAOP;IAAAC,QAAS;IAAAC,YAAiB,YAAAA,CAAAC,IAAA;MAC1B,YAAAA,IAAA;IACE;IAAAC,aAAA;IAAAC;EAAA,IAAAL,KAAA;EACAX,cAAA,CAAAgB,WAAA;EACA;MAAAC;IAAA,IAAAhB,aAAA;IAAAiB,aAAA,GAAAF,WAAA,IAAAC,KAAA;IAAAE,aAAA;EACA,IAAAH,WAAA,EAAAG,aACK;AAyEH,YAAAN,YAAA;AAvEJ,YAAMA,YAAa;AAEZ,SAASA,YAAA,CAAAG,WAAe,WAC7B;IACA,IAAAI,QAAA,GAAgBL,aAAc,OAAIA,aAAA;MAAAM,WAAA,GAAAN,aAAA,mCAAAN,UAAA,MAAAM,aAAA;IAClCI,aAAA;AAAA,YACAN,YAAA;AACF,YAOGA,YAAA;AAED,gCAA8BJ,UAAI;AAElC,EAAAY,WAAQ;AAKN;AACE,MAAKD,QAAA;AAE0B;AAM/B,aAAMP,YAAQ,OAAa,gBACrBA,YAAW,aAAa;EAE9B;EAIF,OAAI,eAAcjB,KAAA,CAAAE,SAAc;IAGlCc,QAAI,GAEA,MAEFA,QAAA;EAC6B;AACD;AACE,SACzBU,UAAAX,KAAA;EACL;MAAAY,KAAM;MAAAC,SAAW;MAAAC;IACb,IAAId,KAAA;IAAA;MAAAM;IAAa,IAAAhB,aACjB;IAAAyB,MAAA,GAAA3B,cAAA;IAAAoB,aAAA,GAAAO,MAAA,0EAGgCA,MAAU,KAAM,SAAAF,SAAa,GAC7DC,UAAA;AAEJ,iCAAgBhB,UAAA;AAAA;AACa,oCACDe,SAAA,QAAAC,UAAA;EAAA,sBAAA7B,KAAA,CAAAE,SACA,EAAU;IACxCc,QAAA,EAAW,gBAAAlB,IAAA;MAEPiC,wBAAQ;MAAAC,EAAA;MAAAd,IAAA,EAED,aAAa;MACxBe,OAAA,EAAAN,KAAA,KAAAN,KAAA,cAAAO,SAAA,GAAAC,UAAA;IAEA,IAGM,eAAA/B,IAAA;MAACiC,wBAAA;MAAAC,EAAA;MACCE,uBAAA;QACAC,MAAA,EAAAZ;MAAiD;IACnD;EAED;AAGP;AAEO,SACLG,SAAA,EACAZ,cAAA,EACAR,eAAA,EACFE,aAIG,EACDC,kBAAkB,EAKdE,cAAA,IAAAD,aAC2B,EAAUH,eAAA,EAAAK,cAAA,IAAAP,aAAA","ignoreList":[]}
|
package/dist/esm/userScheme.mjs
CHANGED
|
@@ -3,6 +3,29 @@ import { useState, useMemo } from "react";
|
|
|
3
3
|
import { getSystemScheme } from "./systemScheme.mjs";
|
|
4
4
|
const listeners = /* @__PURE__ */new Set(),
|
|
5
5
|
storageKey = "vxrn-scheme";
|
|
6
|
+
let _forceScheme = null;
|
|
7
|
+
function notifyListeners() {
|
|
8
|
+
listeners.forEach(listener => {
|
|
9
|
+
listener(currentSetting, currentValue);
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function restoreUnforcedScheme() {
|
|
13
|
+
if (typeof localStorage < "u") {
|
|
14
|
+
const stored = localStorage.getItem(storageKey);
|
|
15
|
+
if (stored) {
|
|
16
|
+
currentSetting = stored, currentValue = stored === "system" ? resolveValue("system") : stored;
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
currentSetting = "system", currentValue = resolveValue("system");
|
|
21
|
+
}
|
|
22
|
+
function setForceScheme(scheme) {
|
|
23
|
+
const wasForced = _forceScheme;
|
|
24
|
+
wasForced !== scheme && (_forceScheme = scheme, scheme ? (currentSetting = scheme, currentValue = scheme) : wasForced && (restoreUnforcedScheme(), startWebListener()));
|
|
25
|
+
}
|
|
26
|
+
function getForceScheme() {
|
|
27
|
+
return _forceScheme;
|
|
28
|
+
}
|
|
6
29
|
function getInitialSetting() {
|
|
7
30
|
return "system";
|
|
8
31
|
}
|
|
@@ -26,22 +49,23 @@ function resolveValue(setting) {
|
|
|
26
49
|
return setting === "system" ? getSystemScheme() : setting;
|
|
27
50
|
}
|
|
28
51
|
function updateValueFromSystem() {
|
|
52
|
+
if (_forceScheme) return;
|
|
29
53
|
const value = resolveValue("system");
|
|
30
|
-
value !== currentValue && (currentValue = value,
|
|
31
|
-
l(currentSetting, currentValue);
|
|
32
|
-
}));
|
|
54
|
+
value !== currentValue && (currentValue = value, notifyListeners());
|
|
33
55
|
}
|
|
34
56
|
function updateScheme(setting) {
|
|
57
|
+
if (_forceScheme) return;
|
|
35
58
|
const value = setting === "system" ? resolveValue("system") : setting;
|
|
36
|
-
(value !== currentValue || currentSetting !== setting) && (currentSetting = setting, currentValue = value,
|
|
37
|
-
l(currentSetting, currentValue);
|
|
38
|
-
}));
|
|
59
|
+
(value !== currentValue || currentSetting !== setting) && (currentSetting = setting, currentValue = value, notifyListeners());
|
|
39
60
|
}
|
|
40
61
|
function setUserScheme(setting) {
|
|
41
|
-
typeof localStorage < "u" && localStorage.setItem(storageKey, setting), updateScheme(setting);
|
|
62
|
+
_forceScheme || (typeof localStorage < "u" && localStorage.setItem(storageKey, setting), updateScheme(setting));
|
|
42
63
|
}
|
|
43
64
|
function getUserScheme() {
|
|
44
|
-
return {
|
|
65
|
+
return _forceScheme ? {
|
|
66
|
+
setting: _forceScheme,
|
|
67
|
+
value: _forceScheme
|
|
68
|
+
} : {
|
|
45
69
|
setting: currentSetting,
|
|
46
70
|
value: currentValue
|
|
47
71
|
};
|
|
@@ -52,24 +76,28 @@ function onUserSchemeChange(listener) {
|
|
|
52
76
|
};
|
|
53
77
|
}
|
|
54
78
|
function useUserScheme() {
|
|
55
|
-
const [state, setState] = useState(() => getUserScheme())
|
|
79
|
+
const [state, setState] = useState(() => getUserScheme()),
|
|
80
|
+
snapshot = getUserScheme(),
|
|
81
|
+
resolvedState = state.setting === snapshot.setting && state.value === snapshot.value ? state : snapshot;
|
|
56
82
|
return useIsomorphicLayoutEffect(() => {
|
|
57
|
-
if (
|
|
58
|
-
|
|
59
|
-
|
|
83
|
+
if (!_forceScheme) {
|
|
84
|
+
if (typeof localStorage < "u") {
|
|
85
|
+
const stored = localStorage.getItem(storageKey);
|
|
86
|
+
stored && updateScheme(stored);
|
|
87
|
+
}
|
|
88
|
+
startWebListener();
|
|
60
89
|
}
|
|
61
|
-
|
|
90
|
+
return onUserSchemeChange((setting, value) => {
|
|
62
91
|
setState({
|
|
63
92
|
setting,
|
|
64
93
|
value
|
|
65
94
|
});
|
|
66
95
|
});
|
|
67
|
-
return startWebListener(), dispose;
|
|
68
96
|
}, []), useMemo(() => ({
|
|
69
|
-
setting:
|
|
70
|
-
value:
|
|
97
|
+
setting: resolvedState.setting,
|
|
98
|
+
value: resolvedState.value,
|
|
71
99
|
set: setUserScheme
|
|
72
|
-
}), [
|
|
100
|
+
}), [resolvedState.setting, resolvedState.value]);
|
|
73
101
|
}
|
|
74
|
-
export { getUserScheme, onUserSchemeChange, setUserScheme, useUserScheme };
|
|
102
|
+
export { getForceScheme, getUserScheme, onUserSchemeChange, setForceScheme, setUserScheme, useUserScheme };
|
|
75
103
|
//# sourceMappingURL=userScheme.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIsomorphicLayoutEffect","useState","useMemo","getSystemScheme","listeners","Set","storageKey","
|
|
1
|
+
{"version":3,"names":["useIsomorphicLayoutEffect","useState","useMemo","getSystemScheme","listeners","Set","storageKey","_forceScheme","notifyListeners","forEach","listener","currentSetting","currentValue","restoreUnforcedScheme","localStorage","stored","getItem","resolveValue","setForceScheme","scheme","wasForced","startWebListener","getForceScheme","getInitialSetting","getInitialValue","setting","initialSetting","isWebListening","matcher","window","matchMedia","onSystemChange","updateValueFromSystem","addEventListener","value","updateScheme","setUserScheme","setItem","getUserScheme","onUserSchemeChange","add","delete","useUserScheme","state","setState","snapshot","resolvedState","set"],"sources":["../../src/userScheme.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,30 @@ import { useState, useMemo } from "react";
|
|
|
3
3
|
import { Appearance } from "react-native";
|
|
4
4
|
import { getSystemScheme } from "./systemScheme.native.js";
|
|
5
5
|
var listeners = /* @__PURE__ */new Set(),
|
|
6
|
-
storageKey = "vxrn-scheme"
|
|
6
|
+
storageKey = "vxrn-scheme",
|
|
7
|
+
_forceScheme = null;
|
|
8
|
+
function notifyListeners() {
|
|
9
|
+
listeners.forEach(function (listener) {
|
|
10
|
+
listener(currentSetting, currentValue);
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function restoreUnforcedScheme() {
|
|
14
|
+
if (typeof localStorage < "u") {
|
|
15
|
+
var stored = localStorage.getItem(storageKey);
|
|
16
|
+
if (stored) {
|
|
17
|
+
currentSetting = stored, currentValue = stored === "system" ? resolveValue("system") : stored;
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
currentSetting = "system", currentValue = resolveValue("system");
|
|
22
|
+
}
|
|
23
|
+
function setForceScheme(scheme) {
|
|
24
|
+
var wasForced = _forceScheme;
|
|
25
|
+
wasForced !== scheme && (_forceScheme = scheme, scheme ? (currentSetting = scheme, currentValue = scheme) : wasForced && (restoreUnforcedScheme(), startWebListener()));
|
|
26
|
+
}
|
|
27
|
+
function getForceScheme() {
|
|
28
|
+
return _forceScheme;
|
|
29
|
+
}
|
|
7
30
|
function getInitialSetting() {
|
|
8
31
|
if (typeof localStorage < "u") {
|
|
9
32
|
var stored = localStorage.getItem(storageKey);
|
|
@@ -36,22 +59,25 @@ function resolveValue(setting) {
|
|
|
36
59
|
return setting === "system" ? Appearance.getColorScheme() === "dark" ? "dark" : "light" : setting;
|
|
37
60
|
}
|
|
38
61
|
function updateValueFromSystem() {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
62
|
+
if (!_forceScheme) {
|
|
63
|
+
var value = resolveValue("system");
|
|
64
|
+
value !== currentValue && (currentValue = value, notifyListeners());
|
|
65
|
+
}
|
|
43
66
|
}
|
|
44
67
|
function updateScheme(setting) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
68
|
+
if (!_forceScheme) {
|
|
69
|
+
var value = setting === "system" ? resolveValue("system") : setting;
|
|
70
|
+
(value !== currentValue || currentSetting !== setting) && (currentSetting = setting, currentValue = value, setting !== "system" ? Appearance.setColorScheme(value) : Appearance.setColorScheme("unspecified"), notifyListeners());
|
|
71
|
+
}
|
|
49
72
|
}
|
|
50
73
|
function setUserScheme(setting) {
|
|
51
|
-
typeof localStorage < "u" && localStorage.setItem(storageKey, setting), updateScheme(setting);
|
|
74
|
+
_forceScheme || (typeof localStorage < "u" && localStorage.setItem(storageKey, setting), updateScheme(setting));
|
|
52
75
|
}
|
|
53
76
|
function getUserScheme() {
|
|
54
|
-
return {
|
|
77
|
+
return _forceScheme ? {
|
|
78
|
+
setting: _forceScheme,
|
|
79
|
+
value: _forceScheme
|
|
80
|
+
} : {
|
|
55
81
|
setting: currentSetting,
|
|
56
82
|
value: currentValue
|
|
57
83
|
};
|
|
@@ -63,12 +89,17 @@ function onUserSchemeChange(listener) {
|
|
|
63
89
|
}
|
|
64
90
|
function useUserScheme() {
|
|
65
91
|
var [state, setState] = useState(function () {
|
|
66
|
-
|
|
67
|
-
|
|
92
|
+
return getUserScheme();
|
|
93
|
+
}),
|
|
94
|
+
snapshot = getUserScheme(),
|
|
95
|
+
resolvedState = state.setting === snapshot.setting && state.value === snapshot.value ? state : snapshot;
|
|
68
96
|
return useIsomorphicLayoutEffect(function () {
|
|
69
|
-
if (
|
|
70
|
-
|
|
71
|
-
|
|
97
|
+
if (!_forceScheme) {
|
|
98
|
+
if (typeof localStorage < "u") {
|
|
99
|
+
var stored = localStorage.getItem(storageKey);
|
|
100
|
+
stored && updateScheme(stored);
|
|
101
|
+
}
|
|
102
|
+
startWebListener();
|
|
72
103
|
}
|
|
73
104
|
var dispose = onUserSchemeChange(function (setting, value) {
|
|
74
105
|
setState({
|
|
@@ -76,14 +107,14 @@ function useUserScheme() {
|
|
|
76
107
|
value
|
|
77
108
|
});
|
|
78
109
|
});
|
|
79
|
-
return
|
|
110
|
+
return dispose;
|
|
80
111
|
}, []), useMemo(function () {
|
|
81
112
|
return {
|
|
82
|
-
setting:
|
|
83
|
-
value:
|
|
113
|
+
setting: resolvedState.setting,
|
|
114
|
+
value: resolvedState.value,
|
|
84
115
|
set: setUserScheme
|
|
85
116
|
};
|
|
86
|
-
}, [
|
|
117
|
+
}, [resolvedState.setting, resolvedState.value]);
|
|
87
118
|
}
|
|
88
|
-
export { getUserScheme, onUserSchemeChange, setUserScheme, useUserScheme };
|
|
119
|
+
export { getForceScheme, getUserScheme, onUserSchemeChange, setForceScheme, setUserScheme, useUserScheme };
|
|
89
120
|
//# sourceMappingURL=userScheme.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useIsomorphicLayoutEffect","useState","useMemo","Appearance","getSystemScheme","listeners","Set","storageKey","
|
|
1
|
+
{"version":3,"names":["useIsomorphicLayoutEffect","useState","useMemo","Appearance","getSystemScheme","listeners","Set","storageKey","_forceScheme","notifyListeners","forEach","listener","currentSetting","currentValue","restoreUnforcedScheme","localStorage","stored","getItem","resolveValue","setForceScheme","scheme","wasForced","startWebListener","getForceScheme","getInitialSetting","getInitialValue","setting","getColorScheme","initialSetting","addChangeListener","next","colorScheme","updateValueFromSystem","isWebListening","_window_matchMedia","_window","_matcher_addEventListener","matcher","window","matchMedia","call","onSystemChange","addEventListener","value","updateScheme","setColorScheme","setUserScheme","setItem","getUserScheme","onUserSchemeChange","add","delete","useUserScheme","state","setState","snapshot","resolvedState"],"sources":["../../src/userScheme.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vxrn/color-scheme",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.4",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"exports": {
|
|
6
6
|
"./package.json": "./package.json",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"watch": "tamagui-build --watch"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@vxrn/use-isomorphic-layout-effect": "1.13.
|
|
33
|
+
"@vxrn/use-isomorphic-layout-effect": "1.13.4"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@tamagui/build": "2.0.0-rc.32",
|
package/src/index.tsx
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
|
|
2
2
|
import type { Scheme } from './systemScheme'
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
getForceScheme,
|
|
5
|
+
setForceScheme,
|
|
6
|
+
setUserScheme,
|
|
7
|
+
useUserScheme,
|
|
8
|
+
} from './userScheme'
|
|
4
9
|
|
|
5
10
|
// re-export types
|
|
6
11
|
export type { Scheme } from './systemScheme'
|
|
@@ -21,50 +26,60 @@ export function SchemeProvider({
|
|
|
21
26
|
children,
|
|
22
27
|
getClassName = (name) => `t_${name}`,
|
|
23
28
|
defaultScheme,
|
|
29
|
+
forceScheme,
|
|
24
30
|
}: {
|
|
25
31
|
children: any
|
|
26
32
|
getClassName?: (name: Scheme) => string
|
|
27
33
|
/** Force a default scheme when no user preference is stored. Without this, falls back to system preference. */
|
|
28
34
|
defaultScheme?: Scheme
|
|
35
|
+
/** Lock the scheme to this value. Ignores user preference, system preference, and localStorage. Prevents hydration flicker. */
|
|
36
|
+
forceScheme?: Scheme
|
|
29
37
|
}) {
|
|
38
|
+
// set force before hooks so useState initializers return the forced value
|
|
39
|
+
setForceScheme(forceScheme ?? null)
|
|
40
|
+
|
|
30
41
|
const { value } = useUserScheme()
|
|
42
|
+
const resolvedValue = forceScheme ?? value
|
|
31
43
|
|
|
32
44
|
if (process.env.TAMAGUI_TARGET !== 'native') {
|
|
33
45
|
// when defaultScheme is set and no stored preference, apply it on mount
|
|
34
46
|
useIsomorphicLayoutEffect(() => {
|
|
35
|
-
if (defaultScheme && typeof localStorage !== 'undefined') {
|
|
47
|
+
if (!forceScheme && defaultScheme && typeof localStorage !== 'undefined') {
|
|
36
48
|
if (!localStorage.getItem(storageKey)) {
|
|
37
49
|
setUserScheme(defaultScheme)
|
|
38
50
|
}
|
|
39
51
|
}
|
|
40
|
-
}, [])
|
|
52
|
+
}, [defaultScheme, forceScheme])
|
|
41
53
|
|
|
42
54
|
useIsomorphicLayoutEffect(() => {
|
|
43
|
-
const toAdd = getClassName(
|
|
44
|
-
const toRemove = getClassName(
|
|
55
|
+
const toAdd = getClassName(resolvedValue)
|
|
56
|
+
const toRemove = getClassName(resolvedValue === 'light' ? 'dark' : 'light')
|
|
45
57
|
const { classList } = document.documentElement
|
|
46
58
|
classList.remove(toRemove)
|
|
47
59
|
if (!classList.contains(toAdd)) {
|
|
48
60
|
classList.add(toAdd)
|
|
49
61
|
}
|
|
50
|
-
}, [
|
|
62
|
+
}, [getClassName, resolvedValue])
|
|
51
63
|
}
|
|
52
64
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
65
|
+
let scriptContent: string
|
|
66
|
+
|
|
67
|
+
if (forceScheme) {
|
|
68
|
+
// forced: just set the class, no localStorage interaction
|
|
69
|
+
scriptContent = `let d = document.documentElement.classList
|
|
70
|
+
d.remove('${getClassName('light')}')
|
|
71
|
+
d.remove('${getClassName('dark')}')
|
|
72
|
+
d.add('${getClassName(forceScheme)}')`
|
|
73
|
+
} else {
|
|
74
|
+
const fallback = defaultScheme
|
|
75
|
+
? `'${defaultScheme}' === 'dark'`
|
|
76
|
+
: `window.matchMedia('(prefers-color-scheme: dark)').matches`
|
|
56
77
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
78
|
+
const seedStorage = defaultScheme
|
|
79
|
+
? `if(!e){localStorage.setItem('${storageKey}','${defaultScheme}')}`
|
|
80
|
+
: ''
|
|
60
81
|
|
|
61
|
-
|
|
62
|
-
<>
|
|
63
|
-
{process.env.TAMAGUI_TARGET === 'native' ? null : (
|
|
64
|
-
<script
|
|
65
|
-
suppressHydrationWarning
|
|
66
|
-
dangerouslySetInnerHTML={{
|
|
67
|
-
__html: `let d = document.documentElement.classList
|
|
82
|
+
scriptContent = `let d = document.documentElement.classList
|
|
68
83
|
d.remove('${getClassName('light')}')
|
|
69
84
|
d.remove('${getClassName('dark')}')
|
|
70
85
|
let e = localStorage.getItem('${storageKey}')
|
|
@@ -72,9 +87,15 @@ ${seedStorage}
|
|
|
72
87
|
let t = 'system' === e || !e
|
|
73
88
|
? ${fallback}
|
|
74
89
|
: e === 'dark'
|
|
75
|
-
t ? d.add('${getClassName('dark')}') : d.add('${getClassName('light')}')
|
|
76
|
-
|
|
77
|
-
|
|
90
|
+
t ? d.add('${getClassName('dark')}') : d.add('${getClassName('light')}')`
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<>
|
|
95
|
+
{process.env.TAMAGUI_TARGET === 'native' ? null : (
|
|
96
|
+
<script
|
|
97
|
+
suppressHydrationWarning
|
|
98
|
+
dangerouslySetInnerHTML={{ __html: scriptContent }}
|
|
78
99
|
/>
|
|
79
100
|
)}
|
|
80
101
|
{children}
|
|
@@ -92,6 +113,14 @@ export function MetaTheme({
|
|
|
92
113
|
lightColor: string
|
|
93
114
|
}) {
|
|
94
115
|
const { value } = useUserScheme()
|
|
116
|
+
const forced = getForceScheme()
|
|
117
|
+
|
|
118
|
+
const scriptContent = forced
|
|
119
|
+
? `document.getElementById('vxrn-theme-color').setAttribute('content','${forced === 'dark' ? darkColor : lightColor}')`
|
|
120
|
+
: `let dc = document.getElementById('vxrn-theme-color')
|
|
121
|
+
let e1 = localStorage.getItem('${storageKey}')
|
|
122
|
+
let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
|
|
123
|
+
dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')`
|
|
95
124
|
|
|
96
125
|
return (
|
|
97
126
|
<>
|
|
@@ -104,14 +133,7 @@ export function MetaTheme({
|
|
|
104
133
|
<script
|
|
105
134
|
suppressHydrationWarning
|
|
106
135
|
id="meta-theme-hydrate"
|
|
107
|
-
dangerouslySetInnerHTML={{
|
|
108
|
-
__html: `
|
|
109
|
-
let dc = document.getElementById('vxrn-theme-color')
|
|
110
|
-
let e1 = localStorage.getItem('${storageKey}')
|
|
111
|
-
let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
|
|
112
|
-
dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')
|
|
113
|
-
`,
|
|
114
|
-
}}
|
|
136
|
+
dangerouslySetInnerHTML={{ __html: scriptContent }}
|
|
115
137
|
/>
|
|
116
138
|
</>
|
|
117
139
|
)
|