@vxrn/color-scheme 2.0.0-beta.33.1 → 2.0.0-beta.45.1
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 +63 -87
- package/dist/cjs/index.native.cjs +75 -0
- package/dist/cjs/index.native.js +47 -66
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/safeStorage.cjs +23 -25
- package/dist/cjs/safeStorage.native.cjs +40 -0
- package/dist/cjs/safeStorage.native.js +23 -24
- package/dist/cjs/safeStorage.native.js.map +1 -1
- package/dist/cjs/systemScheme.cjs +24 -26
- package/dist/cjs/systemScheme.native.cjs +59 -0
- package/dist/cjs/systemScheme.native.js +38 -41
- package/dist/cjs/systemScheme.native.js.map +1 -1
- package/dist/cjs/userScheme.cjs +104 -106
- package/dist/cjs/userScheme.native.cjs +169 -0
- package/dist/cjs/userScheme.native.js +116 -116
- package/dist/cjs/userScheme.native.js.map +1 -1
- package/dist/cjs/userSchemeAppearance.cjs +17 -19
- package/dist/cjs/userSchemeAppearance.native.cjs +39 -0
- package/dist/cjs/userSchemeAppearance.native.js +19 -20
- package/dist/cjs/userSchemeAppearance.native.js.map +1 -1
- package/dist/esm/index.js +44 -64
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +44 -64
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +28 -44
- package/dist/esm/index.native.js.map +1 -1
- package/dist/esm/safeStorage.mjs +9 -8
- package/dist/esm/safeStorage.mjs.map +1 -1
- package/dist/esm/safeStorage.native.js +9 -8
- package/dist/esm/safeStorage.native.js.map +1 -1
- package/dist/esm/systemScheme.mjs +11 -9
- package/dist/esm/systemScheme.mjs.map +1 -1
- package/dist/esm/systemScheme.native.js +27 -27
- package/dist/esm/systemScheme.native.js.map +1 -1
- package/dist/esm/userScheme.mjs +87 -85
- package/dist/esm/userScheme.mjs.map +1 -1
- package/dist/esm/userScheme.native.js +99 -96
- package/dist/esm/userScheme.native.js.map +1 -1
- package/dist/esm/userSchemeAppearance.mjs +3 -1
- package/dist/esm/userSchemeAppearance.mjs.map +1 -1
- package/dist/esm/userSchemeAppearance.native.js +5 -3
- package/dist/esm/userSchemeAppearance.native.js.map +1 -1
- package/package.json +3 -3
- package/dist/cjs/safeStorage.test.cjs +0 -49
- package/dist/cjs/safeStorage.test.native.js +0 -66
- package/dist/cjs/safeStorage.test.native.js.map +0 -1
- package/dist/esm/safeStorage.test.mjs +0 -50
- package/dist/esm/safeStorage.test.mjs.map +0 -1
- package/dist/esm/safeStorage.test.native.js +0 -64
- package/dist/esm/safeStorage.test.native.js.map +0 -1
- package/types/safeStorage.test.d.ts +0 -2
- package/types/safeStorage.test.d.ts.map +0 -1
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
|
|
2
2
|
import { useState } from "react";
|
|
3
|
+
|
|
3
4
|
const media = typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
|
|
4
5
|
function getSystemScheme() {
|
|
5
|
-
|
|
6
|
+
return media?.matches ? "dark" : "light";
|
|
6
7
|
}
|
|
7
8
|
function useSystemScheme() {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
const [scheme, setScheme] = useState("light");
|
|
10
|
+
useIsomorphicLayoutEffect(() => {
|
|
11
|
+
setScheme(getSystemScheme());
|
|
12
|
+
const onChange = () => setScheme(getSystemScheme());
|
|
13
|
+
media?.addEventListener("change", onChange);
|
|
14
|
+
return () => media?.removeEventListener("change", onChange);
|
|
15
|
+
}, []);
|
|
16
|
+
return scheme;
|
|
16
17
|
}
|
|
18
|
+
|
|
17
19
|
export { getSystemScheme, useSystemScheme };
|
|
18
20
|
//# sourceMappingURL=systemScheme.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"systemScheme.js","names":[],"sources":["esm/systemScheme.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@vxrn/use-isomorphic-layout-effect\";\nimport { useState } from \"react\";\nconst media = typeof window !== \"undefined\" && window.matchMedia ? window.matchMedia(\"(prefers-color-scheme: dark)\") : null;\nfunction getSystemScheme() {\n return media?.matches ? \"dark\" : \"light\";\n}\nfunction useSystemScheme() {\n const [scheme, setScheme] = useState(\"light\");\n useIsomorphicLayoutEffect(() => {\n setScheme(getSystemScheme());\n const onChange = () => setScheme(getSystemScheme());\n media?.addEventListener(\"change\", onChange);\n return () => media?.removeEventListener(\"change\", onChange);\n }, []);\n return scheme;\n}\nexport {\n getSystemScheme,\n useSystemScheme\n};\n//# sourceMappingURL=systemScheme.js.map\n"],"mappings":";;;;AAEA,MAAM,QAAQ,OAAO,WAAW,eAAe,OAAO,aAAa,OAAO,WAAW,8BAA8B,IAAI;AACvH,SAAS,kBAAkB;CACzB,OAAO,OAAO,UAAU,SAAS;AACnC;AACA,SAAS,kBAAkB;CACzB,MAAM,CAAC,QAAQ,aAAa,SAAS,OAAO;CAC5C,gCAAgC;EAC9B,UAAU,gBAAgB,CAAC;EAC3B,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;EAClD,OAAO,iBAAiB,UAAU,QAAQ;EAC1C,aAAa,OAAO,oBAAoB,UAAU,QAAQ;CAC5D,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
import { AppState, Appearance } from "react-native";
|
|
3
|
+
|
|
3
4
|
function toScheme(colorScheme) {
|
|
4
|
-
|
|
5
|
+
return colorScheme === "dark" ? "dark" : "light";
|
|
5
6
|
}
|
|
6
7
|
function getSystemScheme() {
|
|
7
|
-
|
|
8
|
+
return toScheme(Appearance.getColorScheme());
|
|
8
9
|
}
|
|
9
10
|
function useSystemScheme() {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}, []);
|
|
32
|
-
return scheme;
|
|
11
|
+
var [scheme, setScheme] = useState(getSystemScheme);
|
|
12
|
+
useEffect(function() {
|
|
13
|
+
var appearanceSubscription = Appearance.addChangeListener(function(param) {
|
|
14
|
+
var { colorScheme } = param;
|
|
15
|
+
setScheme(toScheme(colorScheme));
|
|
16
|
+
});
|
|
17
|
+
var handleAppStateChange = function(nextAppState) {
|
|
18
|
+
if (nextAppState === "active") {
|
|
19
|
+
var currentScheme = getSystemScheme();
|
|
20
|
+
setScheme(function(prev) {
|
|
21
|
+
return prev !== currentScheme ? currentScheme : prev;
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
var appStateSubscription = AppState.addEventListener("change", handleAppStateChange);
|
|
26
|
+
return function() {
|
|
27
|
+
appearanceSubscription.remove();
|
|
28
|
+
appStateSubscription.remove();
|
|
29
|
+
};
|
|
30
|
+
}, []);
|
|
31
|
+
return scheme;
|
|
33
32
|
}
|
|
33
|
+
|
|
34
34
|
export { getSystemScheme, useSystemScheme };
|
|
35
35
|
//# sourceMappingURL=systemScheme.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"systemScheme.native.js","names":[],"sources":["esm/systemScheme.native.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { Appearance, AppState } from \"react-native\";\nfunction toScheme(colorScheme) {\n return colorScheme === \"dark\" ? \"dark\" : \"light\";\n}\nfunction getSystemScheme() {\n return toScheme(Appearance.getColorScheme());\n}\nfunction useSystemScheme() {\n var [scheme, setScheme] = useState(getSystemScheme);\n useEffect(function() {\n var appearanceSubscription = Appearance.addChangeListener(function(param) {\n var { colorScheme } = param;\n setScheme(toScheme(colorScheme));\n });\n var handleAppStateChange = function(nextAppState) {\n if (nextAppState === \"active\") {\n var currentScheme = getSystemScheme();\n setScheme(function(prev) {\n return prev !== currentScheme ? currentScheme : prev;\n });\n }\n };\n var appStateSubscription = AppState.addEventListener(\"change\", handleAppStateChange);\n return function() {\n appearanceSubscription.remove();\n appStateSubscription.remove();\n };\n }, []);\n return scheme;\n}\nexport {\n getSystemScheme,\n useSystemScheme\n};\n//# sourceMappingURL=systemScheme.native.js.map\n"],"mappings":";;;;AAEA,SAAS,SAAS,aAAa;CAC7B,OAAO,gBAAgB,SAAS,SAAS;AAC3C;AACA,SAAS,kBAAkB;CACzB,OAAO,SAAS,WAAW,eAAe,CAAC;AAC7C;AACA,SAAS,kBAAkB;CACzB,IAAI,CAAC,QAAQ,aAAa,SAAS,eAAe;CAClD,UAAU,WAAW;EACnB,IAAI,yBAAyB,WAAW,kBAAkB,SAAS,OAAO;GACxE,IAAI,EAAE,gBAAgB;GACtB,UAAU,SAAS,WAAW,CAAC;EACjC,CAAC;EACD,IAAI,uBAAuB,SAAS,cAAc;GAChD,IAAI,iBAAiB,UAAU;IAC7B,IAAI,gBAAgB,gBAAgB;IACpC,UAAU,SAAS,MAAM;KACvB,OAAO,SAAS,gBAAgB,gBAAgB;IAClD,CAAC;GACH;EACF;EACA,IAAI,uBAAuB,SAAS,iBAAiB,UAAU,oBAAoB;EACnF,OAAO,WAAW;GAChB,uBAAuB,OAAO;GAC9B,qBAAqB,OAAO;EAC9B;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}
|
package/dist/esm/userScheme.mjs
CHANGED
|
@@ -2,124 +2,126 @@ import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
|
|
|
2
2
|
import { useMemo, useState } from "react";
|
|
3
3
|
import { getStorageItem, setStorageItem } from "./safeStorage.mjs";
|
|
4
4
|
import { getSystemScheme } from "./systemScheme.mjs";
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
6
7
|
const storageKey = "vxrn-scheme";
|
|
7
8
|
let _forceScheme = null;
|
|
8
9
|
function notifyListeners() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
listeners.forEach((listener) => {
|
|
11
|
+
listener(currentSetting, currentValue);
|
|
12
|
+
});
|
|
12
13
|
}
|
|
13
14
|
function restoreUnforcedScheme() {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
const stored = getStorageItem(storageKey);
|
|
16
|
+
if (stored) {
|
|
17
|
+
currentSetting = stored;
|
|
18
|
+
currentValue = stored === "system" ? resolveValue("system") : stored;
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
currentSetting = "system";
|
|
22
|
+
currentValue = resolveValue("system");
|
|
22
23
|
}
|
|
23
24
|
function setForceScheme(scheme) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
const wasForced = _forceScheme;
|
|
26
|
+
if (wasForced === scheme) return;
|
|
27
|
+
_forceScheme = scheme;
|
|
28
|
+
if (scheme) {
|
|
29
|
+
currentSetting = scheme;
|
|
30
|
+
currentValue = scheme;
|
|
31
|
+
} else if (wasForced) {
|
|
32
|
+
restoreUnforcedScheme();
|
|
33
|
+
startWebListener();
|
|
34
|
+
}
|
|
34
35
|
}
|
|
35
36
|
function getForceScheme() {
|
|
36
|
-
|
|
37
|
+
return _forceScheme;
|
|
37
38
|
}
|
|
38
39
|
function getInitialSetting() {
|
|
39
|
-
|
|
40
|
+
return "system";
|
|
40
41
|
}
|
|
41
42
|
function getInitialValue(setting) {
|
|
42
|
-
|
|
43
|
+
return "light";
|
|
43
44
|
}
|
|
44
45
|
const initialSetting = getInitialSetting();
|
|
45
46
|
let currentSetting = initialSetting;
|
|
46
47
|
let currentValue = getInitialValue(initialSetting);
|
|
47
48
|
let isWebListening = false;
|
|
48
49
|
function startWebListener() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
if (isWebListening) return;
|
|
51
|
+
isWebListening = true;
|
|
52
|
+
const matcher = typeof window !== "undefined" ? window.matchMedia?.("(prefers-color-scheme: dark)") : null;
|
|
53
|
+
const onSystemChange = () => {
|
|
54
|
+
if (currentSetting === "system") updateValueFromSystem();
|
|
55
|
+
};
|
|
56
|
+
onSystemChange();
|
|
57
|
+
matcher?.addEventListener?.("change", onSystemChange);
|
|
57
58
|
}
|
|
58
59
|
function resolveValue(setting) {
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
if (setting === "system") return getSystemScheme();
|
|
61
|
+
return setting;
|
|
61
62
|
}
|
|
62
63
|
function updateValueFromSystem() {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
if (_forceScheme) return;
|
|
65
|
+
const value = resolveValue("system");
|
|
66
|
+
if (value !== currentValue) {
|
|
67
|
+
currentValue = value;
|
|
68
|
+
notifyListeners();
|
|
69
|
+
}
|
|
69
70
|
}
|
|
70
71
|
function updateScheme(setting) {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
if (_forceScheme) return;
|
|
73
|
+
const value = setting === "system" ? resolveValue("system") : setting;
|
|
74
|
+
if (value !== currentValue || currentSetting !== setting) {
|
|
75
|
+
currentSetting = setting;
|
|
76
|
+
currentValue = value;
|
|
77
|
+
notifyListeners();
|
|
78
|
+
}
|
|
78
79
|
}
|
|
79
80
|
function setUserScheme(setting) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
if (_forceScheme) return;
|
|
82
|
+
setStorageItem(storageKey, setting);
|
|
83
|
+
updateScheme(setting);
|
|
83
84
|
}
|
|
84
85
|
function getUserScheme() {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
if (_forceScheme) return {
|
|
87
|
+
setting: _forceScheme,
|
|
88
|
+
value: _forceScheme
|
|
89
|
+
};
|
|
90
|
+
return {
|
|
91
|
+
setting: currentSetting,
|
|
92
|
+
value: currentValue
|
|
93
|
+
};
|
|
93
94
|
}
|
|
94
95
|
function onUserSchemeChange(listener) {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
listeners.add(listener);
|
|
97
|
+
listener(currentSetting, currentValue);
|
|
98
|
+
return () => {
|
|
99
|
+
listeners.delete(listener);
|
|
100
|
+
};
|
|
100
101
|
}
|
|
101
102
|
function useUserScheme() {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
103
|
+
const [state, setState] = useState(() => getUserScheme());
|
|
104
|
+
const snapshot = getUserScheme();
|
|
105
|
+
const resolvedState = state.setting === snapshot.setting && state.value === snapshot.value ? state : snapshot;
|
|
106
|
+
useIsomorphicLayoutEffect(() => {
|
|
107
|
+
if (!_forceScheme) {
|
|
108
|
+
const stored = getStorageItem(storageKey);
|
|
109
|
+
if (stored) updateScheme(stored);
|
|
110
|
+
startWebListener();
|
|
111
|
+
}
|
|
112
|
+
return onUserSchemeChange((setting, value) => {
|
|
113
|
+
setState({
|
|
114
|
+
setting,
|
|
115
|
+
value
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
}, []);
|
|
119
|
+
return useMemo(() => ({
|
|
120
|
+
setting: resolvedState.setting,
|
|
121
|
+
value: resolvedState.value,
|
|
122
|
+
set: setUserScheme
|
|
123
|
+
}), [resolvedState.setting, resolvedState.value]);
|
|
123
124
|
}
|
|
125
|
+
|
|
124
126
|
export { getForceScheme, getUserScheme, onUserSchemeChange, setForceScheme, setUserScheme, useUserScheme };
|
|
125
127
|
//# sourceMappingURL=userScheme.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"userScheme.js","names":[],"sources":["esm/userScheme.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@vxrn/use-isomorphic-layout-effect\";\nimport { useMemo, useState } from \"react\";\nimport { getStorageItem, setStorageItem } from \"./safeStorage\";\nimport { getSystemScheme } from \"./systemScheme\";\n\nconst listeners = /* @__PURE__ */ new Set();\nconst storageKey = \"vxrn-scheme\";\nlet _forceScheme = null;\nfunction notifyListeners() {\n\tlisteners.forEach((listener) => {\n\t\tlistener(currentSetting, currentValue);\n\t});\n}\nfunction restoreUnforcedScheme() {\n\tconst stored = getStorageItem(storageKey);\n\tif (stored) {\n\t\tcurrentSetting = stored;\n\t\tcurrentValue = stored === \"system\" ? resolveValue(\"system\") : stored;\n\t\treturn;\n\t}\n\tcurrentSetting = \"system\";\n\tcurrentValue = resolveValue(\"system\");\n}\nfunction setForceScheme(scheme) {\n\tconst wasForced = _forceScheme;\n\tif (wasForced === scheme) return;\n\t_forceScheme = scheme;\n\tif (scheme) {\n\t\tcurrentSetting = scheme;\n\t\tcurrentValue = scheme;\n\t} else if (wasForced) {\n\t\trestoreUnforcedScheme();\n\t\tstartWebListener();\n\t}\n}\nfunction getForceScheme() {\n\treturn _forceScheme;\n}\nfunction getInitialSetting() {\n\treturn \"system\";\n}\nfunction getInitialValue(setting) {\n\treturn \"light\";\n}\nconst initialSetting = getInitialSetting();\nlet currentSetting = initialSetting;\nlet currentValue = getInitialValue(initialSetting);\nlet isWebListening = false;\nfunction startWebListener() {\n\tif (isWebListening) return;\n\tisWebListening = true;\n\tconst matcher = typeof window !== \"undefined\" ? window.matchMedia?.(\"(prefers-color-scheme: dark)\") : null;\n\tconst onSystemChange = () => {\n\t\tif (currentSetting === \"system\") updateValueFromSystem();\n\t};\n\tonSystemChange();\n\tmatcher?.addEventListener?.(\"change\", onSystemChange);\n}\nfunction resolveValue(setting) {\n\tif (setting === \"system\") return getSystemScheme();\n\treturn setting;\n}\nfunction updateValueFromSystem() {\n\tif (_forceScheme) return;\n\tconst value = resolveValue(\"system\");\n\tif (value !== currentValue) {\n\t\tcurrentValue = value;\n\t\tnotifyListeners();\n\t}\n}\nfunction updateScheme(setting) {\n\tif (_forceScheme) return;\n\tconst value = setting === \"system\" ? resolveValue(\"system\") : setting;\n\tif (value !== currentValue || currentSetting !== setting) {\n\t\tcurrentSetting = setting;\n\t\tcurrentValue = value;\n\t\tnotifyListeners();\n\t}\n}\nfunction setUserScheme(setting) {\n\tif (_forceScheme) return;\n\tsetStorageItem(storageKey, setting);\n\tupdateScheme(setting);\n}\nfunction getUserScheme() {\n\tif (_forceScheme) return {\n\t\tsetting: _forceScheme,\n\t\tvalue: _forceScheme\n\t};\n\treturn {\n\t\tsetting: currentSetting,\n\t\tvalue: currentValue\n\t};\n}\nfunction onUserSchemeChange(listener) {\n\tlisteners.add(listener);\n\tlistener(currentSetting, currentValue);\n\treturn () => {\n\t\tlisteners.delete(listener);\n\t};\n}\nfunction useUserScheme() {\n\tconst [state, setState] = useState(() => getUserScheme());\n\tconst snapshot = getUserScheme();\n\tconst resolvedState = state.setting === snapshot.setting && state.value === snapshot.value ? state : snapshot;\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (!_forceScheme) {\n\t\t\tconst stored = getStorageItem(storageKey);\n\t\t\tif (stored) updateScheme(stored);\n\t\t\tstartWebListener();\n\t\t}\n\t\treturn onUserSchemeChange((setting, value) => {\n\t\t\tsetState({\n\t\t\t\tsetting,\n\t\t\t\tvalue\n\t\t\t});\n\t\t});\n\t}, []);\n\treturn useMemo(() => ({\n\t\tsetting: resolvedState.setting,\n\t\tvalue: resolvedState.value,\n\t\tset: setUserScheme\n\t}), [resolvedState.setting, resolvedState.value]);\n}\n\nexport { getForceScheme, getUserScheme, onUserSchemeChange, setForceScheme, setUserScheme, useUserScheme };"],"mappings":";;;;;;AAKA,MAAM,4BAA4B,IAAI,IAAI;AAC1C,MAAM,aAAa;AACnB,IAAI,eAAe;AACnB,SAAS,kBAAkB;CAC1B,UAAU,SAAS,aAAa;EAC/B,SAAS,gBAAgB,YAAY;CACtC,CAAC;AACF;AACA,SAAS,wBAAwB;CAChC,MAAM,SAAS,eAAe,UAAU;CACxC,IAAI,QAAQ;EACX,iBAAiB;EACjB,eAAe,WAAW,WAAW,aAAa,QAAQ,IAAI;EAC9D;CACD;CACA,iBAAiB;CACjB,eAAe,aAAa,QAAQ;AACrC;AACA,SAAS,eAAe,QAAQ;CAC/B,MAAM,YAAY;CAClB,IAAI,cAAc,QAAQ;CAC1B,eAAe;CACf,IAAI,QAAQ;EACX,iBAAiB;EACjB,eAAe;CAChB,OAAO,IAAI,WAAW;EACrB,sBAAsB;EACtB,iBAAiB;CAClB;AACD;AACA,SAAS,iBAAiB;CACzB,OAAO;AACR;AACA,SAAS,oBAAoB;CAC5B,OAAO;AACR;AACA,SAAS,gBAAgB,SAAS;CACjC,OAAO;AACR;AACA,MAAM,iBAAiB,kBAAkB;AACzC,IAAI,iBAAiB;AACrB,IAAI,eAAe,gBAAgB,cAAc;AACjD,IAAI,iBAAiB;AACrB,SAAS,mBAAmB;CAC3B,IAAI,gBAAgB;CACpB,iBAAiB;CACjB,MAAM,UAAU,OAAO,WAAW,cAAc,OAAO,aAAa,8BAA8B,IAAI;CACtG,MAAM,uBAAuB;EAC5B,IAAI,mBAAmB,UAAU,sBAAsB;CACxD;CACA,eAAe;CACf,SAAS,mBAAmB,UAAU,cAAc;AACrD;AACA,SAAS,aAAa,SAAS;CAC9B,IAAI,YAAY,UAAU,OAAO,gBAAgB;CACjD,OAAO;AACR;AACA,SAAS,wBAAwB;CAChC,IAAI,cAAc;CAClB,MAAM,QAAQ,aAAa,QAAQ;CACnC,IAAI,UAAU,cAAc;EAC3B,eAAe;EACf,gBAAgB;CACjB;AACD;AACA,SAAS,aAAa,SAAS;CAC9B,IAAI,cAAc;CAClB,MAAM,QAAQ,YAAY,WAAW,aAAa,QAAQ,IAAI;CAC9D,IAAI,UAAU,gBAAgB,mBAAmB,SAAS;EACzD,iBAAiB;EACjB,eAAe;EACf,gBAAgB;CACjB;AACD;AACA,SAAS,cAAc,SAAS;CAC/B,IAAI,cAAc;CAClB,eAAe,YAAY,OAAO;CAClC,aAAa,OAAO;AACrB;AACA,SAAS,gBAAgB;CACxB,IAAI,cAAc,OAAO;EACxB,SAAS;EACT,OAAO;CACR;CACA,OAAO;EACN,SAAS;EACT,OAAO;CACR;AACD;AACA,SAAS,mBAAmB,UAAU;CACrC,UAAU,IAAI,QAAQ;CACtB,SAAS,gBAAgB,YAAY;CACrC,aAAa;EACZ,UAAU,OAAO,QAAQ;CAC1B;AACD;AACA,SAAS,gBAAgB;CACxB,MAAM,CAAC,OAAO,YAAY,eAAe,cAAc,CAAC;CACxD,MAAM,WAAW,cAAc;CAC/B,MAAM,gBAAgB,MAAM,YAAY,SAAS,WAAW,MAAM,UAAU,SAAS,QAAQ,QAAQ;CACrG,gCAAgC;EAC/B,IAAI,CAAC,cAAc;GAClB,MAAM,SAAS,eAAe,UAAU;GACxC,IAAI,QAAQ,aAAa,MAAM;GAC/B,iBAAiB;EAClB;EACA,OAAO,oBAAoB,SAAS,UAAU;GAC7C,SAAS;IACR;IACA;GACD,CAAC;EACF,CAAC;CACF,GAAG,CAAC,CAAC;CACL,OAAO,eAAe;EACrB,SAAS,cAAc;EACvB,OAAO,cAAc;EACrB,KAAK;CACN,IAAI,CAAC,cAAc,SAAS,cAAc,KAAK,CAAC;AACjD"}
|
|
@@ -2,136 +2,139 @@ import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
|
|
|
2
2
|
import { useMemo, useState } from "react";
|
|
3
3
|
import { getStorageItem, setStorageItem } from "./safeStorage.native.js";
|
|
4
4
|
import { addAppearanceChangeListener, getAppearanceScheme, setAppearanceScheme } from "./userSchemeAppearance.native.js";
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
6
7
|
var storageKey = "vxrn-scheme";
|
|
7
8
|
var _forceScheme = null;
|
|
8
9
|
function notifyListeners() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
listeners.forEach(function(listener) {
|
|
11
|
+
listener(currentSetting, currentValue);
|
|
12
|
+
});
|
|
12
13
|
}
|
|
13
14
|
function restoreUnforcedScheme() {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
var stored = getStorageItem(storageKey);
|
|
16
|
+
if (stored) {
|
|
17
|
+
currentSetting = stored;
|
|
18
|
+
currentValue = stored === "system" ? resolveValue("system") : stored;
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
currentSetting = "system";
|
|
22
|
+
currentValue = resolveValue("system");
|
|
22
23
|
}
|
|
23
24
|
function setForceScheme(scheme) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
var wasForced = _forceScheme;
|
|
26
|
+
if (wasForced === scheme) return;
|
|
27
|
+
_forceScheme = scheme;
|
|
28
|
+
if (scheme) {
|
|
29
|
+
currentSetting = scheme;
|
|
30
|
+
currentValue = scheme;
|
|
31
|
+
} else if (wasForced) {
|
|
32
|
+
restoreUnforcedScheme();
|
|
33
|
+
startWebListener();
|
|
34
|
+
}
|
|
34
35
|
}
|
|
35
36
|
function getForceScheme() {
|
|
36
|
-
|
|
37
|
+
return _forceScheme;
|
|
37
38
|
}
|
|
38
39
|
function getInitialSetting() {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
var stored = getStorageItem(storageKey);
|
|
41
|
+
if (stored === "light" || stored === "dark" || stored === "system") return stored;
|
|
42
|
+
return "system";
|
|
42
43
|
}
|
|
43
44
|
function getInitialValue(setting) {
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
if (setting === "system") return getAppearanceScheme();
|
|
46
|
+
return setting;
|
|
46
47
|
}
|
|
47
48
|
var initialSetting = getInitialSetting();
|
|
48
49
|
var currentSetting = initialSetting;
|
|
49
50
|
var currentValue = getInitialValue(initialSetting);
|
|
50
|
-
addAppearanceChangeListener(function
|
|
51
|
-
|
|
51
|
+
addAppearanceChangeListener(function() {
|
|
52
|
+
if (currentSetting === "system") updateValueFromSystem();
|
|
52
53
|
});
|
|
53
54
|
var isWebListening = false;
|
|
54
55
|
function startWebListener() {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
var _window_matchMedia, _window, _matcher_addEventListener;
|
|
57
|
+
if (isWebListening) return;
|
|
58
|
+
isWebListening = true;
|
|
59
|
+
var matcher = typeof window !== "undefined" ? (_window_matchMedia = (_window = window).matchMedia) === null || _window_matchMedia === void 0 ? void 0 : _window_matchMedia.call(_window, "(prefers-color-scheme: dark)") : null;
|
|
60
|
+
var onSystemChange = function() {
|
|
61
|
+
if (currentSetting === "system") updateValueFromSystem();
|
|
62
|
+
};
|
|
63
|
+
onSystemChange();
|
|
64
|
+
matcher === null || matcher === void 0 || (_matcher_addEventListener = matcher.addEventListener) == null || _matcher_addEventListener.call(matcher, "change", onSystemChange);
|
|
64
65
|
}
|
|
65
66
|
function resolveValue(setting) {
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
if (setting === "system") return getAppearanceScheme();
|
|
68
|
+
return setting;
|
|
68
69
|
}
|
|
69
70
|
function updateValueFromSystem() {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
if (_forceScheme) return;
|
|
72
|
+
var value = resolveValue("system");
|
|
73
|
+
if (value !== currentValue) {
|
|
74
|
+
currentValue = value;
|
|
75
|
+
notifyListeners();
|
|
76
|
+
}
|
|
76
77
|
}
|
|
77
78
|
function updateScheme(setting) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
79
|
+
if (_forceScheme) return;
|
|
80
|
+
var value = setting === "system" ? resolveValue("system") : setting;
|
|
81
|
+
if (value !== currentValue || currentSetting !== setting) {
|
|
82
|
+
currentSetting = setting;
|
|
83
|
+
currentValue = value;
|
|
84
|
+
if (setting !== "system") setAppearanceScheme(value);
|
|
85
|
+
else setAppearanceScheme("unspecified");
|
|
86
|
+
notifyListeners();
|
|
87
|
+
}
|
|
86
88
|
}
|
|
87
89
|
function setUserScheme(setting) {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
if (_forceScheme) return;
|
|
91
|
+
setStorageItem(storageKey, setting);
|
|
92
|
+
updateScheme(setting);
|
|
91
93
|
}
|
|
92
94
|
function getUserScheme() {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
if (_forceScheme) return {
|
|
96
|
+
setting: _forceScheme,
|
|
97
|
+
value: _forceScheme
|
|
98
|
+
};
|
|
99
|
+
return {
|
|
100
|
+
setting: currentSetting,
|
|
101
|
+
value: currentValue
|
|
102
|
+
};
|
|
101
103
|
}
|
|
102
104
|
function onUserSchemeChange(listener) {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
105
|
+
listeners.add(listener);
|
|
106
|
+
listener(currentSetting, currentValue);
|
|
107
|
+
return function() {
|
|
108
|
+
listeners.delete(listener);
|
|
109
|
+
};
|
|
108
110
|
}
|
|
109
111
|
function useUserScheme() {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
112
|
+
var [state, setState] = useState(function() {
|
|
113
|
+
return getUserScheme();
|
|
114
|
+
});
|
|
115
|
+
var snapshot = getUserScheme();
|
|
116
|
+
var resolvedState = state.setting === snapshot.setting && state.value === snapshot.value ? state : snapshot;
|
|
117
|
+
useIsomorphicLayoutEffect(function() {
|
|
118
|
+
if (!_forceScheme) {
|
|
119
|
+
var stored = getStorageItem(storageKey);
|
|
120
|
+
if (stored) updateScheme(stored);
|
|
121
|
+
startWebListener();
|
|
122
|
+
}
|
|
123
|
+
return onUserSchemeChange(function(setting, value) {
|
|
124
|
+
setState({
|
|
125
|
+
setting,
|
|
126
|
+
value
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
}, []);
|
|
130
|
+
return useMemo(function() {
|
|
131
|
+
return {
|
|
132
|
+
setting: resolvedState.setting,
|
|
133
|
+
value: resolvedState.value,
|
|
134
|
+
set: setUserScheme
|
|
135
|
+
};
|
|
136
|
+
}, [resolvedState.setting, resolvedState.value]);
|
|
135
137
|
}
|
|
138
|
+
|
|
136
139
|
export { getForceScheme, getUserScheme, onUserSchemeChange, setForceScheme, setUserScheme, useUserScheme };
|
|
137
140
|
//# sourceMappingURL=userScheme.native.js.map
|