Material 3 Theme for LuCI

Community Builds, Projects & Packages
1

Since I don't really like Bootstrap, so I started making a Material 3 theme for LuCI that aims to replace the default Bootstrap-based UI.

The goal of this project is to keep LuCI fully compatible while modernizing its appearance.

Almost every page keeps the same layout and functionality as the default Bootstrap theme. I intentionally avoid changing page structure or workflows so existing LuCI applications continue to work without modifications.

The only page that has been significantly redesigned is System Log (inspired by ChesterGoodiny's luci-theme-proton2025 ). Instead of a plain <textarea>, it has been rebuilt into a searchable and filterable log viewer with:

  • Log level counters
  • Filtering by facility and severity
  • Copy/download actions
  • Better readability for long logs

Functionally it provides the same information as the original page, but is much easier to use.

GitHub repository:

Download: https://github.com/michioxd/luci-theme-material3/releases/latest

Some screenshots:

image
image1920×3695 432 KB

image
image2880×2670 439 KB

image
image2880×2590 333 KB

image
image1920×2059 571 KB

6 Likes
2

Looks very nice and interesting, great job :+1: , how to compile it from source?, after running "bun build:css" and putting the whole folder in luci/themes folder it still doesn't shows up in make menuconfig

3

For me, I put it in the package/ directory inside the OpenWrt SDK.

You can use rsync to copy the files like this:

mkdir -p package/luci-theme-material3

rsync -a --delete ~/luci-theme-material3/htdocs package/luci-theme-material3/
rsync -a --delete ~/luci-theme-material3/ucode  package/luci-theme-material3/
rsync -a --delete ~/luci-theme-material3/root   package/luci-theme-material3/
cp ~/luci-theme-material3/Makefile package/luci-theme-material3/

Then build it:

make package/luci-theme-material3/compile -j"$(nproc)" V=s
1 Like
4

Thank you, I think you need additional variables for making it to appear in make menuconfig :

LUCI_PKGARCH:=all
PKG_NAME:=luci-theme-material3
1 Like
5

Oh alright thanks!

6

Getting error when switching into Material3Dark from luci :

Unable to compile 'themes/material3-dark/header' as Lua template: 
		

			
/usr/lib/lua/luci/ucodebridge.lua:14: /usr/lib/lua/luci/template.lua:108: Failed to load template 'themes/material3-dark/header'.
Error while parsing template '/usr/lib/lua/luci/view/themes/material3-dark/header.htm':
No such file or directory

In h(), file [C]
  called from function t (/usr/lib/lua/luci/ucodebridge.lua:14)
  called from function [anonymous function] (/usr/lib/lua/luci/ucodebridge.lua:20)

And the same for Material3Light

Unable to compile 'themes/material3-light/header' as Lua template: 
		

			
/usr/lib/lua/luci/ucodebridge.lua:14: /usr/lib/lua/luci/template.lua:108: Failed to load template 'themes/material3-light/header'.
Error while parsing template '/usr/lib/lua/luci/view/themes/material3-light/header.htm':
No such file or directory

In h(), file [C]
  called from function t (/usr/lib/lua/luci/ucodebridge.lua:14)
  called from function [anonymous function] (/usr/lib/lua/luci/ucodebridge.lua:20)

In [anonymous function](), file /usr/share/ucode/luci/runtime.uc, line 106, byte 62:
  called from function [anonymous function] (/usr/share/ucode/luci/runtime.uc:158:65)
  called from function [anonymous function] (/usr/share/ucode/luci/dispatcher.uc:924:3)
  called from anonymous function (/www/cgi-bin/luci:39:13)

 `                    vm.get('_G', 'luci', 'ucodebridge', 'compile').call(path);`
  Near here ------------------------------------------------------------------^
7

You installed my prebuilt a/ipk or manually compiled it?

8

Manually compiled it.