feat light mode and fix some components styles - #416
Closed
Felipedino wants to merge 3 commits into
Closed
Conversation
- 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.
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request introduces light mode support to the DashAI frontend by refactoring the theme system from a static object to a dynamic function that accepts a mode parameter. It also adds a theme toggle button and converts hardcoded color values to theme palette references throughout various components.
Changes:
- Refactored theme.js to export a
getTheme(mode)function instead of a static theme object, with mode-dependent color values for dark and light modes - Created a new ThemeContext with localStorage persistence for user theme preferences
- Added a theme toggle button to the ResponsiveAppBar allowing users to switch between light and dark modes
- Updated multiple components to use theme palette references instead of hardcoded colors
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 25 comments.
Show a summary per file
| File | Description |
|---|---|
| DashAI/front/src/styles/theme.js | Converted from static theme object to getTheme(mode) function with mode-dependent palette values |
| DashAI/front/src/index.jsx | Replaced direct ThemeProvider with CustomThemeProvider from ThemeContext |
| DashAI/front/src/contexts/ThemeContext.jsx | New context provider for theme management with localStorage persistence |
| DashAI/front/src/components/ResponsiveAppBar.jsx | Added theme toggle button with light/dark mode icons |
| DashAI/front/src/components/threeSectionLayout/OptionBox.jsx | Updated hover state to use theme.palette.action.hover |
| DashAI/front/src/components/notebooks/tool/ToolListItem.jsx | Converted hardcoded colors to theme palette references |
| DashAI/front/src/components/notebooks/tool/ToolList.jsx | Updated bgcolor values to use theme palette |
| DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx | Converted hardcoded colors to theme palette references |
| DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx | Updated bgcolor to use theme palette |
| DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx | Updated tooltip colors to use theme palette |
| DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx | Updated bgcolor values to use theme palette |
| DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx | Updated bgcolor and tooltip colors to use theme palette |
| DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx | Updated bgcolor and plotly colors to use theme palette |
| DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx | Updated bgcolor and tooltip colors to use theme palette |
| DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx | Updated bgcolor to use theme palette |
| DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx | Updated tabs styling to use theme palette |
| DashAI/front/src/components/notebooks/RightBar.jsx | Updated toggle button styling to use theme palette |
| DashAI/front/src/components/notebooks/LeftBar.jsx | Updated divider bgcolor to use theme palette |
| DashAI/front/src/components/generative/SessionList.jsx | Converted hardcoded colors to theme palette references |
| DashAI/front/src/components/generative/SessionBox.jsx | Updated selection and hover states to use theme palette |
| DashAI/front/src/components/generative/SessionBarHeader.jsx | Updated accent color to use theme palette |
| DashAI/front/src/components/generative/SessionBar.jsx | Updated divider and text colors to use theme palette |
| DashAI/front/src/components/generative/MessageContent.jsx | Updated bgcolor and text color to use theme palette |
| DashAI/front/src/components/generative/InfoSessionModal.jsx | Updated inline text color to use theme palette |
| DashAI/front/src/components/generative/GenerativeChat.jsx | Updated icon and scrollbar colors to use theme palette |
| DashAI/front/src/components/generative/Footer.jsx | Updated divider bgcolor to use theme palette |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request refactors the DashAI frontend to use theme-based colors from the MUI palette instead of hardcoded color values. This change improves consistency, maintainability, and adaptability to different themes (such as dark and light modes). Additionally, it introduces a theme toggle button in the main app bar, allowing users to switch between light and dark modes.
Theme support and toggle:
ResponsiveAppBarthat lets users switch between light and dark modes using theColorModeContextand corresponding icons (Brightness4Icon,Brightness7Icon). [1] [2] [3]Refactoring to use theme palette colors:
text.primary,divider,ui.border,action.hover,accent.main) across components such asFooter,GenerativeChat,SessionBar,SessionBox,SessionList,SessionBarHeader,InfoSessionModal, andMessageContent. This ensures consistent styling and better support for theme changes. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16]Notebook and dataset UI improvements:
LeftBar,RightBar,DatasetVisualization) to use theme palette colors for dividers, toggle buttons, tabs, and disabled states, further unifying the visual style. [1] [2] [3] [4] [5] [6] [7]Consistent use of
useTheme:useThemeimports and hooks to multiple components to enable access to the theme palette for dynamic styling. [1] [2] [3] [4] [5]These changes collectively enhance the UI's adaptability to theme changes and improve the maintainability of the codebase by centralizing color management.