op-packages/luci-theme-material3/Readme.md
github-actions[bot] a0ef0d598a 💐 Sync 2026-05-31 20:31:25
2026-05-31 20:31:25 +08:00

95 lines
2.8 KiB
Markdown

# luci-theme-material3
A Material Design 3 theme for OpenWrt Luci.
This is a personal project based on the LuCI Bootstrap theme, imitating the Material Design 3 style.
**Nice to initiate an issue or PR, and star! ⭐**
## ✨ Preview
<table>
<tr>
<th>🖥️ Desktop</th>
<th>📱 Mobile</th>
</tr>
<tr>
<td><img src="imgs/desktop.png" style="max-height: 600px;" /></td>
<td><img src="imgs/mobile.png" style="max-height: 600px;" /></td>
</tr>
</table>
### 🎨 All color schemes
<table>
<tr>
<th width="33.33%" align="center">Baseline Purple</th>
<th width="33.33%" align="center">Trust Blue</th>
<th width="33.33%" align="center">Growth Green</th>
</tr>
<tr>
<td width="33.33%" align="center">
<img src="imgs/baseline.jpg" width="100%" />
</td>
<td width="33.33%" align="center">
<img src="imgs/blue.jpg" width="100%" />
</td>
<td width="33.33%" align="center">
<img src="imgs/green.jpg" width="100%" />
</td>
</tr>
<tr>
<th width="33.33%" align="center">Calm Teal</th>
<th width="33.33%" align="center">Warm Orange</th>
<th width="33.33%" align="center">Vivid Orange</th>
</tr>
<tr>
<td width="33.33%" align="center">
<img src="imgs/teal.jpg" width="100%" />
</td>
<td width="33.33%" align="center">
<img src="imgs/orange.jpg" width="100%" />
</td>
<td width="33.33%" align="center">
<img src="imgs/vivid-orange.jpg" width="100%" />
</td>
</tr>
<tr>
<th width="33.33%" align="center">Sakura Red</th>
<th width="33.33%" align="center">Expressive Rose</th>
<th width="33.33%" align="center">Monochrome Gray</th>
</tr>
<tr>
<td width="33.33%" align="center">
<img src="imgs/sakura.jpg" width="100%" />
</td>
<td width="33.33%" align="center">
<img src="imgs/rose.jpg" width="100%" />
</td>
<td width="33.33%" align="center">
<img src="imgs/gray.jpg" width="100%" />
</td>
</tr>
</table>
## 📦 Release
Download prebuilt packages from [GitHub Releases](https://github.com/KawaiiHachimi/luci-theme-material3/releases).
Install the matching package on your router:
- `luci-theme-material3-*.apk` -> OpenWrt LuCI 25.12+
```sh
apk add --allow-untrusted luci-theme-material3-*.apk
```
- `luci-theme-material3_*.ipk` -> OpenWrt LuCI 23.05~24.10
```sh
opkg install luci-theme-material3_*.ipk
```
## 🙏 Credits
- [OpenWrt Luci](https://github.com/openwrt/luci)
- [Cursor](https://www.cursor.com/)
- [OpenAI Codex](https://openai.com/codex/)
- [MDUI](https://www.mdui.org/zh-cn/)
- [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons)
- [Material Design 3](https://m3.material.io/)
- [Reddit - LuCI theme bootstrap: Some modifications using userstyle](https://www.reddit.com/r/openwrt/comments/qmtmpf/lucithemebootstrap_some_modifications_using/)