FIX: Add theme-color <meta> tag when a dark scheme is selected (#18747)

Meta topic: https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/7?u=osama.

This commit renders an additional `theme-color` `<meta>` tag for the dark scheme if the current user/request has a scheme selected for dark mode. We currently only render one `theme-color` tag which is always based on the user's selected scheme for light mode, but if the user also selects a scheme for dark mode and uses a device that's configured to use/prefer dark mode, the Discourse UI will be in dark mode, but any parts of the browser/OS UI that's colored based on the `theme-color` tag, would use a color from the user's selected light scheme and look inconsistent with the Discourse UI because the `theme-color` tag is based on the user's selected light scheme.

The additional `theme-color` tag has `media="(prefers-color-scheme: dark)"` and is based on the user's selected dark scheme which means any browser UI that's colored based on `theme-color` tags should be able to pick the right tag based on the user's preference for light/dark mode.

app/helpers/application_helper.rb

@@ -625,6 +625,18 @@ module ApplicationHelper
     result.html_safe
   end
 
+  def discourse_theme_color_meta_tags
+    result = +<<~HTML
+      <meta name="theme-color" media="all" content="##{ColorScheme.hex_for_name('header_background', scheme_id)}">
+    HTML
+    if dark_scheme_id != -1
+      result << <<~HTML
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="##{ColorScheme.hex_for_name('header_background', dark_scheme_id)}">
+      HTML
+    end
+    result.html_safe
+  end
+
   def dark_color_scheme?
     return false if scheme_id.blank?
     ColorScheme.find_by_id(scheme_id)&.is_dark?

app/views/layouts/_head.html.erb

@@ -6,7 +6,7 @@
 <%- if site_apple_touch_icon_url.present? %>
 <link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>">
 <%- end %>
-<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>">
+<%= discourse_theme_color_meta_tags %>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
 <%- if Discourse.base_path.present? %>
 <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">

spec/helpers/application_helper_spec.rb

@@ -739,4 +739,34 @@ RSpec.describe ApplicationHelper do
       expect(helper.html_lang).to eq(I18n.locale.to_s)
     end
   end
+
+  describe "#discourse_theme_color_meta_tags" do
+    before do
+      light = Fabricate(:color_scheme)
+      light.color_scheme_colors << ColorSchemeColor.new(name: "header_background", hex: "abcdef")
+      light.save!
+      helper.request.cookies["color_scheme_id"] = light.id
+
+      dark = Fabricate(:color_scheme)
+      dark.color_scheme_colors << ColorSchemeColor.new(name: "header_background", hex: "defabc")
+      dark.save!
+      helper.request.cookies["dark_scheme_id"] = dark.id
+    end
+
+    it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
+      expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
+        <meta name="theme-color" media="all" content="#abcdef">
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
+      HTML
+    end
+
+    it "doesn't render theme-color meta tag for the dark scheme if none is set" do
+      SiteSetting.default_dark_mode_color_scheme_id = -1
+      helper.request.cookies.delete("dark_scheme_id")
+
+      expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
+        <meta name="theme-color" media="all" content="#abcdef">
+      HTML
+    end
+  end
 end