Skip to content

Commit ec56855

Browse files
FelipedinoFelipedino
committed
feat: Implement theme toggle functionality and enhance UI consistency
- Added a theme toggle button in the ResponsiveAppBar component to switch between light and dark modes. - Created a ColorModeContext to manage theme state and persist user preference in localStorage. - Updated various components to use theme-based colors for backgrounds, text, and borders, ensuring a consistent look across light and dark modes. - Refactored theme.js to support dynamic theme generation based on the selected mode. - Adjusted styles in multiple components (Footer, GenerativeChat, InfoSessionModal, etc.) to utilize theme palette for colors, improving maintainability and readability. - Replaced hardcoded colors with theme palette values for better adaptability to theme changes.
1 parent 0cadc4a commit ec56855

26 files changed

Lines changed: 479 additions & 350 deletions

‎DashAI/front/src/components/ResponsiveAppBar.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import MenuItem from "@mui/material/MenuItem";
1313
import { Link as RouterLink, useLocation } from "react-router-dom";
1414
import { useTheme } from "@mui/material/styles";
1515
import HomeIcon from "@mui/icons-material/HomeOutlined";
16+
import Brightness4Icon from "@mui/icons-material/Brightness4";
17+
import Brightness7Icon from "@mui/icons-material/Brightness7";
18+
import { ColorModeContext } from "../contexts/ThemeContext";
1619

1720
const pages = [
1821
{ name: "Datasets", to: "/app/data", disabled: false },
@@ -25,6 +28,7 @@ const pages = [
2528

2629
function ResponsiveAppBar() {
2730
const theme = useTheme();
31+
const colorMode = React.useContext(ColorModeContext);
2832
const location = useLocation();
2933

3034
const [anchorElNav, setAnchorElNav] = React.useState(null);
@@ -130,6 +134,27 @@ function ResponsiveAppBar() {
130134
</Button>
131135
))}
132136
</Box>
137+
138+
{/* Theme Toggle Button */}
139+
<Box sx={{ flexGrow: 0 }}>
140+
<IconButton
141+
onClick={colorMode.toggleColorMode}
142+
aria-label="toggle theme"
143+
sx={{
144+
ml: 1,
145+
color:
146+
theme.palette.mode === "dark"
147+
? "inherit"
148+
: theme.palette.text.primary,
149+
}}
150+
>
151+
{theme.palette.mode === "dark" ? (
152+
<Brightness7Icon />
153+
) : (
154+
<Brightness4Icon />
155+
)}
156+
</IconButton>
157+
</Box>
133158
</Toolbar>
134159
</Container>
135160
</AppBar>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function Footer() {
1010
flexDirection={"column"}
1111
py={2}
1212
>
13-
<Divider sx={{ width: "100%", bgcolor: "#252836" }} />
13+
<Divider sx={{ width: "100%", bgcolor: "divider" }} />
1414
<Avatar
1515
alt="DashAI Logo"
1616
src="/images/logo.png"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -220,9 +220,9 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
220220
<IconButton onClick={() => setSessionInfoVisible(true)}>
221221
<InfoIcon
222222
sx={{
223-
color: "#a0a0a0",
223+
color: "text.secondary",
224224
"&:hover": {
225-
color: "#ffffff",
225+
color: "text.primary",
226226
},
227227
}}
228228
/>
@@ -251,11 +251,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
251251
width: "8px",
252252
},
253253
"&::-webkit-scrollbar-thumb": {
254-
backgroundColor: "#555",
254+
backgroundColor: "ui.border",
255255
borderRadius: "4px",
256256
},
257257
"&::-webkit-scrollbar-thumb:hover": {
258-
backgroundColor: "#888",
258+
backgroundColor: "action.hover",
259259
},
260260
}}
261261
>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import TableBody from "@mui/material/TableBody";
1010
import TableCell from "@mui/material/TableCell";
1111
import TableContainer from "@mui/material/TableContainer";
1212
import TableRow from "@mui/material/TableRow";
13+
import { useTheme } from "@mui/material/styles";
1314

1415
export default function InfoSessionModal({ sessionData, open, onClose }) {
16+
const theme = useTheme();
1517
// Format date for display
1618
const formatDate = (dateString) => {
1719
try {
@@ -91,7 +93,9 @@ export default function InfoSessionModal({ sessionData, open, onClose }) {
9193
/>
9294
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
9395
Model:{" "}
94-
<span style={{ color: "#fff" }}>{sessionData.model_name}</span>
96+
<span style={{ color: theme.palette.text.primary }}>
97+
{sessionData.model_name}
98+
</span>
9599
</Typography>
96100
</Box>
97101

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export function MessageContent({ messages, isUser, isWaiting }) {
99
return (
1010
<Paper
1111
sx={{
12-
backgroundColor: "#374151",
13-
color: "#fff",
12+
backgroundColor: "ui.box",
13+
color: "text.primary",
1414
padding: theme.spacing(1.5, 2),
1515
maxWidth: "100%",
1616
borderRadius: 2,

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Box, Typography, Divider } from "@mui/material";
2+
import { useTheme } from "@mui/material/styles";
23
import FolderIcon from "@mui/icons-material/Folder";
34
import SearchBar from "./SearchBar";
45
import { useEffect, useState } from "react";
@@ -18,6 +19,7 @@ export default function SessionBar({
1819
handleSessionDelete,
1920
stepIndex,
2021
}) {
22+
const theme = useTheme();
2123
const [searchQuery, setSearchQuery] = useState("");
2224
const [filteredSessions, setFilteredSessions] = useState(sessions);
2325
const [selectedInfoSession, setSelectedInfoSession] = useState(null);
@@ -95,7 +97,7 @@ export default function SessionBar({
9597
>
9698
<BarHeader />
9799
</Box>
98-
<Divider sx={{ width: "100%", bgcolor: "#252836" }} />
100+
<Divider sx={{ width: "100%", bgcolor: "divider" }} />
99101

100102
<Box
101103
p={2}
@@ -123,7 +125,7 @@ export default function SessionBar({
123125
/>
124126
</Box>
125127

126-
<Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
128+
<Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
127129

128130
{/* Sessions */}
129131
<Box
@@ -139,13 +141,17 @@ export default function SessionBar({
139141
>
140142
{/* Header */}
141143
<Box display="flex" alignItems="center" py={0.5} px={1} mb={0.5}>
142-
<FolderIcon sx={{ color: "#16FFFF", mr: 1, fontSize: 20 }} />
143-
<Typography>Sessions</Typography>
144+
<FolderIcon
145+
sx={{ color: theme.palette.primary.main, mr: 1, fontSize: 20 }}
146+
/>
147+
<Typography variant="body2" color="text.primary">
148+
Sessions
149+
</Typography>
144150
<Box
145151
sx={{
146152
ml: 1,
147-
bgcolor: "#374151",
148-
color: "white",
153+
bgcolor: "ui.border",
154+
color: "text.primary",
149155
borderRadius: "50%",
150156
width: 20,
151157
height: 20,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function SessionBarHeader() {
1515
variant="h6"
1616
sx={{
1717
fontWeight: "bold",
18-
"& span": { color: "#16FFFF" },
18+
"& span": { color: "accent.main" },
1919
}}
2020
>
2121
<span>D</span>a<span>sh</span>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,10 @@ export default function SessionBox({
2121
alignItems: "center",
2222
borderRadius: 1,
2323
cursor: isSelected ? "default" : "pointer",
24-
bgcolor: isSelected ? "rgba(255, 255, 255, 0.05)" : "transparent",
24+
bgcolor: isSelected ? "action.selected" : "transparent",
2525
p: 0.5,
2626
"&:hover": {
27-
backgroundColor: isSelected
28-
? "rgba(255, 255, 255, 0.05)"
29-
: "rgba(255, 255, 255, 0.05)",
27+
backgroundColor: isSelected ? "action.selected" : "action.hover",
3028
},
3129
}}
3230
onClick={isSelected ? undefined : onClick}
@@ -42,13 +40,15 @@ export default function SessionBox({
4240
<Box>
4341
<Typography
4442
variant="body2"
43+
color="text.primary"
4544
noWrap
4645
sx={{ maxWidth: 180, fontSize: 14 }}
4746
>
4847
{name ? name : "Untitled Session"}
4948
</Typography>
5049
<Typography
5150
variant="caption"
51+
color="text.secondary"
5252
noWrap
5353
sx={{ maxWidth: 150, fontSize: 10, pl: 1 }}
5454
>

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Box, Typography, Collapse } from "@mui/material";
2+
import { useTheme } from "@mui/material/styles";
23
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
34
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
45
import SessionBox from "./SessionBox";
@@ -12,6 +13,7 @@ export default function SessionList({
1213
handleSessionInfo,
1314
toggleSection,
1415
}) {
16+
const theme = useTheme();
1517
if (groupedSessions === undefined) {
1618
return (
1719
<Box
@@ -23,7 +25,7 @@ export default function SessionList({
2325
>
2426
<Typography
2527
sx={{
26-
color: "#ffffff",
28+
color: "text.secondary",
2729
opacity: 0.5,
2830
textAlign: "center",
2931
padding: 2,
@@ -47,11 +49,11 @@ export default function SessionList({
4749
width: "6px",
4850
},
4951
"&::-webkit-scrollbar-thumb": {
50-
backgroundColor: "#374151",
52+
backgroundColor: "ui.border",
5153
borderRadius: "3px",
5254
},
5355
"&::-webkit-scrollbar-thumb:hover": {
54-
backgroundColor: "#4B5563",
56+
backgroundColor: "action.hover",
5557
},
5658
overflowY: "auto",
5759
flex: 1,
@@ -70,21 +72,22 @@ export default function SessionList({
7072
px: 1,
7173
borderRadius: 1,
7274
"&:hover": {
73-
bgcolor: "rgba(255, 255, 255, 0.05)",
75+
bgcolor: "action.hover",
7476
},
7577
}}
7678
onClick={() => toggleSection(taskName)}
7779
>
7880
{openSections[taskName] ? (
7981
<KeyboardArrowDownIcon
80-
sx={{ fontSize: 20, color: "#16FFFF" }}
82+
sx={{ fontSize: 20, color: theme.palette.primary.main }}
8183
/>
8284
) : (
8385
<KeyboardArrowRightIcon
84-
sx={{ fontSize: 20, color: "#16FFFF" }}
86+
sx={{ fontSize: 20, color: theme.palette.primary.main }}
8587
/>
8688
)}
8789
<Typography
90+
color="text.primary"
8891
sx={{
8992
ml: 1,
9093
fontSize: "0.9rem",
@@ -102,8 +105,8 @@ export default function SessionList({
102105
<Box
103106
sx={{
104107
ml: 1,
105-
bgcolor: "#374151",
106-
color: "white",
108+
bgcolor: "ui.border",
109+
color: "text.primary",
107110
borderRadius: "50%",
108111
width: 20,
109112
height: 20,
@@ -145,7 +148,7 @@ export default function SessionList({
145148
) : (
146149
<Typography
147150
sx={{
148-
color: "#ffffff",
151+
color: "text.secondary",
149152
opacity: 0.5,
150153
textAlign: "center",
151154
padding: 2,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default function DatasetsNotebooksBar({
9393
<ChevronLeft />
9494
</IconButton>
9595
</Box>
96-
<Divider sx={{ width: "100%", bgcolor: "#252836" }} />
96+
<Divider sx={{ width: "100%", bgcolor: "divider" }} />
9797

9898
{/* Create new item button */}
9999
<Box p={2} sx={{ height: "64px", display: "flex", alignItems: "center" }}>
@@ -118,7 +118,7 @@ export default function DatasetsNotebooksBar({
118118
/>
119119
</Box>
120120

121-
<Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
121+
<Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
122122

123123
{/* Scrollable content */}
124124
<Box display="flex" flexDirection="column" flex={1} minHeight={0}>
@@ -134,7 +134,7 @@ export default function DatasetsNotebooksBar({
134134
getItemDescription={getDatasetDescription}
135135
/>
136136

137-
<Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
137+
<Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
138138

139139
<CollapsibleList
140140
items={filteredNotebooks}

0 commit comments

Comments
 (0)