diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index 27adc2950ff..40bf5e07578 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/app/views/common/_discourse_splash.html.erb
@@ -114,13 +114,14 @@
   <style>
     html {
       overflow-y: hidden !important;
+      background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
     }
 
     #d-splash {
       display: grid;
       place-items: center;
       backface-visibility: hidden;
-      background: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
+      background-color: #<%= ColorScheme.hex_for_name("secondary", scheme_id) %>;
       position: absolute;
       left: 0;
       top: 0;
@@ -183,8 +184,11 @@
     }
 
     @media (prefers-color-scheme: dark) {
+      html {
+        background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
+      }
       #d-splash {
-        background: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
+        background-color: #<%= ColorScheme.hex_for_name("secondary", dark_scheme_id) %>;
       }
       #d-splash .preloader-text-wrapper {
         color: #<%= ColorScheme.hex_for_name("primary", dark_scheme_id) %>;
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 12db631ba84..2f077d6788f 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -6,7 +6,8 @@
 <%- 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) %>">
+<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', dark_scheme_id) %>" media="(prefers-color-scheme: dark)">
 <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 %>">