From 031cb971160b341c78901dd841b7fe80ee52c569 Mon Sep 17 00:00:00 2001 From: Matthew Bischoff Date: Mon, 8 Apr 2024 21:07:32 -0400 Subject: [PATCH] Dark mode --- Gemfile.lock | 37 ++++++++++++--------------------- _sass/abstracts/_mixins.scss | 10 ++++++++- _sass/abstracts/_variables.scss | 20 +++++++++++++++++- _sass/base/_typography.scss | 5 +++-- _sass/components/_toggle.scss | 5 +++-- _sass/main.scss | 4 ++-- _sass/themes/_dark.scss | 14 +++++++++++++ _sass/themes/_light.scss | 14 +++++++++++++ 8 files changed, 77 insertions(+), 32 deletions(-) create mode 100644 _sass/themes/_dark.scss create mode 100644 _sass/themes/_light.scss diff --git a/Gemfile.lock b/Gemfile.lock index b5b3543c..a931e338 100644 --- a/Gemfile.lock +++ b/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) diff --git a/_sass/abstracts/_mixins.scss b/_sass/abstracts/_mixins.scss index db80199c..5e8da294 100644 --- a/_sass/abstracts/_mixins.scss +++ b/_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); + + } } \ No newline at end of file diff --git a/_sass/abstracts/_variables.scss b/_sass/abstracts/_variables.scss index 72eab849..f3b16065 100644 --- a/_sass/abstracts/_variables.scss +++ b/_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; \ No newline at end of file +$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); \ No newline at end of file diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss index fff660c4..45d86714 100644 --- a/_sass/base/_typography.scss +++ b/_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. } diff --git a/_sass/components/_toggle.scss b/_sass/components/_toggle.scss index d1b13d5f..a3bdce45 100644 --- a/_sass/components/_toggle.scss +++ b/_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; diff --git a/_sass/main.scss b/_sass/main.scss index ede32323..664e3f8b 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -19,5 +19,5 @@ @use 'layout/header'; @use 'layout/footer'; - -@use 'components/toggle'; \ No newline at end of file +@use "themes/light"; +@use "themes/dark";@use 'components/toggle'; \ No newline at end of file diff --git a/_sass/themes/_dark.scss b/_sass/themes/_dark.scss new file mode 100644 index 00000000..ca32fffe --- /dev/null +++ b/_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; + } +} \ No newline at end of file diff --git a/_sass/themes/_light.scss b/_sass/themes/_light.scss new file mode 100644 index 00000000..ceebce18 --- /dev/null +++ b/_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; + } +} \ No newline at end of file