chore(styles): disable automatic dark scheme

.changeset/bumpy-papers-stare.md

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

packages/styles/index.html

@@ -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>

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');
+  }
 });

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) {
@@ -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: ;
     }
   }
 }