feat: Implement dynamic theme switching and dark mode support by DSingh0304 · Pull Request #3323 · apache/apisix-dashboard

DSingh0304 · 2026-03-10T07:38:37Z

Why submit this pull request?

Bugfix
New feature provided
Improve performance
Backport patches

What changes will this PR take into?

Add dark mode theme support to the APISIX Dashboard, allowing users to switch between light, dark, and system preferred color schemes via a segmented control (☀️ Light / 🌙 Dark / 🖥️ Auto) in the header.

Changes

FOUC prevention: Added an inline <script> in index.html that reads the persisted color scheme from localStorage and sets data-mantine-color-scheme on <html> before CSS parses prevents a flash of the wrong theme on page load
Mantine: Set defaultColorScheme="auto" on MantineProvider so the dashboard respects the user's OS preference by default
Ant Design: Used Mantine's useComputedColorScheme('light') to resolve the actual scheme (since Ant Design does not handle 'auto' internally), then conditionally applied theme.darkAlgorithm on ConfigProvider keeps ProTable in sync with the Mantine shell
Monaco Editor: Added imperative monaco.editor.setTheme() via useEffect + onMount ref, since Monaco does not re-theme on React prop changes after initial mount
Theme toggle: Added a ThemeToggle segmented control component in the header with three options: Light / Dark / Auto
Smooth transitions: Added a temporary CSS transition class on body during theme switches (removed after 200ms to avoid impacting Lighthouse performance)
E2E tests: Added tests for auto mode resolution (using Playwright's emulateMedia), theme persistence across page reloads, and cycling through all theme modes

Technical notes

No separate Jotai atom was needed Mantine manages color scheme persistence internally via localStorage (mantine-color-scheme-value)
forceColorScheme was intentionally avoided it overrides system preference and would make auto mode a silent no op
Custom CSS in global.css already uses Mantine CSS variables (--mantine-color-*), which auto-adapt no manual overrides were needed
This change is purely additive no structural or architectural changes

Related issues

resolve #3322

Screenshot

Checklist:

Did you explain what problem does this PR solve? Or what new features have been added?
Have you added corresponding test cases?
Have you modified the corresponding document?
Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first

DSingh0304 · 2026-03-11T18:20:51Z

Hi @Baoyuantop, I have implemented the dark mode support for the Dashboard as discussed in the community. The PR is ready for your review whenever you have a moment. I would appreciate any feedback you have.
Thanks.

Copilot

Pull request overview

Adds end-to-end dark mode support across the dashboard UI by enabling Mantine color-scheme persistence, providing a header toggle, and aligning third-party UI theming (AntD + Monaco) with the active scheme.

Changes:

Enable automatic (OS-driven) color scheme by default in MantineProvider and bootstrap scheme early in index.html.
Add a header theme segmented control with a short transition window for smoother switching.
Propagate scheme changes to Ant Design (theme algorithms) and Monaco editor (vs-light/vs-dark), plus add Playwright coverage.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/styles/global.css	Adds a global transition rule during theme switching.
src/main.tsx	Sets Mantine default color scheme to `auto`.
src/config/antdConfigProvider.tsx	Switches AntD theme algorithm based on computed color scheme.
src/components/Header/ThemeToggle.tsx	New theme toggle control with transition handling.
src/components/Header/index.tsx	Places the new theme toggle into the header actions.
src/components/form/Editor.tsx	Makes Monaco theme follow the computed color scheme (incl. imperative update).
index.html	Adds an early script to set `data-mantine-color-scheme` before React mounts.
e2e/tests/dark-mode.spec.ts	Adds Playwright tests for theme switching and persistence.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/Header/ThemeToggle.tsx

src/styles/global.css

index.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/Header/ThemeToggle.tsx

index.html

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

index.html

src/components/Header/ThemeToggle.tsx

e2e/tests/dark-mode.spec.ts

src/components/Header/ThemeToggle.tsx

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

src/components/Header/ThemeToggle.tsx

src/locales/tr/common.json

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

DSingh0304 · 2026-03-18T15:52:30Z

Hi @Baoyuantop I have addressed all the comments of copilot and made the changes. Can you please review this feature whenever you get time. Thank You!!

DSingh0304 added 8 commits March 10, 2026 12:54

feat: prevent FOUC with inline color scheme script

96ed267

feat: enable auto color scheme on MantineProvider

0bf1a6e

feat: add dark mode support to Ant Design ConfigProvider

ff1dac2

feat: add dynamic theme switching for Monaco Editor

10c7a98

feat: add theme toggle component to header

ccd7bf3

style: add smooth theme transition on body

8d2229a

test: add E2E tests for dark mode

ddc25b0

style: remove temporary transition for theme switching

80a026d

DSingh0304 changed the title ~~Implement dynamic theme switching and dark mode support~~ feat: Implement dynamic theme switching and dark mode support Mar 10, 2026

Baoyuantop requested a review from Copilot March 12, 2026 01:22

Copilot started reviewing on behalf of Baoyuantop March 12, 2026 01:23 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

src/components/Header/ThemeToggle.tsx Outdated Show resolved Hide resolved

src/components/Header/ThemeToggle.tsx Outdated Show resolved Hide resolved

src/styles/global.css Outdated Show resolved Hide resolved

index.html Outdated Show resolved Hide resolved

DSingh0304 and others added 7 commits March 12, 2026 10:01

Update src/components/Header/ThemeToggle.tsx

a03f845

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/components/Header/ThemeToggle.tsx

1450389

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/styles/global.css

4d0bfa8

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update index.html

95d9e2f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Fixed the css selectors

0335b75

Update error message selector in show disabled error test

9795b53

Merge branch 'master' into proposal/dark-mode

31139ea

Baoyuantop requested a review from Copilot March 13, 2026 03:42

Copilot started reviewing on behalf of Baoyuantop March 13, 2026 03:43 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

src/components/Header/ThemeToggle.tsx Outdated Show resolved Hide resolved

index.html Outdated Show resolved Hide resolved

DSingh0304 and others added 2 commits March 13, 2026 09:34

Potential fix for pull request finding

27a35dd

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Refactor color scheme initialization script for improved readability

0c5402c

DSingh0304 requested a review from Copilot March 18, 2026 15:14

DSingh0304 force-pushed the proposal/dark-mode branch from a7ccf74 to 0c5402c Compare March 18, 2026 15:19

Copilot AI reviewed Mar 18, 2026

View reviewed changes

DSingh0304 and others added 2 commits March 18, 2026 20:51

Potential fix for pull request finding

9a90c90

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix(theme): guard color scheme toggle and localize labels

ebc0c13

Copilot started reviewing on behalf of DSingh0304 March 18, 2026 15:31 View session

DSingh0304 requested a review from Copilot March 18, 2026 15:37

Copilot started reviewing on behalf of DSingh0304 March 18, 2026 15:42 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

src/components/Header/ThemeToggle.tsx Outdated Show resolved Hide resolved

src/locales/tr/common.json Outdated Show resolved Hide resolved

src/locales/tr/common.json Outdated Show resolved Hide resolved

DSingh0304 and others added 3 commits March 18, 2026 21:18

Potential fix for pull request finding

5cbcb43

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

test(dark-mode): use accessible role-based theme selectors

bf6f775

fix(i18n): correct Turkish translations for theme settings

9c2207f

DSingh0304 added 2 commits March 18, 2026 23:32

Merge branch 'apache:master' into proposal/dark-mode

36dcc61

Merge branch 'apache:master' into proposal/dark-mode

490f3d5

Conversation

DSingh0304 commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Technical notes

Uh oh!

DSingh0304 commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DSingh0304 commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DSingh0304 commented Mar 10, 2026 •

edited

Loading

DSingh0304 commented Mar 18, 2026 •

edited

Loading