Add dark mode based on prefers-color-scheme CSS media

This reverts commit 0090ee61fd61ba27a8ba12e23972eb638af687ea.
danguita · Jul 25, 2023 · c69f713 · c69f713
1 parent 9561e9d
commit c69f713
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 1 deletion.
diff --git a/source/assets/stylesheets/base/_base.scss b/source/assets/stylesheets/base/_base.scss
@@ -19,6 +19,14 @@ a {
     color: $base-link-color--hover;
     outline: 0;
   }
+
+  @include dark-color-scheme {
+    color: $base-link-color--dark;
+
+    &:hover {
+      color: $base-link-color--hover--dark;
+    }
+  }
 }
 
 abbr {
@@ -31,6 +39,11 @@ blockquote {
   color: lighten($base-text-color, 25);
   margin: 0 0 $base-spacing;
   padding-left: 20px;
+
+  @include dark-color-scheme {
+    border-color: $base-border-color--dark;
+    color: $base-text-color--dark;
+  }
 }
 
 body {
@@ -43,6 +56,11 @@ body {
   overflow-x: hidden;
   padding-top: 15px;
   border-top: 5px solid $color-green;
+
+  @include dark-color-scheme {
+    background-color: $base-background-color--dark;
+    color: $base-text-color--dark;
+  }
 }
 
 main {
@@ -75,6 +93,11 @@ cite {
   &:before {
     content: '\2014 \00A0';
   }
+
+  @include dark-color-scheme {
+    border-color: $base-border-color--dark;
+    color: $base-text-color--dark;
+  }
 }
 
 code,
@@ -88,6 +111,10 @@ code {
   background: $code-background-color;
   border-radius: 3px;
   padding: 3px 6px;
+
+  @include dark-color-scheme {
+    background: $code-background-color--dark;
+  }
 }
 
 h1,
@@ -101,6 +128,10 @@ h6 {
   font-weight: bold;
   line-height: $heading-line-height;
   margin: 0 0 $base-spacing;
+
+  @include dark-color-scheme {
+    color: $heading-color--dark;
+  }
 }
 
 h1 {

diff --git a/source/assets/stylesheets/base/_mixins.scss b/source/assets/stylesheets/base/_mixins.scss
@@ -15,3 +15,9 @@
     @content;
   }
 }
+
+@mixin dark-color-scheme() {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
diff --git a/source/assets/stylesheets/base/_syntax.scss b/source/assets/stylesheets/base/_syntax.scss
@@ -8,6 +8,10 @@ $block: '.highlight > .highlight';
   padding: 15px;
   white-space: pre;
   word-wrap: normal;
+
+  @include dark-color-scheme {
+    background: $code-background-color--dark;
+  }
 }
 
 #{$block} code {

diff --git a/source/assets/stylesheets/base/_variables.scss b/source/assets/stylesheets/base/_variables.scss
@@ -17,13 +17,24 @@ $font-family-sans-serif: "Lato", sans-serif;
 
 // Base: Default color scheme
 $base-background-color: $color-white;
+$base-contrast-background-color: $color-blue-grey--dark;
 $base-border-color: $color-grey--light;
 $base-text-color: lighten($color-blue-grey--dark, 10);
 $base-link-color: $color-green;
 $base-link-color--hover: $color-green--dark;
 $heading-color: $color-blue-grey--dark;
 $code-background-color: #f7f7f7;
 
+// Base: Dark color scheme
+$base-background-color--dark: #1d2021;
+$base-contrast-background-color--dark: lighten($base-background-color--dark, 5);
+$base-border-color--dark: $color-grey--dark;
+$base-text-color--dark: $color-grey--light;
+$base-link-color--dark: $color-green;
+$base-link-color--hover--dark: $color-green--dark;
+$heading-color--dark: $color-blue-grey--light;
+$code-background-color--dark: $color-blue-grey--dark;
+
 $base-font-family: $font-family-sans-serif;
 $base-font-size: 16px;
 $base-line-height: 1.5;

diff --git a/source/assets/stylesheets/layout/_footer.scss b/source/assets/stylesheets/layout/_footer.scss
@@ -15,6 +15,10 @@ $block: '.footer';
       color: $color-green;
     }
   }
+
+  @include dark-color-scheme {
+    border-color: $color-grey--dark;
+  }
 }
 
 #{$block}__about {

diff --git a/source/assets/stylesheets/modules/_clients.scss b/source/assets/stylesheets/modules/_clients.scss
@@ -26,4 +26,10 @@ $block: '.clients';
       border-width: 1px;
     }
   }
+
+  #{$subblock}__image {
+    @include dark-color-scheme {
+      filter: drop-shadow(0 0 5px $base-background-color--dark);
+    }
+  }
 }
diff --git a/source/assets/stylesheets/modules/_home.scss b/source/assets/stylesheets/modules/_home.scss
@@ -23,8 +23,12 @@ $block: '.home';
   margin-top: 10px;
   font-family: $font-family-monospace;
   font-size: 1rem;
-  background-color: $color-blue-grey--dark;
+  background-color: $base-contrast-background-color;
   color: $color-white;
+
+  @include dark-color-scheme {
+    background-color: $base-contrast-background-color--dark;
+  }
 }
 
 @include mq-large {
@@ -66,6 +70,14 @@ $block: '.home';
       &:hover {
         color: $color-blue-grey--dark;
       }
+
+      @include dark-color-scheme {
+        color: $color-blue-grey--light;
+
+        &:hover {
+          color: $color-blue-grey--light;
+        }
+      }
     }
   }
 }
@@ -74,6 +86,10 @@ $block: '.home';
   position: relative;
   padding: 30px 0 10px;
   background-color: $color-grey--light;
+
+  @include dark-color-scheme {
+    background-color: $base-contrast-background-color--dark;
+  }
 }
 
 #{$block}__latest-articles {