Updated color-sheme mixin to also support different default modes

generic/reset/test.html

@@ -98,6 +98,14 @@ <h3 class="c-test__it">scales perfectly between 20px & 30px between desk & wall
       </div>
     </div><!-- .c-test__run -->
 
+    <h2 class="c-test__describe">Color scheme</h2>
+    <h3 class="c-test__it">Switches between dark and light modes based on user preference</h3>
+    <div class="c-test__run">
+      <div class="o-retain  o-retain--lap">
+        <p class="c-color-scheme">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias labore fugiat, placeat doloribus ea rerum debitis reiciendis molestiae in impedit dolores natus iure ducimus a odio soluta dignissimos consequuntur perspiciatis?</p>
+      </div>
+    </div><!-- .c-test__run -->
+
   </div><!-- .c-test -->
 </body>
 </html>

test/scss/settings/_theme.scss

@@ -0,0 +1,39 @@
+/*  =========================================================================
+    test.settings.theme
+/   ========================================================================= */
+
+/*  Use/Forward rules
+    `@use` or `@forward` everything you need here from other files.
+    These can include variables, mixins & other includes.
+/   ========================================================================= */
+
+@use '../../../tools/responsive';
+
+
+
+/*  Variables
+/   ========================================================================= */
+
+
+
+/*  Functions/Mixins
+/   ========================================================================= */
+
+
+
+/*  Module
+/   ========================================================================= */
+
+:root {
+  // Light theme colors
+  --color-slate: #cccccc;
+
+  @include responsive.color-scheme(dark) {
+    // Dark theme colors
+    --color-slate: #000000;
+  }
+}
+
+.c-color-scheme {
+  background-color: var(--color-slate);
+}

test/scss/test.scss

@@ -86,6 +86,13 @@
 
 
 
+/*  Theme
+/   ========================================================================= */
+
+@use 'settings/theme';
+
+
+
 /*  Utilities
     ========================================================================= */
 

tools/README.md

@@ -216,7 +216,7 @@ You can `@use` this tool in your own component like this:
 @use 'node_modules/@supple-kit/supple-css/tools/responsive';
 ```
 
-### Mixin: `responsive.dark-mode()`
+### Mixin: `responsive.color-sheme()`
 
 A little wrapper that lets you define your dark mode custom properties in a
 way that supports a toggle component.
@@ -228,7 +228,7 @@ way that supports a toggle component.
   // Light theme colors
   --color-slate: #cccccc;
 
-  @include responsive.dark-mode() {
+  @include responsive.color-sheme() {
     // Dark theme colors
     --color-slate: #000000;
   }

tools/_responsive.scss

@@ -22,7 +22,7 @@
     User preference
 /   ========================================================================= */
 
-/*  Mixin: dark-mode
+/*  Mixin: color-scheme
     A little wrapper that lets you define your dark mode custom
     properties in a way that supports a toggle component.
     Usage:
@@ -31,25 +31,32 @@
       // Light theme colors
       --color-slate: #cccccc;
 
-      @include responsive.dark-mode() {
+      @include responsive.color-scheme() {
         // Dark theme colors
         --color-slate: #000000;
       }
     }
 /   ========================================================================= */
 
-@mixin dark-mode($attribute: data-user-color-scheme) {
-  --color-mode: 'light';
+@mixin color-scheme($dark: true, $attribute: data-user-color-scheme) {
+  $mode: 'dark';
+  @if $dark == true {
+    --color-mode: 'light';
+  } @else {
+    $mode: 'light';
 
-  @media (prefers-color-scheme: dark) {
     --color-mode: 'dark';
+  }
+
+  @media (prefers-color-scheme: #{$mode}) {
+    --color-mode: '#{$mode}';
 
     &:not([#{$attribute}]) {
       @content;
     }
   }
 
-  &[#{$attribute}='dark'] {
+  &[#{$attribute}='#{$mode}'] {
     @content;
   }
 }