luci-theme-bootstrap: light/dark mode releated CSS fixes

[project/luci.git] / themes / luci-theme-bootstrap / htdocs / luci-static / bootstrap / cascade.css

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 4063a39face2a71df4443d07fb81adcbcc86106c..9bbdf88c1bdea42d69adcf221a623c2bd586ddcb 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -66,22 +66,20 @@
        --border-color-low-delta-l: calc(17 / 255 * 100%);
        --border-color-low-l: calc(var(--background-color-high-l) + var(--border-color-delta-l-sign) * var(--border-color-low-delta-l));
        --border-color-low: hsl(var(--border-color-low-h), var(--border-color-low-s), var(--border-color-low-l));
-
-       color-scheme: light dark;
+       color-scheme: light;
 }
 
-@media (prefers-color-scheme: dark) {
-       :root {
-               --background-color-delta-l-sign: 1;
-               --background-color-high-h: 0;
-               --background-color-high-s: 0%;
-               --background-color-high-l: calc(34 / 255 * 100%);
-               --text-color-delta-l-sign: -1;
-               --text-color-highest-h: 0;
-               --text-color-highest-s: 0%;
-               --text-color-highest-l: 100%;
-               --border-color-delta-l-sign: 1;
-       }
+:root[data-darkmode="true"] {
+       --background-color-delta-l-sign: 1;
+       --background-color-high-h: 0;
+       --background-color-high-s: 0%;
+       --background-color-high-l: calc(34 / 255 * 100%);
+       --text-color-delta-l-sign: -1;
+       --text-color-highest-h: 0;
+       --text-color-highest-s: 0%;
+       --text-color-highest-l: 100%;
+       --border-color-delta-l-sign: 1;
+       color-scheme: dark;
 }
 
 /* Reset.less
@@ -1653,10 +1651,9 @@ select + .cbi-button {
        overflow: hidden;
        text-overflow: ellipsis;
 }
-@media (prefers-color-scheme: dark) {
-       .cbi-progressbar::after {
-               mix-blend-mode: difference;
-       }
+
+:root[data-darkmode="true"] .cbi-progressbar::after {
+       mix-blend-mode: difference;
 }
 
 .zonebadge .cbi-tooltip {