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..602d839ea8 100644
--- a/packages/styles/index.html
+++ b/packages/styles/index.html
@@ -10,7 +10,7 @@
-
+
diff --git a/packages/styles/playground.js b/packages/styles/playground.js
index 26b3d592ff..b4feb54a6a 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.dataset.colorScheme = e.target.value;
+ } else {
+ delete document.body.dataset.colorScheme;
+ }
});
diff --git a/packages/styles/src/tokens/_schemes-static.scss b/packages/styles/src/tokens/_schemes-static.scss
index 1dcdf6a7ad..1533f14c0a 100644
--- a/packages/styles/src/tokens/_schemes-static.scss
+++ b/packages/styles/src/tokens/_schemes-static.scss
@@ -10,23 +10,18 @@
// prefered root color-scheme
:root {
@include supports.light-dark(true) {
- color-scheme: light dark;
+ color-scheme: light;
}
- @media (prefers-color-scheme: light) {
- @include schemes.light-variables;
-
- @include supports.light-dark(false) {
- --post-fallback-prefers-light: ;
- }
- }
+ // This sets the light theme by default and does not take
+ // into account user's preferred colors
+ // Put back the @media (prefers-color-scheme: light/dark)
+ // queries to define which tokens to use depending on user's
+ // preferences once we allow for automatic dark scheme again
+ @include schemes.light-variables;
- @media (prefers-color-scheme: dark) {
- @include schemes.dark-variables;
-
- @include supports.light-dark(false) {
- --post-fallback-prefers-light: initial;
- }
+ @include supports.light-dark(false) {
+ --post-fallback-prefers-light: ;
}
}