Dark mode

Gemfile.lock

@@ -37,18 +37,12 @@ GEM
     ffi (1.16.3)
     forwardable-extended (2.6.0)
     gemoji (4.1.0)
-    google-protobuf (4.26.1)
-      rake (>= 13)
-    google-protobuf (4.26.1-aarch64-linux)
-      rake (>= 13)
-    google-protobuf (4.26.1-arm64-darwin)
-      rake (>= 13)
-    google-protobuf (4.26.1-x86-linux)
-      rake (>= 13)
-    google-protobuf (4.26.1-x86_64-darwin)
-      rake (>= 13)
-    google-protobuf (4.26.1-x86_64-linux)
-      rake (>= 13)
+    google-protobuf (3.25.3)
+    google-protobuf (3.25.3-aarch64-linux)
+    google-protobuf (3.25.3-arm64-darwin)
+    google-protobuf (3.25.3-x86-linux)
+    google-protobuf (3.25.3-x86_64-darwin)
+    google-protobuf (3.25.3-x86_64-linux)
     html-pipeline (2.14.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
@@ -167,18 +161,13 @@ GEM
       i18n
     rubyzip (2.3.2)
     safe_yaml (1.0.5)
-    sass-embedded (1.74.1-aarch64-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.74.1-arm-linux-gnueabihf)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.74.1-arm64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.74.1-x86-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.74.1-x86_64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.74.1-x86_64-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.69.5)
+      google-protobuf (~> 3.23)
+      rake (>= 13.0.0)
+    sass-embedded (1.69.5-arm64-darwin)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-x86_64-darwin)
+      google-protobuf (~> 3.23)
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)

_sass/abstracts/_mixins.scss

@@ -2,7 +2,15 @@
 @use 'variables' as *;
 
 @mixin dot-grid {
-	background-image: radial-gradient($color-gridlines, 1px, transparent 1px);
 	background-size: $line-height $line-height;
 	background-position-y: math.div($line-height, 2);
+
+	@media (prefers-color-scheme: light) {
+		background-image: radial-gradient($light-mode-color-gridlines, 1px, transparent 1px);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		background-image: radial-gradient($dark-mode-color-gridlines, 1px, transparent 1px);
+
+	}
 }

_sass/abstracts/_variables.scss

@@ -1,5 +1,23 @@
+@use 'sass:color';
+
 $text-font-stack: "halyard-text-variable", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
 $display-font-stack: "halyard-display-variable", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
 $line-height: 24px;
 
-$color-gridlines: #ccc;
+$switch-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+$switch-knob-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
+
+$light-mode-color-gridlines: color(display-p3 0.9 0.09 0.2 / 0.2);
+$dark-mode-color-gridlines: color(display-p3 0.9 0.09 0.2 / 0.2);
+
+
+$light-mode-background: #fefafb;
+$light-mode-text: #090103;
+$light-mode-accent: color(display-p3 0.9 0.09 0.2);
+$light-mode-link-underline: color(display-p3 0.9 0.09 0.2);
+
+
+$dark-mode-background: #090103;
+$dark-mode-text: #fefafb;
+$dark-mode-accent: color(display-p3 0.9 0.3 0.4);
+$dark-mode-link-underline: color(display-p3 0.9 0.09 0.2 / 0.6);

_sass/base/_typography.scss

@@ -5,7 +5,6 @@ vr.$box-sizing : border-box;
 vr.$font-size : 17px;
 vr.$line-height : 1.4;
 vr.$modular-scale: perfect-fourth;
-vr.$grid-color : $color-gridlines;
 vr.$breakpoints : null;
 
 @include vr.reset();
@@ -14,7 +13,9 @@ vr.$breakpoints : null;
 	font-family: $text-font-stack;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
 	font-family: $display-font-stack; // Big headers use the display version of the font.
 }
 

_sass/components/_toggle.scss

@@ -1,4 +1,5 @@
 @use 'vendors/vertical-rhythm-reset' as vr;
+@use 'abstracts/variables' as *;
 
 $switch-width: 40px;
 $switch-height: 24px;
@@ -8,9 +9,9 @@ $transition-speed: .2s;
 $box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
 $knob-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
 $bg-color-off-light: #c6c6c6;
-$bg-color-on-light: #0072ff;
+$bg-color-on-light: $light-mode-accent;
 $bg-color-off-dark: #555;
-$bg-color-on-dark: #0072ff;
+$bg-color-on-dark: $dark-mode-accent;
 $bg-color-active-light: #bbb;
 $bg-color-active-dark: #777;
 

_sass/main.scss

@@ -19,5 +19,5 @@
 @use 'layout/header';
 @use 'layout/footer';
 
-
-@use 'components/toggle';
+@use "themes/light";
+@use "themes/dark";@use 'components/toggle';

_sass/themes/_dark.scss

@@ -0,0 +1,14 @@
+@use 'abstracts/variables' as *;
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: $dark-mode-background;
+		color: $dark-mode-text;
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+		border-bottom: 1px solid $dark-mode-link-underline;
+	}
+}

_sass/themes/_light.scss

@@ -0,0 +1,14 @@
+@use 'abstracts/variables' as *;
+
+@media (prefers-color-scheme: light) {
+	body {
+		background-color: $light-mode-background;
+		color: $light-mode-text;
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+		border-bottom: 1px solid $light-mode-link-underline;
+	}
+}