From 29a32f95664e674a71a86317dd36153604d8e296 Mon Sep 17 00:00:00 2001
From: kaden-stytch <95260470+kaden-stytch@users.noreply.github.com>
Date: Mon, 7 Nov 2022 02:06:26 -0500
Subject: [PATCH] Meta topic:
 https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815
 (#18832)

Meta topic: https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815

Currently, the dark mode theme-color `<meta>` tag doesn't apply because the light mode tag has `media="all"`. This means that the dark mode `<meta>` tag with `media="(prefers-color-scheme: dark)"` won't override it. This PR updates the light mode tag to `media="(prefers-color-scheme: light)"` if `dark_scheme_id` is defined and leaves it as `media="all"` otherwise.
---
 app/helpers/application_helper.rb       | 9 ++++++---
 spec/helpers/application_helper_spec.rb | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index d2078d15eb8..96d3c11a659 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -626,13 +626,16 @@ module ApplicationHelper
   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
+    result = +""
     if dark_scheme_id != -1
       result << <<~HTML
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content="##{ColorScheme.hex_for_name('header_background', scheme_id)}">
         <meta name="theme-color" media="(prefers-color-scheme: dark)" content="##{ColorScheme.hex_for_name('header_background', dark_scheme_id)}">
       HTML
+    else
+      result << <<~HTML
+        <meta name="theme-color" media="all" content="##{ColorScheme.hex_for_name('header_background', scheme_id)}">
+      HTML
     end
     result.html_safe
   end
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
index 8b3ae785ccc..e00f88c5eaf 100644
--- a/spec/helpers/application_helper_spec.rb
+++ b/spec/helpers/application_helper_spec.rb
@@ -753,9 +753,9 @@ RSpec.describe ApplicationHelper do
       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
+    it "renders theme-color meta for the light scheme with media=(prefers-color-scheme: light) 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: light)" content="#abcdef">
         <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
       HTML
     end