Implement dark mode without using CSS variables.

[homepage.git] / lib / colourmap.scss

diff --git a/lib/colourmap.scss b/lib/colourmap.scss
index 62468d93a4917ccdef06b231cdf0387d29f46c91..e4d8d65299596c18a40bf12a337f4316821e9ee0 100644 (file)
--- a/lib/colourmap.scss
+++ b/lib/colourmap.scss
@@ -38,43 +38,30 @@ $_colourpropmap:
 //
 //   @include defcolours($bg: white black, $fg: black white);
 @mixin defcolours($args...) {
-    :root {
-        @each $colour, $list in keywords($args) {
-            $colourmap: map-merge($colourmap, ($colour: $list)) !global;
-            @if length($list) > 1 {
-                #{--colour- + $colour}: nth($list, 1);
-            }
-        }
-    }
-    @media (prefers-color-scheme: dark) {
-        :root {
-            @each $colour, $list in keywords($args) {
-                @if length($list) > 1 {
-                    #{--colour- + $colour}: nth($list, 2);
-                }
-            }
-        }
+    @each $colour, $list in keywords($args) {
+        $colourmap: map-merge($colourmap, ($colour: $list)) !global;
     }
 }
 
-// For the given previously-defined colour name, returns its value from
-// primary (light) colour scheme.
+// Obtain the colour value for a previously-defined colour name.  By
+// default, its primary (light) colour value is returned; this can be
+// changed with the $num keyword parameter.
 //
 // The $pre and $post keyword arguments may be used to supplement the
 // result with additional tokens either before or after the colour
 // value, respectively, as might be used for combined properties
 // such as border, outline, etc.
-@function getcolour($colour, $pre: (), $post: ()) {
-    @return join(append($pre, nth(map-get($colourmap, $colour), 1)), $post);
+@function getcolour($colour, $pre: (), $post: (), $num: 1) {
+    @return join(append($pre, nth(map-get($colourmap, $colour), $num)), $post);
 }
 
-@mixin usecolour_var_($prop, $colour, $pre: (), $post: ()) {
+@mixin usecolour_dark_($prop, $colour, $pre: (), $post: ()) {
     @if (length(map-get($colourmap, $colour)) > 1) {
         $transprop: map-get($_colourpropmap, $prop);
         @if $transprop {
-            #{$transprop}: var(--colour- + $colour)
+            #{$transprop}: getcolour($colour, $num: 2)
         } @else {
-            #{$prop}: join(append($pre, var(--colour- + $colour)), $post);
+            #{$prop}: getcolour($colour, $pre, $post, 2);
         }
     }
 }
@@ -93,7 +80,11 @@ $_colourpropmap:
 //   @include usecolour(border, fg, $pre: solid 1px);
 @mixin usecolour($prop, $colour, $pre: (), $post: ()) {
     #{$prop}: getcolour($colour, $pre, $post);
-    @at-root & { @include usecolour_var_($prop, $colour, $pre, $post); }
+    @at-root {
+        @media (prefers-color-scheme: dark) {
+            & { @include usecolour_dark_($prop, $colour, $pre, $post); }
+        }
+    }
 }
 
 // Convenience helper to assign multiple colour properties at once, for
@@ -110,9 +101,13 @@ $_colourpropmap:
     @each $prop, $colour in keywords($args) {
         #{$prop}: getcolour($colour);
     }
-    @at-root & {
-        @each $prop, $colour in keywords($args) {
-            @include usecolour_var_($prop, $colour);
+    @at-root {
+        @media (prefers-color-scheme: dark) {
+            & {
+                @each $prop, $colour in keywords($args) {
+                    @include usecolour_dark_($prop, $colour);
+                }
+            }
         }
     }
 }