Coderabbit Refactor suggestion for Theme colors. Refactor Frontend Code for Theme Enhancement

[uparkalau]

Description

Investigate the frontend code to replace hex colors with color variables. Refactor the theme to add light/dark palette into the project.

Refactor Suggestion

The dark theme has potential but needs some tweaks to really shine. Here are the key points to address:

1. [ ] Primary Color Adjustment: The primary color is the same as the light theme for consistency, but it might need slight adjustment for better contrast in dark mode.
2. [ ] AppBar Color: The current AppBar color (#333) might be too light for a dark theme. Consider using a darker color to make it stand out.
3. [ ] Missing Color Definitions: Ensure all necessary color definitions are included, such as text colors, to maintain readability.
4. [ ] MuiDrawer Styles: The MuiDrawer styles are identical to the light theme. Update it with a dark paper color to match the dark theme.
5. [ ] Theme Toggle Implementation: Implement a toggle switch to allow users to switch between light and dark themes.

   Proposed Dark Theme Code

   export const darkTheme = createTheme({
   palette: {
   mode: 'dark',
   primary: {
     main: "#9f7aea", // Slightly lighter for better contrast
   },
   secondary: {
     main: "#f687b3", // Add a secondary color
   },
   error: {
     main: "#feb2b2", // Add an error color
   },
   background: {
     default: "#121212",
     paper: "#1e1e1e", // Add a paper background color
   },
   text: {
     primary: "#e2e8f0", // Add primary text color
     secondary: "#a0aec0", // Add secondary text color
   },
   },
   components: {
   MuiAppBar: {
     styleOverrides: {
       root: {
         backgroundColor: "#1a202c", // Darker AppBar
         color: "#e2e8f0",
       },
     },
   },
   MuiDrawer: {
     styleOverrides: {
       paper: {
         width: "250px",
         flexShrink: 0,
         zIndex: 1200,
         backgroundColor: "#1e1e1e", // Match the paper background
       },
     },
   },
   },
   typography: {
   fontFamily: "Inter",
   // ... add typography variants similar to light theme
   },
   });

Notes

• Ensure consistency with the light theme while enhancing the dark mode.
• Test the changes thoroughly to maintain readability and visual appeal.

[erenfn]

Is this solved in #241 ?