prefers-color-scheme

Author: Tom Delmas

src/css/_base.scss

@@ -21,6 +21,10 @@ body {
     font-weight: 400;
     color: $text-color;
     background-color: $background-color;
+    @media (prefers-color-scheme: dark) {
+        color: $text-color-dark;
+        background-color: $background-color-dark;
+    }
     -webkit-text-size-adjust: 100%;
 }
 .pure-g {
@@ -106,11 +110,15 @@ h2.through-line {
     color: $grey-color;
     margin-top:20px;
     a {
-        color: #2B3C69;
+        color: $link-color;
+        @media (prefers-color-scheme: dark) {
+        a {
+            color: $link-color-dark;
+          }
+        }
         text-decoration: none;
     }
     a:hover {
-        color: #2B3C69;
         text-decoration: underline;
     }
 
@@ -120,7 +128,10 @@ h2.through-line {
         content: "";
         display: table-cell;
         width: 100%;
-        border-left: 10px solid #FDFDFD;
+        border-left: 10px solid $background-color;
+        @media (prefers-color-scheme: dark) {
+            border-left: 10px solid $background-color-dark;
+        }
     }
 }
 
@@ -137,12 +148,22 @@ a {
     color: $brand-color;
     text-decoration: none;
 
+    @media (prefers-color-scheme: dark) {
+        color: lighten($brand-color,20%);
+    }
+    
     &:visited {
         color: darken($brand-color, 15%);
+        @media (prefers-color-scheme: dark) {
+            color: lighten($brand-color,10%);
+        }
     }
 
     &:hover {
         color: $text-color;
+        @media (prefers-color-scheme: dark) {
+            color: $text-color-dark;
+        }
         text-decoration: underline;
     }
 }
@@ -172,7 +193,10 @@ code {
     font-size: 15px;
     border: 1px solid $grey-color-light;
     border-radius: 3px;
-    background-color: #eef;
+    background-color: $background-code-color;
+    @media (prefers-color-scheme: dark) {
+        background-color: $background-code-color-dark;
+    }
 }
 
 code {
@@ -181,7 +205,7 @@ code {
 
 pre {
     padding: 8px 12px;
-    overflow-x: scroll;
+    overflow-x: auto;
 
     > code {
         border: 0;

src/css/_layout.scss

@@ -155,10 +155,16 @@
     a.accent {
         background: #2a7ae2;
         color: #fff;
+        @media (prefers-color-scheme: dark) {
+            color: #000;
+        }
         &:hover {
             background: #1756a9;
             border-color: #1756a9;
             color: #fff;
+            @media (prefers-color-scheme: dark) {
+                color: #000;
+            }
             text-decoration: none;
         }
     }
@@ -201,6 +207,9 @@
         display: inline-block;
         width: auto;
         background-color: rgba(254,254,254,0.5);
+        @media (prefers-color-scheme: dark) {
+            background-color: rgba(1,1,1,0.5);
+        }
         border-radius: 8px;
         padding: 10px 20px;
 
@@ -225,6 +234,12 @@
             max-height: 70px;
             width: auto;
         }
+        @media (prefers-color-scheme: dark) {
+            // force white background (some logos are transparent)
+            background-color: #fff;
+        }
+
+
     }
 }
 
@@ -249,6 +264,9 @@
 .donate-footer {
     border-top: 1px solid $grey-color-light;
     background-color: #f8f8f8;
+    @media (prefers-color-scheme: dark) {
+        background-color: #070707;
+    }
     padding: ($spacing-unit - 4px) 0;
     margin-top: 30px;
 
@@ -285,6 +303,9 @@
 .footer-col-wrapper {
     font-size: 15px;
     color: $text-color;
+    @media (prefers-color-scheme: dark) {
+        color: $text-color-dark;
+    }
     margin-left: -$spacing-unit / 2;
     @extend %clearfix;
 }

src/css/_nav.scss

@@ -12,6 +12,9 @@
 
     .page-link {
         color: $text-color;
+        @media (prefers-color-scheme: dark) {
+            color: $text-color-dark;
+        }
         line-height: $base-line-height;
 
         // Gaps between nav items, but not on the first one
@@ -57,7 +60,10 @@ a.pure-menu-link:hover {
     right:0;
     text-align: left;
     min-width: 146px;
-    background-color: #FDFDFD;
+    background-color: $background-color;
+    @media (prefers-color-scheme: dark) {
+        background-color: $background-color-dark;
+    }
 }
 
 .pure-menu-link {

src/css/main.scss

@@ -12,6 +12,8 @@ $spacing-unit:     30px;
 
 $text-color:       #000000;
 $background-color: #fdfdfd;
+$background-code-color: #eef;
+
 $brand-color:      #2a7ae2;
 $secondary-color:  #1678D3;
 
@@ -22,7 +24,13 @@ $grey-color-dark:  darken($grey-color, 25%);
 $on-palm:          730px;
 $on-laptop:        800px;
 
+$link-color: $brand-color;
 
+// prefers-color-scheme: dark
+$text-color-dark:        #fdfdfd;
+$background-color-dark:  #000000;
+$background-code-color-dark: #110;
+$link-color-dark: #1678D3;
 
 // Using media queries with like this:
 // @include media-query($palm) {