Add CSS vars for main theme colors

CHANGELOG.md

@@ -1,5 +1,9 @@
 ### 2.15.4: Maintenance Release
 
+**Enhancements**
+
+ - Add CSS variable names for main theme colours to make user customisations easier
+
 **Fixes**
 
  - Re-fix switch to not visibly switch when set to show input not output. Issue #506

README.md

@@ -91,6 +91,17 @@ The widget layout is managed by a `dashboard` tab in the sidebar of the Node-RED
 
 You can also choose to use the basic Angular Material themes instead if you like, either just within any ui_templates or for the whole Dashboard. This will only affect angular components so some of the charts and so on may need extra work.
 
+**Note**: For users creating their own templates the following CSS variable names are available
+to help pick up the theme colours.
+
+ - --nr-dashboard-pageBackgroundColor
+ - --nr-dashboard-pageTitlebarBackgroundColor
+ - --nr-dashboard-groupBackgroundColor
+ - --nr-dashboard-groupTextColor
+ - --nr-dashboard-groupBorderColor
+ - --nr-dashboard-widgetBackgroundColor
+ - --nr-dashboard-widgetTextColor
+ - --nr-dashboard-widgetBorderColor
 
 #### Widgets
 

dist/css/app.min.less

@@ -159,6 +159,18 @@ md-card {
 @nrTemplateTheme: true;
 @nrUnitHeight: 24px;
 
+// define some CSS variables for user usage
+:root {
+    --nr-dashboard-pageBackgroundColor: @pageBackgroundColor;
+    --nr-dashboard-pageTitlebarBackgroundColor: @pageTitlebarBackgroundColor;
+    --nr-dashboard-groupTextColor: @groupTextColor;
+    --nr-dashboard-groupBackgroundColor: @groupBackgroundColor;
+    --nr-dashboard-groupBorderColor: @groupBorderColor;
+    --nr-dashboard-widgetTextColor: @widgetTextColor;
+    --nr-dashboard-widgetBackgroundColor: @widgetBackgroundColor;
+    --nr-dashboard-widgetBorderColor: @widgetBorderColor;
+}
+
 .nr-dashboard-disabled {
     opacity: 0.4 !important;
     pointer-events: none !important;

dist/dashboard.appcache

@@ -18,4 +18,4 @@ fonts/weather-icons-lite.woff2
 NETWORK:
 *
 
-# hash: dca0f1f8c88cd55ba9e5b3d9a5f5e6eab9e757d3d188d1f54e6e8ab313294a45
+# hash: 751207d6725e85268127de80b5aaeb96d9240ab8ad45cf52445576471c9a19fb

src/theme.less

@@ -15,6 +15,18 @@
 @nrTemplateTheme: true;
 @nrUnitHeight: 24px;
 
+// define some CSS variables for user usage
+:root {
+    --nr-dashboard-pageBackgroundColor: @pageBackgroundColor;
+    --nr-dashboard-pageTitlebarBackgroundColor: @pageTitlebarBackgroundColor;
+    --nr-dashboard-groupTextColor: @groupTextColor;
+    --nr-dashboard-groupBackgroundColor: @groupBackgroundColor;
+    --nr-dashboard-groupBorderColor: @groupBorderColor;
+    --nr-dashboard-widgetTextColor: @widgetTextColor;
+    --nr-dashboard-widgetBackgroundColor: @widgetBackgroundColor;
+    --nr-dashboard-widgetBorderColor: @widgetBorderColor;
+}
+
 .nr-dashboard-disabled {
     opacity: 0.4 !important;
     pointer-events: none !important;