diff --git a/ui/assets/app.js b/ui/assets/app.js
index 91a6fb6..d902ebd 100644
--- a/ui/assets/app.js
+++ b/ui/assets/app.js
@@ -2885,6 +2885,17 @@ var PS = {};
   exports["background"] = background;
   exports["backgroundColor'"] = backgroundColor$prime;
 })(PS);
+(function($PS) {
+  // Generated by purs version 0.13.3
+  "use strict";
+  $PS["CSS.Font"] = $PS["CSS.Font"] || {};
+  var exports = $PS["CSS.Font"];
+  var CSS_Property = $PS["CSS.Property"];
+  var CSS_String = $PS["CSS.String"];
+  var CSS_Stylesheet = $PS["CSS.Stylesheet"];
+  var color = CSS_Stylesheet.key(CSS_Property.valColor)(CSS_String.fromString(CSS_Property.isStringKey)("color"));
+  exports["color"] = color;
+})(PS);
 (function($PS) {
   // Generated by purs version 0.13.3
   "use strict";
@@ -10803,6 +10814,7 @@ var PS = {};
   $PS["Solaryzed"] = $PS["Solaryzed"] || {};
   var exports = $PS["Solaryzed"];
   var CSS_Background = $PS["CSS.Background"];
+  var CSS_Font = $PS["CSS.Font"];
   var CSS_Geometry = $PS["CSS.Geometry"];
   var CSS_Size = $PS["CSS.Size"];
   var CSS_Stylesheet = $PS["CSS.Stylesheet"];
@@ -10853,6 +10865,9 @@ var PS = {};
   var solbase03 = Color.lab(15.0)(-12.0)(-12.0);
   var render = function (state) {
       var palette = Solaryzed_Palette.genPalette(state.dark)(state.light)(Color_Blending.blend(Color_Blending.Multiply.value)(state.dark)(state.light));
+      var mkCssColor = function (v) {
+          return Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(v.value1)), Halogen_HTML_Properties.id_(v.value0 + "-css") ])([ Halogen_HTML_Core.text("--" + (v.value0 + (": " + (Color.toHexString(v.value1) + ";")))) ]);
+      };
       var cssBackground = function (c) {
           return Halogen_HTML_CSS.style(Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Background.background(CSS_Background["backgroundColor'"])(c))(function () {
               return Control_Bind.discard(Control_Bind.discardUnit)(CSS_Stylesheet.bindStyleM)(CSS_Geometry.height(CSS_Size.px(80.0)))(function () {
@@ -10871,7 +10886,7 @@ var PS = {};
           return Data_Maybe.Just.create(new DarkChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c))));
       }), Halogen_HTML_Properties.value(Color.toHexString(state.dark)) ]), Halogen_HTML_Elements.input([ Halogen_HTML_Properties.type_(Halogen_HTML_Core.isPropInputType)(DOM_HTML_Indexed_InputType.InputColor.value), Halogen_HTML_Events.onValueChange(function (c) {
           return Data_Maybe.Just.create(new LightChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c))));
-      }), Halogen_HTML_Properties.value(Color.toHexString(state.light)) ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette)) ]);
+      }), Halogen_HTML_Properties.value(Color.toHexString(state.light)) ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette)), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("css") ])(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette)) ]);
   };
   var initialState = function (v) {
       return {
@@ -10882,18 +10897,6 @@ var PS = {};
   };
   var handleAction = function (v) {
       if (v instanceof DarkChanged) {
-          return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
-              var $11 = {};
-              for (var $12 in st) {
-                  if ({}.hasOwnProperty.call(st, $12)) {
-                      $11[$12] = st[$12];
-                  };
-              };
-              $11.dark = v.value0;
-              return $11;
-          });
-      };
-      if (v instanceof LightChanged) {
           return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
               var $15 = {};
               for (var $16 in st) {
@@ -10901,11 +10904,11 @@ var PS = {};
                       $15[$16] = st[$16];
                   };
               };
-              $15.light = v.value0;
+              $15.dark = v.value0;
               return $15;
           });
       };
-      if (v instanceof AccentChanged) {
+      if (v instanceof LightChanged) {
           return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
               var $19 = {};
               for (var $20 in st) {
@@ -10913,11 +10916,23 @@ var PS = {};
                       $19[$20] = st[$20];
                   };
               };
-              $19.accent = v.value0;
+              $19.light = v.value0;
               return $19;
           });
       };
-      throw new Error("Failed pattern match at Solaryzed (line 84, column 16 - line 87, column 56): " + [ v.constructor.name ]);
+      if (v instanceof AccentChanged) {
+          return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
+              var $23 = {};
+              for (var $24 in st) {
+                  if ({}.hasOwnProperty.call(st, $24)) {
+                      $23[$24] = st[$24];
+                  };
+              };
+              $23.accent = v.value0;
+              return $23;
+          });
+      };
+      throw new Error("Failed pattern match at Solaryzed (line 93, column 16 - line 96, column 56): " + [ v.constructor.name ]);
   };
   var component = Halogen_Component.mkComponent({
       initialState: initialState,
diff --git a/ui/src/Solaryzed.purs b/ui/src/Solaryzed.purs
index d39b1ea..3af51d4 100644
--- a/ui/src/Solaryzed.purs
+++ b/ui/src/Solaryzed.purs
@@ -65,6 +65,9 @@ render state =
   , HH.div
     [ HP.id_ "colors" ]
     (map mkDivColor palette)
+  , HH.div
+    [ HP.id_ "css" ]
+    (map mkCssColor palette)
   ]
   where
     palette = genPalette state.dark state.light (blend Multiply state.dark state.light)
@@ -73,6 +76,12 @@ render state =
       [ cssBackground c
       , HP.id_ label ]
       [ HH.text label ]
+    mkCssColor (Tuple label c) =
+        HH.div
+        [ HCSS.style $ do
+             CSS.color c
+        , HP.id_ (label <> "-css") ]
+        [ HH.text ("--" <> label <> ": " <> toHexString c <> ";") ]
     cssBackground c = HCSS.style $ do
       CSS.background c
       CSS.height (px 80.0)