fixed dark mode issue

Cefalo · Sep 26, 2024 · 5f7f40b · 5f7f40b
1 parent 074eab5
commit 5f7f40b
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 54 deletions.
diff --git a/client/src/pages/Home/TopNavigationBar.tsx b/client/src/pages/Home/TopNavigationBar.tsx
@@ -28,7 +28,9 @@ const TopNavigationBar = ({ title }: { title: string }) => {
   return (
     <TopBar>
       <Box>
-        <Typography variant="h4">{title}</Typography>
+        <Typography sx={[(theme) => ({ color: theme.palette.text.primary })]} variant="h4">
+          {title}
+        </Typography>
         {(secrets.mockCalender === 'true' || !secrets.mockCalender) && (
           <Typography variant="subtitle2" color={'textDisabled'}>
             App is using mock calender

diff --git a/client/src/pages/Login/index.tsx b/client/src/pages/Login/index.tsx
@@ -96,7 +96,7 @@ const Login = () => {
   const common = (
     <>
       <Box mt={isChromeExt ? 4 : 18}>
-        <Typography component="h1" variant="h2" sx={{ width: '100%' }}>
+        <Typography variant="h2" sx={[(theme) => ({ color: theme.palette.text.primary, width: '100%' })]}>
           {secrets.appTitle}
         </Typography>
         <Typography variant="h5" sx={[(theme) => ({ color: theme.palette.text.secondary, fontWeight: 400, mt: 1 })]}>

diff --git a/client/src/theme/primitives/colorSchemes.ts b/client/src/theme/primitives/colorSchemes.ts
@@ -118,58 +118,59 @@ export const colorSchemes = {
       baseShadow: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
     },
   },
-  dark: {
-    palette: {
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-      },
-      common: {
-        black: gray[700],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-      },
-      baseShadow: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-    },
-  },
+  // todo: add dark mode later; utilize client/src/components/ColorModeSelect.tsx
+  // dark: {
+  //   palette: {
+  //     primary: {
+  //       light: brand[200],
+  //       main: brand[400],
+  //       dark: brand[700],
+  //       contrastText: brand[50],
+  //     },
+  //     info: {
+  //       light: brand[100],
+  //       main: brand[300],
+  //       dark: brand[600],
+  //       contrastText: gray[50],
+  //     },
+  //     warning: {
+  //       light: orange[300],
+  //       main: orange[400],
+  //       dark: orange[800],
+  //     },
+  //     error: {
+  //       light: red[300],
+  //       main: red[400],
+  //       dark: red[800],
+  //     },
+  //     success: {
+  //       light: green[300],
+  //       main: green[400],
+  //       dark: green[800],
+  //     },
+  //     common: {
+  //       black: gray[700],
+  //     },
+  //     grey: {
+  //       ...gray,
+  //     },
+  //     divider: alpha(gray[300], 0.4),
+  //     background: {
+  //       default: 'hsl(0, 0%, 99%)',
+  //       paper: 'hsl(220, 35%, 97%)',
+  //     },
+  //     text: {
+  //       primary: gray[800],
+  //       secondary: gray[600],
+  //       warning: orange[400],
+  //     },
+  //     action: {
+  //       hover: alpha(gray[200], 0.2),
+  //       selected: `${alpha(gray[200], 0.3)}`,
+  //     },
+  //     baseShadow: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+  //   },
+  // },
 };
 
 export default colorSchemes;