[luci-theme-fluent] Fluent Theme for OpenWrt

Community Builds, Projects & Packages
1

I have developed a brand-new theme that aligns with Microsoft's Fluent Design 2.

Throughout the development process, I vibe-code with multiple LLM, including Gemini 3.5 Flash and DeepSeek V4. I found that a after making a flawless foundational architecture, AI is fully capable of executing even the most intricate and sophisticated frontend requirements.

showcasebanner

Theme Features

  • FluentUI 2 Design Language: Inspired by Microsoft's Fluent Design. During development, I referenced FluentUI’s React/Web Component libraries and Figma design files to align the styles. Over 24+ components—including buttons, cards, input fields, and tables—have been meticulously redrawn using pure CSS for a unified visual experience.
  • FluentUI Icon Adaptation: Directly integrates Microsoft’s Fluent UI System Icons (MIT License) and features custom-redrawn icons unique to OpenWrt (such as network/Ethernet ports).
  • Native Dark Mode: One-click switching built on CSS variables, ensuring a smooth transition with zero flicker.
  • Responsive Layout: Fully adaptive across mobile, tablet, and PC, with the sidebar auto-collapsing on mobile devices.
  • ucode Template Architecture: Supports OpenWrt 23.05+ / ImmortalWrt, fully covering headers, footers, and login pages for superior compatibility.
  • Modern Tech Stack: Configuration tools are written entirely in TypeScript to seamlessly adapt to luci.js. Styles are written in SCSS and bundled/minified using Rsbuild, resulting in an incredibly small output file size.
  • Rich Customization Options: Tweak everything to your heart's content—theme color, dark mode accent color, page/card/sidebar backgrounds, font weight/size, margins, border radiuses, card shadows, sidebar width, animation speeds, and more. If there's a setting you want that's missing, feel free to leave a comment and I'll add it in future updates (create a issue is also welcome).
  • View Transitions API: Smooth page transitions, tab animations, and loading progress bars.
  • Plugin Page Overrides: Provides custom-tailored exclusive styles for several commonly used plugins.
  • Ultra-Lightweight: The current bundled size is only around 100KB (though it expands to about 600KB after decompression, so it delivers the best experience when pre-installed in SquashFS-formatted firmware).
  • Permissive Licensing: Released under the Apache 2.0 License, allowing for commercial use.

GitHub Repo: https://github.com/LazuliKao/luci-theme-fluent
Latest Build: https://github.com/LazuliKao/luci-theme-fluent/releases/tag/nightly

7 Likes
2

Hello, this looks pretty interesting. I will install it to test it on my non-production router.
Thank you awesome work

1 Like