live-preview of selected theme on profile-page

src/Handler/Profile.hs

@@ -31,7 +31,7 @@ makeSettingForm template = identForm FIDsettings $ \html -> do
       <$> areq (natFieldI $ MsgNatField "Favoriten") -- TODO: natFieldI not working here
             (fslpI MsgFavoriten "Anzahl Favoriten") (stgMaxFavourties <$> template)
       <*> areq (selectFieldList themeList)
-            (fslI  MsgTheme         ) (stgTheme         <$> template)
+            (fslpI  MsgTheme "theme-select"       ) (stgTheme         <$> template) -- TODO: pass theme-select as id-attribute or similar.
       <*  submitButton
     return (result, widget) -- no validation required here
 

src/Model/Types.hs

@@ -232,6 +232,7 @@ derivePersistField "StudyFieldType"
 -- Skins / Themes
 data Theme       --Simply add Themes to this type only. CamelCase will be converted to "-lower"
   = Default
+  | Lavender
   | NeutralBlue
   | AberdeenReds
   | MintGreen
@@ -258,5 +259,3 @@ instance Default Theme where
 -}
 
 derivePersistField "Theme"
-
-

templates/profile.julius

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+  var themeSelector = document.querySelector('[placeholder="theme-select"]');
+  themeSelector.addEventListener('change', function() {
+    // get rid of old themes on body
+    var options = Array.from(themeSelector.options)
+    .forEach(function (option) {
+      document.body.classList.remove(optionToTheme(option));
+    });
+    // add newly selected theme
+    document.body.classList.add(optionToTheme(themeSelector.options[themeSelector.value - 1]));
+  });
+
+  function optionToTheme(option) {
+    return optionValue = 'theme--' + option.innerText.toLowerCase().trim().replace(/\s/g, '-');
+  }
+});