1 files changed, 22 insertions, 10 deletions
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx
index 87b401a..6ae1430 100644
--- a/src/ThemeContextProvider.tsx
+++ b/src/ThemeContextProvider.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ReactNode, createContext, useMemo, useState } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import type { PaletteMode } from '@mui/material';
 
 type ThemeContextType = {
   toggleColorMode: () => void;
@@ -22,18 +23,29 @@ function ThemeContextProvider({ children }: ThemeProviderProps) {
   );
 
   const toggleColorMode = () => {
-    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+    setMode((prevMode: PaletteMode) =>
+      prevMode === 'light' ? 'dark' : 'light'
+    );
   };
 
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-        },
-      }),
-    [mode]
-  );
+  const getDesignTokens = (mode: PaletteMode) => ({
+    palette: {
+      mode,
+      ...(mode === 'light'
+        ? {
+            primary: {
+              main: '#007bff',
+            },
+          }
+        : {
+            primary: {
+              main: '#78bef8',
+            },
+          }),
+    },
+  });
+
+  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
 
   return (
     <ThemeContext.Provider value={{ toggleColorMode }}>