From 94dbb93cb421b62e2d1c1618a71e2a04498488f2 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 4 Sep 2025 15:22:23 +0200 Subject: [PATCH 1/3] chore(styles): disable automatic dark scheme --- .changeset/bumpy-papers-stare.md | 5 +++++ packages/styles/index.html | 1 + packages/styles/playground.js | 6 +++++- packages/styles/src/tokens/_schemes-static.scss | 2 +- 4 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 .changeset/bumpy-papers-stare.md diff --git a/.changeset/bumpy-papers-stare.md b/.changeset/bumpy-papers-stare.md new file mode 100644 index 0000000000..cfe5933cf1 --- /dev/null +++ b/.changeset/bumpy-papers-stare.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Disabled automatic browser detection of the dark color scheme. diff --git a/packages/styles/index.html b/packages/styles/index.html index 6a85467107..8436062692 100644 --- a/packages/styles/index.html +++ b/packages/styles/index.html @@ -29,6 +29,7 @@

Styles package playground

diff --git a/packages/styles/playground.js b/packages/styles/playground.js index 26b3d592ff..5d2e065c83 100644 --- a/packages/styles/playground.js +++ b/packages/styles/playground.js @@ -19,5 +19,9 @@ document document.getElementById('theme-select').addEventListener('change', handleThemeAppearanceChange); document.getElementById('scheme-select').addEventListener('change', e => { - document.body.setAttribute('data-color-scheme', e.target.value); + if (e.target.value) { + document.body.setAttribute('data-color-scheme', e.target.value); + } else { + document.body.removeAttribute('data-color-scheme'); + } }); diff --git a/packages/styles/src/tokens/_schemes-static.scss b/packages/styles/src/tokens/_schemes-static.scss index 1dcdf6a7ad..6825b53c2e 100644 --- a/packages/styles/src/tokens/_schemes-static.scss +++ b/packages/styles/src/tokens/_schemes-static.scss @@ -10,7 +10,7 @@ // prefered root color-scheme :root { @include supports.light-dark(true) { - color-scheme: light dark; + color-scheme: light; } @media (prefers-color-scheme: light) { From a74fb4db691479e9e3c3bb7598722ae546ff92d0 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 11 Sep 2025 13:16:28 +0200 Subject: [PATCH 2/3] update preview-body --- packages/documentation/.storybook/preview-body.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/.storybook/preview-body.html b/packages/documentation/.storybook/preview-body.html index a923592bb3..e2925162e2 100644 --- a/packages/documentation/.storybook/preview-body.html +++ b/packages/documentation/.storybook/preview-body.html @@ -1,4 +1,4 @@ - + From a56c243445d5c52b312e9001853cf2ca6ace3acf Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 11 Sep 2025 16:19:15 +0200 Subject: [PATCH 3/3] adress PR comments --- packages/documentation/.storybook/preview-body.html | 2 +- packages/styles/src/tokens/_schemes-static.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/documentation/.storybook/preview-body.html b/packages/documentation/.storybook/preview-body.html index e2925162e2..a923592bb3 100644 --- a/packages/documentation/.storybook/preview-body.html +++ b/packages/documentation/.storybook/preview-body.html @@ -1,4 +1,4 @@ - + diff --git a/packages/styles/src/tokens/_schemes-static.scss b/packages/styles/src/tokens/_schemes-static.scss index 6825b53c2e..eaf83b0736 100644 --- a/packages/styles/src/tokens/_schemes-static.scss +++ b/packages/styles/src/tokens/_schemes-static.scss @@ -25,7 +25,7 @@ @include schemes.dark-variables; @include supports.light-dark(false) { - --post-fallback-prefers-light: initial; + --post-fallback-prefers-light: ; } } } @@ -44,6 +44,7 @@ } @include supports.light-dark(false) { + // this should be set back to "initial" once we allow for automatic dark scheme again --post-fallback-prefers-light: ; } } @@ -57,7 +58,8 @@ } @include supports.light-dark(false) { - --post-fallback-prefers-light: initial; + // this should be set back to "initial" once we allow for automatic dark scheme again + --post-fallback-prefers-light: ; } } }