feat: add native dark mode toggle to header layout#3310
feat: add native dark mode toggle to header layout#3310Baluduvamsi2006 wants to merge 1 commit intoapache:masterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a user-facing dark mode toggle in the dashboard header and aligns Ant Design (ProTable) theming with Mantine so light/dark mode styling stays consistent across the app.
Changes:
- Introduces a new header
DarkModeToggleBtnthat toggles Mantine color scheme. - Updates Ant Design
ConfigProvidertheme to follow Mantine’s current color scheme (including dark algorithm + token overrides). - Customizes Mantine theme
colors.darkscale to support a true-black dark palette.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/main.tsx | Defines a custom Mantine dark palette used for consistent dark-mode styling. |
| src/config/antdConfigProvider.tsx | Bridges Mantine color scheme into Ant Design theme algorithm + background/border tokens. |
| src/components/Header/index.tsx | Adds the dark mode toggle button into the header action group. |
| src/components/Header/DarkModeToggleBtn.tsx | New icon-only action to toggle light/dark mode via Mantine hooks. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 17 out of 17 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Baluduvamsi2006
force-pushed
the
feat/add-dark-mode-toggle
branch
7 times, most recently
from
65a0cb8 to
279c9b5
Compare
Baluduvamsi2006
force-pushed
the
feat/add-dark-mode-toggle
branch
from
279c9b5 to
58d5933
Compare
- Introduces DarkModeToggleBtn component with accessible UI controls - Toggles Mantine color scheme between light and dark modes - Updates Header to display toggle button in action group - Enables seamless light/dark theme switching across entire application
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| */ | ||
|
|
||
| import { ActionIcon, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'; | ||
| import { IconDarkMode, IconLightMode } from '@tabler/icons-react'; |
| variant="light" | ||
| size="sm" | ||
| aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'} | ||
| title={isDark ? 'Switch to light mode' : 'Switch to dark mode'} |
| <Group h="100%" gap="sm"> | ||
| <DarkModeToggleBtn /> | ||
| <SettingModalBtn /> | ||
| <LanguageMenu /> |
Baoyuantop
left a comment
Baoyuantop
left a comment
There was a problem hiding this comment.
- @tabler/icons-react is not in package.json. This project uses unplugin-icons — see SettingModalBtn.tsx in the same directory. Should be import IconDarkMode from '~icons/material-symbols/dark-mode'.
- Hardcoded strings in aria-label / title will fail i18n lint (--max-warnings=0). Must use t() and add keys to locale files. Also title is redundant with aria-label — consider dropping it.
- PR description mentions Ant Design ProTable styling work that isn't in the diff. Please update to match actual changes.
- ProTable is used on almost every page. Without antd ConfigProvider dark theme sync, dark mode will look broken. Please include it or document as follow-up.
Why submit this pull request?
What changes will this PR take into?
This PR introduces a native Dark Mode toggle switch in the dashboard header, enabling seamless switching between light and dark themes across the entire application.
Detailed Implementation
✨ Feature: Dark Mode Toggle Integration
DarkModeToggleBtn.tsxcomponent.ActionIconplaced in the dashboard header.useMantineColorSchemehook to toggle globalAppShellcolor scheme state securely and consistently.IconLightModeandIconDarkModebased on active theme.🎨 Theme Consistency Improvements
ProTablestyling variables align correctly with Mantine’s dark theme configuration.This implementation provides a clean, accessible, and fully integrated theme-switching experience across the dashboard.