[THEME] Modern Theme: luci-theme-glass

Community Builds, Projects & Packages
1

Hi everyone,

I've been wanting to design a new theme that uses a modern look, and since I'm an Apple fan I wanted the router UI to feel more minimalistic and sleek. With that in mind, I created this Glass theme — you can find the source code at https://github.com/rchen14b/luci-theme-glass.

This theme restructures the sidebar menu and page navigation, and also adds native dark mode with a manual toggle to switch between light/dark/auto. Hope you enjoy it!

Here are some screenshots of the theme(Live Demo: https://rchen14b.github.io/luci-theme-glass/):

Login_page_light
Login_page_light1920×910 30.3 KB

Overview_page_light
Overview_page_light1920×940 95.8 KB

Overview_page_dark
Overview_page_dark1920×934 95.7 KB

Traffic_graph_light
Traffic_graph_light1920×945 92.4 KB

28 Likes
Quantum Fiber W1700k support
2

Looking good! You can add apk and opkg packages to the releases (they are missing)

3 Likes
3

@tesf23 screenshots looked beautiful, so I built an APK from your main branch (not 1.0.0 release) and got error:

luci.js?v=26.065.64115~7893658-1773010150:60  GET https://<router>/luci-static/resources/menu-glass.js?v=26.065.64115~7893658-1773010150 404 (Not Found)
(anonymous) @ luci.js?v=26.065.64115~7893658-1773010150:60
(anonymous) @ luci.js?v=26.065.64115~7893658-1773010150:40
Promise.then
request @ luci.js?v=26.065.64115~7893658-1773010150:40
get @ luci.js?v=26.065.64115~7893658-1773010150:65
require @ luci.js?v=26.065.64115~7893658-1773010150:178
(anonymous) @ luci/:449
luci.js?v=26.065.64115~7893658-1773010150:148 Uncaught (in promise) NetworkError: HTTP error 404 while loading class file "/luci-static/resources/menu-glass.js?v=26.065.64115~7893658-1773010150"
  at compileClass (luci.js?v=26.065.64115~7893658-1773010150:162:16)
    at Object.raise (luci.js?v=26.065.64115~7893658-1773010150:148:3)
    at compileClass (luci.js?v=26.065.64115~7893658-1773010150:162:16)
raise @ luci.js?v=26.065.64115~7893658-1773010150:148
compileClass @ luci.js?v=26.065.64115~7893658-1773010150:162
Promise.then
require @ luci.js?v=26.065.64115~7893658-1773010150:178
(anonymous) @ luci/:449

So no menu.

If I navigate into a specific luci app, looks like the tabbed options are displayed incorrectly (tabs at the very top).

4

Found a bug in my gitignore rule missing the resource file, please try the latest commit again. And I uploaded both ipk and apk build to the release. I tested the ipk version with my bpi-r4 as well.

Screenshot 2026-03-08 at 19.22.02
Screenshot 2026-03-08 at 19.22.021920×663 89.1 KB

3 Likes
5

@tesf23 thanks for your prompt response, 1.0.1-r1 did bring the menu back.

Not sure if I love the tabs for config options at the top tho. With some settings like System, etc, it might look alright, however with most of my apps (adblock-fast, https-dns-proxy, pbr), which show service status and service control buttons above the configs, they look out of place:

image
image1333×708 89 KB

image
image1386×780 80.1 KB

Otherwise the theme looks nice and if you are planning on supporting it thru luci/API evolutions you should consider creating a PR.

6

Great! Thanks for your suggestions! The sub nav menu is part of my thought of consolidate current multiple top bars. I guess for the app did not follow where to put the right title, this will be a problem, but for example my fan control app it does looks fine. I will see how to address this in next release.

Screenshot 2026-03-08 at 19.58.04
Screenshot 2026-03-08 at 19.58.041920×777 65.3 KB

7

I like this theme, but install fail.
"ERROR: luci-theme-glass-1.0.1-r1.apk: v2 package format error"

My device is Gemtek W1700K
OpenWrt lumos-npu-26.03rc1 r33301

8

Please try v1.0.2, should be fixed now!

9

  • In general, the font size is slightly too small and there's too much white space. I would try to keep it fairly consistent with bootstrap to maximize compatibility

  • inconsistency with npu status: dark windows in a light theme

    npu stat
    npu stat1257×811 57.1 KB

  • Network/Wireless/Edit pop-up window is too narrow and doesn't scroll if it doesn't fit on-screen

  • Loss of button color diversity. For example, the common Save & Apply, Save, Reset at the bottom of many pages has only two different types of buttons, whereas there are three in bootstrap

This is incredibly nice work. Hope you submit this soon. UI is definitely getting long in the tooth and due for a revamp.

I miss Aero Glass: https://istartedsomething.com/20060919/vista-choose-own-adventure-ui/

2 Likes
10

Thanks, It works. It so cool!

1 Like
11

It looks good. Two things to fix:

  • The log tab has an “area” too short in height.
  • The attended sysupgrade is not usable. The window with the versions, packages, etc. it’s too small

I will keep an eye on your theme, it looks good :slight_smile:

2 Likes
12

The wireless settings edit window is too small and misaligned

QQ20260309-215516
QQ20260309-2155161892×908 133 KB

13

Please update to v1.0.3, should be fixed now.

14

v1.0.3 released and addressed all reported bug. @OpenWRT-fanboy The NPU one is caused by npu code I have to fix it from that app.

  • Fix modal width for Wireless Edit / Attended Sysupgrade (900px for .cbi-modal)
  • Fix modal not showing (modal-overlay-active on body, not #modal_overlay)
  • Add overflow scroll and max-height to modals
  • Differentiate Save (green) from Save & Apply (blue) and Reset (red)
  • Remove content max-width cap, let content fill available space
  • Switch font sizes from px to rem, bump --font-size-sm 12px to 13px
  • Fix log area height with viewport-relative sizing
  • Fix APK package format (ADB v3 via apk mkpkg, arch: noarch)
  • Fix sub-nav slider height inset
  • Redesigned the interface box style.

Screenshot 2026-03-09 at 09.33.06
Screenshot 2026-03-09 at 09.33.061210×514 79 KB

15

It's still like this after the update

QQ20260309-221155
QQ20260309-2211551898×899 155 KB

16

Try clear your web browser cache or test in in-cognitive mode

Screenshot 2026-03-09 at 09.17.55
Screenshot 2026-03-09 at 09.17.551896×1226 195 KB

17

Thank you, it's already done

1 Like
18

This is a very good theme Indeed!

but.. Is the box supposed to be going in circle the configuration changes?

The boxes are not visible for most of the things in Dark Mode same with Light Mode it blends in with the backgrond

image
image539×104 2.05 KB

19

After updating to latest version:

  • Attended sysupgrade, the button to remove any package is missing:

image
image593×1216 31.8 KB

  • In the log tab, the area adjust to the window. With other themes, there is no area, shows the full log, and the button for “move to the bottom” or “move to the head” moves to the end and the begin of the log. Now it moves to the bottom or the begin of the area, not the log. It has no sense because the area is full at the screen.

Thanks!

20

During installation I get this error:

root@RT-AX59U:~# apk add --allow-untrusted luci-theme-glass-1.0.3-r1.apk
ERROR: unable to select packages:
luci-theme-glass-1.0.3-r1.apk (no such package):
required by: world[luci-theme-glass-1.0.3-r1.apk]