feat light mode and utilize theme palette for consistent styling

DashAI/front/src/components/DatasetVisualization.jsx

@@ -12,6 +12,7 @@ import {
   Tabs,
   Tab,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   AddCircleOutline as AddIcon,
   CheckCircle as CheckIcon,
@@ -55,12 +56,14 @@ export default function DatasetVisualization({
   newItemButtonText = "New Item",
   existingItems = [],
 }) {
+  const theme = useTheme();
+
   if (!dataset) {
     return (
       <Box
         sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
       >
-        <CircularProgress sx={{ color: "#00BEBB" }} />
+        <CircularProgress sx={{ color: theme.palette.primary.main }} />
         <Typography>Loading...</Typography>
       </Box>
     );
@@ -250,7 +253,7 @@ export default function DatasetVisualization({
             {/* Tabs */}
             <Tabs
               sx={{
-                bgcolor: "#2C2C2C",
+                bgcolor: theme.palette.ui.box,
                 borderRadius: 1,
                 minHeight: "48px",
                 "& .MuiTabs-indicator": {
@@ -264,12 +267,12 @@ export default function DatasetVisualization({
                   border: "1px solid transparent",
                   textTransform: "none",
                   "&:hover": {
-                    bgcolor: "rgba(255,255,255,0.05)",
+                    bgcolor: theme.palette.action.hover,
                   },
                   "&.Mui-disabled": {
-                    color: "rgb(150, 150, 150)",
-                    bgcolor: "rgb(32, 32, 32)",
-                    borderColor: "rgb(39, 39, 42)",
+                    color: theme.palette.text.disabled,
+                    bgcolor: theme.palette.ui.disabled,
+                    borderColor: theme.palette.ui.border,
                     opacity: 0.6,
                     cursor: "not-allowed",
                     filter: "grayscale(0.6)",
@@ -367,7 +370,7 @@ export default function DatasetVisualization({
               gap: 2,
             }}
           >
-            <CircularProgress sx={{ color: "#00BEBB" }} />
+            <CircularProgress color="primary" />
             <Typography>Processing your dataset...</Typography>
             <Typography
               variant="body2"

DashAI/front/src/components/HomeButton.jsx

@@ -42,10 +42,15 @@ function HomeButton({ title, description, to, Icon }) {
                 alignItems="stretch"
                 sx={{ height: "100%" }}
               >
-                <Typography variant="h5" sx={{ mb: 1 }}>
+                <Typography variant="h5" color="text.primary" sx={{ mb: 1 }}>
                   {title}
                 </Typography>
-                <Typography sx={{ mb: 2 }} variant="caption" component="p">
+                <Typography
+                  sx={{ mb: 2 }}
+                  variant="caption"
+                  component="p"
+                  color="text.secondary"
+                >
                   {description}
                 </Typography>
               </Grid>
@@ -65,10 +70,20 @@ function HomeButton({ title, description, to, Icon }) {
             </Grid>
 
             <Grid size={{ xs: 12 }} sx={{ mb: 2 }}>
-              <Typography variant="h5" align="center" sx={{ mb: 1 }}>
+              <Typography
+                variant="h5"
+                align="center"
+                color="text.primary"
+                sx={{ mb: 1 }}
+              >
                 {title}
               </Typography>
-              <Typography variant="caption" component="p" align="center">
+              <Typography
+                variant="caption"
+                component="p"
+                align="center"
+                color="text.secondary"
+              >
                 {description}
               </Typography>
             </Grid>

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);
@@ -38,7 +42,11 @@ function ResponsiveAppBar() {
   };
 
   return (
-    <AppBar position="sticky" enableColorOnDark sx={{ background: "#212121" }}>
+    <AppBar
+      position="sticky"
+      enableColorOnDark
+      sx={{ background: theme.palette.background.box }}
+    >
       <Container maxWidth="xl">
         <Toolbar>
           <Avatar
@@ -85,7 +93,9 @@ function ResponsiveAppBar() {
                   to={page.to}
                   selected={page.to === location.pathname}
                 >
-                  <Typography textAlign="center">{page.name}</Typography>
+                  <Typography color="text.primary" textAlign="center">
+                    {page.name}
+                  </Typography>
                 </MenuItem>
               ))}
             </Menu>
@@ -108,16 +118,43 @@ function ResponsiveAppBar() {
                 to={page.to}
                 key={page.name}
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, display: "block" }}
+                sx={{
+                  my: 2,
+                  display: "block",
+                  color:
+                    page.to === location.pathname
+                      ? theme.palette.primary.main
+                      : theme.palette.text.primary,
+                }}
                 size="large"
                 disabled={page.disabled}
                 disableRipple
-                color={page.to === location.pathname ? "primary" : "inherit"}
               >
                 {page.name}
               </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/experiments/DivideDatasetColumns.jsx

@@ -8,6 +8,7 @@ import {
   Box,
   Chip,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { getColorByColumnType } from "../../utils";
 
 function DivideDatasetColumns({
@@ -23,6 +24,8 @@ function DivideDatasetColumns({
   outputHelperText = "",
   disabled = false,
 }) {
+  const theme = useTheme();
+
   const handleInputAutocompleteChange = (event, newValue) => {
     onInputColumnNamesChange(newValue);
   };
@@ -43,7 +46,7 @@ function DivideDatasetColumns({
     const { key, ...otherProps } = props;
     const columnType = columnTypes[option];
     const typeColor = columnType?.type
-      ? getColorByColumnType(columnType.type)
+      ? getColorByColumnType(columnType.type, theme)
       : null;
 
     return (
@@ -76,7 +79,7 @@ function DivideDatasetColumns({
       const { key, ...tagProps } = getTagProps({ index });
       const columnType = columnTypes[option];
       const typeColor = columnType?.type
-        ? getColorByColumnType(columnType.type)
+        ? getColorByColumnType(columnType.type, theme)
         : null;
 
       const label =

DashAI/front/src/components/experiments/metrics/MetricCard.jsx

@@ -1,30 +1,33 @@
 import { Card, CardActionArea, Box, Typography, Chip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import CheckIcon from "@mui/icons-material/Check";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import TrendingDownIcon from "@mui/icons-material/TrendingDown";
 
-const splitColors = {
-  train: {
-    border: "#4caf50",
-    bg: "rgba(76,175,80,0.08)",
-  },
-  test: {
-    border: "#2196f3",
-    bg: "rgba(33,150,243,0.08)",
-  },
-  validation: {
-    border: "#ff9800",
-    bg: "rgba(255,152,0,0.08)",
-  },
-};
-
 export default function MetricCard({
   metric,
   isSelected,
   onToggle,
   splitType,
   disabled = false,
 }) {
+  const theme = useTheme();
+
+  const splitColors = {
+    train: {
+      border: theme.palette.chart.train,
+      bg: `${theme.palette.chart.train}14`, // ~8% opacity
+    },
+    test: {
+      border: theme.palette.chart.test,
+      bg: `${theme.palette.chart.test}14`,
+    },
+    validation: {
+      border: theme.palette.chart.validation,
+      bg: `${theme.palette.chart.validation}14`,
+    },
+  };
+
   const colors = splitColors[splitType];
 
   return (

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";
@@ -26,6 +27,7 @@ const viewModes = {
  * @param {Function} props.setUpdateFlag - Function to set the update flag
  */
 function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) {
+  const theme = useTheme();
   const { enqueueSnackbar } = useSnackbar();
   const { explorationData, setExplorationData } = useExplorationsContext();
 
@@ -75,9 +77,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 +98,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/ChatTimeStamp.jsx

@@ -1,13 +1,16 @@
 import { Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export function ChatTimestamp({ timestamp, isUser }) {
+  const theme = useTheme();
+
   if (!timestamp) return null;
 
   return (
     <Typography
       variant="caption"
-      color="text.secondary"
       sx={{
+        color: theme.palette.text.secondary,
         display: "block",
         mt: 0.5,
         textAlign: isUser ? "right" : "left",

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,
           },
         }}
       >