From f520c0b1c4ce0d6c759d5b819551d3d42967a9f1 Mon Sep 17 00:00:00 2001
From: Gabriel Dugny <gabriel.dugny@believe.com>
Date: Fri, 17 Oct 2025 22:29:15 +0200
Subject: [PATCH] fix(ui): Set color-scheme, notably to have proper scrollbar
 theming

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>
---
 packages/app-next/public/index.html                  | 1 +
 packages/app/public/index.html                       | 1 +
 packages/techdocs-cli-embedded-app/public/index.html | 1 +
 packages/ui/css/styles.css                           | 8 ++++++++
 packages/ui/src/css/core.css                         | 8 ++++++++
 5 files changed, 19 insertions(+)

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;
+  }
 }