make 'customVars' accessible as CSS-variables

app/views/colors.css

@@ -6,3 +6,9 @@ html {
     background-attachment: fixed;
     background-size: 2000px 2000px;
 }
+
+<repeat group="{{ @customVars }}" key="{{ @ikey }}" value="{{ @ivalue }}">
+:root {
+    --{{ @ikey }}: {{ $@ikey }};
+}
+</repeat>

main.cfg.sample

@@ -25,7 +25,9 @@ includeBanner=false
 ;; "customVars" are global (in F3) and can be changed in content files
 [customVars]
 backgroundColor=#fff
-info1=test
+color1=#333
+color2=#777
+color3=#bbb
 
 [globals]
 title=Title of new Page

rsc/sass/_colours.scss

@@ -3,7 +3,11 @@ $white:#fff;
 $black:#000;
 $gray:#777;
 
-
+:root {
+    --color1: red;
+    --color2: green;
+    --color3: blue;
+}
 
 html {
     color:$gray;