rework some theme code, particlefield now adapts color

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'
 

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

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'
+      dotColor: bodyColor
-      lineColor: '#5e35b1'
+      lineColor: bodyColor
 
   if twemoji?
     twemoji.parse document.body,

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 ''

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" %>
 <% @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;