update 2023-03-03 11:24:19

luci-theme-design/Makefile

@@ -7,7 +7,7 @@ include $(TOPDIR)/rules.mk
 
 LUCI_TITLE:=Design Theme
 LUCI_DEPENDS:=
-PKG_VERSION:=5.3.2
+PKG_VERSION:=5.3.3
 PKG_RELEASE:=20230303
 
 include $(TOPDIR)/feeds/luci/luci.mk

luci-theme-design/README.md

@@ -39,6 +39,11 @@ luci-theme-design is an OpenWrt LuCI theme for immersive WebApp experience and o
 - Adapt to dark mode, adapt to automatic switching of the system;
 - Adapt to openwrt 21/22, lede
 
+### Plugins
+link: https://github.com/gngpp/luci-app-design-config
+- Support changing theme dark/light mode
+- Support for replacing commonly used proxy icons
+
 ### Experience WebApp method
 
 - Open the settings management in the mobile browser (iOS/iPadOS, Android Google) and add it to the home screen.

luci-theme-design/README_zh.md

@@ -39,6 +39,11 @@ luci-theme-design 是一个针对移动端和PC端的沉浸式WebApp体验和优
 - 适配深色模式，适配系统自动切换；
 - 适配openwrt 21/22、lede
 
+### 插件
+link：https://github.com/gngpp/luci-app-design-config
+- 支持更改主题深色/浅色模式
+- 支持更换常用的代理图标
+
 ### 体验WebApp方法
 
 - 在移动端(iOS/iPadOS、Android谷歌)浏览器打开设置管理，添加到主屏幕即可。

luci-theme-design/htdocs/luci-static/design/css/style.css

@@ -3279,6 +3279,10 @@ form[action="/cgi-bin/luci/admin/network/wireless_join"] input[class="cbi-button
     align-items: center;
     text-align: center;
 }
+.node-system-commands #cbi-luci.cbi-map fieldset.cbi-section {
+    align-items: unset;
+    text-align: unset;
+}
 
 .node-network-network .ifacebox strong{
     color: var(--ifaceboxFontColor);

luci-theme-design/luasrc/view/themes/design/header.htm

@@ -192,8 +192,9 @@
 
 <script>
 	<% if mode == 'normal' then %>
-	document.body.setAttribute('data-theme', window.matchMedia('(prefers-color-scheme: dark)').matches? 'dark' : 'light');
+	let color_scheme = window.matchMedia('(prefers-color-scheme: dark)');
-	window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+	document.body.setAttribute('data-theme', color_scheme.matches? 'dark' : 'light');
+	window.matchMedia && color_scheme.addEventListener('change', (event) => {
 		document.body.setAttribute('data-theme', event.matches? 'dark' : 'light');
 	})
 	<% else  %>