mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-10-26 23:22:51 +08:00
247 lines
8.1 KiB
Markdown
247 lines
8.1 KiB
Markdown
# Luci-Theme-LuxeOs
|
||
|
||
<p align="center">
|
||
<img src="https://img.shields.io/github/downloads/de-quenx/luci-theme-luxe/total?style=for-the-badge&logo=openwrt&labelColor=blue">
|
||
</p>
|
||
|
||
[英文](README_EN.md) | [印尼文](README.md)
|
||
|
||
**Luci-Theme-LuxeOs** 是一款适用于 OpenWrt 的现代 HTML5 主题，支持 **自动亮/暗模式 (Auto Light & Dark Mode)**。它提供多种风格选项：优雅、奢华、柔和，并集合了一系列实用功能，带来流畅直观的用户体验。
|
||
|
||
---
|
||
|
||
## **主要功能 / 主题风格**
|
||
|
||
- **新拟态 (Neumorphism)**：柔和且优雅的按钮与卡片。
|
||
- **玻璃拟态 (Glassmorphism)**：带有轻度模糊效果的透明面板，外观平滑。
|
||
- **3D 玻璃 (Glass 3D)**：为卡片与面板增加景深，呈现现代感。
|
||
- **暗黑玻璃 (Glass Dark)**：玻璃拟态的暗色版本，观感舒适护眼。
|
||
- **新粗野主义 (Neo-Brutalism)**：粗体排版与纯色填充，突出关键元素。
|
||
- **极简 UI (Simple UI)**：极简布局，专注于内容，易于导航。
|
||
- **霓虹 UI (Neon UI)**：带有柔和发光效果的交互元素。
|
||
- **水晶玻璃 (Crystal Glass)**：透明的水晶状面板，带有柔和的光线反射。
|
||
- **RGB 强调色 (RGB Accent)**：细腻的 RGB 强调色，突出交互元素。
|
||
|
||
---
|
||
|
||
## 主题预览
|
||
|
||
以下是 **Luci-Theme-LuxeOs** 的一些截图。点击展开查看：
|
||
|
||
<details>
|
||
<summary>显示登录页面预览</summary>
|
||
|
||
<table cellspacing="0" cellpadding="1">
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/light.png" alt="Light">
|
||
<div align="center"><small>Light</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/glass-crystall.png" alt="Glass Crystall">
|
||
<div align="center"><small>Glass Crystall</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/glass-matte.png" alt="Glass Matte">
|
||
<div align="center"><small>Glass Matte</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/gradient.png" alt="Gradient">
|
||
<div align="center"><small>Gradient</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/dark.png" alt="Dark">
|
||
<div align="center"><small>Dark</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/neon.png" alt="Neon">
|
||
<div align="center"><small>Neon</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/ocean.png" alt="Ocean">
|
||
<div align="center"><small>Ocean</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/curve.png" alt="Curve">
|
||
<div align="center"><small>Curve</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/matrix.png" alt="Matrix">
|
||
<div align="center"><small>Matrix</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/neo-brutalism.png" alt="Neo-Brutalism">
|
||
<div align="center"><small>Neo-Brutalism</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/liquid-metal.png" alt="Liquid Metal">
|
||
<div align="center"><small>Liquid Metal</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-login/liquid-flow.png" alt="Liquid Flow">
|
||
<div align="center"><small>Liquid Flow</small></div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>显示仪表盘预览</summary>
|
||
|
||
<table cellspacing="0" cellpadding="1">
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/luxe-light.png" alt="Luxe Light">
|
||
<div align="center"><small>Luxe Light</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/luxe-dark.png" alt="Luxe Dark">
|
||
<div align="center"><small>Luxe Dark</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/glass-liquid.png" alt="Glass Liquid">
|
||
<div align="center"><small>Glass Liquid</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/glass-luxe.png" alt="Glass Luxe">
|
||
<div align="center"><small>Glass Luxe</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/glass-crystall.png" alt="Glass Crystall">
|
||
<div align="center"><small>Glass Crystall</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/glass-dark.png" alt="Glass Dark">
|
||
<div align="center"><small>Glass Dark</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/neobrutalism-light.png" alt="Neobrutalism Light">
|
||
<div align="center"><small>Neobrutalism Light</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/neobrutalism-dark.png" alt="Neobrutalism Dark">
|
||
<div align="center"><small>Neobrutalism Dark</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/neomorphism-light.png" alt="Neomorphism Light">
|
||
<div align="center"><small>Neomorphism Light</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/neomorphism-dark.png" alt="Neomorphism Dark">
|
||
<div align="center"><small>Neomorphism Dark</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/neon.png" alt="Neon">
|
||
<div align="center"><small>Neon</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/rgb.png" alt="RGB">
|
||
<div align="center"><small>RGB</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/glaze-light.png" alt="Glaze Light">
|
||
<div align="center"><small>Glaze Light</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/glaze-dark.png" alt="Glaze Dark">
|
||
<div align="center"><small>Glaze Dark</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/onyx-light.png" alt="Onyx Light">
|
||
<div align="center"><small>Onyx Light</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/onyx-dark.png" alt="Onyx Dark">
|
||
<div align="center"><small>Onyx Dark</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/liquid-neo.png" alt="Liquid Neo">
|
||
<div align="center"><small>Liquid Neo</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/sample-interface.png" alt="Sample Interface">
|
||
<div align="center"><small>Sample Interface</small></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/sample-wireless.png" alt="Sample Wireless">
|
||
<div align="center"><small>Sample Wireless</small></div>
|
||
</td>
|
||
<td width="50%" align="center">
|
||
<img src="./previews/luxe-home/sample-config.png" alt="Sample Config">
|
||
<div align="center"><small>Sample Config</small></div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
## 安装
|
||
|
||
1. **下载软件包**：
|
||
|
||
- OpenWrt (IPK):
|
||
```bash
|
||
opkg install luci-theme-luxe*.ipk
|
||
```
|
||
- SNAPSHOT (APK):
|
||
```bash
|
||
apk add luci-theme-luxe*.apk
|
||
```
|
||
|
||
2. **启用主题**：
|
||
|
||
- 前往 LuCI → System → System → Language and Style。
|
||
- 从 Design Theme 下拉菜单中选择 **Luxe**。
|
||
|
||
3. 完成！主题现已激活。
|
||
|
||
---
|
||
|
||
## 贡献
|
||
|
||
1. 通过 [GitHub Issues](https://github.com/de-quenx/luci-theme-luxe/issues) 报告漏洞 (bug)。
|
||
2. 提交 Pull Request：复刻 (fork) 本仓库，进行修改，然后提交 PR。
|
||
3. 分享您的建议以帮助改进主题。
|
||
|
||
---
|
||
|
||
## 许可证
|
||
|
||
**Luci-Theme-LuxeOs** 采用 **Apache License 2.0** 许可证。
|
||
|
||
---
|
||
|
||
## 鸣谢
|
||
|
||
- [Theme Material](https://github.com/LuttyYang/luci-theme-material) |