@duro-app/ui 0.36.0 → 0.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duro-app/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.37.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@duro-app/tokens": "^0.
|
|
57
|
+
"@duro-app/tokens": "^0.37.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@babel/preset-typescript": "^7.28.0",
|
|
@@ -65,12 +65,6 @@ export function useColorMode(): ColorModeContextValue {
|
|
|
65
65
|
const canUseDom =
|
|
66
66
|
!isNative && typeof window !== 'undefined' && typeof window.matchMedia === 'function'
|
|
67
67
|
|
|
68
|
-
function getSystemTheme(): Extract<ThemeName, 'light' | 'dark'> {
|
|
69
|
-
// No DOM (SSR / native): default to dark, matching ThemeProvider's default.
|
|
70
|
-
if (!canUseDom) return 'dark'
|
|
71
|
-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
72
|
-
}
|
|
73
|
-
|
|
74
68
|
function isPreference(value: unknown): value is ColorModePreference {
|
|
75
69
|
return typeof value === 'string' && (PREFERENCES as readonly string[]).includes(value)
|
|
76
70
|
}
|
|
@@ -148,8 +142,12 @@ export function ColorModeProvider({
|
|
|
148
142
|
[controlled, storageKey, onPreferenceChange],
|
|
149
143
|
)
|
|
150
144
|
|
|
151
|
-
// Track the OS scheme so `'system'` stays live.
|
|
152
|
-
|
|
145
|
+
// Track the OS scheme so `'system'` stays live. The initial value MUST be the
|
|
146
|
+
// SSR-stable default ('dark', what the server renders without a DOM) so the
|
|
147
|
+
// first client render matches the server — reading matchMedia in the
|
|
148
|
+
// initializer would diverge (server 'dark' vs client's real scheme) and trip
|
|
149
|
+
// a hydration mismatch. The effect reconciles to the real scheme after mount.
|
|
150
|
+
const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>('dark')
|
|
153
151
|
useEffect(() => {
|
|
154
152
|
if (!canUseDom) return
|
|
155
153
|
const mq = window.matchMedia('(prefers-color-scheme: dark)')
|