From c67988f1fab424bf564fc2b257d28d772f73887d Mon Sep 17 00:00:00 2001 From: Ayoub Hidri Date: Fri, 20 Mar 2026 11:31:56 +0100 Subject: [PATCH 1/2] feat: use CSS color-scheme to improve dark theme Add the color-scheme CSS property to the html element based on the active theme. This makes native browser UI elements (scrollbars, form controls, selection highlights) render in the appropriate color scheme. Closes strapi/design-system#947 --- packages/design-system/src/styles/global.ts | 1 + .../design-system/src/themes/__tests__/extendTheme.test.ts | 6 ++++-- packages/design-system/src/themes/color-scheme.ts | 6 ++++++ packages/design-system/src/themes/darkTheme/index.ts | 2 ++ packages/design-system/src/themes/index.ts | 3 +++ packages/design-system/src/themes/lightTheme/index.ts | 2 ++ 6 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 packages/design-system/src/themes/color-scheme.ts 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..23dbe73ee --- /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..cd5897623 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..937f1be84 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, From fd9b3e28cfe0845daf932115b12c9d9ad980a016 Mon Sep 17 00:00:00 2001 From: Ayoub Hidri Date: Fri, 20 Mar 2026 11:43:39 +0100 Subject: [PATCH 2/2] chore: add changeset and use uppercase keys for COLOR_SCHEMES --- .changeset/color-scheme-dark-theme.md | 5 +++++ packages/design-system/src/themes/color-scheme.ts | 4 ++-- packages/design-system/src/themes/darkTheme/index.ts | 2 +- packages/design-system/src/themes/lightTheme/index.ts | 2 +- 4 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/color-scheme-dark-theme.md 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/themes/color-scheme.ts b/packages/design-system/src/themes/color-scheme.ts index 23dbe73ee..bec81fafa 100644 --- a/packages/design-system/src/themes/color-scheme.ts +++ b/packages/design-system/src/themes/color-scheme.ts @@ -1,6 +1,6 @@ export const COLOR_SCHEMES = { - light: 'light', - dark: 'dark', + 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 cd5897623..b216c8a1b 100644 --- a/packages/design-system/src/themes/darkTheme/index.ts +++ b/packages/design-system/src/themes/darkTheme/index.ts @@ -7,7 +7,7 @@ import { darkColorTokenObject } from './dark-colors'; import { darkShadowTokenObject } from './dark-shadows'; export const darkTheme: DefaultTheme = { - colorScheme: COLOR_SCHEMES.dark, + colorScheme: COLOR_SCHEMES.DARK, colors: darkColorTokenObject.color, shadows: darkShadowTokenObject.shadow, ...commonTheme, diff --git a/packages/design-system/src/themes/lightTheme/index.ts b/packages/design-system/src/themes/lightTheme/index.ts index 937f1be84..2996fcbe6 100644 --- a/packages/design-system/src/themes/lightTheme/index.ts +++ b/packages/design-system/src/themes/lightTheme/index.ts @@ -7,7 +7,7 @@ import { lightColorTokenObject } from './light-colors'; import { lightShadowTokenObject } from './light-shadows'; export const lightTheme: DefaultTheme = { - colorScheme: COLOR_SCHEMES.light, + colorScheme: COLOR_SCHEMES.LIGHT, colors: lightColorTokenObject.color, shadows: lightShadowTokenObject.shadow, ...commonTheme,