Added more to theming

app/components/sidebar/SideBarLink.tsx

@@ -8,20 +8,19 @@ const LinkContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   padding: '12px 1px',
-//   borderRadius: theme.shape.borderRadius,s
+  borderRadius: '4px',
-//   color: theme.palette.text.primary,
+  color: theme.palette.text.tertiary,
   textDecoration: 'none',
   transition: 'background 0.2s ease-in-out',
 
   '&:hover': {
     color: 'rgb(255, 255, 255)',
     background: 'rgba(255, 255, 255, 0.08)',
-    // backgroundColor: theme.palette.action.hover,
+    backgroundColor: theme.palette.action.hover,
     cursor: 'pointer',
   },
 }));
 
-// background-color: rgb(69, 190, 171);
 const LinkText = styled('span')(({ theme }) => ({
   color: theme.palette.text.tertiary,
   marginLeft: '12px',

app/components/sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ import SidebarLink from './SideBarLink';
 // Sidebar Container (styled using MUI System)
 export const Sidebar = styled('div')(({ theme }) => ({
   width: '240px',
-  backgroundColor: 'rgb(69, 190, 171)',
+  backgroundColor:  theme.palette.background.primary,
   color: 'white',
   padding: theme.spacing(2),
   height: '100vh',

config/theme.ts

@@ -1,42 +1,27 @@
 import { createTheme } from '@mui/material/styles';
 
-// Define your color palette
+const palette = {
-const lightPalette = {
   primary: {
-    main: '#1976d2', // Blue color
+    main: '#1976d2', 
   },
   secondary: {
-    main: '#d32f2f', // Red color
+    main: '#d32f2f',
   },
   background: {
     default: '#fafafa',
     paper: '#ffffff',
+    primary: 'rgb(69, 190, 171)',
   },
   text: {
     primary: '#000000',
     secondary: '#555555',
     tertiary: '#fff',
   },
-};
+  action: {
-
+    hover: 'rgba(0, 0, 0, 0.08)',
-const darkPalette = {
-  primary: {
-    main: '#90caf9', // Light blue
-  },
-  secondary: {
-    main: '#f48fb1', // Light pink
-  },
-  background: {
-    default: '#121212',
-    paper: '#1d1d1d',
-  },
-  text: {
-    primary: '#ffffff',
-    secondary: '#bbbbbb',
   },
 };
 
-// Typography customization
 const typography = {
   fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   h1: {
@@ -57,11 +42,9 @@ const typography = {
 const theme = createTheme({
   palette: {
     mode: 'light', // Change this to 'dark' for dark mode
-    ...(process.env.NODE_ENV === 'development' // Switch for dev mode
+   ...palette
-      ? lightPalette
-      : darkPalette),
   },
-  typography,
+  // typography,
   breakpoints: {
     values: {
       xs: 0,