diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 84912f38151..d2078d15eb8 100644
--- a/app/helpers/application_helper.rb
+++ b/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?
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 12db631ba84..5f16e291241 100644
--- a/app/views/layouts/_head.html.erb
+++ b/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 %>">
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
index 0e57abf94d1..8b3ae785ccc 100644
--- a/spec/helpers/application_helper_spec.rb
+++ b/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