Move all colours to CSS variables

Author: Nemo157

templates/style/_navbar.scss

@@ -5,15 +5,15 @@ div.nav-container {
     // Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
     z-index: 999;
     height: $top-navbar-height;
-    border-bottom: 1px solid $color-border;
-    background-color: #fff;
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-background);
     left: 0;
     right: 0;
     top: 0;
     position: fixed;
 
     li {
-        border-left: 1px solid $color-border;
+        border-left: 1px solid var(--color-border);
     }
 
     .pure-menu-has-children > .pure-menu-link:after {
@@ -25,7 +25,7 @@ div.nav-container {
         font-weight: 400;
 
         &:hover {
-            color: $color-standard;
+            color: var(--color-standard);
             background-color: inherit;
         }
     }
@@ -41,7 +41,7 @@ div.nav-container {
             float: right;
             max-width: 150px;
             display: none;
-            border-left: 1px solid $color-border;
+            border-left: 1px solid var(--color-border);
 
             @media #{$media-sm} {
                 display: block;
@@ -52,7 +52,7 @@ div.nav-container {
             }
 
             label {
-                color: #777;
+                color: var(--color-navbar-standard);
                 cursor: pointer;
                 padding-left: 0.5rem;
                 font-size: 0.8em;
@@ -63,7 +63,7 @@ div.nav-container {
                 margin: 0 1em 0 0;
                 font-size: 0.8em;
                 box-shadow: none;
-                background-color: #fff;
+                background-color: var(--color-background);
                 height: 31px;
             }
         }
@@ -74,7 +74,7 @@ div.nav-container {
     }
 
     .pure-menu-children {
-        border: 1px solid $color-border;
+        border: 1px solid var(--color-border);
         border-radius: 0 0 2px 2px;
         margin-left: -1px;
 
@@ -86,19 +86,19 @@ div.nav-container {
     // used for latest version warning
     .warn,
     .warn:hover {
-        color: $color-type;
+        color: var(--color-warn);
     }
 
     a.warn:hover {
-        color: darken($color-type, 10%);
+        color: var(--color-warn-hover);
     }
 
     // used for global alerts
     .error {
-        color: $color-red;
+        color: var(--color-error);
 
         &:hover {
-            color: darken($color-red, 10%);
+            color: var(--color-error-hover);
         }
     }
 
@@ -142,7 +142,7 @@ div.nav-container {
         p.description {
             font-family: $font-family-sans;
             font-size: 0.8em;
-            color: #777; // color from pure
+            color: var(--color-navbar-standard);
             padding: 0.5em 1em;
             margin: 0;
         }
@@ -152,7 +152,7 @@ div.nav-container {
         }
 
         div.right-border {
-            border-right: 1px solid $color-border;
+            border-right: 1px solid var(--color-border);
         }
 
         a.pure-menu-link {

templates/style/_themes.scss

@@ -0,0 +1,22 @@
+// Standard white theme
+body {
+  --color-background-code: #f5f5f5;
+  --color-background: #fff;
+  --color-border-light: lighten(#ddd, 5%);
+  --color-border: #ddd;
+  --color-doc-link-background: #333;
+  --color-doc-link-hover: #3061f3;
+  --color-error-hover: darken(#d93d3d, 10%);
+  --color-error: #d93d3d;
+  --color-macro: #068000;
+  --color-menu-border: #cdcdcd;
+  --color-menu-header-background: #e0e0e0;
+  --color-navbar-standard: #777;
+  --color-standard: #000;
+  --color-struct: #df3600;
+  --color-type: #e57300;
+  --color-url: #4d76ae;
+  --color-warn-background: lighten(#e57300, 45%);
+  --color-warn-hover: darken(#e57300, 10%);
+  --color-warn: #e57300;
+}

templates/style/_utils.scss

@@ -6,20 +6,20 @@ div {
     .info {
         font-family: $font-family-sans;
         border-radius: 4px;
-        background-color: $color-background-code;
+        background-color: var(--color-background-code);
         padding: 0.4em 1em;
         text-align: center;
         margin-bottom: 10px;
 
         a {
-            color: $color-url;
+            color: var(--color-url);
             text-decoration: underline;
         }
     }
 
     .warning {
         @extend .info;
 
-        background-color: lighten($color-type, 45%);
+        background-color: var(--color-warn-background);
     }
 }

templates/style/_vars.scss

@@ -5,22 +5,6 @@ $font-family-sans: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-serif: "Source Serif Pro", Georgia, Times, "Times New Roman", serif;
 $font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", Inconsolata, monospace;
 
-// Colors
-$color-standard: #000;           // pure black
-$color-url: #4d76ae;             // blue
-$color-macro: #068000;           // green
-$color-struct: #df3600;          // red
-$color-enum: #5e9766;            // light green
-$color-type: #e57300;            // orange
-$color-keyword: #8959A8;         // purple
-$color-string: #718C00;          // greenish
-$color-macro-in-code: #3E999F;   // blueish
-$color-lifetime-incode: #B76514; // orangish
-$color-comment-in-code: #8E908C; // light gray
-$color-background-code: #F5F5F5; // lighter gray
-$color-border: #ddd;             // gray
-$color-red: #d93d3d;             // red
-
 // Sizes
 $top-navbar-height: 32px; // height of the floating top navbar