website: apply theme variables and add toggle UI

- Update _sass/_base.scss to use CSS custom properties
- Update _sass/_layout.scss to use theme variables
- Apply consistent theming across site components

This is step 3 of 3 for dark mode implementation.

Author: Siddhi Tripathi

_sass/_base.scss

@@ -17,14 +17,15 @@ dl, dd, ol, ul, figure {
  */
 body {
     font: $base-font-weight list.slash($base-font-size, $base-line-height) $base-font-family;
-    color: $text-color;
-    background-color: $background-color;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
     -webkit-text-size-adjust: 100%;
     -webkit-font-feature-settings: "kern" 1;
     -moz-font-feature-settings: "kern" 1;
     -o-font-feature-settings: "kern" 1;
     font-feature-settings: "kern" 1;
     font-kerning: normal;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 
@@ -93,15 +94,15 @@ h1, h2, h3, h4, h5, h6 {
  * Links
  */
 a {
-    color: $brand-color;
+    color: var(--link-color);
     text-decoration: none;
 
     &:visited {
-        color: darken($brand-color, 15%);
+        color: var(--link-color);
     }
 
     &:hover {
-        color: $text-color;
+        color: var(--link-hover);
         text-decoration: underline;
     }
 }
@@ -112,8 +113,8 @@ a {
  * Blockquotes
  */
 blockquote {
-    color: $grey-color;
-    border-left: 4px solid $grey-color-light;
+    color: var(--text-secondary);
+    border-left: 4px solid var(--border-color);
     padding-left: $spacing-unit * 0.5;
     font-size: 18px;
     letter-spacing: -1px;
@@ -132,9 +133,9 @@ blockquote {
 pre,
 code {
     font-size: 15px;
-    border: 1px solid $grey-color-light;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
-    background-color: #eef;
+    background-color: var(--code-bg);
 }
 
 code {
@@ -202,7 +203,7 @@ pre {
         vertical-align: middle;
 
         path {
-            fill: $grey-color;
+            fill: var(--text-secondary);
         }
     }
 }

_sass/_layout.scss

@@ -2,9 +2,11 @@
  * Site header
  */
 .site-header {
-    border-top: 5px solid $grey-color-dark;
-    border-bottom: 1px solid $grey-color-light;
+    border-top: 5px solid var(--header-bg);
+    border-bottom: 1px solid var(--border-color);
     min-height: 56px;
+    background-color: var(--header-bg);
+    color: var(--header-text);
 
     // Positioning context for the mobile navigation icon
     position: relative;
@@ -20,7 +22,7 @@
 
     &,
     &:visited {
-        color: $grey-color-dark;
+        color: var(--header-text);
     }
 }
 
@@ -33,7 +35,7 @@
     }
 
     .page-link {
-        color: $text-color;
+        color: var(--header-text);
         line-height: $base-line-height;
 
         // Gaps between nav items, but not on the last one
@@ -46,8 +48,8 @@
         position: absolute;
         top: 9px;
         right: $spacing-unit * 0.5;
-        background-color: $background-color;
-        border: 1px solid $grey-color-light;
+        background-color: var(--bg-primary);
+        border: 1px solid var(--border-color);
         border-radius: 5px;
         text-align: right;
 
@@ -65,7 +67,7 @@
                 height: 15px;
 
                 path {
-                    fill: $grey-color-dark;
+                    fill: var(--header-text);
                 }
             }
         }
@@ -98,8 +100,10 @@
  * Site footer
  */
 .site-footer {
-    border-top: 1px solid $grey-color-light;
+    border-top: 1px solid var(--border-color);
     padding: $spacing-unit 0;
+    background-color: var(--footer-bg);
+    color: var(--footer-text);
 }
 
 .footer-heading {
@@ -115,7 +119,7 @@
 
 .footer-col-wrapper {
     font-size: 15px;
-    color: $grey-color;
+    color: var(--footer-text);
     margin-left: -$spacing-unit * 0.5;
     @extend %clearfix;
 }
@@ -186,7 +190,7 @@
 
 .post-meta {
     font-size: $small-font-size;
-    color: $grey-color;
+    color: var(--text-secondary);
 }
 
 .post-link {