openwrt
feat: add dark mode support to luci-theme-openwrt
- [x] This PR is not from my main or master branch :poop:, but a separate branch :white_check_mark:
- [x] Each commit has a valid :black_nib:
Signed-off-by: <[email protected]>row (viagit commit --signoff) - [ ] Each commit and PR title has a valid :memo:
<package name>: titlefirst line subject for packages - [ ] Incremented :up: any
PKG_VERSIONin the Makefile - [x] Tested on: (OpenWrt 24.10.4, MT798x (Xiaomi Router), Chrome Version 142.0.7444.59 (Official Build) (64-bit)) :white_check_mark:
- [ ] ( Preferred ) Mention: @ the original code author for feedback
- [ ] ( Preferred ) Screenshot or mp4 of changes:
- [ ] ( Optional ) Closes: e.g. openwrt/luci#issue-number
- [ ] ( Optional ) Depends on: e.g. openwrt/packages#pr-number in sister repo
- [ ] Description: (describe the changes proposed in this PR)
Description
Add dark mode support to luci-theme-openwrt theme.
Features
- 🌙 Dark Mode Toggle: Click the 🌙/☀️ button in the top menu bar to switch between light and dark modes
- 🔄 System Preference Detection: Automatically follows the system's dark mode preference on first visit
- 💾 Persistent Preference: User's choice is saved to localStorage and persists across sessions
- 📊 Full Coverage: Dark mode applies to all standard LuCI pages including:
- Main navigation and content areas
- Forms, inputs, buttons, and dropdowns
- Tables and data displays
- Real-time graphs (System Load, Bandwidth, Wireless, etc.)
- Channel Analysis page
- Page loading transitions
Implementation
- Uses CSS custom properties (variables) for theming
- Grayscale color palette for dark mode (no blue tint)
- Early initialization script in
<head>to prevent flash of light mode - Minimal changes to existing code structure
Files Changed
-
cascade.css- Added CSS variables and dark mode style overrides -
header.ut- Added dark mode toggle button and early initialization script -
menu-openwrt.js- Added dark mode toggle logic and localStorage handling -
README.md- Added documentation for dark mode feature
Screenshots
Dark Mode:
]
Light Mode:
[]
Toggle Button:
Testing
- Tested on: ImmortalWrt 24.10.4, x86_64, Chrome
- Verified dark mode toggle functionality
- Verified system preference detection
- Verified persistence across page reloads
- Verified all major LuCI pages render correctly in dark mode
@miaohf: Good job, thanks! More and more people would like Dark mode (dark theme) in projects/softwares.
More and more people would like Dark mode
That is actually pretty funny for a guy who has started computing in the era of "only dark mode available", as computer monitors were only CRTs with black background and green or yellow dots on the 80x24 monitor screen.
@miaohf
1 - remove the merge commit - just rebase on master 2 - fix your SoB line 3 - squash your commits
The network interface header names need adjusting because the white text on bright backgrounds are illegible. Same in firewall.