diff --git a/app/assets/javascripts/discourse/lib/bootstrap-json/index.js b/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
index 18f7b80c0fe..73fbcba86a7 100644
--- a/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
+++ b/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
@@ -65,6 +65,9 @@ function head(buffer, bootstrap) {
     if (s.theme_id) {
       attrs.push(`data-theme-id="${s.theme_id}"`);
     }
+    if (s.class) {
+      attrs.push(`class="${s.class}"`);
+    }
     let link = `<link rel="stylesheet" type="text/css" href="${
       s.href
     }" ${attrs.join(" ")}></script>\n`;
diff --git a/app/controllers/bootstrap_controller.rb b/app/controllers/bootstrap_controller.rb
index 7840dcab3e2..e10120e0c52 100644
--- a/app/controllers/bootstrap_controller.rb
+++ b/app/controllers/bootstrap_controller.rb
@@ -17,8 +17,10 @@ class BootstrapController < ApplicationController
     end
 
     @stylesheets = []
-    add_scheme(scheme_id, 'all')
-    add_scheme(dark_scheme_id, '(prefers-color-scheme: dark)')
+
+    add_scheme(scheme_id, "all", "light-scheme")
+    add_scheme(dark_scheme_id, "(prefers-color-scheme: dark)", "dark-scheme")
+
     if rtl?
       add_style(mobile_view? ? :mobile_rtl : :desktop_rtl)
     else
@@ -73,11 +75,11 @@ class BootstrapController < ApplicationController
   end
 
 private
-  def add_scheme(scheme_id, media)
+  def add_scheme(scheme_id, media, css_class)
     return if scheme_id.to_i == -1
 
     if style = Stylesheet::Manager.new(theme_id: theme_id).color_scheme_stylesheet_details(scheme_id, media)
-      @stylesheets << { href: style[:new_href], media: media }
+      @stylesheets << { href: style[:new_href], media: media, class: css_class }
     end
   end