Refactor user theme CSS to be provided by a stylesheet endpoint

app/controllers/user_controller.rb

@@ -1,13 +1,16 @@
 # frozen_string_literal: true
 
 class UserController < ApplicationController
+  include ThemeHelper
   include PaginatesAnswers
 
-  before_action :set_user
+  before_action :set_user, except: :show_theme
   before_action :hidden_social_graph_redirect, only: %i[followers followings]
   after_action :mark_notification_as_read, only: %i[show]
 
   def show
+    return show_theme if params[:format] == "css"
+
     @pinned_answers = @user.answers.for_user(current_user).pinned.includes([{ user: :profile }, :question]).order(pinned_at: :desc).limit(10).load_async
     paginate_answers { |args| @user.cursored_answers(current_user_id: current_user, **args) }
 
@@ -17,6 +20,16 @@ class UserController < ApplicationController
     end
   end
 
+  def show_theme
+    theme = Theme.where(user: User.where("LOWER(screen_name) = ?", params[:username].downcase).select(:id)).first
+    return head :no_content if theme.nil?
+
+    expires_in 1.day
+    return if fresh_when theme, public: true
+
+    render plain: get_theme_css(theme), content_type: "text/css"
+  end
+
   def followers
     paginate_relationships(:cursored_follower_relationships)
     @users = @relationships.map(&:source)

app/helpers/theme_helper.rb

@@ -33,6 +33,11 @@ module ThemeHelper
 
     return unless theme
 
+    css = get_theme_css(theme)
+    content_tag(:style, css)
+  end
+
+  def get_theme_css(theme)
     body = ":root {\n"
 
     theme.attributes.each do |k, v|
@@ -42,9 +47,7 @@ module ThemeHelper
         body += "\t--#{var}: #{get_color_for_key(var, v)};\n"
       end
     end
-    body += "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n}"
-
-    content_tag(:style, body)
+    body + "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n}"
   end
 
   def get_color_for_key(key, color)

app/views/layouts/base.html.haml

@@ -5,10 +5,10 @@
     %meta{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }
     %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover' }
     - if user_signed_in?
-      %meta{ name: 'theme-color', content: theme_color, media: '(min-width: 993px)' }
-      %meta{ name: 'theme-color', content: mobile_theme_color, media: '(max-width: 992px)' }
+      %meta{ name: 'theme-color', content: "var(--primary)", media: '(min-width: 993px)' }
+      %meta{ name: 'theme-color', content: "var(--background)", media: '(max-width: 992px)' }
     - else
-      %meta{ name: 'theme-color', content: theme_color }
+      %meta{ name: 'theme-color', content: "var(--primary)" }
     - if @user&.privacy_noindex? || @answer&.user&.privacy_noindex? || @question&.user&.privacy_noindex?
       %meta{ name: 'robots', content: 'noindex' }
     %link{ rel: 'manifest', href: '/manifest.json', crossorigin: 'use-credentials' }
@@ -19,6 +19,10 @@
     %link{ rel: 'icon', href: '/images/favicon/favicon-32.png', sizes: '32x32' }
     %title= yield(:title)
     = stylesheet_link_tag "application", data: { 'turbo-track': "reload" }, media: "all"
+    - if current_user&.show_foreign_themes?
+      %link{ rel: 'stylesheet', href: user_path(username: @user&.screen_name || @answer&.user&.screen_name || current_user&.screen_name, format: "css"), data: { turbo_track: "reload" } }
+    - elsif user_signed_in?
+      %link{ rel: 'stylesheet', href: user_path(username: current_user&.screen_name, format: "css"), data: { turbo_track: "reload" } }
     = javascript_include_tag 'application', data: { 'turbo-track': 'reload' }, defer: true
     = csrf_meta_tags
     = yield(:og)
@@ -46,4 +50,3 @@
               = `git rev-parse --short HEAD`.strip
           %p.text-danger Debug params:
           = debug params
-    = render_theme