FEATURE: Add dark mode option for category backgrounds (#24003)

Adds a new upload field for a dark mode category background that will be used as an alternative when Discourse is using a dark mode theme.

spec/lib/stylesheet/importer_spec.rb

@@ -3,33 +3,114 @@
 require "stylesheet/importer"
 
 RSpec.describe Stylesheet::Importer do
-  def compile_css(name)
-    Stylesheet::Compiler.compile_asset(name)[0]
+  def compile_css(name, options = {})
+    Stylesheet::Compiler.compile_asset(name, options)[0]
   end
 
   describe "#category_backgrounds" do
-    it "applies CDN to background category images" do
-      expect(compile_css("color_definitions")).to_not include("body.category-")
-
+    it "uses the correct background image based in the color scheme" do
       background = Fabricate(:upload)
+      background_dark = Fabricate(:upload)
+
       parent_category = Fabricate(:category)
       category =
         Fabricate(
           :category,
           parent_category_id: parent_category.id,
           uploaded_background: background,
+          uploaded_background_dark: background_dark,
         )
 
-      expect(compile_css("color_definitions")).to include(
+      # light color schemes
+      ["Neutral", "Shades of Blue", "WCAG", "Summer", "Solarized Light"].each do |scheme_name|
+        scheme = ColorScheme.create_from_base(name: "Light Test", base_scheme_id: scheme_name)
+
+        compiled_css = compile_css("color_definitions", { color_scheme_id: scheme.id })
+
+        expect(compiled_css).to include(
+          "body.category-#{parent_category.slug}-#{category.slug}{background-image:url(#{background.url})}",
+        )
+        expect(compiled_css).not_to include(background_dark.url)
+      end
+
+      # dark color schemes
+      [
+        "Dark",
+        "Grey Amber",
+        "Latte",
+        "Dark Rose",
+        "WCAG Dark",
+        "Dracula",
+        "Solarized Dark",
+      ].each do |scheme_name|
+        scheme = ColorScheme.create_from_base(name: "Light Test", base_scheme_id: scheme_name)
+
+        compiled_css = compile_css("color_definitions", { color_scheme_id: scheme.id })
+
+        expect(compiled_css).not_to include(background.url)
+        expect(compiled_css).to include(
+          "body.category-#{parent_category.slug}-#{category.slug}{background-image:url(#{background_dark.url})}",
+        )
+      end
+    end
+
+    it "applies CDN to background category images" do
+      expect(compile_css("color_definitions")).to_not include("body.category-")
+
+      background = Fabricate(:upload)
+      background_dark = Fabricate(:upload)
+
+      parent_category = Fabricate(:category)
+      category =
+        Fabricate(
+          :category,
+          parent_category_id: parent_category.id,
+          uploaded_background: background,
+          uploaded_background_dark: background_dark,
+        )
+
+      compiled_css = compile_css("color_definitions")
+      expect(compiled_css).to include(
         "body.category-#{parent_category.slug}-#{category.slug}{background-image:url(#{background.url})}",
       )
 
       GlobalSetting.stubs(:cdn_url).returns("//awesome.cdn")
-      expect(compile_css("color_definitions")).to include(
+      compiled_css = compile_css("color_definitions")
+      expect(compiled_css).to include(
         "body.category-#{parent_category.slug}-#{category.slug}{background-image:url(//awesome.cdn#{background.url})}",
       )
     end
 
+    it "applies CDN to dark background category images" do
+      scheme = ColorScheme.create_from_base(name: "Dark Test", base_scheme_id: "Dark")
+      expect(compile_css("color_definitions", { color_scheme_id: scheme.id })).to_not include(
+        "body.category-",
+      )
+
+      background = Fabricate(:upload)
+      background_dark = Fabricate(:upload)
+
+      parent_category = Fabricate(:category)
+      category =
+        Fabricate(
+          :category,
+          parent_category_id: parent_category.id,
+          uploaded_background: background,
+          uploaded_background_dark: background_dark,
+        )
+
+      compiled_css = compile_css("color_definitions", { color_scheme_id: scheme.id })
+      expect(compiled_css).to include(
+        "body.category-#{parent_category.slug}-#{category.slug}{background-image:url(#{background_dark.url})}",
+      )
+
+      GlobalSetting.stubs(:cdn_url).returns("//awesome.cdn")
+      compiled_css = compile_css("color_definitions", { color_scheme_id: scheme.id })
+      expect(compiled_css).to include(
+        "body.category-#{parent_category.slug}-#{category.slug}{background-image:url(//awesome.cdn#{background_dark.url})}",
+      )
+    end
+
     it "applies S3 CDN to background category images" do
       setup_s3
       SiteSetting.s3_use_iam_profile = true
@@ -40,7 +121,32 @@ RSpec.describe Stylesheet::Importer do
       background = Fabricate(:upload_s3)
       category = Fabricate(:category, uploaded_background: background)
 
-      expect(compile_css("color_definitions")).to include(
+      compiled_css = compile_css("color_definitions")
+      expect(compiled_css).to include(
+        "body.category-#{category.slug}{background-image:url(https://s3.cdn/original",
+      )
+    end
+
+    it "applies S3 CDN to dark background category images" do
+      scheme = ColorScheme.create_from_base(name: "Dark Test", base_scheme_id: "WCAG Dark")
+
+      setup_s3
+      SiteSetting.s3_use_iam_profile = true
+      SiteSetting.s3_upload_bucket = "test"
+      SiteSetting.s3_region = "ap-southeast-2"
+      SiteSetting.s3_cdn_url = "https://s3.cdn"
+
+      background = Fabricate(:upload_s3)
+      background_dark = Fabricate(:upload_s3)
+      category =
+        Fabricate(
+          :category,
+          uploaded_background: background,
+          uploaded_background_dark: background_dark,
+        )
+
+      compiled_css = compile_css("color_definitions", { color_scheme_id: scheme.id })
+      expect(compiled_css).to include(
         "body.category-#{category.slug}{background-image:url(https://s3.cdn/original",
       )
     end