feat light mode and fix some components styles

DashAI/front/src/components/ResponsiveAppBar.jsx

@@ -13,6 +13,9 @@ import MenuItem from "@mui/material/MenuItem";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import HomeIcon from "@mui/icons-material/HomeOutlined";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { ColorModeContext } from "../contexts/ThemeContext";
 
 const pages = [
   { name: "Datasets", to: "/app/data", disabled: false },
@@ -25,6 +28,7 @@ const pages = [
 
 function ResponsiveAppBar() {
   const theme = useTheme();
+  const colorMode = React.useContext(ColorModeContext);
   const location = useLocation();
 
   const [anchorElNav, setAnchorElNav] = React.useState(null);
@@ -130,6 +134,27 @@ function ResponsiveAppBar() {
               </Button>
             ))}
           </Box>
+
+          {/* Theme Toggle Button */}
+          <Box sx={{ flexGrow: 0 }}>
+            <IconButton
+              onClick={colorMode.toggleColorMode}
+              aria-label="toggle theme"
+              sx={{
+                ml: 1,
+                color:
+                  theme.palette.mode === "dark"
+                    ? "inherit"
+                    : theme.palette.text.primary,
+              }}
+            >
+              {theme.palette.mode === "dark" ? (
+                <Brightness7Icon />
+              ) : (
+                <Brightness4Icon />
+              )}
+            </IconButton>
+          </Box>
         </Toolbar>
       </Container>
     </AppBar>

DashAI/front/src/components/explorations/ResultsViewer.jsx

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { useExplorationsContext } from "./context";
 
 import { Button, Divider, Grid, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 import { useSnackbar } from "notistack";
 import { getExplorersByExplorationId } from "../../api/explorer";
@@ -75,9 +76,12 @@ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) {
                 variant="contained"
                 color={viewMode === viewModes.ALL ? "primary" : "inherit"}
                 onClick={() => handleChangeViewMode(viewModes.ALL)}
-                style={{
-                  border: "2px solid #00bebb",
-                  color: viewMode === viewModes.ALL ? "#ffffff" : "#00bebb",
+                sx={{
+                  border: `2px solid ${theme.palette.primary.main}`,
+                  color:
+                    viewMode === viewModes.ALL
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.primary.main,
                   borderRadius: "1px",
                 }}
               >
@@ -93,10 +97,12 @@ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) {
                   viewMode === viewModes.BY_EXPLORER ? "primary" : "inherit"
                 }
                 onClick={() => handleChangeViewMode(viewModes.BY_EXPLORER)}
-                style={{
-                  border: "2px solid #00bebb",
+                sx={{
+                  border: `2px solid ${theme.palette.primary.main}`,
                   color:
-                    viewMode === viewModes.BY_EXPLORER ? "#ffffff" : "#00bebb",
+                    viewMode === viewModes.BY_EXPLORER
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.primary.main,
                   borderRadius: "1px",
                 }}
               >

DashAI/front/src/components/generative/Footer.jsx

@@ -10,7 +10,7 @@ export default function Footer() {
       flexDirection={"column"}
       py={2}
     >
-      <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+      <Divider sx={{ width: "100%", bgcolor: "divider" }} />
       <Avatar
         alt="DashAI Logo"
         src="/images/logo.png"

DashAI/front/src/components/generative/GenerativeChat.jsx

@@ -1,4 +1,5 @@
 import { Box, Divider, IconButton, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 import InfoIcon from "@mui/icons-material/Info";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
@@ -21,6 +22,7 @@ import JobQueueWidget from "../jobs/JobQueueWidget";
 import { getRunStatus } from "../../utils/runStatus";
 
 export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
+  const theme = useTheme();
   const [history, setHistory] = useState([]);
   const [messages, setMessages] = useState([]);
   const [messagesWithHistory, setMessagesWithHistory] = useState([]);
@@ -220,9 +222,9 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
             <IconButton onClick={() => setSessionInfoVisible(true)}>
               <InfoIcon
                 sx={{
-                  color: "#a0a0a0",
+                  color: "text.secondary",
                   "&:hover": {
-                    color: "#ffffff",
+                    color: "text.primary",
                   },
                 }}
               />
@@ -251,11 +253,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
             width: "8px",
           },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "#555",
+            backgroundColor: theme.palette.ui.border,
             borderRadius: "4px",
           },
           "&::-webkit-scrollbar-thumb:hover": {
-            backgroundColor: "#888",
+            backgroundColor: theme.palette.ui.hover,
           },
         }}
       >

DashAI/front/src/components/generative/InfoSessionModal.jsx

@@ -10,8 +10,10 @@ import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
+import { useTheme } from "@mui/material/styles";
 
 export default function InfoSessionModal({ sessionData, open, onClose }) {
+  const theme = useTheme();
   // Format date for display
   const formatDate = (dateString) => {
     try {
@@ -91,7 +93,9 @@ export default function InfoSessionModal({ sessionData, open, onClose }) {
             />
             <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
               Model:{" "}
-              <span style={{ color: "#fff" }}>{sessionData.model_name}</span>
+              <span style={{ color: theme.palette.text.primary }}>
+                {sessionData.model_name}
+              </span>
             </Typography>
           </Box>
 

DashAI/front/src/components/generative/MessageContent.jsx

@@ -9,8 +9,8 @@ export function MessageContent({ messages, isUser, isWaiting }) {
   return (
     <Paper
       sx={{
-        backgroundColor: "#374151",
-        color: "#fff",
+        backgroundColor: theme.palette.ui.box,
+        color: "text.primary",
         padding: theme.spacing(1.5, 2),
         maxWidth: "100%",
         borderRadius: 2,

DashAI/front/src/components/generative/SessionBar.jsx

@@ -1,4 +1,5 @@
 import { Box, Typography, Divider } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import FolderIcon from "@mui/icons-material/Folder";
 import SearchBar from "./SearchBar";
 import { useEffect, useState } from "react";
@@ -18,6 +19,7 @@ export default function SessionBar({
   handleSessionDelete,
   stepIndex,
 }) {
+  const theme = useTheme();
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredSessions, setFilteredSessions] = useState(sessions);
   const [selectedInfoSession, setSelectedInfoSession] = useState(null);
@@ -95,7 +97,7 @@ export default function SessionBar({
         >
           <BarHeader />
         </Box>
-        <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+        <Divider sx={{ width: "100%", bgcolor: "divider" }} />
 
         <Box
           p={2}
@@ -123,7 +125,7 @@ export default function SessionBar({
           />
         </Box>
 
-        <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+        <Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
 
         {/* Sessions */}
         <Box
@@ -139,13 +141,17 @@ export default function SessionBar({
         >
           {/* Header */}
           <Box display="flex" alignItems="center" py={0.5} px={1} mb={0.5}>
-            <FolderIcon sx={{ color: "#16FFFF", mr: 1, fontSize: 20 }} />
-            <Typography>Sessions</Typography>
+            <FolderIcon
+              sx={{ color: theme.palette.primary.main, mr: 1, fontSize: 20 }}
+            />
+            <Typography variant="body2" color="text.primary">
+              Sessions
+            </Typography>
             <Box
               sx={{
                 ml: 1,
-                bgcolor: "#374151",
-                color: "white",
+                bgcolor: theme.palette.ui.border,
+                color: "text.primary",
                 borderRadius: "50%",
                 width: 20,
                 height: 20,

DashAI/front/src/components/generative/SessionBarHeader.jsx

@@ -15,7 +15,7 @@ export default function SessionBarHeader() {
         variant="h6"
         sx={{
           fontWeight: "bold",
-          "& span": { color: "#16FFFF" },
+          "& span": { color: theme.palette.accent.main },
         }}
       >
         <span>D</span>a<span>sh</span>

DashAI/front/src/components/generative/SessionBox.jsx

@@ -21,12 +21,10 @@ export default function SessionBox({
         alignItems: "center",
         borderRadius: 1,
         cursor: isSelected ? "default" : "pointer",
-        bgcolor: isSelected ? "rgba(255, 255, 255, 0.05)" : "transparent",
+        bgcolor: isSelected ? "action.selected" : "transparent",
         p: 0.5,
         "&:hover": {
-          backgroundColor: isSelected
-            ? "rgba(255, 255, 255, 0.05)"
-            : "rgba(255, 255, 255, 0.05)",
+          backgroundColor: isSelected ? "action.selected" : "action.hover",
         },
       }}
       onClick={isSelected ? undefined : onClick}
@@ -42,13 +40,15 @@ export default function SessionBox({
         <Box>
           <Typography
             variant="body2"
+            color="text.primary"
             noWrap
             sx={{ maxWidth: 180, fontSize: 14 }}
           >
             {name ? name : "Untitled Session"}
           </Typography>
           <Typography
             variant="caption"
+            color="text.secondary"
             noWrap
             sx={{ maxWidth: 150, fontSize: 10, pl: 1 }}
           >

DashAI/front/src/components/generative/SessionList.jsx

@@ -1,4 +1,5 @@
 import { Box, Typography, Collapse } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import SessionBox from "./SessionBox";
@@ -12,6 +13,7 @@ export default function SessionList({
   handleSessionInfo,
   toggleSection,
 }) {
+  const theme = useTheme();
   if (groupedSessions === undefined) {
     return (
       <Box
@@ -23,7 +25,7 @@ export default function SessionList({
       >
         <Typography
           sx={{
-            color: "#ffffff",
+            color: "text.secondary",
             opacity: 0.5,
             textAlign: "center",
             padding: 2,
@@ -47,11 +49,11 @@ export default function SessionList({
           width: "6px",
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "#374151",
+          backgroundColor: theme.palette.ui.border,
           borderRadius: "3px",
         },
         "&::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: "#4B5563",
+          backgroundColor: theme.palette.ui.hover,
         },
         overflowY: "auto",
         flex: 1,
@@ -70,21 +72,22 @@ export default function SessionList({
                 px: 1,
                 borderRadius: 1,
                 "&:hover": {
-                  bgcolor: "rgba(255, 255, 255, 0.05)",
+                  bgcolor: "action.hover",
                 },
               }}
               onClick={() => toggleSection(taskName)}
             >
               {openSections[taskName] ? (
                 <KeyboardArrowDownIcon
-                  sx={{ fontSize: 20, color: "#16FFFF" }}
+                  sx={{ fontSize: 20, color: theme.palette.primary.main }}
                 />
               ) : (
                 <KeyboardArrowRightIcon
-                  sx={{ fontSize: 20, color: "#16FFFF" }}
+                  sx={{ fontSize: 20, color: theme.palette.primary.main }}
                 />
               )}
               <Typography
+                color="text.primary"
                 sx={{
                   ml: 1,
                   fontSize: "0.9rem",
@@ -102,8 +105,8 @@ export default function SessionList({
               <Box
                 sx={{
                   ml: 1,
-                  bgcolor: "#374151",
-                  color: "white",
+                  bgcolor: theme.palette.ui.border,
+                  color: "text.primary",
                   borderRadius: "50%",
                   width: 20,
                   height: 20,
@@ -145,7 +148,7 @@ export default function SessionList({
       ) : (
         <Typography
           sx={{
-            color: "#ffffff",
+            color: "text.secondary",
             opacity: 0.5,
             textAlign: "center",
             padding: 2,

DashAI/front/src/components/notebooks/LeftBar.jsx

@@ -93,7 +93,7 @@ export default function DatasetsNotebooksBar({
           <ChevronLeft />
         </IconButton>
       </Box>
-      <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+      <Divider sx={{ width: "100%", bgcolor: "divider" }} />
 
       {/* Create new item button */}
       <Box p={2} sx={{ height: "64px", display: "flex", alignItems: "center" }}>
@@ -118,7 +118,7 @@ export default function DatasetsNotebooksBar({
         />
       </Box>
 
-      <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+      <Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
 
       {/* Scrollable content */}
       <Box display="flex" flexDirection="column" flex={1} minHeight={0}>
@@ -134,7 +134,7 @@ export default function DatasetsNotebooksBar({
           getItemDescription={getDatasetDescription}
         />
 
-        <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+        <Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
 
         <CollapsibleList
           items={filteredNotebooks}