Merge pull request #3857 from ndd7xv/dark-mode

Draft: Add a Dark Mode

Author: nellshamrell

themes/rusted/static/css/_base.scss

@@ -92,7 +92,7 @@ a {
     text-decoration: none;
 
     &:visited {
-        color: darken($brand-color, 15%);
+        color: $brand-color-visited;
     }
 
     &:hover {
@@ -126,9 +126,9 @@ blockquote {
 pre,
 code {
     font-size: 15px;
-    border: 1px solid $grey-colour-light;
+    border: 1px solid $code-border-color;
     border-radius: 3px;
-    background-color: #eef;
+    background-color: $code-bg-color;
 }
 
 code {
@@ -138,6 +138,7 @@ code {
 pre {
     padding: 8px 12px;
     overflow-x: scroll;
+    color: $pre-color;
 
     > code {
         border: 0;

themes/rusted/static/css/_homepage.scss

@@ -8,5 +8,6 @@
 }
 
 .subtext {
-    
+    margin-left: 50px;
+    margin-right: 50px;
 }

themes/rusted/static/css/_layout.scss

@@ -17,9 +17,9 @@
     letter-spacing: -1px;
     margin-bottom: 0;
 
-    &,
+    color: $text-color;
     &:visited {
-        color: $grey-colour-dark;
+        color: $text-color;
     }
 }
 

themes/rusted/static/css/main.scss

@@ -3,21 +3,62 @@
 // Bootstrap variables
 $screen-xs-max: 768px !default;
 
-// Our variables
 $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $base-font-size:   16px;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
 
 $spacing-unit:     30px;
 
-$text-color:       #444;
-$background-color: #fdfdfd;
-$brand-color:      #2a7ae2;
+// Our variables
+$text-color:            var(--text-color);
+$background-color:      var(--background-color);
+$brand-color:           var(--brand-color);
+$brand-color-visited:   var(--brand-color-visited);
+$pre-color:             var(--pre-color);
+$code-bg-color:         var(--code-bg-color);
+$code-border-color:     var(--code-border-color);
+$grey-colour:           #828282;
+$grey-colour-light:     lighten($grey-colour, 40%);
+$grey-colour-dark:      darken($grey-colour, 25%);
+
+// Light theme colors
+$text-color-lt:          #444;
+$background-color-lt:    #fdfdfd;
+$brand-color-lt:         #2a7ae2;
+$brand-color-visited-lt: #1756a9;
+$pre-color-lt:           #333;
+$code-bg-color-lt:       #eef;
+
+// Dark theme colors
+$text-color-dt:          #f0f0f0;
+$background-color-dt:    #353535;
+$brand-color-dt:         #d2991d;
+$brand-color-visited-dt: #9a7015;
+$pre-color-dt:           #aeaeae;
+$code-bg-color-dt:       #2a2a2a;
 
-$grey-colour:       #828282;
-$grey-colour-light: lighten($grey-colour, 40%);
-$grey-colour-dark:  darken($grey-colour, 25%);
+:root {
+    --text-color:           #{$text-color-lt};
+    --background-color:     #{$background-color-lt};
+    --brand-color:          #{$brand-color-lt};
+    --brand-color-visited:  #{$brand-color-visited-lt};
+    --pre-color:            #{$pre-color-lt};
+    --code-bg-color:        #{$code-bg-color-lt};
+    --code-border-color:    #{$grey-colour-light};
+}
+
+@media(prefers-color-scheme: dark) {
+    :root {
+        --text-color:           #{$text-color-dt};
+        --background-color:     #{$background-color-dt};
+        --brand-color:          #{$brand-color-dt};
+        --brand-color-visited:  #{$brand-color-visited-dt};
+        --pre-color:            #{$pre-color-dt};
+        --code-bg-color:        #{$code-bg-color-dt};
+        --code-border-color:    #{$code-bg-color-dt};
+    }
+}
 
 $on-palm:          600px;
 $on-laptop:        800px;

themes/rusted/templates/index.html

@@ -4,7 +4,7 @@
 <div class="row">
   <div class="col-md-12 text-center">
     <h1 class="pitch">Handpicked Rust updates, <br /> delivered to your inbox.</h1>
-    <p class="subtext">Stay up to date with events, learning resources, and recent developments in Rust community.</p>
+    <p class="subtext">Stay up to date with events, learning resources, and recent developments in the Rust community.</p>
   </div>
 </div>
 {% include "_subscribe-form.html" %}