diff --git a/packages/app-next/public/index.html b/packages/app-next/public/index.html
index 63ab0bec0c..74387edea3 100644
--- a/packages/app-next/public/index.html
+++ b/packages/app-next/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="color-scheme" content="light dark" />
     <meta
       name="description"
       content="Backstage is an open source framework for building developer portals"
diff --git a/packages/app/public/index.html b/packages/app/public/index.html
index 9a8267e98e..9b67673b2e 100644
--- a/packages/app/public/index.html
+++ b/packages/app/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="color-scheme" content="light dark" />
     <meta
       name="description"
       content="Backstage is an open source framework for building developer portals"
diff --git a/packages/techdocs-cli-embedded-app/public/index.html b/packages/techdocs-cli-embedded-app/public/index.html
index 18bb3f50a9..196c711417 100644
--- a/packages/techdocs-cli-embedded-app/public/index.html
+++ b/packages/techdocs-cli-embedded-app/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="color-scheme" content="light dark" />
     <meta
       name="description"
       content="Backstage is an open source framework for building developer portals"
diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 862de8e0e3..c96eda05c9 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -247,6 +247,14 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  [data-theme-mode="dark"] {
+    color-scheme: dark;
+  }
+
+  [data-theme-mode="light"] {
+    color-scheme: light;
+  }
 }
 
 @layer components;
diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css
index 533a5d0e08..5be23e7a1b 100644
--- a/packages/ui/src/css/core.css
+++ b/packages/ui/src/css/core.css
@@ -39,4 +39,12 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  [data-theme-mode='dark'] {
+    color-scheme: dark;
+  }
+
+  [data-theme-mode='light'] {
+    color-scheme: light;
+  }
 }