op-packages/luci-theme-luxe/README_EN.md

# 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>

[English](README_EN.md) | [Indonesia](README.md)

**Luci-Theme-LuxeOs** is a modern HTML5 theme for OpenWrt that supports **Auto Light & Dark Mode**. It offers various style options: elegant, luxurious, soft, with a collection of useful features for a smooth and intuitive user experience.

---

## **MAIN FEATURES / THEME STYLES**

- **Neumorphism**: Soft and elegant buttons and cards.  
- **Glassmorphism**: Transparent panels with light blur, smooth appearance.  
- **Glass 3D**: Adds depth to cards and panels for a modern look.  
- **Glass Dark**: Dark mode version of Glassmorphism, easy on the eyes.  
- **Neo-Brutalism**: Bold typography and solid colors to highlight key elements.  
- **Simple UI**: Minimalist layout, focused on content, easy to navigate.  
- **Neon UI**: Interactive elements with subtle glowing highlights.  
- **Crystal Glass**: Transparent crystal-like panels with soft light reflections.  
- **RGB Accent**: Subtle RGB color accents to highlight interactive elements.

---

## Theme Preview

Here are some screenshots of **Luci-Theme-LuxeOs**. Click to expand:

<details>
<summary>Show Login Preview</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>Show Dashboard Preview</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>

---

## Installation

1. **Download Package**:

   - OpenWrt (IPK):
     ```bash
     opkg install luci-theme-luxe*.ipk
     ```
   - SNAPSHOT (APK):
     ```bash
     apk add luci-theme-luxe*.apk
     ```

2. **Activate Theme**:

   - Go to LuCI → System → System → Language and Style.  
   - Select **Luxe** from the Design Theme dropdown.

3. Done! The theme is now active.

---

## Contributing

1. Report bugs via [GitHub Issues](https://github.com/de-quenx/luci-theme-luxe/issues).  
2. Submit Pull Requests: fork the repository, make changes, and send a PR.  
3. Share suggestions to improve the theme.

---

## License

**Luci-Theme-LuxeOs** is licensed under **Apache License 2.0**.

---

## Credit

- [Theme Material](https://github.com/LuttyYang/luci-theme-material)