Merge pull request #31469 from Believe-SA/blv/color-scheme

fix(ui): Set color-scheme, notably to have better default scrollbar theming

.changeset/wide-papers-run.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Set the color-scheme property depending on theme

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"

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"

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"

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;

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