chore(styles): disable automatic dark scheme (#6173)

leagrdv · web-flow · commit b78c6fd8d816 · 2025-10-15T11:27:50.000+02:00
## 📄 Description

Temporarily disabled the automatic dark scheme based on the user's
preferred color scheme.
diff --git a/.changeset/bumpy-papers-stare.md 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
@@ -10,7 +10,7 @@
 
     <script src="playground.js" defer></script>
   </head>
-  <body>
+  <body data-color-scheme="light">
     <aside class="palette palette-brand p-16">
       <h1>Styles package playground</h1>
       <fieldset id="token-selects" class="mt-16">
@@ -29,6 +29,7 @@ <h1>Styles package playground</h1>
         <select name="scheme" id="scheme-select" value="light" class="mb-4">
           <option value="light">Light</option>
           <option value="dark">Dark</option>
+          <option value="">Unset</option>
         </select>
       </fieldset>
     </aside>
diff --git 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
@@ -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: ;
   }
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@swisspost/design-system-styles': patch
 +---
++
 +Disabled automatic browser detection of the dark color scheme.