From: Marko Mäkelä <redacted>
Date: Sun, 29 Jun 2025 19:55:41 +0000 (+0300)
Subject: luci-theme-bootstrap: global darkmode graphs
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=75a612ae635bcc848f3f0183db543a94a851a2a3;p=openwrt-luci.git

luci-theme-bootstrap: global darkmode graphs

Instead of enumerating each SVG graph that the dark mode is applicable to,
apply --background-color-high to each SVG element that is a child of
<div style="…"> and --text-color-highest to each LINE inside such SVG.

This allows dark mode to work in all SVG widgets by default, in any
current or future LuCI component.

Signed-off-by: Marko Mäkelä <redacted>
---

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 9e47e521e2..ecc5f25032 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -2613,18 +2613,10 @@ div.cbi-value var.cbi-tooltip-container,
 	max-width: none;
 }
 
-[data-darkmode="true"] [data-page="admin-status-channel_analysis"] #view> div > div > div > div > div[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-load"] #view > div > div > div[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-bandwidth"] #view > div > div > div > div[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-wireless"] #view > div > div > div > div[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-connections"] #view > div > div > div[style] {
+#view div[style] > svg {
 	background-color: var(--background-color-high)!important;
 }
 
-[data-darkmode="true"] [data-page="admin-status-channel_analysis"] #view> div > div > div > div > div > svg > line[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-load"] #view > div > div > div > svg > line[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-bandwidth"] #view > div > div > div > div > svg > line[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-wireless"] #view > div > div > div > div > svg > line[style],
-[data-darkmode="true"] [data-page="admin-status-realtime-connections"] #view > div > div > div > svg > line[style] {
-	stroke: #fff!important;
+#view div[style] > svg line[style] {
+	stroke: var(--text-color-highest)!important;
 }