add dark mode

Author: ndd7xv

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 {

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,49 @@
 // 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;
-
-$grey-colour:       #828282;
+// Our variables
+$text-color: var(--text-color);
+$background-color: var(--background-color);
+$brand-color: var(--brand-color);
+$brand-color-visited: var(--brand-color-visited);
+$grey-colour: #828282;
 $grey-colour-light: lighten($grey-colour, 40%);
-$grey-colour-dark:  darken($grey-colour, 25%);
+$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;
+
+// Dark theme colors
+$text-color-dt:          #f0f0f0;
+$background-color-dt:    #353535;
+$brand-color-dt:         #d2991d;
+$brand-color-visited-dt: #9a7015;
+
+:root {
+    --text-color:       #{$text-color-lt};
+    --background-color: #{$background-color-lt};
+    --brand-color:      #{$brand-color-lt};
+    --brand-color-visited:  #{$brand-color-visited-lt};
+}
+
+@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};
+    }
+}
 
 $on-palm:          600px;
 $on-laptop:        800px;