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>

1 files changed, 9 insertions, 0 deletions

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;
+}