diff --git a/.changeset/color-scheme-dark-theme.md b/.changeset/color-scheme-dark-theme.md
new file mode 100644
index 000000000..dd6e6cda0
--- /dev/null
+++ b/.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)
diff --git a/packages/design-system/src/styles/global.ts b/packages/design-system/src/styles/global.ts
index a793f7c8d..07e924f3e 100644
--- a/packages/design-system/src/styles/global.ts
+++ b/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 {
diff --git a/packages/design-system/src/themes/__tests__/extendTheme.test.ts b/packages/design-system/src/themes/__tests__/extendTheme.test.ts
index aed4d1f9a..76fad49b4 100644
--- a/packages/design-system/src/themes/__tests__/extendTheme.test.ts
+++ b/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 */,
diff --git a/packages/design-system/src/themes/color-scheme.ts b/packages/design-system/src/themes/color-scheme.ts
new file mode 100644
index 000000000..bec81fafa
--- /dev/null
+++ b/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];
diff --git a/packages/design-system/src/themes/darkTheme/index.ts b/packages/design-system/src/themes/darkTheme/index.ts
index b927820cf..b216c8a1b 100644
--- a/packages/design-system/src/themes/darkTheme/index.ts
+++ b/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,
diff --git a/packages/design-system/src/themes/index.ts b/packages/design-system/src/themes/index.ts
index 37bc97f07..a67534ce5 100644
--- a/packages/design-system/src/themes/index.ts
+++ b/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;
 }
diff --git a/packages/design-system/src/themes/lightTheme/index.ts b/packages/design-system/src/themes/lightTheme/index.ts
index 16bc86768..2996fcbe6 100644
--- a/packages/design-system/src/themes/lightTheme/index.ts
+++ b/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,