@@ -13,58 +13,39 @@ import React, {
13
13
useMemo ,
14
14
useState
15
15
} from 'react' ;
16
+ import PropTypes from 'prop-types' ;
16
17
import {
17
18
ColorScheme ,
18
19
IColorSchemeContext ,
19
20
IColorSchemeProviderProps ,
20
21
IGardenTheme
21
22
} from '../types' ;
22
23
23
- const useColorScheme = ( initialState ?: ColorScheme , colorSchemeKey = 'color-scheme' ) => {
24
+ const mediaQuery =
25
+ typeof window === 'undefined' ? undefined : window . matchMedia ( '(prefers-color-scheme: dark)' ) ;
26
+
27
+ const useColorScheme = ( initialState : ColorScheme , colorSchemeKey : string ) => {
24
28
/* eslint-disable-next-line n/no-unsupported-features/node-builtins */
25
29
const localStorage = typeof window === 'undefined' ? undefined : window . localStorage ;
26
- const mediaQuery =
27
- typeof window === 'undefined' ? undefined : window . matchMedia ( '(prefers-color-scheme: dark)' ) ;
28
30
29
- const getState = useCallback (
30
- ( _state ?: ColorScheme | null ) => {
31
- const isSystem = _state === 'system' || _state === undefined || _state === null ;
32
- let colorScheme : IGardenTheme [ 'colors' ] [ 'base' ] ;
31
+ const getState = useCallback ( ( _state ?: ColorScheme | null ) => {
32
+ const isSystem = _state === 'system' || _state === undefined || _state === null ;
33
+ let colorScheme : IGardenTheme [ 'colors' ] [ 'base' ] ;
33
34
34
- if ( isSystem ) {
35
- colorScheme = mediaQuery ?. matches ? 'dark' : 'light' ;
36
- } else {
37
- colorScheme = _state ;
38
- }
35
+ if ( isSystem ) {
36
+ colorScheme = mediaQuery ?. matches ? 'dark' : 'light' ;
37
+ } else {
38
+ colorScheme = _state ;
39
+ }
39
40
40
- return { isSystem, colorScheme } ;
41
- } ,
42
- [ mediaQuery ?. matches ]
43
- ) ;
41
+ return { isSystem, colorScheme } ;
42
+ } , [ ] ) ;
44
43
45
44
const [ state , setState ] = useState < {
46
45
isSystem : boolean ;
47
46
colorScheme : IGardenTheme [ 'colors' ] [ 'base' ] ;
48
47
} > ( getState ( ( localStorage ?. getItem ( colorSchemeKey ) as ColorScheme ) || initialState ) ) ;
49
48
50
- useEffect ( ( ) => {
51
- // Listen for changes to the system color scheme
52
- /* istanbul ignore next */
53
- const eventListener = ( ) => {
54
- setState ( getState ( 'system' ) ) ;
55
- } ;
56
-
57
- if ( state . isSystem ) {
58
- mediaQuery ?. addEventListener ( 'change' , eventListener ) ;
59
- } else {
60
- mediaQuery ?. removeEventListener ( 'change' , eventListener ) ;
61
- }
62
-
63
- return ( ) => {
64
- mediaQuery ?. removeEventListener ( 'change' , eventListener ) ;
65
- } ;
66
- } , [ getState , state . isSystem , mediaQuery ] ) ;
67
-
68
49
return {
69
50
isSystem : state . isSystem ,
70
51
colorScheme : state . colorScheme ,
@@ -79,8 +60,8 @@ export const ColorSchemeContext = createContext<IColorSchemeContext | undefined>
79
60
80
61
export const ColorSchemeProvider = ( {
81
62
children,
82
- colorSchemeKey,
83
- initialColorScheme
63
+ colorSchemeKey = 'color-scheme' ,
64
+ initialColorScheme = 'system'
84
65
} : PropsWithChildren < IColorSchemeProviderProps > ) => {
85
66
const { isSystem, colorScheme, setColorScheme } = useColorScheme (
86
67
initialColorScheme ,
@@ -91,5 +72,28 @@ export const ColorSchemeProvider = ({
91
72
[ isSystem , colorScheme , setColorScheme ]
92
73
) ;
93
74
75
+ useEffect ( ( ) => {
76
+ // Listen for changes to the system color scheme
77
+ /* istanbul ignore next */
78
+ const eventListener = ( ) => {
79
+ setColorScheme ( 'system' ) ;
80
+ } ;
81
+
82
+ if ( isSystem ) {
83
+ mediaQuery ?. addEventListener ( 'change' , eventListener ) ;
84
+ } else {
85
+ mediaQuery ?. removeEventListener ( 'change' , eventListener ) ;
86
+ }
87
+
88
+ return ( ) => {
89
+ mediaQuery ?. removeEventListener ( 'change' , eventListener ) ;
90
+ } ;
91
+ } , [ isSystem , setColorScheme ] ) ;
92
+
94
93
return < ColorSchemeContext . Provider value = { contextValue } > { children } </ ColorSchemeContext . Provider > ;
95
94
} ;
95
+
96
+ ColorSchemeProvider . propTypes = {
97
+ colorSchemeKey : PropTypes . string ,
98
+ initialColorScheme : PropTypes . oneOf ( [ 'light' , 'dark' , 'system' ] )
99
+ } ;
0 commit comments