feat light mode and utilize theme palette for consistent styling#420
Merged
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 PR implements comprehensive light/dark mode theming across the application by converting the static theme to a function that accepts a mode parameter, creating a theme context provider with localStorage persistence, and systematically replacing hardcoded color values with theme palette references throughout the codebase. A theme toggle button is added to the app bar to enable users to switch between light and dark modes.
Changes:
- Converted theme from static object to mode-dependent function with comprehensive palette definitions for both light and dark modes
- Created ThemeContext with ColorModeContext for theme toggling and localStorage persistence
- Replaced hardcoded colors with theme palette values across 50+ components and updated utility functions to accept theme parameters
Reviewed changes
Copilot reviewed 75 out of 75 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| DashAI/front/src/styles/theme.js | Converted theme to function accepting mode parameter with extensive palette definitions |
| DashAI/front/src/contexts/ThemeContext.jsx | Created new context provider for theme management with localStorage persistence |
| DashAI/front/src/index.jsx | Integrated CustomThemeProvider to replace direct ThemeProvider usage |
| DashAI/front/src/utils/index.js | Updated color utility functions to accept theme parameter |
| DashAI/front/src/components/ResponsiveAppBar.jsx | Added theme toggle button and updated styling to use theme palette |
| DashAI/front/src/pages/results/constants/initialColumns.jsx | Added theme hook usage in renderCell for status colors |
| DashAI/front/src/components/notebooks/tool/ToolListItem.jsx | Replaced hardcoded colors with theme palette references using string notation |
| Various component files | Systematically replaced hardcoded colors with theme.palette references |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 77 out of 77 changed files in this pull request and generated 7 comments.
Comments suppressed due to low confidence (1)
DashAI/front/src/components/threeSectionLayout/SearchBar.jsx:21
- Hardcoded text color 'white' should use theme palette to support light mode. Replace with
theme.palette.text.primaryto match the theme-aware approach used elsewhere in the file.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
cristian-tamblay
approved these changes
Jan 20, 2026
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 focuses on improving theme consistency and customization across the UI by replacing hardcoded color values with values from the Material UI theme. The changes ensure that components adapt to light and dark modes and any custom palette settings. Additionally, a theme toggle button is introduced in the app bar to allow users to switch between light and dark modes.
Theme Consistency and Palette Usage:
Replaced hardcoded color values with
theme.palettevalues in multiple components, includingGenerativeChat,MessageContent,InfoSessionModal,SessionBar,Footer,ResultsViewer, andMetricCard. This ensures all UI elements use the current theme's palette for backgrounds, text, borders, and dividers. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]Updated all relevant components to use the
useThemehook and pass thethemeobject to utility functions (likegetColorByColumnType) where needed. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]App Bar Enhancements:
ResponsiveAppBarusingColorModeContext, allowing users to switch between light and dark modes. The app bar and navigation buttons now use theme palette values for background and text colors. [1] [2] [3] [4] [5]Typography and Text Color Updates:
color="text.primary"andcolor="text.secondary"inTypographycomponents throughout the UI for headings, captions, and labels, ensuring text color adapts to the current theme. [1] [2] [3] [4] [5]These updates collectively improve the application's adaptability to different themes and enhance maintainability by centralizing color management.