fix <code> and <pre> for dark theme

makes code blocks have light text on dark background and made it so that pre blocks (seen in quote of the week at https://this-week-in-rust.org/blog/2017/06/20/this-week-in-rust-187/) also have text colors that correspond to their theme (instead of boostrap defaults)

Author: ndd7xv

themes/rusted/static/css/_base.scss

@@ -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/main.scss

@@ -11,31 +11,41 @@ $base-line-height: 1.5;
 $spacing-unit:     30px;
 
 // 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%);
+$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;
 
 :root {
-    --text-color:       #{$text-color-lt};
-    --background-color: #{$background-color-lt};
-    --brand-color:      #{$brand-color-lt};
+    --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) {
@@ -44,6 +54,9 @@ $brand-color-visited-dt: #9a7015;
         --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};
     }
 }