@@ -33,8 +33,15 @@ const router = createBrowserRouter([
3333} ,
3434] ) ;
3535function App ( ) {
36- const [ theme , setTheme ] = useState ( 'light' ) ;
37- const [ checked , setChecked ] = useState ( false ) ;
36+ let defaultTheme ;
37+ if ( window . matchMedia && window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches ) {
38+ defaultTheme = 'dark'
39+ } else {
40+ defaultTheme = 'light'
41+ }
42+
43+ const [ theme , setTheme ] = useState ( defaultTheme ) ;
44+ const [ checked , setChecked ] = useState ( defaultTheme === 'dark' ) ;
3845
3946const [ state , dispatch ] = useReducer (
4047( state :StateType , action :{ type :string ; payload :any } ) => {
@@ -69,21 +76,27 @@ function App() {
6976{ notes :[ ] , editMode :false , noteToBeEdited :null }
7077) ;
7178
72- const changeHandler = ( check :boolean ) => {
73- setChecked ( ! checked ) ;
79+ const checkForTheme = ( check :boolean ) => {
7480if ( check ) {
7581setTheme ( 'dark' ) ;
7682} else {
7783setTheme ( 'light' ) ;
7884}
85+ }
86+ const changeHandler = ( check :boolean ) => {
87+ setChecked ( ! checked ) ;
88+ checkForTheme ( check ) ;
7989} ;
90+
91+
8092
8193useEffect ( ( ) => {
8294async function initializeNotes ( ) {
8395const notes = await getNotes ( ) ;
8496dispatch ( { type :INIT_NOTES , payload :notes } ) ;
8597}
8698initializeNotes ( ) ;
99+ checkForTheme ( checked ) ;
87100} , [ ] ) ;
88101
89102return (