WIP: Initial implementation of CSS variable based theming

app/helpers/theme_helper.rb

@@ -51,4 +51,66 @@ module ThemeHelper
 
     return klass.new(context).render
   end
+
+  def render_theme
+    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' => 'card-bg',
+      'background_color' => 'background',
+      'background_text' => 'body-text',
+      'input_color' => 'input-bg',
+      'input_text' => 'input-text' 
+    }
+
+    theme = get_active_theme
+
+    if theme
+
+    body = ":root {\n"
+      theme.attributes.each do |k, v|
+        if theme_attribute_map[k]
+          if k.include? "text"
+            hex = get_hex_color_from_theme_value(v)
+            body += "\t--#{theme_attribute_map[k]}: #{get_decimal_triplet_from_hex(hex)};\n"
+          else
+            body += "\t--#{theme_attribute_map[k]}: ##{get_hex_color_from_theme_value(v)};\n"
+          end
+        end
+      end
+
+      body += "}"
+
+      content_tag(:style, body)
+    end
+  end
+
+  def get_active_theme
+    if current_user&.theme
+      current_user.theme
+    elsif @user&.theme
+      if user_signed_in?
+        @user.theme unless !current_user&.show_foreign_themes?
+      else
+        @user.theme
+      end
+    end
+  end
+
+  def get_hex_color_from_theme_value(value)
+    ('0000000' + value.to_s(16))[-6, 6]
+  end
+
+  def get_decimal_triplet_from_hex(value)
+    hexes = value.split(/(.{2})/).reject { |c| c.empty? }
+    hexes.map(&:hex).join(", ")
+  end
 end

app/models/theme.rb

@@ -17,26 +17,6 @@ class Theme < ApplicationRecord
     greater_than_or_equal_to: 0, less_than_or_equal_to: 0xFFFFFF,
     allow_nil: true, only_integer: true
 
-  has_attached_file :css, use_timestamp: false, s3_headers: {
-    'Content-Type' => 'text/css'
-  }, fog_file: {
-    content_type: 'text/css'
-  }
-  validates_attachment_content_type :css, content_type: /^text\//
-
-  before_save do
-    self.css = nil
-
-    style = StringIO.new(render_theme_with_context(self))
-
-    style.class.class_eval { attr_accessor :original_filename, :content_type }
-
-    style.content_type = 'text/css'
-    style.original_filename = 'theme.css'
-
-    self.css = style
-  end
-
   def theme_color
     ('#' + ('0000000' + primary_color.to_s(16))[-6, 6])
   end

app/views/layouts/base.haml

@@ -12,17 +12,12 @@
     %title= yield(:title)
     = javascript_include_tag 'i18n', 'data-turbolinks-track' => true
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
-    - if user_signed_in? and not current_user.theme.nil? and (@user.nil? || @user.theme.nil?)
-      %link{rel: 'stylesheet', href: current_user.theme.css.url, media: :all, 'data-turbolinks-track' => "false"}
-      %meta{name: 'theme-color', content: current_user.theme.theme_color}
-    - if (not @user.nil?) and (not @user.theme.nil?) and (if user_signed_in? then current_user.show_foreign_themes? else true end)
-      %link{rel: 'stylesheet', href: @user.theme.css.url, media: :all, 'data-turbolinks-track' => "false"}
-      %meta{name: 'theme-color', content: @user.theme.theme_color}
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     - if user_signed_in?
       - if current_user.mod?
         = javascript_include_tag 'moderation', 'data-turbolinks-track' => true
     = csrf_meta_tags
+    = render_theme
   %body#version1
     - if user_signed_in?
       = render 'navigation/main'