luci-theme-material: make colors configurable

The var() css function can be used to insert the value of a custom property.
A custom.css file is added to change the colors. This file will get included
in the cascade.css file.

The following colors could be costomized in the file costom.css.

--header-bg
--header-color
--menu-bg-color
--menu-color
--submenu-bg-hover
--submenu-bg-hover-active

Signed-off-by: Florian Eckert <fe@dev.tdt.de>

2 files changed, 22 insertions, 8 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 4875c33f8d..cda6021b98 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -19,6 +19,11 @@
  */
 
 /*
+ *  Include custom css
+ */
+@import url("custom.css");
+
+/*
  *  Font generate by Icomoon<icomoon.io>
  */
 @font-face {
@@ -255,7 +260,7 @@ footer > a {
     width: calc(0% + 15rem);
     height: 100%;
     height: calc(100% - 4rem);
-    background-color: white;
+    background-color: var(--menu-bg-color, #FFFFFF);
     overflow-x: auto;
     position: fixed;
 }
@@ -281,8 +286,8 @@ footer > a {
 }
 
 header {
-    background: #0099CC;
-    color: white;
+    background: var(--header-bg, #0099CC);
+    color: var(--header-color, #FFFFFF);
 }
 
 header > .fill > .container {
@@ -292,7 +297,7 @@ header > .fill > .container {
 
 header > .fill > .container > .brand {
     font-size: 1.4rem;
-    color: white;
+    color: var(--header-color, #FFFFFF);
     text-decoration: none;
     cursor: default;
     vertical-align: text-bottom;
@@ -374,7 +379,7 @@ header > .fill > .container > .brand {
 }
 
 .main > .main-left > .nav > li a {
-    color: #404040;
+    color: var(--menu-color, #404040);
     display: block;
 }
 
@@ -406,7 +411,7 @@ header > .fill > .container > .brand {
 
 .main > .main-left > .nav > li:hover,
 .main > .main-left > .nav > .slide > .menu:hover {
-    background: #D4D4D4;
+    background: var(--submenu-bg-hover, #D4D4D4)
 }
 
 .main > .main-left > .nav > .slide:hover {
@@ -418,7 +423,7 @@ header > .fill > .container > .brand {
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active {
-    background-color: #0099CC;
+    background-color: var(--submenu-bg-hover-active, #0099CC);
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li > a {
@@ -431,7 +436,7 @@ header > .fill > .container > .brand {
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
-    background: #D4D4D4;
+    background: var(--submenu-bg-hover, #D4D4D4)
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
new file mode 100644
index 0000000000..b32eb2af1b
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
@@ -0,0 +1,9 @@
+
+:root {
+	--header-bg: #0099CC;
+	--header-color: #FFFFFF;
+	--menu-bg-color: #FFFFFF;
+	--menu-color: #404040;
+	--submenu-bg-hover: #D4D4D4;
+	--submenu-bg-hover-active: #0099CC;
+}