DSingh0304 opened a new pull request, #3323:
URL: https://github.com/apache/apisix-dashboard/pull/3323
**Why submit this pull request?**
- [ ] Bugfix
- [x] 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 250ms 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**
<img width="1920" height="1048" alt="image"
src="https://github.com/user-attachments/assets/9172abd6-8513-4522-b808-126facca2a1f";
/>
**Checklist:**
- [x] Did you explain what problem does this PR solve? Or what new features
have been added?
- [x] Have you added corresponding test cases?
- [ ] Have you modified the corresponding document?
- [x] Is this PR backward compatible? If it is not backward compatible,
please discuss on the mailing list first
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
