luci-mod-dashboard: custom.css: Add color variables

Add color variable references from luci-theme-boostrap to facilitate
light and dark color scheme switching by default. Fall back to original
colors when the variables are not declared by theme.

Signed-off-by: Griffen Edge <griffen@griffenedge.com>
(formatted commit message)
Closes #7386
Signed-off-by: Paul Donald <newtwen+github@gmail.com>

diff --git a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css
index 66dd81f79ed5c444ec9df78411fa2376d171e69d..3f7e3537d796595c0afb73dac581ec0863f384b4 100644 (file)
--- a/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css
+++ b/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css
@@ -3,11 +3,11 @@
 **/
 
 .Dashboard {
-    color: #212529!important;
+    color: var(--text-color-high, #212529) !important;
 }
 
 .Dashboard h3 {
-    color:#000;
+    color: var(--text-color-high, #000);
 }
 
 .Dashboard hr {
@@ -16,7 +16,7 @@
     overflow: visible;
     margin: 0;
     box-sizing: content-box;
-    border-top: 1px solid rgba(0,0,0,.1);
+    border-top: 1px solid var(--border-color-medium, rgba(0, 0, 0, 0.1));
 }
 
 .Dashboard .box-s1 {
@@ -29,7 +29,7 @@
 
 .Dashboard .dashboard-bg {
     border-radius: 16px;
-    background-color: #e0e0e0;
+    background-color: var(--background-color-medium, #e0e0e0);
 }
 
 .Dashboard .title {
@@ -189,7 +189,7 @@
 }
 
 .Dashboard .wifi-info .devices-info .table-titles {
-    border-bottom:1px solid rgba(0,0,0,.1);
+    border-bottom: 1px solid var(--border-color-medium, rgba(0, 0, 0, 0.1));
 }
 
 /**
@@ -227,7 +227,7 @@
 
     .Dashboard .section-content .internet-status-info .settings-info > div:first-child {
         margin-bottom: 10px;
-        border-bottom: 1px solid rgba(0,0,0,.1);
+        border-bottom: 1px solid var(--border-color-medium, rgba(0, 0, 0, 0.1));
     }
 
     .Dashboard .section-content .router-status-lan .devices-info .table-titles {