diff --git a/Gemfile b/Gemfile
index 737571bc..0cd4b934 100644
--- a/Gemfile
+++ b/Gemfile
@@ -39,6 +39,7 @@ gem 'fog'
 gem 'fog-aws'
 gem 'momentjs-rails', '>= 2.9.0'
 gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'
+gem 'tiny-color-rails'
 
 gem 'twemoji-rails'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index c9ffaa3d..23e26eb8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -435,6 +435,8 @@ GEM
     tilt (1.4.1)
     timers (4.0.1)
       hitimes
+    tiny-color-rails (0.0.2)
+      railties (>= 3.0)
     tumblr_client (0.8.5)
       faraday (~> 0.9.0)
       faraday_middleware (~> 0.9.0)
@@ -545,6 +547,7 @@ DEPENDENCIES
   spring (~> 1.3.5)
   sweetalert-rails
   thin
+  tiny-color-rails
   tumblr_client
   turbolinks
   twemoji-rails
diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee
index d74d372f..79549378 100644
--- a/app/assets/javascripts/application.js.erb.coffee
+++ b/app/assets/javascripts/application.js.erb.coffee
@@ -14,6 +14,7 @@
 #= require js.cookie
 #= require i18n
 #= require i18n/translations
+#= require tinycolor-min
 # local requires to be seen by everyone:
 #= require_tree ./answerbox
 #= require_tree ./questionbox
@@ -28,6 +29,7 @@
 #= require user
 #= require report
 #= require locale-box
+#= require util
 # not required:
 # _tree ./moderation
 
@@ -62,9 +64,13 @@ _ready = ->
     sweetAlertInitialize()
 
   if document.getElementById('particles')?
+    jumbo         = $ '.j2-jumbo'
+    bodyColorOrig = jumbo.css 'background-color'
+    bodyColor     = doppler 0.25, bodyColorOrig
+    console.log bodyColor, bodyColorOrig
     particleground document.getElementById('particles'),
-      dotColor: '#5e35b1'
-      lineColor: '#5e35b1'
+      dotColor: bodyColor
+      lineColor: bodyColor
 
   if twemoji?
     twemoji.parse document.body,
diff --git a/app/assets/javascripts/util.coffee b/app/assets/javascripts/util.coffee
new file mode 100644
index 00000000..50cd1ecc
--- /dev/null
+++ b/app/assets/javascripts/util.coffee
@@ -0,0 +1,21 @@
+window.doppler = (percentage, value, relative = false) ->
+  while percentage >= 1
+    percentage /= 10
+  tc_color = tinycolor(value).toRgb()
+  color = [tc_color.r, tc_color.g, tc_color.b]
+  if relative
+    for _c, i in color
+      x = (255 - color[i]) * percentage
+      if x == 0
+        x = color[i] * percentage
+        color[i] -= x
+      else
+        color[i] += x
+  else
+    adj = 255 * percentage
+    for _c, i in color
+      if color[i] + adj > 255
+        color[i] -= adj
+      else
+        color[i] += adj
+  '#' + color.map((x) -> Math.floor(Math.max(0, Math.min(255, x))).toString(16)).join ''
diff --git a/app/views/user/theme.css.erb b/app/views/user/theme.css.erb
index e625308c..99addb09 100644
--- a/app/views/user/theme.css.erb
+++ b/app/views/user/theme.css.erb
@@ -1,18 +1,12 @@
-<% @primary_color ||= "#222" %>
-<% @primary_border ||= "#151515" %>
-<% @primary_text ||= "#eee" %>
-<% @primary_link ||= "#666" %>
-<% @primary_hover ||= "#222" %>
-<% @secondary_color ||= "#333" %>
-<% @secondary_border ||= "#111" %>
-<% @secondary_text ||= "#eee" %>
-<% @secondary_link ||= "#fff" %>
+<% @primary_color    ||= "#222" %>
+<% @primary_border   ||= "#151515" %>
+<% @primary_text     ||= "#eee" %>
 <% @background_color ||= "#555" %>
 body#version1 {
   background-color: <%= @background_color %>;
 }
 
-body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu  {
+body#version1 nav.navbar, body#version1 nav.navbar .dropdown-menu, body#version1 .j2-jumbo {
   background-color: <%= @primary_color %>;
   border-color:     <%= @primary_border %>;
 }
@@ -25,52 +19,6 @@ body#version1 .nav > li:not(.profile--image-dropdown):before {
   background-color: <%= @primary_text %>;
 }
 
-body#version1 a, body#version1 .dropdown-menu a {
-  color: <%= @primary_link %>;
-}
-
-body#version1 .dropdown-menu .list-group-item-warning {
-  background-color: <%= @primary_border %>;
-}
-
-body#version1 .dropdown-menu > li > a:hover,
-body#version1 .dropdown-menu > li > a:focus,
-body#version1 .list-group > a:hover,
-body#version1 .list-group > a:focus,
-body#version1 .list-group > a.active {
-  background-color: <%= @primary_border %>;
-  border-color:     <%= @primary_border %>;
-  color:            <%= @primary_text %>;
-}
-
-body#version1 .btn {
-  color: <%= @primary_text %>;
-}
-
-body#version1 .panel {
-  border-color:     <%= @primary_border %>;
-  background-color: <%= @secondary_color %>;
-  color:            <%= @primary_text %>;
-  box-shadow:       none;
-}
-
-body#version1 .list-group > a {
-  background-color: <%= @secondary_color %>;
-  border-color:     <%= @secondary_border %>;
-}
-
-body#version1 .locales, body .locales a {
-  color: <%= @primary_text %> !important;
-}
-
-body#version1 .text-muted {
-  color: <%= @secondary_text %>;
-}
-
-body#version1 .text-muted a {
-  color: <%= @secondary_link %>;
-}
-
 body#version1 #profile--header.profile--no-header::before, body#version1 .userbox--no-header::before {
   content:    "";
   position:   absolute;