diff --git a/app/assets/javascripts/discourse/lib/bootstrap-json/index.js b/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
index f2cb94c46b1..f062d504f0e 100644
--- a/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
+++ b/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
@@ -34,12 +34,17 @@ function head(buffer, bootstrap) {
     buffer.push(`<meta name="csrf-param" content="authenticity_token">`);
     buffer.push(`<meta name="csrf-token" content="${bootstrap.csrf_token}">`);
   }
+
   if (bootstrap.theme_id) {
     buffer.push(
       `<meta name="discourse_theme_id" content="${bootstrap.theme_id}">`
     );
   }
 
+  if (bootstrap.theme_color) {
+    buffer.push(`<meta name="theme-color" content="${bootstrap.theme_color}">`);
+  }
+
   let setupData = "";
   Object.keys(bootstrap.setup_data).forEach((sd) => {
     let val = bootstrap.setup_data[sd];
diff --git a/app/controllers/bootstrap_controller.rb b/app/controllers/bootstrap_controller.rb
index e10120e0c52..4f2f40af89e 100644
--- a/app/controllers/bootstrap_controller.rb
+++ b/app/controllers/bootstrap_controller.rb
@@ -54,6 +54,7 @@ class BootstrapController < ApplicationController
 
     bootstrap = {
       theme_id: theme_id,
+      theme_color: "##{ColorScheme.hex_for_name('header_background', scheme_id)}",
       title: SiteSetting.title,
       current_homepage: current_homepage,
       locale_script: locale,