diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index 6b00cf65..09dabb8b 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -107,35 +107,10 @@ document.head.appendChild previewStyle
 
 previewTimeout = null
 
-previewTheme = ->
-  payload = {}
-
-  $('#update_theme').find('.color').each ->
-    n = this.name.substr 6, this.name.length - 7
-    payload[n] = parseInt this.value.substr(1, 6), 16
-
-  $.post '/settings/theme/preview.css', payload, (data) ->
-    previewStyle.innerHTML = data
-  , 'text'
-
-  null
-
-themePresets = {
-  rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
-  dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
-  lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989]
-}
-
-$(document).on 'submit', '#update_theme', (event) ->
-  $this = $ this
-  $this.find('.color').each ->
-    this.value = parseInt this.value.substr(1, 6), 16
-  true
-
 $(document).ready ->
   $('#update_theme .color').each ->
     $this = $ this
-    this.value = '#' + ('000000' + parseInt(this.value).toString(16)).substr(-6, 6)
+    this.value = '#' + getHexColorFromThemeValue(this.value)
 
     $this.minicolors
       control:      'hue'
@@ -152,4 +127,68 @@ $(document).ready ->
 $(document).on 'click', 'a.theme_preset', (event) ->
   preset = [].concat themePresets[this.dataset.preset]
   $('#update_theme .color').each ->
-    $(this).minicolors 'value', '#' + ('000000' + parseInt(preset.shift()).toString(16)).substr(-6, 6)
+    $(this).minicolors 'value', '#' + getHexColorFromThemeValue(preset.shift())
+
+previewTheme = ->
+  payload = {}
+
+  $('#update_theme').find('.color').each ->
+    n = this.name.substr 6, this.name.length - 7
+    payload[n] = parseInt this.value.substr(1, 6), 16
+
+  generateTheme payload
+
+  null
+
+generateTheme = (payload) ->
+  theme_attribute_map = {
+    'primary_color': 'primary',
+    'primary_text': 'primary-text',
+    'danger_color': 'danger',
+    'danger_text': 'danger-text',
+    'warning_color': 'warning',
+    'warning_text': 'warning-text',
+    'info_color': 'info',
+    'info_text': 'info-text',
+    'success_color': 'success',
+    'success_text': 'success-text',
+    'panel_color': 'raised-bg',
+    'background_color': 'background',
+    'background_text': 'body-text',
+    'input_color': 'input-bg',
+    'input_text': 'input-text' 
+  }
+
+  body = ":root {\n"
+
+  (Object.keys(payload)).forEach (plKey) ->
+    console.log plKey
+    if theme_attribute_map[plKey]
+      if theme_attribute_map[plKey].includes 'text'
+        console.log "aaa"
+        hex = getHexColorFromThemeValue(payload[plKey])
+        body += "--#{theme_attribute_map[plKey]}: #{getDecimalTripletsFromHex(hex)};\n"
+      else
+        body += "--#{theme_attribute_map[plKey]}: ##{getHexColorFromThemeValue(payload[plKey])};\n"
+
+  body += "}"
+
+  previewStyle.innerHTML = body
+
+getHexColorFromThemeValue = (themeValue) ->
+  return ('000000' + parseInt(themeValue).toString(16)).substr(-6, 6)
+
+getDecimalTripletsFromHex = (hex) ->
+  return hex.match(/.{1,2}/g).map((value) -> parseInt(value, 16)).join(', ')
+
+themePresets = {
+  rs: [0x5E35B1, 0xFFFFFF, 0xFF0039, 0xFFFFFF, 0x3FB618, 0xFFFFFF, 0xFF7518, 0xFFFFFF, 0x9954BB, 0xFFFFFF, 0x222222, 0xEEEEEE, 0xF9F9F9, 0x151515, 0x5E35B1, 0xFFFFFF, 0x222222, 0xbbbbbb, 0xFFFFFF, 0x000000, 0x5E35B1],
+  dc: [0x141414, 0xeeeeee, 0x362222, 0xeeeeee, 0x1d2e1d, 0xeeeeee, 0x404040, 0xeeeeee, 0xb8b8b8, 0x3b3b3b, 0x303030, 0xEEEEEE, 0x202020, 0xeeeeee, 0x9c9a9a, 0x363636, 0xe6e6e6, 0xbbbbbb, 0x383838, 0xebebeb, 0x787676],
+  lc: [0xebebeb, 0x111111, 0xf76363, 0x111111, 0x8aff94, 0x111111, 0xffbd7f, 0x111111, 0x474747, 0xc4c4c4, 0xcfcfcf, 0x111111, 0xdfdfdf, 0x111111, 0x636565, 0xc9c9c9, 0x191919, 0x444444, 0xc7c7c7, 0x141414, 0x878989]
+}
+
+$(document).on 'submit', '#update_theme', (event) ->
+  $this = $ this
+  $this.find('.color').each ->
+    this.value = parseInt this.value.substr(1, 6), 16
+  true