1 files changed, 8 insertions, 4 deletions
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx
index e1e928c..63f4e81 100644
--- a/src/ThemeContextProvider.tsx
+++ b/src/ThemeContextProvider.tsx
@@ -1,20 +1,24 @@
 import { ReactNode, createContext, useMemo, useState } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 type ThemeContextType = {
   toggleColorMode: () => void;
-};
+}
 
 type ThemeProviderProps = {
   children: ReactNode;
-};
+}
 
 export const ThemeContext = createContext<ThemeContextType>({
   toggleColorMode: () => {}
 });
 
 function ThemeContextProvider({ children }: ThemeProviderProps) {
-  const [mode, setMode] = useState<'light' | 'dark'>('light');
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = useState<'light' | 'dark'>(
+    prefersDarkMode ? 'dark' : 'light'
+  );
 
   const toggleColorMode = () => {
     setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
@@ -37,6 +41,6 @@ function ThemeContextProvider({ children }: ThemeProviderProps) {
       </ThemeProvider>
     </ThemeContext.Provider>
   );
-};
+}
 
 export default ThemeContextProvider;