Material theme - dark

I have to say, the material theme is my favourite for openwrt, but I'm a "dark mode" person

So, I've created some .css for a dark mode for material theme - it will follow your browser/system preferred theme - i.e. light or dark

to install, simply overwrite the .css files in /www/luci-static/material with the ones in the repository

Let me know of any bugs/improvements



Thank you for sharing this. Could you please also share a few screenshots in this thread and also on the Gitea page?

I will definitely give this a try later today.

1 Like

yes, I am working on the screenshots - just thought I'd push it out today to test the waters

1 Like

Added screenshots

1 Like

I can't get this to work, I copied cascade.css and custom.css to '/www/luci-static/material' (and I'm sure they copied fine as viewing them through ssh show they are the modified versions).

Tried restarting the router, changing to another theme and back to material, and accessing luci from another browser, and I still see everything in the original light theme

That's odd

Wonder if it's something to do with either the version of openwrt or the router itself

I've only tested on raspberry pi, and currently on a 2 month old snapshot version

Ahh, ok

Just updated to the latest snapshot

Material theme seems to be ... ignored? Whenever I select material theme, I get the fugly bootstrap crap

edit: seems my upgrade failed somehow - now my router is in a funky state :stuck_out_tongue:

Looking at the sources, it seems that it IS being loaded by the browser

This might be worth a look:

Interesting - but in reality, my router is in a funky state at the moment. brought the internet down twice yesterday trying to fix it, much to my teenager's delight!! :smiley:

You need to clear your cache of your browser. I dealt with this when making my own, every time I made a change I had to clear my history and cookies to see it

This is specially true with Chrome/Chromium based browsers - they like to "hang on" to cached data

Yea, for Chrome I just do Ctrl + Shift + N then connect to LuCI. Saves the cache headache altogether.

Yeah, cleared cache, tried incognito on chrome (did that before anyway), and even tried on a clean Firefox profile and no changes, still a light theme.

Awesome; thank you!
Even switches back and forth from light to dark following Firefox setting.

very nice dark theme!

the text in "Port Status" is black on black:

to show it properly, I replaced:

.ifacebox, .zonebadge {
    color: #000000


.ifacebox, .zonebadge {
    color: var(--theme-text-on-background)

jaromanda can you fix this bit?