feat: use CSS color-scheme to improve dark theme

.changeset/color-scheme-dark-theme.md

@@ -0,0 +1,5 @@
+---
+"@strapi/design-system": minor
+---
+
+Add CSS `color-scheme` property to improve dark theme support for native browser elements (scrollbars, form controls)

packages/design-system/src/styles/global.ts

@@ -15,6 +15,7 @@ ${css`
   html {
     /* Sets 1rem === 10px */
     font-size: 62.5%;
+    color-scheme: ${({ theme }) => theme.colorScheme};
   }
 
   body {

packages/design-system/src/themes/__tests__/extendTheme.test.ts

@@ -23,7 +23,8 @@ describe('extendTheme', () => {
       import { lightTheme, extendTheme } from '@strapi/design-system';
 
       const myCustomTheme = extendTheme(lightTheme, {
-          colors: /* put the overrides for the colors key */,
+          colorScheme: /* put the overrides for the colorScheme key */,
+      colors: /* put the overrides for the colors key */,
       shadows: /* put the overrides for the shadows key */,
       sizes: /* put the overrides for the sizes key */,
       zIndices: /* put the overrides for the zIndices key */,
@@ -59,7 +60,8 @@ describe('extendTheme', () => {
       import { lightTheme, extendTheme } from '@strapi/design-system';
 
       const myCustomTheme = extendTheme(lightTheme, {
-          colors: /* put the overrides for the colors key */,
+          colorScheme: /* put the overrides for the colorScheme key */,
+      colors: /* put the overrides for the colors key */,
       shadows: /* put the overrides for the shadows key */,
       sizes: /* put the overrides for the sizes key */,
       zIndices: /* put the overrides for the zIndices key */,

packages/design-system/src/themes/color-scheme.ts

@@ -0,0 +1,6 @@
+export const COLOR_SCHEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+} as const;
+
+export type ColorScheme = (typeof COLOR_SCHEMES)[keyof typeof COLOR_SCHEMES];

packages/design-system/src/themes/darkTheme/index.ts

@@ -1,11 +1,13 @@
 import { DefaultTheme } from 'styled-components';
 
 import { commonTheme } from '../common-theme';
+import { COLOR_SCHEMES } from '../color-scheme';
 
 import { darkColorTokenObject } from './dark-colors';
 import { darkShadowTokenObject } from './dark-shadows';
 
 export const darkTheme: DefaultTheme = {
+  colorScheme: COLOR_SCHEMES.DARK,
   colors: darkColorTokenObject.color,
   shadows: darkShadowTokenObject.shadow,
   ...commonTheme,

packages/design-system/src/themes/index.ts

@@ -1,6 +1,8 @@
+import { ColorScheme } from './color-scheme';
 import { Colors, Shadows } from './colors';
 import { CommonTheme } from './common-theme';
 
+export * from './color-scheme';
 export * from './lightTheme';
 export * from './darkTheme';
 export * from './extendTheme';
@@ -9,4 +11,5 @@ export * from './utils';
 export interface StrapiTheme extends CommonTheme {
   colors: Colors;
   shadows: Shadows;
+  colorScheme: ColorScheme;
 }

packages/design-system/src/themes/lightTheme/index.ts

@@ -1,11 +1,13 @@
 import { DefaultTheme } from 'styled-components';
 
 import { commonTheme } from '../common-theme';
+import { COLOR_SCHEMES } from '../color-scheme';
 
 import { lightColorTokenObject } from './light-colors';
 import { lightShadowTokenObject } from './light-shadows';
 
 export const lightTheme: DefaultTheme = {
+  colorScheme: COLOR_SCHEMES.LIGHT,
   colors: lightColorTokenObject.color,
   shadows: lightShadowTokenObject.shadow,
   ...commonTheme,