diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
new file mode 100644
index 00000000000..9da91ffc371
--- /dev/null
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -0,0 +1,117 @@
+// This file maps all SCSS color variables to CSS custom properties.
+// It is compiled to CSS separately from the rest of the app.
+// The source variables come from color_transformations.scss and variables.scss
+
+@import "common/foundation/variables";
+
+// this converts HEX colors to RGBs so they can be used in vanilla CSS
+// i.e.: rgba(var(--primary-low-rgb), 0.5)
+//
+// Note that "rgba(var(--primary-low), 0.5)" will not work,
+// because --primary-low has a HEX color value
+
+@function hexToRGB($hex) {
+  @return red($hex), green($hex), blue($hex);
+}
+
+:root {
+  --primary: #{$primary};
+  --secondary: #{$secondary};
+  --tertiary: #{$tertiary};
+  --quaternary: #{$quaternary};
+  --header_background: #{$header_background};
+  --header_primary: #{$header_primary};
+  --highlight: #{$highlight};
+  --danger: #{$danger};
+  --success: #{$success};
+  --love: #{$love};
+
+  --primary-rgb: #{hexToRGB($primary)};
+  --primary-low-rgb: #{hexToRGB($primary-low)};
+  --secondary-rgb: #{hexToRGB($secondary)};
+  --header_background-rgb: #{hexToRGB($header_background)};
+
+  --primary-very-low: #{$primary-very-low};
+  --primary-low: #{$primary-low};
+  --primary-low-mid: #{$primary-low-mid};
+  --primary-medium: #{$primary-medium};
+  --primary-high: #{$primary-high};
+  --primary-very-high: #{$primary-very-high};
+
+  --header_primary-low: #{$header_primary-low};
+  --header_primary-low-mid: #{$header_primary-low-mid};
+
+  --header_primary-medium: #{$header_primary-medium};
+  --header_primary-high: #{$header_primary-high};
+  --header_primary-very-high: #{$header_primary-very-high};
+
+  --secondary-low: #{$secondary-low};
+  --secondary-medium: #{$secondary-medium};
+  --secondary-high: #{$secondary-high};
+  --secondary-very-high: #{$secondary-very-high};
+
+  --tertiary-low: #{$tertiary-low};
+  --tertiary-medium: #{$tertiary-medium};
+  --tertiary-high: #{$tertiary-high};
+  --tertiary-hover: #{$tertiary-hover};
+
+  --quaternary-low: #{$quaternary-low};
+
+  --highlight-low: #{$highlight-low};
+  --highlight-medium: #{$highlight-medium};
+  --highlight-high: #{$highlight-high};
+
+  --danger-low: #{$danger-low};
+  --danger-low-mid: #{$danger-low-mid};
+  --danger-medium: #{$danger-medium};
+  --danger-hover: #{$danger-hover};
+
+  --success-low: #{$success-low};
+  --success-medium: #{$success-medium};
+  --success-hover: #{$success-hover};
+
+  --love-low: #{$love-low};
+  --wiki: #{$wiki};
+
+  --blend-primary-secondary-5: #{$blend-primary-secondary-5};
+  --primary-med-or-secondary-med: #{$primary-med-or-secondary-med};
+  --primary-med-or-secondary-high: #{$primary-med-or-secondary-high};
+  --primary-high-or-secondary-low: #{$primary-high-or-secondary-low};
+  --primary-low-mid-or-secondary-high: #{$primary-low-mid-or-secondary-high};
+  --primary-low-mid-or-secondary-low: #{$primary-low-mid-or-secondary-low};
+  --primary-or-primary-low-mid: #{$primary-or-primary-low-mid};
+  --highlight-low-or-medium: #{$highlight-low-or-medium};
+  --tertiary-low-or-tertiary-high: #{$tertiary-low-or-tertiary-high};
+  --tertiary-med-or-tertiary: #{$tertiary-med-or-tertiary};
+  --secondary-or-primary: #{$secondary-or-primary};
+  --tertiary-or-white: #{$tertiary-or-white};
+  --facebook-or-white: #{$facebook-or-white};
+  --twitter-or-white: #{$twitter-or-white};
+
+  --hljs-comment: #{$hljs-comment};
+  --hljs-number: #{$hljs-number};
+  --hljs-string: #{$hljs-string};
+  --hljs-literal: #{$hljs-literal};
+  --hljs-tag: #{$hljs-tag};
+  --hljs-attribute: #{$hljs-attribute};
+  --hljs-symbol: #{$hljs-symbol};
+  --hljs-bg: #{$hljs-bg};
+
+  --google: #{$google};
+  --google-hover: #{$google-hover};
+  --instagram: #{$instagram};
+  --instagram-hover: #{$instagram-hover};
+  --facebook: #{$facebook};
+  --facebook-hover: #{$facebook-hover};
+  --cas: #{$cas};
+  --twitter: #{$twitter};
+  --twitter-hover: #{$twitter-hover};
+  --github: #{$github};
+  --github-hover: #{$github-hover};
+  --discord: #{$discord};
+  --discord-hover: #{$discord-hover};
+
+  --gold: #{$gold};
+  --silver: #{$silver};
+  --bronze: #{$bronze};
+}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 208e9127b36..0feef6ca3b8 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -59,8 +59,8 @@ $mobile-breakpoint: 700px;
       height: 100%;
       background: linear-gradient(
         to right,
-        rgba($secondary, 1) 0%,
-        rgba($secondary, 0) 100%
+        rgba(var(--secondary-rgb), 1) 0%,
+        rgba(var(--secondary-rgb), 0) 100%
       );
     }
     &:after {
@@ -71,8 +71,8 @@ $mobile-breakpoint: 700px;
       height: 100%;
       background: linear-gradient(
         to right,
-        rgba($secondary, 0) 0%,
-        rgba($secondary, 1) 100%
+        rgba(var(--secondary-rgb), 0) 0%,
+        rgba(var(--secondary-rgb), 1) 100%
       );
     }
   }
@@ -100,10 +100,10 @@ $mobile-breakpoint: 700px;
     padding: 8px;
   }
   tr:hover {
-    background-color: $primary-very-low;
+    background-color: var(--primary-very-low);
   }
   tr.selected {
-    background-color: $primary-low;
+    background-color: var(--primary-low);
   }
   .filters input {
     margin-bottom: 0;
@@ -134,7 +134,7 @@ $mobile-breakpoint: 700px;
     }
     .label {
       display: block;
-      color: $primary-medium;
+      color: var(--primary-medium);
       font-size: $font-down-1;
       margin: 0.5em 0 0.15em 0;
     }
@@ -213,10 +213,10 @@ $mobile-breakpoint: 700px;
   }
   .site-text {
     cursor: pointer;
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     margin-bottom: 0.5em;
     &.overridden {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium);
     }
     h3 {
       font-weight: normal;
@@ -236,7 +236,7 @@ $mobile-breakpoint: 700px;
       @include breakpoint(mobile-extra-large) {
         word-wrap: break-word;
       }
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
   .edit-site-text {
@@ -258,7 +258,7 @@ $mobile-breakpoint: 700px;
     }
   }
   p.warning {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -269,10 +269,10 @@ $mobile-breakpoint: 700px;
     font-size: $font-down-1;
     float: right;
     margin-right: 10px;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     padding: 2px 5px;
     border-radius: 5px;
-    color: $primary;
+    color: var(--primary);
   }
 }
 
@@ -324,11 +324,11 @@ $mobile-breakpoint: 700px;
       display: inline-block;
       .bar {
         margin-top: 5px;
-        background-color: $tertiary;
+        background-color: var(--tertiary);
         display: inline-block;
         text-align: right;
         padding-right: 8px;
-        color: $secondary;
+        color: var(--secondary);
       }
     }
   }
@@ -340,7 +340,7 @@ $mobile-breakpoint: 700px;
 
 .admin-users .users-list {
   .username .d-icon {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -354,7 +354,7 @@ $mobile-breakpoint: 700px;
     z-index: z("dropdown");
     box-shadow: shadow("card");
     margin-top: -2px;
-    background-color: $secondary;
+    background-color: var(--secondary);
     padding: 12px 12px 5px;
     .powered-by {
       font-size: $font-down-1;
@@ -438,14 +438,14 @@ $mobile-breakpoint: 700px;
 
 .admin-controls {
   display: flex;
-  background-color: $primary-low;
+  background-color: var(--primary-low);
   align-items: center;
 
   .admin-actions {
     margin-left: auto;
   }
   nav {
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     width: 100%;
   }
   nav {
@@ -472,8 +472,8 @@ $mobile-breakpoint: 700px;
       height: calc(100% - 5px);
       background: linear-gradient(
         to right,
-        rgba($primary-low, 1) 0%,
-        rgba($primary-low, 0) 100%
+        rgba(var(--primary-low-rgb), 1) 0%,
+        rgba(var(--primary-low-rgb), 0) 100%
       );
     }
 
@@ -485,8 +485,8 @@ $mobile-breakpoint: 700px;
       height: calc(100% - 5px);
       background: linear-gradient(
         to right,
-        rgba($primary-low, 0) 0%,
-        rgba($primary-low, 1) 100%
+        rgba(var(--primary-low-rgb), 0) 0%,
+        rgba(var(--primary-low-rgb), 1) 100%
       );
     }
   }
@@ -510,7 +510,7 @@ $mobile-breakpoint: 700px;
     > li {
       margin: 0;
       a.active {
-        background: $primary-medium;
+        background: var(--primary-medium);
       }
       &:last-of-type {
         > a {
@@ -522,10 +522,10 @@ $mobile-breakpoint: 700px;
   h1 {
     font-size: $font-up-3;
     line-height: $line-height-medium;
-    color: $primary;
+    color: var(--primary);
   }
   .controls {
-    background: $primary-low;
+    background: var(--primary-low);
     width: 100%;
     padding: 10px;
     display: flex;
@@ -561,12 +561,12 @@ $mobile-breakpoint: 700px;
     float: left;
     padding: 5px 10px;
     margin-right: 15px;
-    border: 1px solid $primary-medium;
+    border: 1px solid var(--primary-medium);
     border-radius: 3px;
     background: transparent;
-    color: $primary;
+    color: var(--primary);
     &:hover {
-      background-color: $primary-low-mid;
+      background-color: var(--primary-low-mid);
     }
     @media (max-width: $mobile-breakpoint) {
       display: inline-block;
@@ -646,15 +646,15 @@ $mobile-breakpoint: 700px;
 }
 
 .text-successful {
-  color: $success;
+  color: var(--success);
 }
 
 .text-danger {
-  color: $danger;
+  color: var(--danger);
 }
 
 .text-muted {
-  color: $primary-medium;
+  color: var(--primary-medium);
 }
 
 .admin-nav {
@@ -677,10 +677,12 @@ $mobile-breakpoint: 700px;
     width: 100%;
   }
 
-  background-color: $secondary; // Todo: set this properly - it needs to be >= the menu height
+  background-color: var(
+    --secondary
+  ); // Todo: set this properly - it needs to be >= the menu height
   min-height: 875px;
   margin-left: 0;
-  border-left: solid 1px $primary-low;
+  border-left: solid 1px var(--primary-low);
   padding: 30px 0 30px 30px;
   @media (max-width: $mobile-breakpoint) {
     padding: 30px 0;
@@ -711,10 +713,10 @@ $mobile-breakpoint: 700px;
 section.details {
   h1 {
     font-size: $font-up-3;
-    color: $primary;
+    color: var(--primary);
     padding: 5px 10px;
     margin: 30px 0 5px 0;
-    border-bottom: 5px solid $primary-low;
+    border-bottom: 5px solid var(--primary-low);
   }
 }
 
@@ -754,10 +756,10 @@ section.details {
 
 .tl3-requirements {
   .d-icon-check {
-    color: $success;
+    color: var(--success);
   }
   .d-icon-times {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -844,12 +846,12 @@ table#user-badges {
 
 @mixin value-btn {
   width: 29px;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   outline: none;
   padding: 0;
 
   &:focus {
-    border-color: $tertiary;
+    border-color: var(--tertiary);
   }
 }
 
@@ -866,12 +868,12 @@ table#user-badges {
     .value-input {
       box-sizing: border-box;
       flex: 1 0 0px;
-      border-color: $primary-low;
+      border-color: var(--primary-low);
       cursor: pointer;
       margin: 0;
 
       &:focus {
-        border-color: $tertiary;
+        border-color: var(--tertiary);
         box-shadow: none;
       }
     }
@@ -968,7 +970,7 @@ table#user-badges {
 }
 
 a.inline-editable-field {
-  color: $primary;
+  color: var(--primary);
   cursor: pointer;
 }
 
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index 45bd98a35f6..5a771a9576a 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -8,7 +8,7 @@
   .header {
     display: flex;
     align-items: center;
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     margin-bottom: 0.5em;
     padding-bottom: 0.5em;
   }
@@ -30,16 +30,16 @@
       font-weight: 700;
 
       .report-url {
-        color: $primary;
+        color: var(--primary);
       }
 
       .info {
         cursor: pointer;
         margin-left: 0.25em;
-        color: $primary-low-mid;
+        color: var(--primary-low-mid);
 
         &:hover {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
     }
@@ -51,16 +51,16 @@
 
     &.trending-down,
     &.high-trending-down {
-      color: $danger;
+      color: var(--danger);
     }
 
     &.trending-up,
     &.high-trending-up {
-      color: $success;
+      color: var(--success);
     }
 
     &.no-change {
-      color: $primary-medium;
+      color: var(--primary-medium);
       .d-icon {
         display: none;
       }
@@ -91,7 +91,7 @@
     border: 1px solid transparent;
 
     a {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     .d-icon {
@@ -103,19 +103,19 @@
 
     &.no-data,
     &.rate-limited {
-      background: $secondary;
-      border-color: $primary-low;
-      color: $primary-low-mid;
+      background: var(--secondary);
+      border-color: var(--primary-low);
+      color: var(--primary-low-mid);
     }
 
     &.rate-limited .d-icon {
-      color: $danger;
+      color: var(--danger);
     }
 
     &.timeout,
     &.exception {
-      border-color: $danger-low;
-      color: $danger;
+      border-color: var(--danger-low);
+      color: var(--danger);
     }
   }
 
@@ -135,7 +135,7 @@
         flex: 1 0 0px;
 
         .mode-btn.is-current {
-          color: $tertiary;
+          color: var(--tertiary);
         }
       }
     }
@@ -147,8 +147,8 @@
       margin-bottom: 1em;
 
       .chart-grouping.active {
-        background: $tertiary;
-        color: $secondary;
+        background: var(--tertiary);
+        color: var(--secondary);
       }
     }
 
diff --git a/app/assets/stylesheets/common/admin/admin_report_counters.scss b/app/assets/stylesheets/common/admin/admin_report_counters.scss
index 8c18c756daf..a055d716aab 100644
--- a/app/assets/stylesheets/common/admin/admin_report_counters.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_counters.scss
@@ -16,7 +16,7 @@
         @include ellipsis;
 
         .d-icon {
-          color: $primary-low-mid;
+          color: var(--primary-low-mid);
           min-width: 14px;
           text-align: center;
         }
@@ -33,20 +33,20 @@
       }
 
       .d-icon-minus {
-        color: $primary-medium;
+        color: var(--primary-medium);
         font-size: $font-down-3;
       }
 
       &.high-trending-up,
       &.trending-up {
         .d-icon {
-          color: $success;
+          color: var(--success);
         }
       }
       &.high-trending-down,
       &.trending-down {
         .d-icon {
-          color: $danger;
+          color: var(--danger);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/admin/admin_report_table.scss b/app/assets/stylesheets/common/admin/admin_report_table.scss
index 2de64f73263..c1a91227ff3 100644
--- a/app/assets/stylesheets/common/admin/admin_report_table.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_table.scss
@@ -17,7 +17,7 @@
 
   .table {
     margin: 0;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     table-layout: fixed;
 
     tbody {
@@ -35,12 +35,12 @@
 
     &.is-current-sort {
       .d-icon {
-        color: $tertiary;
+        color: var(--tertiary);
       }
 
       .sort-btn:hover {
-        color: $primary-medium;
-        background: $primary-low;
+        color: var(--primary-medium);
+        background: var(--primary-low);
       }
     }
 
@@ -48,10 +48,10 @@
       background: none;
 
       &:hover {
-        color: $primary-medium;
-        background: $primary-low;
+        color: var(--primary-medium);
+        background: var(--primary-low);
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
     }
@@ -64,7 +64,7 @@
   }
 
   .total-row {
-    background: $primary-very-low;
+    background: var(--primary-very-low);
 
     td {
       font-weight: 700;
@@ -81,7 +81,7 @@
       margin-left: 0.5em;
 
       &.is-current {
-        color: $tertiary;
+        color: var(--tertiary);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/admin/admin_reports.scss b/app/assets/stylesheets/common/admin/admin_reports.scss
index b987b0420cd..89f78f6b19d 100644
--- a/app/assets/stylesheets/common/admin/admin_reports.scss
+++ b/app/assets/stylesheets/common/admin/admin_reports.scss
@@ -5,7 +5,7 @@
     .report-header {
       padding-bottom: 0.5em;
       margin-bottom: 1em;
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
     }
   }
 
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 4e77cb41855..3cfd1dc4006 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -53,7 +53,7 @@ table.api-keys {
   }
 
   tr.revoked {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   @include breakpoint(tablet) {
@@ -160,12 +160,12 @@ table.api-keys {
 
   > p {
     padding-bottom: 10px;
-    border-bottom: $primary-low 1px solid;
+    border-bottom: var(--primary-low) 1px solid;
   }
   .filters {
     margin: 5px 0;
     padding-bottom: 5px;
-    border-bottom: $primary-low 1px solid;
+    border-bottom: var(--primary-low) 1px solid;
     .filter {
       margin-bottom: 1em;
     }
diff --git a/app/assets/stylesheets/common/admin/backups.scss b/app/assets/stylesheets/common/admin/backups.scss
index a69f7c80038..2c6b9ccf26f 100644
--- a/app/assets/stylesheets/common/admin/backups.scss
+++ b/app/assets/stylesheets/common/admin/backups.scss
@@ -4,10 +4,10 @@ $rollback: #3d9970;
 $rollback-dark: darken($rollback, 10%) !default;
 $rollback-darker: darken($rollback, 20%) !default;
 .btn-rollback {
-  color: $secondary;
+  color: var(--secondary);
   background: $rollback;
   .d-icon {
-    color: $secondary;
+    color: var(--secondary);
   }
   &:hover {
     background: $rollback-dark;
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 72b34678ca1..816e21d3c9e 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -23,8 +23,8 @@
   }
   .badges-header {
     padding: 10px 0;
-    border-top: 1px solid $primary-low;
-    border-bottom: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
+    border-bottom: 1px solid var(--primary-low);
     .badges-heading {
       margin: 0;
       padding: 0 10px;
@@ -34,9 +34,9 @@
     .admin-badge-list {
       height: 70vh;
       overflow-y: scroll;
-      border-right: 1px solid $primary-low;
-      border-left: 1px solid $primary-low;
-      border-bottom: 1px solid $primary-low;
+      border-right: 1px solid var(--primary-low);
+      border-left: 1px solid var(--primary-low);
+      border-bottom: 1px solid var(--primary-low);
       .admin-badge-list-item {
         &:first-child {
           border-top: none;
@@ -50,8 +50,8 @@
         font-size: $font-down-1;
         font-weight: normal;
         padding: 0 6px;
-        color: $secondary;
-        background-color: $tertiary-medium;
+        color: var(--secondary);
+        background-color: var(--tertiary-medium);
         border-radius: 3px;
       }
     }
@@ -65,7 +65,7 @@
     p.help {
       margin: 0;
       margin-top: 5px;
-      color: $primary-medium;
+      color: var(--primary-medium);
       font-size: $font-down-1;
     }
     .badge-grouping-control {
@@ -109,7 +109,7 @@
   .current-badge-actions {
     margin: 10px;
     padding: 10px;
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
   }
   .buttons {
     display: flex;
@@ -132,8 +132,8 @@
     max-width: 300px;
     display: flex;
     align-items: center;
-    background-color: $primary-very-low;
-    border: 1px solid $primary-low;
+    background-color: var(--primary-very-low);
+    border: 1px solid var(--primary-low);
     padding: 0 10px 0 10px;
 
     img,
@@ -160,7 +160,7 @@
     list-style: none;
     margin: 0;
     .badge-grouping-item {
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -179,17 +179,17 @@
   .badge-errors,
   .badge-query-plan {
     padding: 5px;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
   }
   .count-warning {
-    background-color: $danger-low;
+    background-color: var(--danger-low);
     margin-bottom: 5px;
     padding: 10px;
     p {
       margin: 0;
     }
     .heading {
-      color: $danger;
+      color: var(--danger);
       font-weight: bold;
     }
   }
diff --git a/app/assets/stylesheets/common/admin/customize-install-theme.scss b/app/assets/stylesheets/common/admin/customize-install-theme.scss
index 1e20d4554c8..d7f30770299 100644
--- a/app/assets/stylesheets/common/admin/customize-install-theme.scss
+++ b/app/assets/stylesheets/common/admin/customize-install-theme.scss
@@ -8,12 +8,12 @@
 }
 
 .install-theme-item {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   border-bottom: none;
   position: relative;
 
   &:last-child {
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
   }
 
   input,
@@ -29,11 +29,11 @@
   }
 
   input:checked + label {
-    color: $secondary;
-    background-color: $tertiary;
+    color: var(--secondary);
+    background-color: var(--tertiary);
     + .d-icon {
       display: block;
-      color: $secondary;
+      color: var(--secondary);
     }
   }
 
@@ -63,7 +63,7 @@
 }
 
 .popular-theme-item {
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
   padding: 8px 0px;
   display: flex;
   align-items: center;
@@ -72,16 +72,16 @@
     .popular-theme-type {
       font-weight: normal;
       font-size: $font-down-2;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     a {
-      color: $primary-very-high;
+      color: var(--primary-very-high);
       font-weight: bold;
       &:hover,
       &:visited,
       &:active {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
 
@@ -94,7 +94,7 @@
     > span {
       font-style: italic;
       font-size: $font-down-1;
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin-right: 8px;
     }
 
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 5f24c7b9461..a9a0e742954 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -8,7 +8,7 @@
   width: 54.054%;
   margin-left: 1.8018%;
   p.description {
-    color: $primary;
+    color: var(--primary);
   }
   .controls {
     margin-top: 10px;
@@ -54,7 +54,7 @@
   }
 
   .error {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -66,11 +66,11 @@
     margin-top: 5px;
     margin-bottom: 5px;
     .fa {
-      color: $danger;
+      color: var(--danger);
     }
   }
   .raw-error {
-    background-color: $primary-very-low;
+    background-color: var(--primary-very-low);
     padding: 5px;
   }
 }
@@ -87,7 +87,7 @@
   .field-error {
     margin-top: 10px;
     margin-bottom: 10px;
-    background-color: $quaternary-low;
+    background-color: var(--quaternary-low);
     padding: 5px;
   }
 
@@ -101,7 +101,7 @@
   .color-schemes li {
     .d-icon {
       margin-right: 0.25em;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
   .show-current-style {
@@ -183,9 +183,9 @@
 
   .themes-list-header {
     width: 100%;
-    border-bottom: 1px solid $primary-low;
-    border-top: 1px solid $primary-low;
-    border-right: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
+    border-top: 1px solid var(--primary-low);
+    border-right: 1px solid var(--primary-low);
     display: flex;
 
     .tab {
@@ -199,7 +199,7 @@
       }
 
       &:last-child {
-        border-left: 1px solid $primary-low;
+        border-left: 1px solid var(--primary-low);
       }
     }
   }
@@ -214,24 +214,24 @@
     @media screen and (max-height: 800px) {
       max-height: 40vh;
     }
-    border-right: 1px solid $primary-low;
-    border-bottom: 1px solid $primary-low;
+    border-right: 1px solid var(--primary-low);
+    border-bottom: 1px solid var(--primary-low);
     width: 100%;
 
     .themes-list-item:last-child {
       border-bottom: none;
     }
     .themes-list-item {
-      color: $primary;
-      border-bottom: 1px solid $primary-low;
+      color: var(--primary);
+      border-bottom: 1px solid var(--primary-low);
       display: flex;
-      border-left: 1px solid $primary-low;
+      border-left: 1px solid var(--primary-low);
 
       &.inactive-indicator {
         border-right: 0;
         border-left: 0;
         font-weight: bold;
-        color: $primary-medium;
+        color: var(--primary-medium);
 
         span.empty {
           padding-left: 5px;
@@ -239,17 +239,17 @@
         }
       }
       &:not(.inactive-indicator):not(.selected):hover {
-        background-color: $primary-very-low;
+        background-color: var(--primary-very-low);
         .component {
-          border-color: $primary-low-mid;
+          border-color: var(--primary-low-mid);
         }
       }
 
       &.selected {
-        color: $secondary;
-        background-color: $tertiary;
+        color: var(--secondary);
+        background-color: var(--tertiary);
         .components-list {
-          color: $secondary;
+          color: var(--secondary);
         }
         .fa {
           color: inherit;
@@ -257,18 +257,18 @@
       }
       &:not(.selected) {
         .broken-indicator {
-          color: $danger;
+          color: var(--danger);
         }
         .fa {
           opacity: 0.7;
         }
         .default-indicator {
-          color: $success;
+          color: var(--success);
         }
       }
 
       .light-grey-icon {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
 
       .info {
@@ -287,11 +287,11 @@
         display: inline-block;
         font-size: $font-down-1;
         align-items: baseline;
-        color: $primary-high;
+        color: var(--primary-high);
 
         .others-count,
         .others-count:hover {
-          color: $primary-high;
+          color: var(--primary-high);
           text-decoration: underline;
         }
       }
@@ -367,8 +367,8 @@
     }
 
     .edit-main-nav .nav-pills > li a.active {
-      background-color: $quaternary;
-      color: $secondary;
+      background-color: var(--quaternary);
+      color: var(--secondary);
     }
 
     .edit-main-nav ul {
@@ -398,12 +398,12 @@
         }
 
         a.active {
-          background: $primary-medium;
-          color: $secondary;
+          background: var(--primary-medium);
+          color: var(--secondary);
         }
 
         a.blank:not(.active) {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
 
         input {
@@ -462,7 +462,7 @@
         padding: 5px 0 0 0;
         margin-left: 10px;
         width: 80px;
-        color: $primary;
+        color: var(--primary);
       }
     }
   }
@@ -500,7 +500,7 @@
     }
     .description {
       margin: 0.15em 0 0;
-      color: $primary-high;
+      color: var(--primary-high);
       font-size: $font-down-1;
       line-height: $line-height-medium;
     }
@@ -508,7 +508,7 @@
     .invalid .hex input {
       background-color: white;
       color: black;
-      border-color: $danger;
+      border-color: var(--danger);
     }
   }
 
@@ -524,7 +524,7 @@
     li {
       &.disabled-child {
         .child-link {
-          color: $primary-medium;
+          color: var(--primary-medium);
           &:hover {
             text-decoration: underline;
           }
@@ -551,7 +551,7 @@
     display: block;
     margin-bottom: 0.25em;
     + label {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
   label {
@@ -638,7 +638,7 @@
 }
 
 .permalink-description {
-  color: $primary-medium;
+  color: var(--primary-medium);
 }
 
 // embedding
@@ -666,7 +666,7 @@
       div.label {
         display: block;
         font-size: $font-down-1;
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
       td.controls,
       td.editing-controls {
@@ -718,7 +718,7 @@
     margin: 0.75em 0;
   }
   p.description {
-    color: $primary-medium;
+    color: var(--primary-medium);
     margin-bottom: 1em;
     max-width: 700px;
   }
@@ -735,7 +735,7 @@
   .user-field {
     padding: 10px;
     margin-bottom: 10px;
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     .form-display {
       width: 25%;
       display: inline-block;
@@ -793,7 +793,7 @@
 
 .robots-txt-edit {
   div.overridden {
-    background: $highlight-medium;
+    background: var(--highlight-medium);
     padding: 7px;
     margin-bottom: 7px;
   }
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index a2ba7db079a..8d38420b7bd 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -15,12 +15,12 @@
   .navigation {
     display: flex;
     margin: 0 0 2.5em 0;
-    border-bottom: 1px solid $primary-low-mid;
+    border-bottom: 1px solid var(--primary-low-mid);
 
     .navigation-item {
       display: inline;
       &:hover {
-        background: $primary-very-low;
+        background: var(--primary-very-low);
       }
     }
 
@@ -33,7 +33,7 @@
 
   @mixin active-navigation-item {
     .navigation-link {
-      border-bottom: 0.4em solid $tertiary;
+      border-bottom: 0.4em solid var(--tertiary);
     }
   }
 
@@ -105,7 +105,7 @@
         margin: 0 0.5em 0 0;
 
         a {
-          color: $primary;
+          color: var(--primary);
         }
       }
 
@@ -115,7 +115,7 @@
       }
       align-items: center;
       justify-content: space-between;
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
       margin-bottom: 0.5em;
       padding-bottom: 0.5em;
     }
@@ -167,7 +167,7 @@
 
   .misc {
     display: flex;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
 
     .storage-stats,
     .last-dashboard-update {
@@ -181,7 +181,7 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      border-right: 1px solid $primary-low;
+      border-right: 1px solid var(--primary-low);
 
       .backups,
       .uploads {
@@ -204,7 +204,7 @@
         display: block;
         margin: 0 20px 20px 20px;
         padding: 20px 0 0 0;
-        border-top: 1px solid $primary-low;
+        border-top: 1px solid var(--primary-low);
         border-left: none;
       }
     }
@@ -250,14 +250,14 @@
     margin-bottom: 2.5em;
 
     .d-icon-exclamation-triangle {
-      color: $danger;
+      color: var(--danger);
     }
 
     .actions {
       margin: 1em 0 0 0;
       display: flex;
       align-items: center;
-      color: $primary-medium;
+      color: var(--primary-medium);
       .btn {
         margin-right: 1em;
       }
@@ -274,7 +274,7 @@
     display: grid;
     flex: 1 0 auto;
     grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     border-bottom: 0;
     font-weight: 700;
     text-align: right;
@@ -283,10 +283,10 @@
   }
 
   .admin-report .main {
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
 
     &:hover {
-      background-color: $primary-very-low;
+      background-color: var(--primary-very-low);
     }
   }
 
@@ -306,7 +306,7 @@
     padding: 0.5em 0.25em;
     align-items: flex-start;
     justify-content: flex-start;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
 
     .title {
       font-size: $font-0;
@@ -329,13 +329,13 @@
     border: 0;
 
     &:hover {
-      background-color: $primary-very-low;
+      background-color: var(--primary-very-low);
     }
 
     .d-icon {
       font-size: $font-up-1;
       margin: 0 0.25em 0 0;
-      color: $primary-low-mid;
+      color: var(--primary-low-mid);
     }
   }
 }
@@ -365,7 +365,7 @@
     .label {
       display: flex;
       align-items: center;
-      color: $primary;
+      color: var(--primary);
       justify-content: center;
       border-radius: 9px 0 0 9px;
       padding: 0 5px 0 8px;
@@ -377,33 +377,33 @@
     }
 
     .value {
-      background: $secondary;
+      background: var(--secondary);
       border-radius: 0 9px 9px 0;
       padding: 0 8px 0 5px;
     }
 
     &.user-newuser {
       .label {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
     &.user-basic,
     &.user-member {
-      background: $bronze;
+      background: var(--bronze);
       .label {
-        color: $secondary;
+        color: var(--secondary);
       }
     }
     &.user-regular {
-      background: $silver;
+      background: var(--silver);
       .label {
-        color: $secondary;
+        color: var(--secondary);
       }
     }
     &.user-leader {
-      background: $gold;
+      background: var(--gold);
       .label {
-        color: $secondary;
+        color: var(--secondary);
       }
     }
   }
@@ -495,7 +495,7 @@
   }
   .report {
     margin: 1.5%;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     flex: 1 1 28%;
     transition: box-shadow 0.25s;
     min-width: 225px;
@@ -507,7 +507,7 @@
       box-sizing: border-box;
       padding: 1em;
       .report-description {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
     &:hover {
@@ -521,7 +521,7 @@
   flex-wrap: wrap;
   .section-title {
     flex: 1 1 100%;
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     margin-bottom: 0.5em;
   }
 }
@@ -597,13 +597,13 @@
     font-size: $font-up-4;
   }
   .up-to-date {
-    color: $success;
+    color: var(--success);
   }
   .updates-available {
-    color: $danger;
+    color: var(--danger);
   }
   .critical-updates-available {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index 4684d985005..3c1417cd806 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -11,7 +11,7 @@
   .reply-key {
     display: block;
     font-size: $font-down-1;
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
   .username div {
     max-width: 180px;
@@ -35,7 +35,7 @@
     margin: 5px 10px;
   }
   .error-description {
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-down-1;
   }
   hr {
@@ -62,7 +62,7 @@
 
 .admin-list-item {
   width: 100%;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding: 0.25em 0;
 }
 
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
index ae8580d0d83..caf25e2b6b7 100644
--- a/app/assets/stylesheets/common/admin/plugins.scss
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -41,5 +41,5 @@
 }
 
 .admin-plugins-official-badge {
-  color: $success;
+  color: var(--success);
 }
diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index b54d7f15c30..87dffbe0726 100644
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -43,7 +43,7 @@
       .uploaded-image-preview {
         background-size: contain;
         background-repeat: no-repeat;
-        background-color: $primary-medium;
+        background-color: var(--primary-medium);
       }
     }
     .setting-controls {
@@ -64,8 +64,8 @@
         width: 100%;
       }
       padding: 1px;
-      background-color: $secondary;
-      border: 1px solid $primary-low;
+      background-color: var(--secondary);
+      border: 1px solid var(--primary-low);
       border-radius: 3px;
       transition: border linear 0.2s, box-shadow linear 0.2s;
       li.sortable-placeholder {
@@ -74,7 +74,7 @@
         position: relative;
         line-height: $line-height-small;
         cursor: default;
-        border: 1px dashed $primary-low-mid;
+        border: 1px dashed var(--primary-low-mid);
         border-radius: 3px;
         background-clip: padding-box;
         -moz-user-select: none;
@@ -90,10 +90,10 @@
       line-height: $line-height-large;
     }
     .validation-error {
-      color: $danger;
+      color: var(--danger);
     }
     .desc {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
     h3 {
       font-size: $font-0;
@@ -111,17 +111,17 @@
   }
   .setting.overridden {
     h3 {
-      color: $highlight-high;
+      color: var(--highlight-high);
     }
   }
   .setting.overridden.string {
     input[type="text"],
     input[type="password"],
     textarea {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium);
     }
   }
   .warning {
-    color: $danger;
+    color: var(--danger);
   }
 }
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 0072e7087ca..cf802eeaed3 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -1,10 +1,10 @@
 // Styles for /admin/logs
 
 .web-hook-events {
-  border-bottom: dotted 1px $primary-low-mid;
+  border-bottom: dotted 1px var(--primary-low-mid);
   .heading-container {
     width: 100%;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
   }
   .col.heading {
     font-weight: bold;
@@ -19,7 +19,7 @@
   }
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px $primary-low;
+    border-top: solid 1px var(--primary-low);
   }
 }
 
@@ -155,12 +155,12 @@
     display: inline-flex;
     align-items: center;
     margin-bottom: 0.25em;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     padding: 3px 10px;
-    color: $primary;
+    color: var(--primary);
     &:hover {
-      color: $primary;
-      background-color: $primary-low;
+      color: var(--primary);
+      background-color: var(--primary-low);
     }
     .label {
       font-weight: bold;
@@ -239,10 +239,10 @@ table.screened-ip-addresses {
     display: flex;
     align-items: baseline;
     .d-icon-check {
-      color: $success;
+      color: var(--success);
     }
     .d-icon-ban {
-      color: $danger;
+      color: var(--danger);
     }
     .d-icon {
       margin-right: 0.25em;
@@ -363,10 +363,10 @@ table.screened-ip-addresses {
   cursor: pointer;
   .d-icon {
     margin-right: 0.25em;
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
   &:hover .d-icon {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index f11b9fa969a..dcc0b0e3d9e 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -18,9 +18,9 @@
     border-top: 0;
   }
   &.highlight-danger {
-    background-color: $danger-low;
+    background-color: var(--danger-low);
   }
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   &:before,
   &:after {
     display: table;
@@ -92,7 +92,7 @@
   }
   .users-list {
     .username .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index ed3c31190ef..f194318ddda 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -15,9 +15,9 @@
   clear: both;
   margin-bottom: 5px;
   .combo-box .combo-box-header {
-    background: $secondary;
-    color: $primary;
-    border: 1px solid $primary-medium;
+    background: var(--secondary);
+    color: var(--primary);
+    border: 1px solid var(--primary-medium);
     font-size: $font-0;
     transition: none;
   }
@@ -50,13 +50,13 @@
 .latest-topic-list-item.visited,
 .category-topic-link.visited {
   a.title:not(.badge-notification) {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
   span.badge-category {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
   a.discourse-tag {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -73,17 +73,17 @@
   a.title {
     padding: 15px 0;
     word-break: break-word;
-    color: $primary;
+    color: var(--primary);
   }
 
   .anon & {
     a.title:visited:not(.badge-notification) {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
   a.title.visited:not(.badge-notification) {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -110,15 +110,15 @@
     border: none;
 
     td {
-      border-bottom: 1px solid $danger-medium;
+      border-bottom: 1px solid var(--danger-medium);
       line-height: 0.1em;
       padding: 0;
       text-align: center;
     }
 
     td span {
-      background-color: $secondary;
-      color: $danger-medium;
+      background-color: var(--secondary);
+      color: var(--danger-medium);
       padding: 0 8px;
       font-size: $font-down-1;
     }
@@ -132,11 +132,11 @@
   }
   th {
     button .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
   td {
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-0;
   }
 
@@ -184,7 +184,7 @@
   .topic-excerpt {
     font-size: $font-down-1;
     margin-top: 5px;
-    color: $primary-high;
+    color: var(--primary-high);
     word-wrap: break-word;
     line-height: $line-height-large;
     padding-right: 20px;
@@ -250,7 +250,7 @@
     background-color: transparent;
     padding: 0;
     border: 0;
-    color: $danger-medium;
+    color: var(--danger-medium);
     font-size: $font-0;
     cursor: default;
   }
@@ -302,7 +302,7 @@ ol.category-breadcrumb {
 }
 
 div.education {
-  color: $primary-med-or-secondary-med;
+  color: var(--primary-med-or-secondary-med);
   .badge-notification.new-posts {
     vertical-align: text-bottom;
   }
@@ -310,12 +310,12 @@ div.education {
 
 .list-cell {
   padding: 12px 5px;
-  color: $primary-med-or-secondary-high;
+  color: var(--primary-med-or-secondary-high);
 }
 
 .table-heading {
   @extend .list-cell;
-  border-bottom: 3px solid $primary-low;
+  border-bottom: 3px solid var(--primary-low);
 }
 
 // This is not what we want:
diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss
index 50be61caacd..06a59860bec 100644
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@@ -3,7 +3,7 @@
 
 #simple-container {
   border-radius: 10px;
-  background-color: $secondary;
+  background-color: var(--secondary);
   padding: 20px;
   width: 550px;
   margin: 0 auto;
diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 05a29029059..64211b17522 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -1,7 +1,7 @@
 .alert {
   padding: 0.5em 2.5em 0.5em 1em;
-  background-color: $danger-low;
-  color: $primary;
+  background-color: var(--danger-low);
+  color: var(--primary);
   position: relative;
   margin-bottom: 1em;
 
@@ -11,23 +11,23 @@
     top: 0.265em;
     right: 0.66em;
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
   &.alert-success {
-    background-color: $success-low;
-    color: $primary;
+    background-color: var(--success-low);
+    color: var(--primary);
   }
   &.alert-error {
-    background-color: $danger-low;
-    color: $primary;
+    background-color: var(--danger-low);
+    color: var(--primary);
   }
   &.alert-info {
-    background-color: $tertiary-low;
-    color: $primary;
+    background-color: var(--tertiary-low);
+    color: var(--primary);
     &.clickable {
-      color: $tertiary;
+      color: var(--tertiary);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 5fbcd837c17..2fbda12c5d4 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -38,7 +38,7 @@
     border-width: 0;
     border-left-width: 6px;
     border-style: solid;
-    border-color: $primary-low;
+    border-color: var(--primary-low);
 
     .mobile-view & {
       width: 100%;
@@ -85,7 +85,7 @@
     border-left-width: 0;
 
     border-style: solid;
-    border-color: $primary-low;
+    border-color: var(--primary-low);
   }
 
   &.no-logos {
@@ -123,7 +123,7 @@
     margin-bottom: 1em;
     text-align: center;
     font-size: $font-0;
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
     position: relative;
     @include line-clamp(4);
 
@@ -144,12 +144,12 @@
     margin-top: 0.25em;
     line-height: $line-height-medium;
     text-align: center;
-    color: $primary;
+    color: var(--primary);
     overflow: hidden;
   }
 
   h4 a {
-    color: $primary;
+    color: var(--primary);
   }
 
   .subcategory.with-subcategories {
@@ -186,7 +186,7 @@
     }
 
     .subcategory-box-inner {
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low);
       border-left: none;
       padding: 0.5em 0.5em 0.4em 0.5em;
     }
@@ -248,14 +248,14 @@
     padding: 1em 1em 0.5em 1em;
     a[href] {
       width: 100%;
-      color: $primary;
+      color: var(--primary);
     }
   }
 
   .featured-topics {
     padding: 0.5em 1em 1em 1em;
     ul {
-      color: $primary-medium;
+      color: var(--primary-medium);
       list-style: none;
       padding: 0;
       margin: 0;
@@ -281,7 +281,7 @@
   h4 {
     margin-bottom: 0;
     .d-icon {
-      color: $primary-high;
+      color: var(--primary-high);
       height: 0.76em;
       width: 0.76em;
       vertical-align: baseline;
@@ -291,7 +291,7 @@
   .category-description {
     margin-top: 0.5em;
     overflow: hidden;
-    color: $primary-high;
+    color: var(--primary-high);
   }
   .category-logo.aspect-image {
     margin-top: 0.5em;
@@ -308,7 +308,7 @@
 .category-list.subcategories-with-subcategories {
   margin-top: 1em;
   margin-bottom: 0;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   .category-description {
     font-size: $font-down-1;
   }
@@ -320,7 +320,7 @@
 .category-list .category.muted {
   > h3 a.category-title-link,
   > h4 a.category-title-link {
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-down-1;
   }
   > .category-description,
@@ -346,7 +346,7 @@
 }
 
 .muted-categories-link {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   display: flex;
   justify-content: space-between;
   padding: 0.75em;
@@ -355,13 +355,13 @@
   margin: 0 0 1em -3px;
 
   .d-icon {
-    color: $primary-medium;
+    color: var(--primary-medium);
     margin-top: 0.25em;
   }
 }
 
 .muted-categories-heading {
-  color: $primary-medium;
+  color: var(--primary-medium);
   margin: 0;
 }
 
diff --git a/app/assets/stylesheets/common/base/code_highlighting.scss b/app/assets/stylesheets/common/base/code_highlighting.scss
index d4839358dc1..c7361576762 100644
--- a/app/assets/stylesheets/common/base/code_highlighting.scss
+++ b/app/assets/stylesheets/common/base/code_highlighting.scss
@@ -7,12 +7,12 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs {
   display: block;
   padding: 0.5em;
-  color: $primary-very-high;
+  color: var(--primary-very-high);
 }
 
 .hljs-comment,
 .hljs-doctag {
-  color: $hljs-comment;
+  color: var(--hljs-comment);
   font-style: italic;
 }
 
@@ -22,26 +22,26 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs-subst,
 .hljs-request,
 .hljs-status {
-  color: $primary-very-high;
+  color: var(--primary-very-high);
   font-weight: bold;
 }
 
 .hljs-number,
 .ruby .hljs-constant {
-  color: $hljs-number;
+  color: var(--hljs-number);
 }
 
 .hljs-string,
 .hljs-tag .hljs-string,
 .tex .hljs-formula {
-  color: $hljs-string;
+  color: var(--hljs-string);
 }
 
 .hljs-title,
 .hljs-name,
 .coffeescript .hljs-params,
 .scss .hljs-meta {
-  color: $hljs-string;
+  color: var(--hljs-string);
   font-weight: bold;
 }
 
@@ -56,14 +56,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .haskell .hljs-type,
 .vhdl .hljs-literal,
 .tex .hljs-command {
-  color: $hljs-literal;
+  color: var(--hljs-literal);
   font-weight: bold;
 }
 
 .hljs-tag,
 .hljs-tag .hljs-title,
 .django .hljs-tag .hljs-keyword {
-  color: $hljs-tag;
+  color: var(--hljs-tag);
   font-weight: normal;
 }
 
@@ -71,11 +71,11 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .css .hljs-keyword,
 .hljs-variable,
 .lisp .hljs-body {
-  color: $hljs-attribute;
+  color: var(--hljs-attribute);
 }
 
 .hljs-regexp {
-  color: $success;
+  color: var(--success);
 }
 
 .hljs-symbol,
@@ -83,31 +83,31 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .lisp .hljs-keyword,
 .tex .hljs-special,
 .hljs-prompt {
-  color: $hljs-symbol;
+  color: var(--hljs-symbol);
 }
 
 .hljs-built_in,
 .lisp .hljs-title,
 .clojure .hljs-built_in,
 .hljs-builtin-name {
-  color: $tertiary-high;
+  color: var(--tertiary-high);
 }
 
 .meta {
-  color: $primary-medium;
+  color: var(--primary-medium);
   font-weight: bold;
 }
 
 .hljs-deletion {
-  background: $danger-low;
+  background: var(--danger-low);
 }
 
 .hljs-addition {
-  background: $success-low;
+  background: var(--success-low);
 }
 
 .diff .hljs-meta {
-  color: $primary-low;
+  color: var(--primary-low);
 }
 
 /*
@@ -119,8 +119,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 p > code,
 li > code,
 pre > code {
-  color: $primary-very-high;
-  background: $hljs-bg;
+  color: var(--primary-very-high);
+  background: var(--hljs-bg);
 }
 
 // removed some unnecessary styles here
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index 271d48ccb76..7d80e3d378c 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -28,7 +28,7 @@
     .colorpicker {
       position: relative;
       margin: 0 0.125em 0.25em;
-      border: 1px solid $primary-medium;
+      border: 1px solid var(--primary-medium);
       width: 1.25em;
       height: 1.2em;
       padding: 0;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index eb498ab348c..5fda683070d 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -19,7 +19,7 @@
   z-index: z("composer", "content");
   transition: height 250ms ease, background 250ms ease, transform 250ms ease,
     max-width 250ms ease, padding-bottom 250ms ease;
-  background-color: $secondary;
+  background-color: var(--secondary);
   box-shadow: shadow("composer");
 
   .reply-area {
@@ -33,11 +33,11 @@
     padding-left: 10px;
     .spinner {
       margin-left: 5px;
-      border-color: $secondary;
+      border-color: var(--secondary);
       border-right-color: transparent;
     }
     .d-icon {
-      color: $secondary;
+      color: var(--secondary);
     }
   }
 
@@ -56,8 +56,8 @@
   &.saving {
     height: 40px !important;
     align-items: center;
-    background: $tertiary;
-    color: $secondary;
+    background: var(--tertiary);
+    color: var(--secondary);
     flex-direction: row;
     width: 100%;
     .composer-controls {
@@ -68,7 +68,7 @@
         display: none;
       }
       .d-icon {
-        color: $secondary;
+        color: var(--secondary);
       }
     }
   }
@@ -93,12 +93,12 @@
   }
 
   .reply-to {
-    color: $primary-high;
+    color: var(--primary-high);
     margin: 5px 0 10px 0;
     display: flex;
     align-items: center;
     .d-icon {
-      color: $primary-high;
+      color: var(--primary-high);
     }
     .reply-details {
       max-width: calc(100% - 175px);
@@ -180,7 +180,7 @@
     }
     .d-icon {
       padding: 0.3em 0.5em;
-      color: $tertiary;
+      color: var(--tertiary);
     }
   }
 
@@ -264,7 +264,7 @@
   .mini-tag-chooser {
     flex: 1 1 25%;
     margin: 0 0 5px 0;
-    background: $secondary;
+    background: var(--secondary);
     z-index: z("composer", "dropdown");
     @media all and (max-width: 900px) {
       margin: 0;
@@ -301,10 +301,10 @@
     .cancel {
       margin-left: 1.25em;
       line-height: normal;
-      color: $primary-high;
+      color: var(--primary-high);
       transition: color 250ms;
       &:hover {
-        color: $danger;
+        color: var(--danger);
       }
     }
     #draft-status,
@@ -316,14 +316,14 @@
       align-items: center;
       a {
         margin-left: 5px;
-        color: $primary-high;
+        color: var(--primary-high);
       }
       .spinner {
         margin-right: 5px;
       }
     }
     #draft-status .d-icon-user-edit {
-      color: $danger;
+      color: var(--danger);
       font-size: 20px;
       vertical-align: -5.5px;
     }
@@ -331,7 +331,7 @@
 
   #draft-status,
   #file-uploading {
-    color: $primary-high;
+    color: var(--primary-high);
   }
 }
 
@@ -343,8 +343,8 @@
   z-index: z("composer", "dropdown") + 1;
   position: absolute;
   width: 240px;
-  background-color: $secondary;
-  border: 1px solid $primary-low;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-low);
   ul {
     list-style: none;
     padding: 0;
@@ -352,11 +352,11 @@
 
     li {
       .d-icon-users {
-        color: $primary-medium;
+        color: var(--primary-medium);
         padding: 0 2px;
       }
 
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
 
       a {
         padding: 5px;
@@ -364,17 +364,17 @@
         @include ellipsis;
 
         span.username {
-          color: $primary;
+          color: var(--primary);
         }
         span.name {
           font-size: $font-down-1;
           vertical-align: middle;
         }
         &.selected {
-          background-color: $tertiary-low;
+          background-color: var(--tertiary-low);
         }
         @include hover {
-          background-color: $highlight-low;
+          background-color: var(--highlight-low);
           text-decoration: none;
         }
       }
@@ -399,12 +399,12 @@ div.ac-wrap div.item a.remove,
   padding: 1px 3.5px;
   border-radius: 12px;
   box-sizing: border-box;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   &:hover {
-    background-color: $danger-low;
-    border: 1px solid $danger-medium;
+    background-color: var(--danger-low);
+    border: 1px solid var(--danger-medium);
     text-decoration: none;
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -414,8 +414,8 @@ div.ac-wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  background-color: $secondary;
-  border: 1px solid $primary-medium;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
   min-height: 30px;
   box-sizing: border-box;
   div.item {
@@ -452,7 +452,7 @@ div.ac-wrap {
 
 .future-date-input {
   .examples {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/crawler_layout.scss b/app/assets/stylesheets/common/base/crawler_layout.scss
index bff0addac1a..af37402c791 100644
--- a/app/assets/stylesheets/common/base/crawler_layout.scss
+++ b/app/assets/stylesheets/common/base/crawler_layout.scss
@@ -7,7 +7,7 @@ body.crawler {
     background-color: #fff;
     padding: 10px;
     box-shadow: none;
-    border-bottom: 1px solid $primary-low-mid;
+    border-bottom: 1px solid var(--primary-low-mid);
     box-sizing: border-box;
   }
 
@@ -68,7 +68,7 @@ body.crawler {
   }
 
   .discourse-tags {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -90,7 +90,7 @@ body.crawler {
   margin-top: 1em;
   margin-bottom: 2em;
   padding-top: 1.5em;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
 }
 
 .crawler-post-meta {
@@ -108,7 +108,7 @@ body.crawler {
 }
 
 .crawler-post-infos {
-  color: $primary-high;
+  color: var(--primary-high);
   display: inline-block;
   @include breakpoint(tablet, min-width) {
     float: right;
@@ -124,7 +124,7 @@ body.crawler {
   a {
     display: block;
     padding: 0.5em 0;
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/d-icon.scss b/app/assets/stylesheets/common/base/d-icon.scss
index e7531717892..b7bad06a7c4 100644
--- a/app/assets/stylesheets/common/base/d-icon.scss
+++ b/app/assets/stylesheets/common/base/d-icon.scss
@@ -2,10 +2,10 @@
 .d-icon.d-icon-d-muted,
 .d-icon.d-icon-d-watching-first,
 .d-icon.d-icon-d-watching-first-post {
-  color: $primary-high;
+  color: var(--primary-high);
 }
 
 .d-icon.d-icon-d-tracking,
 .d-icon.d-icon-d-watching {
-  color: $tertiary;
+  color: var(--tertiary);
 }
diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index 1e625926ab6..df9e4840754 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -1,5 +1,5 @@
-$d-popover-background: $secondary;
-$d-popover-border: $primary-medium;
+$d-popover-background: var(--secondary);
+$d-popover-border: var(--primary-medium);
 
 @-webkit-keyframes popoverFadeIn {
   from {
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 685c1752e90..c68f47e3759 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -30,7 +30,7 @@
 
   .directory-last-updated {
     margin-bottom: 0.5em;
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-down-1;
   }
 
@@ -42,7 +42,7 @@
     th {
       padding: 0.5em;
       text-align: left;
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
       @media screen and (max-width: $small-width) {
         padding: 0.5em 0.25em;
       }
@@ -50,7 +50,7 @@
       .number,
       .time-read {
         font-size: $font-up-3;
-        color: $primary-medium;
+        color: var(--primary-medium);
         @media screen and (max-width: $small-width) {
           font-size: $font-up-1;
         }
@@ -63,19 +63,19 @@
     th.sortable {
       width: 13%;
       .d-icon-heart {
-        color: $love;
+        color: var(--love);
         margin: 0 0.25em 0 0;
       }
     }
   }
   .me {
-    background-color: $highlight-low-or-medium;
+    background-color: var(--highlight-low-or-medium);
     .username a,
     .name,
     .title,
     .number,
     .time-read {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 282a8556ad8..6360f2fcfdf 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -26,7 +26,7 @@
 
 @keyframes background-fade-highlight {
   0% {
-    background-color: $tertiary-low;
+    background-color: var(--tertiary-low);
   }
   100% {
     background-color: transparent;
@@ -49,12 +49,12 @@
   animation-iteration-count: infinite;
   animation-name: placeHolderShimmer;
   animation-timing-function: linear;
-  background: $primary-very-low;
+  background: var(--primary-very-low);
   background: linear-gradient(
     to right,
-    $primary-very-low 10%,
-    $primary-low 18%,
-    $primary-very-low 33%
+    var(--primary-very-low) 10%,
+    var(--primary-low) 18%,
+    var(--primary-very-low) 33%
   );
 }
 
@@ -97,10 +97,10 @@ h6 {
 a.cancel {
   margin-left: 1.25em;
   line-height: normal;
-  color: $primary-high;
+  color: var(--primary-high);
   transition: color 250ms;
   &:hover {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -152,7 +152,7 @@ input {
   }
 
   &.invalid {
-    background-color: $danger-low;
+    background-color: var(--danger-low);
   }
 
   .radio &[type="radio"],
@@ -165,7 +165,7 @@ input {
 input,
 select,
 textarea {
-  color: $primary;
+  color: var(--primary);
   caret-color: currentColor;
 
   &[class*="span"] {
@@ -176,17 +176,17 @@ textarea {
   &[disabled],
   &[readonly] {
     cursor: not-allowed;
-    background-color: $primary-low;
-    border-color: $primary-low;
+    background-color: var(--primary-low);
+    border-color: var(--primary-low);
   }
 
   &:focus:required:invalid {
-    color: $danger;
-    border-color: $danger;
+    color: var(--danger);
+    border-color: var(--danger);
   }
 
   &:focus:required:invalid:focus {
-    border-color: $danger;
+    border-color: var(--danger);
     box-shadow: shadow("focus-danger");
   }
 }
@@ -212,14 +212,14 @@ input {
     margin-bottom: 9px;
     font-size: $font-0;
     line-height: $line-height-small;
-    color: $primary;
-    background-color: $secondary;
-    border: 1px solid $primary-medium;
+    color: var(--primary);
+    background-color: var(--secondary);
+    border: 1px solid var(--primary-medium);
     border-radius: 0;
     box-sizing: border-box;
     min-height: 30px;
     &:focus {
-      border-color: $tertiary;
+      border-color: var(--tertiary);
       box-shadow: shadow("focus");
       outline: 0;
     }
@@ -249,8 +249,8 @@ input {
       width: auto;
       padding: 0 0.5em;
       height: 28px;
-      background-color: $primary-low;
-      border: 1px solid $primary-medium;
+      background-color: var(--primary-low);
+      border: 1px solid var(--primary-medium);
     }
     .add-on,
     .btn {
@@ -274,23 +274,23 @@ input {
 
 textarea {
   height: auto;
-  background-color: $secondary;
-  border: 1px solid $primary-medium;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
   &:focus {
-    border-color: $tertiary;
+    border-color: var(--tertiary);
     box-shadow: shadow("focus");
     outline: 0;
   }
 }
 
 select {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
 }
 
 table {
   th {
     font-weight: normal;
-    color: $primary-medium;
+    color: var(--primary-medium);
     text-align: left;
     padding: 0.5em;
   }
@@ -303,7 +303,7 @@ table {
   cursor: pointer;
   .discourse-no-touch & {
     &:hover {
-      background-color: $primary-low;
+      background-color: var(--primary-low);
     }
   }
   .d-icon {
@@ -351,7 +351,7 @@ table {
 
 .boxed {
   &.white {
-    background-color: $secondary;
+    background-color: var(--secondary);
   }
 }
 
@@ -365,7 +365,7 @@ table {
 
 .message {
   border-radius: 8px;
-  background-color: $secondary;
+  background-color: var(--secondary);
   padding: 14px;
 
   h2 {
@@ -380,15 +380,15 @@ table {
 .tip {
   display: inline-block;
   &.good {
-    color: $success;
+    color: var(--success);
   }
   &.bad {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
 .avatar-wrapper {
-  background-color: $secondary;
+  background-color: var(--secondary);
   display: inline-block;
   border-radius: 50%;
 }
@@ -403,11 +403,11 @@ table {
 }
 
 .unread-high-priority-notifications {
-  color: $secondary;
-  background: $success;
+  color: var(--secondary);
+  background: var(--success);
 
   &.badge-notification[href] {
-    color: $secondary;
+    color: var(--secondary);
   }
 }
 
@@ -420,7 +420,7 @@ table {
   background-image: radial-gradient(
     40px at 50% 50%,
     transparent 95%,
-    $primary 100%
+    var(--primary) 100%
   );
   opacity: 0.85;
 }
@@ -431,13 +431,13 @@ table {
   height: 80px;
   top: -18px !important;
   right: -18px !important;
-  box-shadow: 0 0 0 9999px rgba($primary, 0.85);
+  box-shadow: 0 0 0 9999px rgba(var(--primary-rgb), 0.85);
   z-index: z("modal", "overlay");
 }
 
 .ring-first-notification {
   position: absolute;
-  color: $secondary;
+  color: var(--secondary);
   text-align: left;
   right: 70px;
   top: 60px;
@@ -487,7 +487,7 @@ table {
   animation: rotate-forever 1s infinite linear;
   height: 30px;
   width: 30px;
-  border: 4px solid $primary-low-mid;
+  border: 4px solid var(--primary-low-mid);
   border-right-color: transparent;
   border-radius: 50%;
 
@@ -501,7 +501,7 @@ table {
 
 .content-list {
   h3 {
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-up-1;
     padding-left: 5px;
     margin-bottom: 10px;
@@ -512,25 +512,25 @@ table {
     margin: 0;
 
     li {
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
 
       &:first-of-type {
-        border-top: 1px solid $primary-low;
+        border-top: 1px solid var(--primary-low);
       }
 
       a {
         display: block;
         padding: 10px;
-        color: $primary;
+        color: var(--primary);
 
         &:hover {
-          background-color: $primary-low;
-          color: $primary;
+          background-color: var(--primary-low);
+          color: var(--primary);
         }
 
         &.active {
           font-weight: bold;
-          color: $primary;
+          color: var(--primary);
         }
       }
     }
@@ -601,7 +601,7 @@ table {
   text-align: center;
   top: 120px;
   left: 500px;
-  color: $primary;
+  color: var(--primary);
 }
 
 #footer {
@@ -610,7 +610,7 @@ table {
     .contents {
       padding-top: 10px;
       a[href] {
-        color: $secondary;
+        color: var(--secondary);
       }
     }
   }
@@ -636,10 +636,10 @@ table {
   }
 
   .email-second {
-    color: $primary-medium;
+    color: var(--primary-medium);
 
     .primary {
-      color: $success;
+      color: var(--success);
       font-weight: bold;
     }
 
@@ -656,7 +656,7 @@ table {
       background: transparent;
 
       .d-icon {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
   }
@@ -682,7 +682,7 @@ table {
   }
 
   .auth-token-icon {
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: 2.25em;
     float: left;
     margin-right: 10px;
@@ -697,10 +697,10 @@ table {
   }
 
   .auth-token-second {
-    color: $primary-medium;
+    color: var(--primary-medium);
 
     .active {
-      color: $success;
+      color: var(--success);
       font-weight: bold;
     }
   }
@@ -713,7 +713,7 @@ table {
       background: transparent;
 
       .d-icon {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
   }
@@ -726,7 +726,7 @@ table {
   .topic-status {
     margin: 0;
     display: inline-flex;
-    color: $primary-medium;
+    color: var(--primary-medium);
     .d-icon {
       height: 0.76em;
       width: 0.75em;
@@ -737,7 +737,7 @@ table {
   }
 
   .topic-status-warning .d-icon-envelope {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -745,8 +745,8 @@ table {
   font-size: $base-font-size;
   font-weight: bold;
   padding: 5px 0;
-  background: $danger-medium;
+  background: var(--danger-medium);
   text-align: center;
   z-index: z("max");
-  color: $secondary;
+  color: var(--secondary);
 }
diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
index 09a52d20c3a..48e36545f5e 100644
--- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
@@ -51,7 +51,7 @@
     }
 
     input[disabled] {
-      background: $primary-low;
+      background: var(--primary-low);
     }
   }
   .pika-single {
diff --git a/app/assets/stylesheets/common/base/ember-select.scss b/app/assets/stylesheets/common/base/ember-select.scss
index f04b5b4a289..20b23e3020a 100644
--- a/app/assets/stylesheets/common/base/ember-select.scss
+++ b/app/assets/stylesheets/common/base/ember-select.scss
@@ -1,4 +1,4 @@
 .ember-select {
-  background-color: $secondary;
-  color: $primary;
+  background-color: var(--secondary);
+  color: var(--primary);
 }
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index 313e030af83..a9772c5c00c 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -34,9 +34,9 @@ sup img.emoji {
   display: none;
   flex-direction: row;
   height: 320px;
-  color: $primary;
-  background-color: $secondary;
-  border: 1px solid $primary-low;
+  color: var(--primary);
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-low);
 
   img.emoji {
     // custom emojis might import images of various sizes
@@ -52,7 +52,7 @@ sup img.emoji {
   flex: 1 0 0px;
   align-items: center;
   justify-content: space-between;
-  border-right: 1px solid $primary-low;
+  border-right: 1px solid var(--primary-low);
   min-width: 36px;
   overflow-y: auto;
   padding: 0.5em;
@@ -102,16 +102,16 @@ sup img.emoji {
 }
 
 .emoji-picker .section-header .title {
-  color: $primary;
+  color: var(--primary);
 }
 
 .emoji-picker .section-header .clear-recent .fa {
   margin: 0;
   padding: 0;
-  color: $primary-medium;
+  color: var(--primary-medium);
 
   &:hover {
-    color: $primary-high;
+    color: var(--primary-high);
   }
 }
 
@@ -127,7 +127,7 @@ sup img.emoji {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
 }
 
 .emoji-picker .info {
@@ -209,7 +209,7 @@ sup img.emoji {
   display: inline-block;
   vertical-align: top;
   border-radius: 2px;
-  background-color: $tertiary-low;
+  background-color: var(--tertiary-low);
 }
 
 .emoji-picker-modal.fadeIn {
@@ -225,7 +225,7 @@ sup img.emoji {
 
 .emoji-picker .filter {
   background-color: none;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
   padding: 5px;
   display: flex;
   position: relative;
@@ -237,7 +237,7 @@ sup img.emoji {
 }
 
 .emoji-picker .filter .d-icon-search {
-  color: $primary-medium;
+  color: var(--primary-medium);
   font-size: $font-up-1;
   margin-left: 5px;
   margin-right: 5px;
@@ -251,8 +251,8 @@ sup img.emoji {
   box-shadow: none;
   padding-right: 24px;
   outline: none;
-  color: $primary;
-  background: $secondary;
+  color: var(--primary);
+  background: var(--secondary);
 
   &:focus {
     border: none;
@@ -279,11 +279,11 @@ sup img.emoji {
   top: 12px;
   border: 0;
   background: none;
-  color: $primary-high;
+  color: var(--primary-high);
   outline: none;
   display: none;
 
   &:hover {
-    color: $primary;
+    color: var(--primary);
   }
 }
diff --git a/app/assets/stylesheets/common/base/exception.scss b/app/assets/stylesheets/common/base/exception.scss
index 455023b555f..398db97b27f 100644
--- a/app/assets/stylesheets/common/base/exception.scss
+++ b/app/assets/stylesheets/common/base/exception.scss
@@ -15,7 +15,7 @@
   .desc {
     margin-top: 16px;
     .d-icon-check-circle {
-      color: $success;
+      color: var(--success);
     }
   }
   .buttons {
diff --git a/app/assets/stylesheets/common/base/explain-reviewable.scss b/app/assets/stylesheets/common/base/explain-reviewable.scss
index ec7026e8139..9f82f808d2a 100644
--- a/app/assets/stylesheets/common/base/explain-reviewable.scss
+++ b/app/assets/stylesheets/common/base/explain-reviewable.scss
@@ -18,7 +18,7 @@
   }
   tr.total {
     td {
-      background-color: $primary-low;
+      background-color: var(--primary-low);
       font-weight: bold;
     }
   }
@@ -28,7 +28,7 @@
   }
 
   .score-value-type {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   .op:last-of-type {
diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss
index 9102cc69ba3..49de3c100eb 100644
--- a/app/assets/stylesheets/common/base/faqs.scss
+++ b/app/assets/stylesheets/common/base/faqs.scss
@@ -9,7 +9,7 @@
     }
     .about.category-moderators {
       .badge-wrapper.bullet .badge-category {
-        color: $primary;
+        color: var(--primary);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 547c82bcc3e..d77e1491fd2 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -3,7 +3,7 @@
 // For example: .group .user-secondary-navigation
 
 .group-details-container {
-  background: $primary-very-low;
+  background: var(--primary-very-low);
   padding: 20px;
   margin-bottom: 15px;
   position: relative;
@@ -34,12 +34,12 @@
   .group-info-name {
     font-size: $font-up-3;
     font-weight: bold;
-    color: $primary;
+    color: var(--primary);
   }
 
   .group-info-full-name {
     font-size: $font-up-2;
-    color: $primary-high-or-secondary-low;
+    color: var(--primary-high-or-secondary-low);
   }
 
   span {
@@ -75,7 +75,7 @@
   margin-right: 10px;
 
   &:hover {
-    background-color: $danger;
+    background-color: var(--danger);
   }
 }
 
@@ -90,7 +90,7 @@ table.group-manage-logs {
     cursor: pointer;
 
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
@@ -120,7 +120,7 @@ table.group-members {
     .user-info {
       display: block;
       .avatar-flair {
-        color: $primary;
+        color: var(--primary);
       }
     }
 
@@ -130,14 +130,14 @@ table.group-members {
 
     td {
       text-align: center;
-      color: $primary-medium;
+      color: var(--primary-medium);
       padding: 0.8em 0;
     }
   }
 }
 
 .group-owner-label {
-  color: $primary;
+  color: var(--primary);
 }
 
 .group-flair-inputs {
@@ -148,7 +148,7 @@ table.group-members {
     width: 45px;
 
     .avatar-wrapper {
-      background-color: $primary-very-low;
+      background-color: var(--primary-very-low);
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 3419cb53b46..2ae627b9d28 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -47,8 +47,8 @@
     display: flex;
     box-sizing: border-box;
     cursor: pointer;
-    border: 1px solid $primary-low;
-    color: $primary;
+    border: 1px solid var(--primary-low);
+    color: var(--primary);
     .discourse-no-touch & {
       transition: all 0.25s;
       &:hover {
@@ -56,12 +56,12 @@
       }
     }
     .group-membership {
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin-top: auto;
       padding-top: 1em;
       .is-group-owner,
       .is-group-member {
-        color: $success;
+        color: var(--success);
       }
     }
     .group-box-inner {
@@ -94,15 +94,15 @@
       .group-user-count {
         display: flex;
         align-items: center;
-        color: $primary-high;
+        color: var(--primary-high);
         .d-icon {
           margin-right: 0.25em;
           font-size: 0.8em;
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
       .group-description {
-        color: $primary-high;
+        color: var(--primary-high);
         word-wrap: break-word;
       }
     }
@@ -110,7 +110,7 @@
     .groups-info-name {
       font-size: $font-up-1;
       font-weight: bold;
-      color: $primary;
+      color: var(--primary);
     }
 
     $size: 40px;
@@ -118,7 +118,7 @@
 
     .group-avatar-flair {
       display: inline-block;
-      color: $primary;
+      color: var(--primary);
 
       .avatar-flair {
         background-size: $size;
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index b28747e27ca..1b472a38516 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -5,7 +5,7 @@
   position: absolute;
   top: 0;
   z-index: z("header");
-  background-color: $header_background;
+  background-color: var(--header_background);
   box-shadow: shadow("header");
 
   > .wrap {
@@ -46,7 +46,7 @@
     height: 100%;
     a,
     a:visited {
-      color: $header_primary;
+      color: var(--header_primary);
     }
   }
 
@@ -96,7 +96,7 @@
 .panel-body {
   .flagged-posts,
   .reviewables {
-    background: $danger;
+    background: var(--danger);
     min-width: 6px;
   }
 }
@@ -130,29 +130,29 @@
     }
     &:hover,
     &:focus {
-      background-color: $primary-low;
+      background-color: var(--primary-low);
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
       .d-icon {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
     &:active {
-      color: $primary;
-      background-color: $primary-low;
+      color: var(--primary);
+      background-color: var(--primary-low);
     }
   }
   .drop-down-mode & {
     .active .icon {
       position: relative;
-      background-color: $secondary;
+      background-color: var(--secondary);
       cursor: default;
-      border-top: 1px solid $primary-low;
-      border-left: 1px solid $primary-low;
-      border-right: 1px solid $primary-low;
+      border-top: 1px solid var(--primary-low);
+      border-left: 1px solid var(--primary-low);
+      border-right: 1px solid var(--primary-low);
       .d-icon {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
       &:after {
         display: block;
@@ -163,7 +163,7 @@
         width: 100%;
         height: 0;
         content: "";
-        border-top: 1px solid $secondary;
+        border-top: 1px solid var(--secondary);
       }
       &:hover {
         border-bottom: none;
@@ -176,7 +176,7 @@
     font-size: $font-up-4;
     line-height: $line-height-large;
     display: inline-block;
-    color: $header_primary-low-mid;
+    color: var(--header_primary-low-mid);
   }
   .notifications {
     position: relative;
@@ -200,7 +200,7 @@
   .unread-notifications {
     left: auto;
     right: -3px;
-    background-color: $tertiary-med-or-tertiary;
+    background-color: var(--tertiary-med-or-tertiary);
   }
   .unread-high-priority-notifications,
   .ring {
@@ -210,7 +210,7 @@
 }
 
 .highlight-strong {
-  background-color: $highlight-medium;
+  background-color: var(--highlight-medium);
 }
 
 .search-highlight {
@@ -259,7 +259,7 @@
     }
   }
   .topic-link {
-    color: $header_primary;
+    color: var(--header_primary);
     display: block;
     @include ellipsis;
     // Some characters like '/' and 'j' can be wider than the font's em-box
@@ -271,10 +271,10 @@
   }
   .topic-statuses {
     .d-icon {
-      color: $header_primary-medium;
+      color: var(--header_primary-medium);
     }
     .d-icon-envelope {
-      color: $danger;
+      color: var(--danger);
     }
   }
   .header-title {
@@ -300,7 +300,7 @@
     &.bar,
     &.none {
       span.badge-category {
-        color: $header_primary-high;
+        color: var(--header_primary-high);
       }
     }
   }
@@ -309,7 +309,7 @@
     align-items: center;
     max-width: 100%;
     .discourse-tags {
-      color: $header_primary-high;
+      color: var(--header_primary-high);
       @include ellipsis;
       .discourse-tag {
         display: inline; // tags need to stay inline in order for them to truncate
@@ -355,7 +355,7 @@ $mobile-avatar-height: 1.532em;
 
   .trigger-group-card {
     padding: 0 5px;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     border-radius: 0.25em;
     min-width: 3em;
     @include ellipsis;
@@ -367,7 +367,7 @@ $mobile-avatar-height: 1.532em;
       .mobile-view & {
         height: $mobile-avatar-height;
       }
-      color: $primary-high;
+      color: var(--primary-high);
 
       .d-icon {
         margin-right: 5px;
@@ -380,7 +380,7 @@ $mobile-avatar-height: 1.532em;
   }
 
   .more-participants {
-    color: $header_primary-high;
+    color: var(--header_primary-high);
     margin-left: 5px;
   }
 }
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index c4724f06b55..03c37fbf84e 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/app/assets/stylesheets/common/base/history.scss
@@ -9,7 +9,7 @@
 
   #revision {
     overflow: auto;
-    border-bottom: 3px solid $primary-low;
+    border-bottom: 3px solid var(--primary-low);
   }
 
   table.markdown > tbody > tr > td,
@@ -33,72 +33,72 @@
   .diff-ins {
     code,
     img {
-      border: 2px solid $success;
+      border: 2px solid var(--success);
     }
     img {
       opacity: 0.75;
       filter: alpha(opacity=75);
     }
     a {
-      color: $success;
+      color: var(--success);
       text-decoration: none;
     }
   }
   img.diff-ins,
   code.diff-ins {
-    border: 2px solid $success;
+    border: 2px solid var(--success);
   }
   img.diff-ins {
     opacity: 0.75;
     filter: alpha(opacity=75);
   }
   .diff-ins {
-    color: $primary;
-    background: $success-low;
+    color: var(--primary);
+    background: var(--success-low);
   }
   ins {
-    color: $primary;
-    background: $success-low;
+    color: var(--primary);
+    background: var(--success-low);
     text-decoration: none;
   }
   del,
   .diff-del {
     code,
     img {
-      border: 2px solid $danger;
+      border: 2px solid var(--danger);
     }
     img {
       opacity: 0.5;
       filter: alpha(opacity=50);
     }
     a {
-      color: $danger;
+      color: var(--danger);
       text-decoration: none;
     }
   }
   img.diff-del,
   code.diff-del {
-    border: 2px solid $danger;
+    border: 2px solid var(--danger);
   }
   img.diff-del {
     opacity: 0.5;
     filter: alpha(opacity=50);
   }
   .diff-del {
-    color: $primary;
-    background: $danger-low;
+    color: var(--primary);
+    background: var(--danger-low);
     text-decoration: none;
   }
   del {
-    color: $primary;
-    background: $danger-low;
+    color: var(--primary);
+    background: var(--danger-low);
     text-decoration: none;
   }
   span.date {
     font-weight: bold;
   }
   span.edit-reason {
-    background-color: $highlight-medium;
+    background-color: var(--highlight-medium);
     padding: 3px 5px 5px 5px;
   }
   .d-icon-ban {
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index f865da7228f..23129669ed4 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -15,7 +15,7 @@ $meta-element-margin: 6px;
 }
 
 .onebox img.d-lazyload-hidden:not(.ytp-thumbnail-image) {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
 }
 
 .cooked img.d-lazyload {
@@ -38,8 +38,8 @@ $meta-element-margin: 6px;
   position: absolute;
   bottom: 0;
   width: 100%;
-  color: $secondary;
-  background: $primary;
+  color: var(--secondary);
+  background: var(--primary);
   opacity: 0;
   transition: opacity 0.2s;
   display: flex;
@@ -53,7 +53,7 @@ $meta-element-margin: 6px;
   .d-icon {
     margin: $meta-element-margin;
     opacity: 0.8;
-    color: $secondary;
+    color: var(--secondary);
     + .filename {
       margin-left: 0px;
     }
@@ -62,7 +62,7 @@ $meta-element-margin: 6px;
   .informations {
     margin: $meta-element-margin;
     padding-right: 20px;
-    color: $secondary-high;
+    color: var(--secondary-high);
     font-size: $font-0;
     flex-shrink: 0;
     flex-grow: 3;
@@ -82,8 +82,8 @@ $meta-element-margin: 6px;
 
     a.lightbox:hover {
       border-radius: 5px;
-      box-shadow: 0 2px 5px 0 rgba($primary, 0.2),
-        0 2px 10px 0 rgba($primary, 0.2);
+      box-shadow: 0 2px 5px 0 rgba(var(--primary-rgb), 0.2),
+        0 2px 10px 0 rgba(var(--primary-rgb), 0.2);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 494dcfd9968..512d0089016 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -1,5 +1,5 @@
 .caps-lock-warning {
-  color: $danger;
+  color: var(--danger);
   font-size: $font-down-1;
   font-weight: bold;
 }
@@ -17,7 +17,7 @@
     width: 100%;
   }
   a {
-    color: $primary-high;
+    color: var(--primary-high);
   }
   td {
     padding-right: 5px;
@@ -65,7 +65,7 @@
 
 .create-account {
   .disclaimer {
-    color: $primary-medium;
+    color: var(--primary-medium);
     margin-top: 0.5em;
   }
 
@@ -101,7 +101,7 @@
       }
       .instructions {
         margin-top: 0.15em;
-        color: $primary-medium;
+        color: var(--primary-medium);
         line-height: $line-height-medium;
       }
     }
@@ -111,7 +111,7 @@
 .password-reset {
   .instructions {
     label {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
@@ -143,7 +143,7 @@
       margin-bottom: 10px;
     }
     .instructions {
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin: 0;
       font-size: $font-down-1;
       font-weight: normal;
@@ -167,7 +167,7 @@
   flex-direction: column;
   margin-top: 0.15em;
   label {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -176,7 +176,7 @@
 button#login-link,
 button#new-account-link {
   background: transparent;
-  color: $primary-high;
+  color: var(--primary-high);
 }
 
 #security-key {
@@ -193,6 +193,6 @@ button#new-account-link {
   a {
     display: inline-block;
     padding: 1em 0.5em 1em 0;
-    color: $tertiary;
+    color: var(--tertiary);
   }
 }
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 25412b0a186..40e51d5b1bb 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -22,9 +22,9 @@
 }
 
 .menu-panel {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   box-shadow: shadow("menu-panel");
-  background-color: $secondary;
+  background-color: var(--secondary);
   z-index: z("header");
   padding: 0.5em;
   width: 300px;
@@ -70,22 +70,22 @@
     a.categories-link {
       padding: 0.25em 0.5em;
       display: block;
-      color: $primary;
+      color: var(--primary);
       &:hover,
       &:focus {
-        background-color: $highlight-medium;
+        background-color: var(--highlight-medium);
         outline: none;
       }
 
       .d-icon {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
 
     .new {
       font-size: $font-down-1;
       margin-left: 0.5em;
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
   }
 
@@ -104,12 +104,12 @@
         background: transparent;
 
         .category-name {
-          color: $primary;
+          color: var(--primary);
         }
       }
     }
     .badge-notification {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       background-color: transparent;
       display: inline;
       padding: 0;
@@ -119,11 +119,11 @@
     .badge-wrapper {
       &.bar,
       &.bullet {
-        color: $primary;
+        color: var(--primary);
         padding: 0 0 0 0.15em;
       }
       &.box {
-        color: $secondary;
+        color: var(--secondary);
         + a.badge.badge-notification {
           padding-top: 2px;
         }
@@ -136,7 +136,7 @@
 
   // note these topic counts only appear for anons in the category hamburger drop down
   b.topics-count {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     font-weight: normal;
     font-size: $font-down-1;
   }
@@ -155,7 +155,7 @@
     width: 100%;
     display: table;
     margin-top: -1px;
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     padding-top: 0.5em;
 
     h3 {
@@ -166,14 +166,14 @@
 
     .d-icon,
     &:hover .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
     .icon {
-      color: $primary-high;
+      color: var(--primary-high);
     }
 
     li {
-      background-color: $tertiary-low;
+      background-color: var(--tertiary-low);
 
       // This is until other languages remove the HTML from within
       // notifications. It can then be removed
@@ -182,12 +182,12 @@
       }
 
       span:first-child {
-        color: $primary;
+        color: var(--primary);
       }
 
       &:hover,
       &:focus {
-        background-color: $highlight-medium;
+        background-color: var(--highlight-medium);
         outline: none;
       }
 
@@ -227,11 +227,11 @@
     }
     .is-warning {
       .d-icon-far-envelope {
-        color: $danger;
+        color: var(--danger);
       }
     }
     .read {
-      background-color: $secondary;
+      background-color: var(--secondary);
     }
     .none {
       padding-top: 5px;
@@ -251,11 +251,11 @@
       justify-content: center;
       align-items: center;
       min-height: 30px;
-      color: $primary-med-or-secondary-high;
-      background: $blend-primary-secondary-5;
+      color: var(--primary-med-or-secondary-high);
+      background: var(--blend-primary-secondary-5);
       &:hover {
-        color: $primary;
-        background: $primary-low;
+        color: var(--primary);
+        background: var(--primary-low);
       }
     }
     /* as a big ol' click target, don't let text inside be selected */
@@ -263,9 +263,9 @@
 
     &.quick-access-profile {
       li:not(.show-all) a {
-        color: $primary;
+        color: var(--primary);
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
 
         // accounts for menu "ears" 4px + border 1px
@@ -320,8 +320,8 @@ div.menu-links-header {
       }
 
       a.active {
-        border: 1px solid $primary-low;
-        border-bottom: 1px solid $secondary;
+        border: 1px solid var(--primary-low);
+        border-bottom: 1px solid var(--secondary);
         position: relative;
 
         &:focus,
@@ -333,7 +333,7 @@ div.menu-links-header {
   }
   a:hover,
   a:focus {
-    background-color: $highlight-medium;
+    background-color: var(--highlight-medium);
     outline: none;
   }
   a {
@@ -373,7 +373,7 @@ div.menu-links-header {
   }
   .fa,
   a {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
 
   .d-icon-user {
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 927d975a78f..178be0a01d2 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -16,7 +16,7 @@
   flex: 0 1 auto;
   margin: 0 auto;
   max-width: 700px;
-  background-color: $secondary;
+  background-color: var(--secondary);
   box-shadow: shadow("modal");
 
   .select-kit {
@@ -42,20 +42,20 @@
   z-index: z("modal", "content");
   overflow: auto;
   height: auto;
-  background-color: $secondary;
+  background-color: var(--secondary);
   box-shadow: shadow("card");
   background-clip: padding-box;
 }
 
 .input-hint-text {
   margin-left: 0.5em;
-  color: $secondary-high;
+  color: var(--secondary-high);
 }
 
 .modal-header {
   display: flex;
   padding: 10px 15px;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
   align-items: center;
 
   .title {
@@ -75,7 +75,7 @@
     margin-left: auto;
     padding-left: 2em;
     .close {
-      color: $primary-high;
+      color: var(--primary-high);
     }
   }
 }
@@ -127,7 +127,7 @@
 
 .inline-modal {
   .modal-inner-container {
-    border: 1px solid $secondary-medium;
+    border: 1px solid var(--secondary-medium);
   }
 }
 
@@ -163,7 +163,7 @@
 
 .modal-footer {
   padding: 14px 15px 10px;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   .btn {
     margin: 0 5px 5px 0;
     &[href] {
@@ -188,11 +188,11 @@
 .modal {
   .nav {
     padding: 10px 30px 10px 15px;
-    background-color: $secondary;
+    background-color: var(--secondary);
     li > a {
       font-size: $font-0;
     }
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
   }
 
   &.hidden {
@@ -229,18 +229,18 @@
           padding: 5px 10px;
           box-shadow: shadow("card");
           z-index: 5;
-          background-color: $secondary;
+          background-color: var(--secondary);
           max-height: 150px;
           width: 90%;
           overflow-y: auto;
           > .search-link {
             padding: 6px;
-            border-bottom: 1px solid $primary-low;
+            border-bottom: 1px solid var(--primary-low);
             cursor: pointer;
             display: block;
             &:hover,
             &:focus {
-              background-color: $highlight-medium;
+              background-color: var(--highlight-medium);
             }
             .search-category {
               display: flex;
@@ -266,7 +266,7 @@
       margin-bottom: 20px;
     }
     .warning {
-      color: $danger !important;
+      color: var(--danger) !important;
     }
   }
 
@@ -321,9 +321,9 @@
 
 .d-modal-cancel {
   margin-left: 1em;
-  color: $primary-medium;
+  color: var(--primary-medium);
   &:hover {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -339,7 +339,7 @@
   .progress-bar {
     height: 15px;
     position: relative;
-    background: $primary-low-mid;
+    background: var(--primary-low-mid);
     border-radius: 25px;
     overflow: hidden;
     margin: 30px 0 20px;
@@ -347,7 +347,7 @@
       display: block;
       width: 0%;
       height: 100%;
-      background-color: $tertiary;
+      background-color: var(--tertiary);
       position: relative;
       transition: width 0.6s linear;
     }
@@ -369,7 +369,7 @@
   }
   .d-icon-times-circle {
     margin-left: 5px;
-    color: $danger;
+    color: var(--danger);
   }
   li {
     margin-bottom: 10px;
@@ -390,8 +390,8 @@
 
     .cannot_delete_reason {
       position: absolute;
-      background: $primary;
-      color: $secondary;
+      background: var(--primary);
+      color: var(--secondary);
       text-align: center;
       border-radius: 2px;
       padding: 12px 8px;
@@ -402,7 +402,7 @@
         border: solid transparent;
         content: " ";
         position: absolute;
-        border-top-color: $primary;
+        border-top-color: var(--primary);
         border-width: 8px;
       }
     }
@@ -415,8 +415,8 @@
   .pending-permission-change-alert {
     margin-left: auto;
     max-width: 250px;
-    background: $primary-very-high;
-    color: $secondary;
+    background: var(--primary-very-high);
+    color: var(--secondary);
     margin-top: 10px;
     padding: 5px 10px;
     position: relative;
@@ -424,7 +424,7 @@
       border: solid transparent;
       content: " ";
       position: absolute;
-      border-bottom-color: $primary-very-high;
+      border-bottom-color: var(--primary-very-high);
       border-width: 7px;
       top: -13px;
       left: 200px;
@@ -496,13 +496,13 @@
     margin-right: 5px;
     &:hover,
     &.active {
-      color: $primary;
+      color: var(--primary);
     }
     &.active {
       font-weight: bold;
     }
     &:focus {
-      outline: 2px solid $primary-low;
+      outline: 2px solid var(--primary-low);
     }
   }
   .incoming-email-tabs {
@@ -516,7 +516,7 @@
     .incoming-email-html-part {
       height: 95%;
       border: none;
-      border-top: 1px solid $primary-low;
+      border-top: 1px solid var(--primary-low);
       padding-top: 10px;
     }
     textarea {
@@ -614,7 +614,7 @@
 }
 
 .custom-message-length {
-  color: $primary-medium;
+  color: var(--primary-medium);
   font-size: $font-down-1;
 }
 
@@ -631,11 +631,11 @@
     }
 
     .input-hint-text {
-      color: $primary;
+      color: var(--primary);
     }
 
     .jump-to-post-control .index {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     .jump-to-date-control .input-hint-text {
@@ -653,7 +653,7 @@
 
       .text {
         margin: 0 0.5em 0 0;
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
   }
@@ -763,12 +763,12 @@
         cursor: pointer;
 
         &.is-active {
-          color: $secondary;
-          background: $danger;
+          color: var(--secondary);
+          background: var(--danger);
 
           &.single-tab {
             background: none;
-            color: $primary;
+            color: var(--primary);
             padding: 4px 0;
           }
         }
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 6c5bde77118..f49d2923aad 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -7,7 +7,7 @@ a.loading-onebox {
     position: relative;
     height: 10px;
     width: 10px;
-    border: 2px solid $primary-low-mid;
+    border: 2px solid var(--primary-low-mid);
     border-right-color: transparent;
     border-radius: 50%;
     -webkit-animation: rotate-forever 1s infinite linear;
@@ -25,7 +25,7 @@ a.loading-onebox {
     margin-bottom: 12px;
     margin-right: 10px;
     display: block;
-    color: $primary;
+    color: var(--primary);
     position: relative;
     height: 20px;
     .info {
@@ -94,16 +94,16 @@ a.loading-onebox {
 }
 
 aside.onebox {
-  border: 5px solid $primary-low;
+  border: 5px solid var(--primary-low);
   margin-bottom: 1em;
   padding: 12px 25px 12px 12px;
   font-size: $font-0;
-  background: $secondary;
+  background: var(--secondary);
 
   header {
     margin-bottom: 8px;
     a[href] {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       text-decoration: none;
     }
   }
@@ -131,12 +131,12 @@ aside.onebox {
     }
 
     a[href] {
-      color: $tertiary;
+      color: var(--tertiary);
       text-decoration: none;
     }
 
     a[href]:visited {
-      color: $tertiary;
+      color: var(--tertiary);
     }
 
     img {
@@ -304,9 +304,9 @@ aside.onebox {
 
 // Google Calendar Placeholder
 .gdocs-onebox-splash {
-  background-color: $primary-low-mid;
-  color: $primary;
-  border: 1px inset $primary;
+  background-color: var(--primary-low-mid);
+  color: var(--primary);
+  border: 1px inset var(--primary);
   .gdocs-onebox-logo {
     display: inline-block;
     width: 128px;
@@ -351,7 +351,7 @@ pre.onebox code ol {
   line-height: $line-height-large;
 }
 pre.onebox code {
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
 }
 pre.onebox code li {
   padding-left: 5px;
@@ -372,7 +372,7 @@ pre.onebox code ol.lines li {
 }
 
 pre.onebox code li.selected {
-  background-color: $highlight-low-or-medium;
+  background-color: var(--highlight-low-or-medium);
 }
 
 pre.onebox code {
@@ -406,7 +406,7 @@ pre.onebox code {
   }
 
   .github-icon {
-    fill: $primary-high;
+    fill: var(--primary-high);
     width: 40px;
     height: 40px;
   }
@@ -440,10 +440,10 @@ pre.onebox code {
       font-weight: bold;
 
       .added {
-        color: $success;
+        color: var(--success);
       }
       .removed {
-        color: $danger;
+        color: var(--danger);
       }
     }
   }
@@ -465,8 +465,8 @@ pre.onebox code {
 
   .labels span {
     // !important required to override inline style attribute
-    background-color: $primary-medium !important;
-    color: $secondary !important;
+    background-color: var(--primary-medium) !important;
+    color: var(--secondary) !important;
     padding: 2px 4px !important;
   }
 }
@@ -528,7 +528,7 @@ aside.onebox.twitterstatus .onebox-body {
     margin-left: 70px;
 
     .quoted {
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low);
       padding: 0px 14px 0px 12px;
       white-space: normal;
       margin-top: 15px;
@@ -543,7 +543,7 @@ aside.onebox.twitterstatus .onebox-body {
 
         span {
           font-weight: lighter;
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
 
@@ -600,7 +600,7 @@ aside.onebox.stackexchange .onebox-body {
 }
 
 .onebox-metadata {
-  color: $primary-med-or-secondary-med;
+  color: var(--primary-med-or-secondary-med);
 }
 
 .onebox.xkcd .onebox-body {
@@ -630,7 +630,7 @@ aside.onebox.stackexchange .onebox-body {
 .onebox.whitelistedgeneric {
   .label1,
   .label2 {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
   .label1 {
     float: left;
@@ -660,7 +660,7 @@ aside.onebox.stackexchange .onebox-body {
 
 .onebox.instagram {
   div.instagram-description {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     padding-top: 10px;
   }
 }
@@ -670,7 +670,7 @@ aside.onebox.stackexchange .onebox-body {
     position: relative;
   }
   div.description {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
 }
 
@@ -683,7 +683,7 @@ aside.onebox.stackexchange .onebox-body {
 .onebox.twitterstatus {
   .like,
   .retweet {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     padding-left: 10px;
     svg {
       fill: currentColor;
@@ -720,7 +720,7 @@ aside.onebox.stackexchange .onebox-body {
   position: relative;
   width: 100%;
   padding: 0 0 48.25% 0;
-  background-color: $primary-low;
+  background-color: var(--primary-low);
 
   .placeholder-icon {
     position: absolute;
diff --git a/app/assets/stylesheets/common/base/popup-menu.scss b/app/assets/stylesheets/common/base/popup-menu.scss
index e367b048e49..c3524c7393c 100644
--- a/app/assets/stylesheets/common/base/popup-menu.scss
+++ b/app/assets/stylesheets/common/base/popup-menu.scss
@@ -1,7 +1,7 @@
 .popup-menu {
-  background-color: $secondary;
+  background-color: var(--secondary);
   width: 14em;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   z-index: z("dropdown");
   box-shadow: shadow("card");
 
@@ -10,7 +10,7 @@
     list-style: none;
 
     li {
-      border-bottom: 1px solid rgba($primary-low, 0.5);
+      border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
 
       &:last-child {
         border: none;
@@ -26,33 +26,33 @@
     border-radius: 0;
 
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     &:hover {
-      color: $primary;
-      background: $tertiary-low;
+      color: var(--primary);
+      background: var(--tertiary-low);
 
       .d-icon {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
 
     &.popup-menu-btn-danger {
       .d-icon {
-        color: $danger;
+        color: var(--danger);
       }
 
       .d-button-label {
-        color: $primary;
+        color: var(--primary);
       }
 
       &:hover {
         .d-icon,
         .d-button-label {
-          color: $danger;
+          color: var(--danger);
         }
-        background: $danger-low;
+        background: var(--danger-low);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index c838979e8a9..2069e5152f8 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -6,15 +6,15 @@
   }
 
   .status {
-    color: $primary-medium;
+    color: var(--primary-medium);
     span.approved {
-      color: $success;
+      color: var(--success);
       .d-icon {
         color: currentColor;
       }
     }
     span.rejected {
-      color: $danger;
+      color: var(--danger);
       .d-icon {
         color: currentColor;
       }
@@ -82,7 +82,7 @@
   }
 
   .reviewable-user-details {
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     padding-bottom: 0.25em;
 
     display: flex;
@@ -100,7 +100,7 @@
 }
 
 .reviewable-filters {
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
   padding: 1em;
   margin-bottom: 1em;
 
@@ -130,7 +130,7 @@
 
       .d-date-input {
         flex: 1 1 auto;
-        border: 1px solid $primary-medium;
+        border: 1px solid var(--primary-medium);
       }
     }
   }
@@ -205,19 +205,19 @@
   .percentage-label {
     margin-right: 0.25em;
     &.agreed {
-      color: $success;
+      color: var(--success);
       + .d-icon {
-        color: $success;
+        color: var(--success);
       }
     }
     &.disagreed {
-      color: $danger;
+      color: var(--danger);
       + .d-icon {
-        color: $danger;
+        color: var(--danger);
       }
     }
     &.ignored {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
   .d-icon {
@@ -227,14 +227,14 @@
 
 .reviewable-item {
   padding-top: 2em;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
 
   .topic-statuses {
     font-size: $font-up-2;
   }
 
   .reviewable-meta-data {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     display: flex;
     width: 100%;
     margin-bottom: 0.5em;
@@ -250,7 +250,7 @@
       margin-left: 1em;
       margin-right: auto;
       a {
-        color: $primary-med-or-secondary-med;
+        color: var(--primary-med-or-secondary-med);
       }
     }
     .score {
@@ -287,7 +287,7 @@
 
 .reviewable-scores {
   min-width: 50%;
-  color: $primary-high;
+  color: var(--primary-high);
 
   .reviewed-by {
     .date {
@@ -306,7 +306,7 @@
 
   .d-icon {
     font-size: $font-down-1;
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   .badge-notification {
@@ -375,7 +375,7 @@
 
 .reviewable-item {
   .show-raw-email {
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-down-2;
   }
   .post-title {
@@ -413,7 +413,7 @@
     .reviewable-reply-to {
       display: flex;
       align-items: center;
-      color: $primary-medium;
+      color: var(--primary-medium);
       font-size: 0.9em;
       .d-icon {
         margin-right: 0.5em;
@@ -445,11 +445,11 @@
 
   .post-topic {
     width: 100%;
-    color: $primary-medium;
+    color: var(--primary-medium);
     margin-bottom: 0.75em;
     .title-text {
       font-weight: bold;
-      color: $primary;
+      color: var(--primary);
       display: block;
       font-size: $font-up-2;
       margin-right: 0.75em;
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 6555aedbad1..de3ac13d76d 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -24,7 +24,7 @@
 // The 'left' and 'right' in these selectors is not being flipped by r2.
 .rtl .nav-stacked a.active::after {
   border-left-color: transparent !important;
-  border-right-color: $secondary !important;
+  border-right-color: var(--secondary) !important;
 }
 .rtl code {
   direction: ltr !important;
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index 354fb89b872..d74f5ea7224 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -70,7 +70,7 @@
       }
 
       a.widget-link {
-        color: $tertiary;
+        color: var(--tertiary);
       }
     }
 
@@ -78,12 +78,12 @@
       display: flex;
       flex: 1 1 auto;
       .topic-statuses {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
 
     .main-results + .secondary-results {
-      border-left: 1px solid $primary-low;
+      border-left: 1px solid var(--primary-low);
       margin-left: 1em;
       padding-left: 1em;
       max-width: 33%;
@@ -98,7 +98,7 @@
         margin-bottom: 1em;
         margin-top: 1em;
         height: 1px;
-        background: $primary-low;
+        background: var(--primary-low);
       }
 
       .search-result-tag {
@@ -115,10 +115,10 @@
 
       .search-result-group {
         .search-link {
-          color: $primary-high;
+          color: var(--primary-high);
 
           &:hover {
-            color: $primary;
+            color: var(--primary);
           }
         }
 
@@ -151,7 +151,7 @@
             &:hover {
               .name,
               .slug {
-                color: $primary-high;
+                color: var(--primary-high);
               }
             }
 
@@ -166,7 +166,7 @@
 
             .slug {
               font-size: $font-down-1;
-              color: $primary-high;
+              color: var(--primary-high);
             }
           }
         }
@@ -213,12 +213,12 @@
             }
 
             .username {
-              color: $primary-high-or-secondary-low;
+              color: var(--primary-high-or-secondary-low);
               font-size: $font-down-1;
             }
 
             .name {
-              color: $primary-high-or-secondary-low;
+              color: var(--primary-high-or-secondary-low);
               font-size: $font-0;
               font-weight: 700;
             }
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 35a5babc26f..a31bbe286d2 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -3,9 +3,9 @@
   justify-content: space-between;
 
   .warning {
-    background-color: $danger-medium;
+    background-color: var(--danger-medium);
     padding: 5px 8px;
-    color: $secondary;
+    color: var(--secondary);
   }
 
   .search-bar {
@@ -43,7 +43,7 @@
     .search-info {
       display: flex;
       flex-wrap: wrap;
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
       padding-bottom: 1em;
       margin-bottom: 1.5em;
       flex-direction: row;
@@ -90,9 +90,9 @@
     .search-notice {
       .fps-invalid {
         padding: 0.5em;
-        background-color: $danger-low;
-        border: 1px solid $danger-medium;
-        color: $danger;
+        background-color: var(--danger-low);
+        border: 1px solid var(--danger-medium);
+        color: var(--danger);
       }
     }
   }
@@ -126,7 +126,7 @@
     }
 
     .search-advanced-title {
-      background: $primary-low;
+      background: var(--primary-low);
       padding: 0.358em 1em;
       @include breakpoint(medium) {
         padding: 0.358em 0.5em;
@@ -136,7 +136,7 @@
       font-weight: bold;
 
       &.btn {
-        background: $primary-low;
+        background: var(--primary-low);
       }
 
       .d-icon {
@@ -145,7 +145,7 @@
     }
 
     .search-advanced-filters {
-      background: $primary-very-low;
+      background: var(--primary-very-low);
       padding: 1em;
       .control-group {
         margin-bottom: 15px;
@@ -231,28 +231,28 @@
     line-height: $line-height-large;
     word-wrap: break-word;
     max-width: 640px;
-    color: $primary-medium;
+    color: var(--primary-medium);
     .date {
-      color: $primary-high;
+      color: var(--primary-high);
     }
 
     .search-highlight {
-      color: $primary-high;
+      color: var(--primary-high);
     }
   }
 
   .like-count {
     display: block;
-    color: $primary-high;
+    color: var(--primary-high);
     margin-top: 0.25em;
     .d-icon {
-      color: $love;
+      color: var(--love);
       font-size: $font-down-1;
     }
   }
 
   a.search-link:visited .topic-title {
-    color: $tertiary-high;
+    color: var(--tertiary-high);
   }
   .search-link {
     .topic-title {
@@ -263,7 +263,7 @@
       display: inline-block;
       font-size: 1.3em;
       line-height: $line-height-medium;
-      color: $primary-medium;
+      color: var(--primary-medium);
       span {
         line-height: 1;
       }
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 946bd3a719c..4fbc56ff9e8 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -5,7 +5,7 @@
   left: 20px;
   z-index: z("dropdown");
   box-shadow: shadow("card");
-  background-color: $secondary;
+  background-color: var(--secondary);
   padding: 8px 8px 4px 8px;
   width: 300px;
   display: none;
@@ -29,7 +29,7 @@
 
     .date {
       font-weight: normal;
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
   }
 
@@ -37,7 +37,7 @@
     display: inline-block;
     position: absolute;
     margin: 5px 5px 5px 15px;
-    color: $success;
+    color: var(--success);
     opacity: 1;
     transition: opacity 0.25s;
     font-size: $font-0;
@@ -49,15 +49,15 @@
     margin-right: 8px;
     font-size: $font-up-4;
     .d-icon {
-      color: $tertiary-or-white;
+      color: var(--tertiary-or-white);
     }
     .d-icon-fab-facebook {
       // Adheres to Facebook brand guidelines
-      color: $facebook-or-white;
+      color: var(--facebook-or-white);
     }
     .d-icon-fab-twitter-square {
       // Adheres to Twitter brand guidelines
-      color: $twitter-or-white;
+      color: var(--twitter-or-white);
     }
   }
 
@@ -92,7 +92,7 @@
 
       .close-share {
         font-size: $font-up-3;
-        color: $primary-med-or-secondary-med;
+        color: var(--primary-med-or-secondary-med);
       }
 
       .new-topic {
diff --git a/app/assets/stylesheets/common/base/shared-drafts.scss b/app/assets/stylesheets/common/base/shared-drafts.scss
index bddff920b0f..526aedf3652 100644
--- a/app/assets/stylesheets/common/base/shared-drafts.scss
+++ b/app/assets/stylesheets/common/base/shared-drafts.scss
@@ -1,5 +1,5 @@
 .shared-draft-controls {
-  background-color: $tertiary-low;
+  background-color: var(--tertiary-low);
   padding: 1em;
 
   .publish-field {
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index fc4972746b7..e3ce31e3f4d 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -6,7 +6,7 @@
 .tags-list {
   margin-top: 2em;
   padding-bottom: 1em;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
 }
 
 #list-area .tags-list h3 {
@@ -63,7 +63,7 @@
 
 .discourse-tag-count {
   font-size: $font-down-1;
-  color: $primary-medium;
+  color: var(--primary-medium);
   line-height: $line-height-small;
   vertical-align: middle;
 }
@@ -77,15 +77,15 @@
 
 .discourse-tag {
   margin: 0;
-  color: $primary-medium;
+  color: var(--primary-medium);
 
   &:visited,
   &:hover {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   .extra-info-wrapper & {
-    color: $header-primary_high !important;
+    color: var(--header_primary-high) !important;
   }
 
   &.large {
@@ -93,12 +93,12 @@
   }
 
   &.box {
-    background-color: $primary-low;
-    color: $primary-high;
+    background-color: var(--primary-low);
+    color: var(--primary-high);
     padding: 2px 8px;
     .extra-info-wrapper & {
-      background-color: $header_primary-low;
-      color: $header_primary-medium;
+      background-color: var(--header_primary-low);
+      color: var(--header_primary-medium);
     }
   }
 
@@ -106,7 +106,7 @@
   &.simple:visited,
   &.simple:hover {
     margin-right: 0;
-    color: $primary-high;
+    color: var(--primary-high);
   }
 
   &.bullet {
@@ -114,7 +114,7 @@
     display: inline-flex;
     align-items: center;
     &:before {
-      background: $primary-low-mid;
+      background: var(--primary-low-mid);
       margin-right: 5px;
       position: relative;
       width: 9px;
@@ -179,7 +179,7 @@
 }
 
 header .discourse-tag {
-  color: $primary-medium;
+  color: var(--primary-medium);
 }
 
 .list-tags {
@@ -209,7 +209,7 @@ header .discourse-tag {
 
 .autocomplete {
   a {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   .d-icon-tag {
@@ -274,7 +274,7 @@ header .discourse-tag {
 section.tag-info {
   margin: 1em 0;
   padding: 2em;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
 
   .field {
     margin: 0 0 0.5em;
@@ -306,7 +306,7 @@ section.tag-info {
     border: none;
     @include clearfix;
     a {
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin-left: 0.25em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/tooltip.scss b/app/assets/stylesheets/common/base/tooltip.scss
index c8234b571ab..d378903a4ca 100644
--- a/app/assets/stylesheets/common/base/tooltip.scss
+++ b/app/assets/stylesheets/common/base/tooltip.scss
@@ -1,5 +1,5 @@
-$discourse-tooltip-background: $secondary;
-$discourse-tooltip-border: $primary-medium;
+$discourse-tooltip-background: var(--secondary);
+$discourse-tooltip-border: var(--primary-medium);
 
 #discourse-tooltip {
   background-color: $discourse-tooltip-background;
@@ -53,7 +53,7 @@ $discourse-tooltip-border: $primary-medium;
     padding: 1em;
     max-width: 250px;
     font-size: $font-down-1;
-    color: $primary;
+    color: var(--primary);
     box-shadow: shadow("dropdown");
     line-height: 1.4em;
   }
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 2de57e93de8..bdd2f5a9408 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -34,7 +34,7 @@
     display: block;
     padding: 1.25em 0;
     &:not(:last-of-type) {
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low);
     }
     .badge-wrapper {
       margin-right: 0;
@@ -80,7 +80,7 @@
     overflow: visible;
   }
   .modal-footer {
-    background: $secondary;
+    background: var(--secondary);
   }
 }
 
@@ -101,31 +101,31 @@
 // Select posts
 
 .selected-posts {
-  border: 1px solid $tertiary-medium;
-  background-color: $tertiary-low;
+  border: 1px solid var(--tertiary-medium);
+  background-color: var(--tertiary-low);
   .btn {
     border: none;
-    color: $secondary;
+    color: var(--secondary);
     font-weight: normal;
     margin-bottom: 10px;
     &:not(.btn-danger) {
-      background: $tertiary;
-      border-color: $tertiary;
+      background: var(--tertiary);
+      border-color: var(--tertiary);
       &[href] {
-        color: $secondary;
+        color: var(--secondary);
       }
       &:hover {
-        color: $secondary;
-        background: $tertiary-high;
+        color: var(--secondary);
+        background: var(--tertiary-high);
       }
       &:active {
-        @include linear-gradient($tertiary-hover, $tertiary);
-        color: $secondary;
+        @include linear-gradient(var(--tertiary-hover), var(--tertiary));
+        color: var(--secondary);
       }
     }
     &[disabled] {
-      text-shadow: 0 1px 0 rgba($primary, 0.2);
-      @include linear-gradient($tertiary, $tertiary-hover);
+      text-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.2);
+      @include linear-gradient(var(--tertiary), var(--tertiary-hover));
       box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
     }
   }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 72d65010253..9785f741fa0 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -2,8 +2,8 @@ $quote-share-maxwidth: 150px;
 
 .button-count.has-pending {
   span {
-    background-color: $danger;
-    color: $secondary;
+    background-color: var(--danger);
+    color: var(--secondary);
     border-radius: 10px;
     padding: 0.25em 0.5em;
     display: inline-block;
@@ -25,9 +25,9 @@ $quote-share-maxwidth: 150px;
     content: "";
     background: linear-gradient(
       to right,
-      $primary-very-low 10%,
-      $primary-low 28%,
-      $primary-very-low 43%
+      var(--primary-very-low) 10%,
+      var(--primary-low) 28%,
+      var(--primary-very-low) 43%
     );
     height: 45px;
     width: 700px;
@@ -58,12 +58,12 @@ $quote-share-maxwidth: 150px;
     @include ellipsis;
     vertical-align: middle;
     a {
-      color: $primary-high-or-secondary-low;
+      color: var(--primary-high-or-secondary-low);
     }
   }
   .fa {
     font-size: $font-down-1;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
   .svg-icon-title {
     margin-left: 3px;
@@ -72,7 +72,7 @@ $quote-share-maxwidth: 150px;
   .new_user a,
   .user-title,
   .user-title a {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
 }
 
@@ -125,10 +125,10 @@ $quote-share-maxwidth: 150px;
   }
 
   ins {
-    background-color: $success-low;
+    background-color: var(--success-low);
   }
   del {
-    background-color: $danger-low;
+    background-color: var(--danger-low);
   }
   // Prevents users from breaking posts with tag nesting
   big {
@@ -164,7 +164,7 @@ $quote-share-maxwidth: 150px;
 // add staff color
 .moderator {
   .regular > .cooked {
-    background-color: $highlight-low-or-medium;
+    background-color: var(--highlight-low-or-medium);
     padding: 10px;
     img:not(.thumbnail) {
       max-width: 100%;
@@ -173,9 +173,9 @@ $quote-share-maxwidth: 150px;
   }
   .clearfix > .topic-meta-data > .names {
     span.user-title {
-      color: $primary-high-or-secondary-low;
+      color: var(--primary-high-or-secondary-low);
       a {
-        background-color: $highlight-low-or-medium;
+        background-color: var(--highlight-low-or-medium);
         padding-left: 4px;
         padding-right: 4px;
       }
@@ -210,7 +210,7 @@ aside.quote {
   .title {
     @include post-aside;
 
-    color: $primary-high-or-secondary-low;
+    color: var(--primary-high-or-secondary-low);
     padding: 12px 12px 0px 12px;
     // blockquote is underneath this and has top margin
     .avatar {
@@ -239,11 +239,11 @@ blockquote {
 
 .quote-controls,
 .quote-controls .d-icon {
-  color: $primary-low-mid-or-secondary-high;
+  color: var(--primary-low-mid-or-secondary-high);
 }
 
 .cooked .highlight {
-  background-color: $tertiary-low;
+  background-color: var(--tertiary-low);
   padding: 2px;
   margin: -2px;
 }
@@ -253,7 +253,7 @@ blockquote {
 }
 
 .post-action {
-  color: $primary-medium;
+  color: var(--primary-medium);
   .undo-action,
   .act-action {
     margin-left: 5px;
@@ -262,7 +262,7 @@ blockquote {
 
 .small-user-list .unknown {
   display: inline-block;
-  background-color: $primary-low;
+  background-color: var(--primary-low);
   width: 25px;
   height: 25px;
   border-radius: 50%;
@@ -297,7 +297,7 @@ blockquote {
   position: absolute;
   z-index: z("dropdown");
   opacity: 0.9;
-  background-color: $secondary-high;
+  background-color: var(--secondary-high);
 
   &.visible {
     display: inline-flex;
@@ -307,7 +307,7 @@ blockquote {
   .btn:hover,
   .d-icon,
   .btn:hover .d-icon {
-    color: $secondary-or-primary;
+    color: var(--secondary-or-primary);
   }
 
   .insert-quote + .quote-sharing {
@@ -359,8 +359,8 @@ blockquote {
 }
 
 .topic-map {
-  background: $primary-very-low;
-  border: 1px solid $primary-low;
+  background: var(--primary-very-low);
+  border: 1px solid var(--primary-low);
   border-top: none; // would cause double top border
 
   .avatars {
@@ -387,7 +387,7 @@ blockquote {
   }
 
   section {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
   }
 
   ul {
@@ -397,7 +397,7 @@ blockquote {
 
   h3 {
     margin-bottom: 4px;
-    color: $primary;
+    color: var(--primary);
     line-height: $line-height-large;
     font-weight: normal;
     font-size: $font-0;
@@ -405,7 +405,7 @@ blockquote {
 
   h4 {
     margin: 1px 0 2px 0;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     font-weight: normal;
     font-size: $font-down-1;
     line-height: $line-height-small;
@@ -413,7 +413,7 @@ blockquote {
 
   span.domain {
     font-size: $font-down-2;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
 
   td {
@@ -461,7 +461,7 @@ blockquote {
     }
 
     .user {
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low);
       border-radius: 0.25em;
       padding: 0;
       margin: 0.125em 0.25em 0.125em 0;
@@ -471,10 +471,10 @@ blockquote {
 
       .user-link,
       .group-link {
-        color: $primary-high;
+        color: var(--primary-high);
 
         &:hover {
-          color: $primary;
+          color: var(--primary);
         }
       }
 
@@ -572,7 +572,7 @@ blockquote {
   width: 16px;
   height: 16px;
   bottom: -3px;
-  color: $primary;
+  color: var(--primary);
   &.rounded {
     background-size: 12px 12px;
     border-radius: 8px;
@@ -610,7 +610,7 @@ blockquote {
     overflow: hidden;
   }
   .group-request {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     padding-top: 0.5em;
   }
   &.highlighted {
@@ -641,11 +641,11 @@ blockquote {
 
   .wiki,
   .last-wiki-edit {
-    color: $wiki;
+    color: var(--wiki);
   }
 
   &.via-email {
-    color: $primary-low-mid-or-secondary-high;
+    color: var(--primary-low-mid-or-secondary-high);
   }
   &.raw-email {
     cursor: pointer;
@@ -657,8 +657,8 @@ pre {
     word-wrap: normal;
     display: block;
     padding: 0.5em;
-    color: $primary;
-    background: $blend-primary-secondary-5;
+    color: var(--primary);
+    background: var(--blend-primary-secondary-5);
     max-height: 500px;
   }
 }
@@ -680,7 +680,7 @@ pre {
 
     &.copied {
       .d-icon {
-        color: $tertiary;
+        color: var(--tertiary);
       }
     }
 
@@ -693,12 +693,12 @@ pre {
 
 kbd {
   align-items: center;
-  border: 1px solid $primary-low-mid;
-  background: $primary-very-low;
+  border: 1px solid var(--primary-low-mid);
+  background: var(--primary-very-low);
   border-bottom-width: 2px;
   border-radius: 3px;
   box-sizing: border-box;
-  color: $primary;
+  color: var(--primary);
   display: inline-flex;
   font-size: $font-down-1;
   justify-content: center;
@@ -727,7 +727,7 @@ blockquote > *:last-child {
 
 .gap {
   padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px
-  color: $primary-med-or-secondary-high;
+  color: var(--primary-med-or-secondary-high);
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
@@ -750,7 +750,7 @@ blockquote > *:last-child {
       text-align: left;
       padding-bottom: 2px;
       font-weight: bold;
-      color: $primary;
+      color: var(--primary);
     }
   }
 
@@ -763,7 +763,7 @@ blockquote > *:last-child {
   display: flex;
   align-items: center;
   max-width: 758px;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   .topic-avatar {
     align-self: flex-start;
     padding: 0.7em 0;
@@ -774,16 +774,16 @@ blockquote > *:last-child {
       font-size: 2em;
       width: 45px;
       text-align: center;
-      color: $primary-low-mid;
+      color: var(--primary-low-mid);
     }
   }
 
   .small-action.deleted {
-    background-color: $danger-low-mid;
+    background-color: var(--danger-low-mid);
   }
 
   .small-action-desc.timegap {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   .small-action-desc {
@@ -795,7 +795,7 @@ blockquote > *:last-child {
     text-transform: uppercase;
     font-weight: bold;
     font-size: $font-down-1;
-    color: $primary-medium;
+    color: var(--primary-medium);
     min-width: 0; // Allows flex container to shrink
 
     .custom-message {
@@ -843,7 +843,7 @@ blockquote > *:last-child {
   .topic-body {
     .cooked {
       font-style: italic;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
@@ -852,28 +852,28 @@ a.mention {
   display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
   font-weight: bold;
   font-size: 0.93em;
-  color: $primary-high-or-secondary-low;
+  color: var(--primary-high-or-secondary-low);
   padding: 0 4px 1px;
-  background: $primary-low;
+  background: var(--primary-low);
   border-radius: 8px;
 }
 
 span.mention {
   font-weight: bold;
   font-size: 0.93em;
-  color: $primary;
+  color: var(--primary);
 }
 
 a.mention-group {
   font-weight: bold;
   font-size: 0.93em;
-  color: $primary;
+  color: var(--primary);
 
   &.notify,
   .small-action-desc & {
-    color: $primary-high-or-secondary-low;
+    color: var(--primary-high-or-secondary-low);
     padding: 2px 4px;
-    background: $primary-low;
+    background: var(--primary-low);
     border-radius: 8px;
   }
 }
@@ -901,7 +901,7 @@ a.mention-group {
     }
 
     > .d-icon {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       margin-right: 6px;
       font-size: $font-0;
       line-height: $line-height-large;
@@ -917,7 +917,7 @@ a.mention-group {
 
     > span.help {
       display: inline-block;
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       font-size: $font-down-1;
       font-style: italic;
       line-height: $line-height-large;
@@ -932,8 +932,8 @@ a.mention-group {
 
 .broken-image {
   display: inline-flex;
-  color: $primary-low-mid-or-secondary-high;
-  border: 1px solid $primary-low;
+  color: var(--primary-low-mid-or-secondary-high);
+  border: 1px solid var(--primary-low);
   font-size: $font-up-5;
 
   .d-icon {
@@ -960,9 +960,9 @@ a.mention-group {
     article.boxed {
       .select-posts {
         button.select-post {
-          background-color: $tertiary;
-          color: $secondary;
-          border-color: $tertiary;
+          background-color: var(--tertiary);
+          color: var(--secondary);
+          border-color: var(--tertiary);
         }
       }
       .topic-body {
@@ -982,8 +982,8 @@ a.mention-group {
       height: 100px;
       button {
         margin-left: 8px;
-        background-color: $primary-low;
-        color: $primary;
+        background-color: var(--primary-low);
+        color: var(--primary);
         box-shadow: shadow("dropdown");
       }
     }
@@ -1014,8 +1014,8 @@ a.mention-group {
 
 .post-notice {
   align-items: center;
-  background-color: $tertiary-low;
-  border-top: 1px solid $primary-low;
+  background-color: var(--tertiary-low);
+  border-top: 1px solid var(--primary-low);
   display: flex;
   max-width: calc(
     #{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} -
@@ -1025,10 +1025,10 @@ a.mention-group {
 
   &.old {
     background-color: unset;
-    color: $primary-medium;
+    color: var(--primary-medium);
 
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
@@ -1038,7 +1038,7 @@ a.mention-group {
 
   .d-icon {
     font-size: 2em;
-    color: $primary-high;
+    color: var(--primary-high);
     margin-right: 0.65em;
   }
 }
@@ -1081,7 +1081,7 @@ a.mention-group {
     margin: 1em 0;
 
     .reason {
-      color: $primary-high;
+      color: var(--primary-high);
       display: inline-flex;
       margin: 0;
       align-items: center;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index dae3f6702e1..662baa329ee 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -74,7 +74,7 @@
       margin-right: 0;
     }
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
@@ -135,7 +135,7 @@ a.badge-category {
 }
 
 .private-message-glyph {
-  color: $primary-low-mid-or-secondary-high;
+  color: var(--primary-low-mid-or-secondary-high);
 }
 
 .private-message-glyph-wrapper {
@@ -181,7 +181,7 @@ a.badge-category {
   justify-content: space-between;
 
   padding: 0.5em;
-  background-color: $highlight-medium;
+  background-color: var(--highlight-medium);
   margin-top: 1em;
   max-width: 757px;
 }
@@ -230,13 +230,13 @@ a.badge-category {
   .post-links {
     margin-top: 1em;
     padding-top: 1em;
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     li:last-of-type {
       margin-bottom: 1em;
     }
   }
   .expand-links {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
   .track-link {
     display: flex;
@@ -251,7 +251,7 @@ a.badge-category {
     li {
       margin-bottom: 0.5em;
       a[href] {
-        color: $primary-med-or-secondary-med;
+        color: var(--primary-med-or-secondary-med);
       }
       .clicks {
         margin-left: 0.5em;
@@ -265,14 +265,14 @@ a.badge-category {
   }
   a.reply-new {
     .d-icon {
-      background: $secondary;
+      background: var(--secondary);
       border-radius: 20px;
       transition: all linear 0.15s;
     }
     &:hover {
-      color: $tertiary;
+      color: var(--tertiary);
       .d-icon {
-        background: $tertiary-low;
+        background: var(--tertiary-low);
       }
     }
   }
@@ -281,7 +281,7 @@ a.badge-category {
 a.topic-featured-link {
   display: inline-block;
   text-transform: lowercase;
-  color: $primary-med-or-secondary-med;
+  color: var(--primary-med-or-secondary-med);
   font-size: 0.875rem;
   .d-icon {
     margin-right: 3px;
@@ -315,8 +315,8 @@ a.topic-featured-link {
   .is-public {
     padding: 0.25em 0.5em;
     font-size: $font-down-2;
-    background: $tertiary;
-    color: $secondary;
+    background: var(--tertiary);
+    color: var(--secondary);
     border-radius: 3px;
     text-transform: lowercase;
   }
diff --git a/app/assets/stylesheets/common/base/upload.scss b/app/assets/stylesheets/common/base/upload.scss
index 911649553f4..5981811f642 100644
--- a/app/assets/stylesheets/common/base/upload.scss
+++ b/app/assets/stylesheets/common/base/upload.scss
@@ -1,5 +1,5 @@
 .uploaded-image-preview {
-  background: $primary-medium center;
+  background: var(--primary-medium) center;
   background-size: cover;
   position: relative;
 
@@ -31,14 +31,14 @@
       margin-left: auto;
 
       .d-icon {
-        color: $primary-low;
+        color: var(--primary-low);
       }
 
       &:hover {
         background: none;
 
         .d-icon {
-          color: $primary;
+          color: var(--primary);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 3dced90bd20..09cce815b8d 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -1,12 +1,12 @@
 /* Default badge styles. */
 .user-badge {
   padding: 3px 8px;
-  color: $primary;
-  border: 1px solid $primary-low;
+  color: var(--primary);
+  border: 1px solid var(--primary-low);
   line-height: $line-height-large;
   display: inline-flex;
   align-items: center;
-  background-color: $secondary;
+  background-color: var(--secondary);
   margin: 0 0 3px;
 
   img {
@@ -19,20 +19,20 @@
   }
 
   &.badge-type-gold .fa {
-    color: $gold !important;
+    color: var(--gold) !important;
   }
 
   &.badge-type-silver .fa {
-    color: $silver !important;
+    color: var(--silver) !important;
   }
 
   &.badge-type-bronze .fa {
-    color: $bronze !important;
+    color: var(--bronze) !important;
   }
 
   &.disabled {
-    color: $primary-medium;
-    background-color: $primary-very-low;
+    color: var(--primary-medium);
+    background-color: var(--primary-very-low);
     .fa {
       opacity: 0.4;
     }
@@ -123,8 +123,8 @@
 .badge-card {
   position: relative;
   display: inline-block;
-  background-color: $primary-very-low;
-  border: 1px solid $primary-low;
+  background-color: var(--primary-very-low);
+  border: 1px solid var(--primary-low);
   margin-bottom: 2vh;
   transition: box-shadow 0.25s;
 
@@ -139,7 +139,7 @@
     right: 5px;
     top: 5px;
     font-weight: bold;
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-up-2;
   }
 
@@ -150,7 +150,7 @@
     padding: 0 10%;
 
     .badge-link {
-      color: $primary;
+      color: var(--primary);
     }
 
     .badge-icon {
@@ -188,7 +188,7 @@
       flex: 1 1 auto;
       align-items: center;
       padding: 1em 1.5em 1em 0;
-      color: $primary;
+      color: var(--primary);
       @media screen and (max-width: 600px) {
         padding-right: 0;
       }
@@ -254,7 +254,7 @@
 
 .badge-groups {
   margin: 20px 0;
-  color: $primary-med-or-secondary-med;
+  color: var(--primary-med-or-secondary-med);
   h3 {
     margin-bottom: 1em;
   }
@@ -295,7 +295,7 @@
 
   .grant-info-item {
     margin-bottom: 1em;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     &:first-of-type {
       margin-right: 10px;
     }
@@ -303,7 +303,7 @@
 
   .badge-set-title {
     padding: 1.5em;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
 
     .user-content {
       padding: 0;
@@ -329,16 +329,16 @@
   text-align: center;
   .fa {
     font-size: 0.9em;
-    color: $secondary;
+    color: var(--secondary);
   }
 }
 
 .check-display.status-checked {
-  background-color: $success;
+  background-color: var(--success);
 }
 
 .check-display.status-unchecked {
-  background-color: $danger;
+  background-color: var(--danger);
 }
 
 .hyperlink {
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index c42df5ea818..4aabed9c24c 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -62,13 +62,13 @@
   }
 
   .d-icon-heart {
-    color: $love;
+    color: var(--love);
   }
 
   .user-notifications-filter-select-kit {
     display: block;
     width: 100%;
-    border-bottom: 0.5px solid $primary-low;
+    border-bottom: 0.5px solid var(--primary-low);
   }
 }
 
@@ -91,7 +91,7 @@
     .secondary {
       display: inline-block;
       width: 100%;
-      border-top: 1px solid $primary-low;
+      border-top: 1px solid var(--primary-low);
 
       .btn {
         padding: 4px 12px;
@@ -117,7 +117,7 @@
       dd {
         padding: 0;
         margin: 0 15px 0 0;
-        color: $primary;
+        color: var(--primary);
 
         &.groups {
           span:not(:last-of-type) {
@@ -133,15 +133,15 @@
       }
 
       dt {
-        color: $secondary-medium;
+        color: var(--secondary-medium);
         margin-right: 5px;
         display: inline-block;
       }
     }
 
     .details {
-      background: rgba($secondary, 0.8);
-      border-bottom: 1px solid $primary-low;
+      background: rgba(var(--secondary-rgb), 0.8);
+      border-bottom: 1px solid var(--primary-low);
 
       h1 {
         font-size: $font-up-5;
@@ -175,7 +175,7 @@
       }
 
       .suspended {
-        color: $danger;
+        color: var(--danger);
       }
 
       .primary {
@@ -224,7 +224,7 @@
     &.collapsed-info {
       .details {
         margin-top: 0;
-        background: rgba($secondary, 0.8);
+        background: rgba(var(--secondary-rgb), 0.8);
 
         .bio {
           display: none;
@@ -266,8 +266,8 @@
   }
 
   .staff-counters {
-    background: $primary;
-    color: $secondary;
+    background: var(--primary);
+    color: var(--secondary);
     display: flex;
     padding: 10px;
     margin-bottom: 16px;
@@ -277,7 +277,7 @@
       align-items: baseline;
       flex: 0 1 auto;
       margin: 0 10px 0 0;
-      color: $secondary;
+      color: var(--secondary);
 
       span {
         padding: 0 7px 1px;
@@ -292,7 +292,7 @@
   }
 
   .helpful-flags {
-    background-color: $success;
+    background-color: var(--success);
   }
 
   .flagged-posts {
@@ -300,15 +300,15 @@
   }
 
   .warnings-received {
-    background-color: $danger-medium;
+    background-color: var(--danger-medium);
   }
 
   .deleted-posts {
-    background-color: $danger-medium;
+    background-color: var(--danger-medium);
   }
 
   .suspensions {
-    background-color: $danger;
+    background-color: var(--danger);
   }
 
   .user-field {
@@ -322,7 +322,7 @@
       }
 
       .instructions {
-        color: $primary-medium;
+        color: var(--primary-medium);
         margin-top: 5px;
         margin-bottom: 10px;
         font-size: $font-down-1;
@@ -342,7 +342,7 @@
 .user-field {
   .required {
     vertical-align: top;
-    color: $danger;
+    color: var(--danger);
     font-weight: bold;
     margin-left: 0.25em;
   }
@@ -393,7 +393,7 @@
     }
   }
   .error {
-    color: $danger;
+    color: var(--danger);
     margin: 0;
     max-width: calc(#{$label-max-width} - 20px);
     grid-column-start: 2;
@@ -442,7 +442,7 @@
         width: 100%;
         height: 100%;
         display: block;
-        color: $primary;
+        color: var(--primary);
       }
     }
   }
@@ -453,7 +453,7 @@
   }
 
   .label {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -465,13 +465,13 @@
   }
 
   li {
-    border-left: $primary-low solid 2px;
+    border-left: var(--primary-low) solid 2px;
     padding: 5px 8px;
     margin: 10px 0;
   }
 
   .topic-info {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   @media all and (max-width: 600px) {
@@ -491,7 +491,7 @@
 .links-section {
   .domain {
     font-size: $font-down-1;
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -520,7 +520,7 @@
 
 .groups {
   .group-link {
-    color: $tertiary;
+    color: var(--tertiary);
   }
 }
 
@@ -548,18 +548,18 @@
   }
 
   .static {
-    color: $primary;
+    color: var(--primary);
     display: inline-block;
   }
 
   .instructions {
-    color: $primary-medium;
+    color: var(--primary-medium);
     margin-bottom: 10px;
     font-size: $font-down-1;
     line-height: $line-height-large;
 
     a[href] {
-      color: $tertiary;
+      color: var(--tertiary);
     }
   }
 
@@ -568,9 +568,9 @@
   }
 
   .warning {
-    background-color: $danger-medium;
+    background-color: var(--danger-medium);
     padding: 5px 8px;
-    color: $secondary;
+    color: var(--secondary);
     width: 520px;
   }
 
@@ -606,7 +606,7 @@
         display: inline-block;
         position: relative;
         border-radius: 3px;
-        border: 1px solid $primary-low;
+        border: 1px solid var(--primary-low);
         width: 100%;
       }
 
@@ -624,7 +624,7 @@
 
         &:focus {
           box-shadow: none;
-          border-color: $primary-low;
+          border-color: var(--primary-low);
         }
       }
 
@@ -678,7 +678,7 @@
     }
 
     span:first-child {
-      color: $primary;
+      color: var(--primary);
     }
 
     // Can remove this once other languages have removed html from i18n values
@@ -703,7 +703,7 @@
 
 .second-factor {
   &.instructions {
-    color: $primary-medium;
+    color: var(--primary-medium);
     margin-top: 5px;
     margin-bottom: 10px;
     font-size: $font-down-1;
@@ -733,7 +733,7 @@
       width: 60px;
       height: 60px;
       &:hover {
-        box-shadow: 0 0 10px $primary;
+        box-shadow: 0 0 10px var(--primary);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 10d0e6bd0b7..dc0dab3cd0b 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -42,11 +42,11 @@
   &.bullet {
     margin-right: 12px;
     span.badge-category {
-      color: $primary-high;
+      color: var(--primary-high);
       overflow: hidden;
       text-overflow: ellipsis;
       .extra-info-wrapper & {
-        color: $header-primary;
+        color: var(--header-primary);
       }
     }
     .badge-category-parent-bg,
@@ -66,7 +66,7 @@
       }
     }
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
@@ -115,13 +115,13 @@
     margin-right: 5px;
 
     span.badge-category {
-      color: $primary-high;
+      color: var(--primary-high);
       padding: 1px 3px;
       overflow: hidden;
       text-overflow: ellipsis;
 
       .extra-info-wrapper & {
-        color: $header-primary;
+        color: var(--header-primary);
       }
     }
 
@@ -140,7 +140,7 @@
   // ----- No category style
 
   &.none {
-    color: $primary-high;
+    color: var(--primary-high);
     margin-right: 5px;
   }
 }
@@ -165,31 +165,31 @@
   @extend %badge;
   padding: 0.21em 0.42em;
   min-width: 0.5em;
-  color: $secondary;
+  color: var(--secondary);
   font-size: $font-down-2;
   line-height: $line-height-small;
   text-align: center;
-  background-color: $primary-low-mid-or-secondary-low;
+  background-color: var(--primary-low-mid-or-secondary-low);
   &[href] {
-    color: $secondary;
+    color: var(--secondary);
   }
 
   &:hover {
-    color: $secondary;
+    color: var(--secondary);
   }
 
   // New posts
 
   &.new-posts,
   &.unread-posts {
-    background-color: $tertiary-med-or-tertiary;
-    color: $secondary;
+    background-color: var(--tertiary-med-or-tertiary);
+    color: var(--secondary);
     font-weight: dark-light-choose(normal, bold);
   }
 
   &.new-topic {
     background-color: transparent;
-    color: $tertiary-high;
+    color: var(--tertiary-high);
     font-weight: normal;
     font-size: $font-down-1;
   }
@@ -203,9 +203,9 @@
 
   &.clicks {
     font-weight: normal;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     top: -1px;
-    color: $primary-medium;
+    color: var(--primary-medium);
     position: relative;
     border: none;
   }
@@ -219,7 +219,7 @@
   font-size: $font-0;
   line-height: $line-height-small;
   &[href] {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
 }
 
@@ -229,8 +229,8 @@
 .badge-group {
   @extend %badge;
   padding: 2px 5px;
-  color: $primary;
-  background-color: $primary-low;
-  border-color: $primary-low;
+  color: var(--primary);
+  background-color: var(--primary-low);
+  border-color: var(--primary-low);
   font-size: $font-down-1;
 }
diff --git a/app/assets/stylesheets/common/components/banner.scss b/app/assets/stylesheets/common/components/banner.scss
index 1399ace3645..6e526adf5e5 100644
--- a/app/assets/stylesheets/common/components/banner.scss
+++ b/app/assets/stylesheets/common/components/banner.scss
@@ -4,8 +4,8 @@
 
 #banner {
   padding: 0.5em 1em;
-  background: $tertiary-low;
-  color: $primary;
+  background: var(--tertiary-low);
+  color: var(--primary);
   z-index: z("base") + 1;
   overflow: auto;
 
@@ -14,11 +14,11 @@
   }
 
   .close {
-    color: $primary-low-mid;
+    color: var(--primary-low-mid);
     padding-left: 5px;
     float: right;
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
@@ -29,6 +29,6 @@
 
 #banner-content {
   hr {
-    border-color: $primary-medium;
+    border-color: var(--primary-medium);
   }
 }
diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
index 5a5d62f96b7..a2ad95ad0e1 100644
--- a/app/assets/stylesheets/common/components/bookmark-modal.scss
+++ b/app/assets/stylesheets/common/components/bookmark-modal.scss
@@ -33,13 +33,13 @@
 
   .custom-date-time-wrap {
     padding: 1em 1em 0.5em;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     border-top: none;
     margin-top: -0.667em;
-    background: $primary-very-low;
+    background: var(--primary-very-low);
     .d-icon {
       padding: 0 0.75em 0 0;
-      color: $primary-high;
+      color: var(--primary-high);
       margin-top: -0.5em;
     }
 
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 612e4e6ca4d..1355589694d 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -6,12 +6,12 @@
 // --------------------------------------------------
 
 @mixin btn(
-  $text-color: $primary,
-  $bg-color: $primary-low,
-  $icon-color: $primary-high,
-  $hover-text-color: $secondary,
-  $hover-bg-color: $primary-medium,
-  $hover-icon-color: $primary-low
+  $text-color: var(--primary),
+  $bg-color: var(--primary-low),
+  $icon-color: var(--primary-high),
+  $hover-text-color: var(--secondary),
+  $hover-bg-color: var(--primary-medium),
+  $hover-icon-color: var(--primary-low)
 ) {
   display: inline-block;
   margin: 0;
@@ -107,11 +107,11 @@
 
 .btn-primary {
   @include btn(
-    $text-color: $secondary,
-    $bg-color: $tertiary,
-    $icon-color: $secondary,
-    $hover-bg-color: $tertiary-hover,
-    $hover-icon-color: $secondary
+    $text-color: var(--secondary),
+    $bg-color: var(--tertiary),
+    $icon-color: var(--secondary),
+    $hover-bg-color: var(--tertiary-hover),
+    $hover-icon-color: var(--secondary)
   );
 }
 
@@ -120,11 +120,11 @@
 
 .btn-danger {
   @include btn(
-    $text-color: $secondary,
-    $bg-color: $danger,
-    $icon-color: $danger-low,
-    $hover-bg-color: $danger-hover,
-    $hover-icon-color: $danger-low
+    $text-color: var(--secondary),
+    $bg-color: var(--danger),
+    $icon-color: var(--danger-low),
+    $hover-bg-color: var(--danger-hover),
+    $hover-icon-color: var(--danger-low)
   );
 }
 
@@ -133,21 +133,21 @@
 
 .btn.cancel {
   @include btn(
-    $text-color: $secondary,
-    $bg-color: $danger,
-    $icon-color: $secondary,
-    $hover-bg-color: $danger-hover,
-    $hover-icon-color: $secondary
+    $text-color: var(--secondary),
+    $bg-color: var(--danger),
+    $icon-color: var(--secondary),
+    $hover-bg-color: var(--danger-hover),
+    $hover-icon-color: var(--secondary)
   );
 }
 
 .btn.ok {
   @include btn(
-    $text-color: $secondary,
-    $bg-color: $success,
-    $icon-color: $secondary,
-    $hover-bg-color: $success-hover,
-    $hover-icon-color: $secondary
+    $text-color: var(--secondary),
+    $bg-color: var(--success),
+    $icon-color: var(--secondary),
+    $hover-bg-color: var(--success-hover),
+    $hover-icon-color: var(--secondary)
   );
 }
 
@@ -164,56 +164,56 @@
     color: #fff;
   }
   &[href] {
-    color: $secondary;
+    color: var(--secondary);
   }
   &:before {
     margin-right: 9px;
     font-size: $font-0;
   }
   &.google_oauth2 {
-    background: $google;
+    background: var(--google);
     color: #333;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     // non-FA SVG icon for Google in login-buttons.hbs
     .d-icon {
       opacity: 0.9;
     }
     &:hover {
       color: currentColor;
-      background: $google-hover;
+      background: var(--google-hover);
     }
   }
   &.instagram {
-    background: $instagram;
+    background: var(--instagram);
     &:hover {
-      background: $instagram-hover;
+      background: var(--instagram-hover);
     }
   }
   &.facebook {
     background: $facebook;
     &:hover {
-      background: $facebook-hover;
+      background: var(--facebook-hover);
     }
   }
   &.cas {
-    background: $cas;
+    background: var(--cas);
   }
   &.twitter {
-    background: $twitter;
+    background: var(--twitter);
     &:hover {
-      background: $twitter-hover;
+      background: var(--twitter-hover);
     }
   }
   &.github {
-    background: $github;
+    background: var(--github);
     &:hover {
-      background: $github-hover;
+      background: var(--github-hover);
     }
   }
   &.discord {
-    background: $discord;
+    background: var(--discord);
     &:hover {
-      background: $discord-hover;
+      background: var(--discord-hover);
     }
   }
 }
@@ -247,11 +247,11 @@
   line-height: $line-height-small;
   transition: color 0.25s, background 0.25s;
   .d-icon {
-    color: $primary-low-mid;
+    color: var(--primary-low-mid);
   }
   @include hover {
     .d-icon {
-      color: $primary;
+      color: var(--primary);
     }
   }
   &.close {
@@ -260,12 +260,12 @@
     background: transparent;
     font-size: $font-up-3;
     .d-icon {
-      color: $primary-high;
+      color: var(--primary-high);
     }
     @include hover {
       background: transparent;
       .d-icon {
-        color: $primary;
+        color: var(--primary);
       }
     }
   }
@@ -276,7 +276,7 @@
   border: 0;
   outline: 0;
   padding: 0;
-  color: $tertiary;
+  color: var(--tertiary);
   &:focus {
     outline: 1px currentColor dotted;
   }
diff --git a/app/assets/stylesheets/common/components/conditional-loading-section.scss b/app/assets/stylesheets/common/components/conditional-loading-section.scss
index 7aa75ef874c..6074df14e82 100644
--- a/app/assets/stylesheets/common/components/conditional-loading-section.scss
+++ b/app/assets/stylesheets/common/components/conditional-loading-section.scss
@@ -5,7 +5,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $primary-very-low;
+    background: var(--primary-very-low);
     flex-direction: column;
 
     .title {
diff --git a/app/assets/stylesheets/common/components/date-input.scss b/app/assets/stylesheets/common/components/date-input.scss
index c0f453d4230..698e8f5b720 100644
--- a/app/assets/stylesheets/common/components/date-input.scss
+++ b/app/assets/stylesheets/common/components/date-input.scss
@@ -13,21 +13,21 @@
 
     &::-webkit-input-placeholder {
       font-size: $font-0;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     &::-ms-input-placeholder {
       font-size: $font-0;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     &::placeholder {
       font-size: $font-0;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
 
     &:focus {
-      outline: 1px solid $tertiary;
+      outline: 1px solid var(--tertiary);
       outline-offset: 0;
     }
   }
diff --git a/app/assets/stylesheets/common/components/date-time-input-range.scss b/app/assets/stylesheets/common/components/date-time-input-range.scss
index 47704fcd647..0fb591a60b3 100644
--- a/app/assets/stylesheets/common/components/date-time-input-range.scss
+++ b/app/assets/stylesheets/common/components/date-time-input-range.scss
@@ -1,5 +1,5 @@
 .d-date-time-input-range {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   display: inline-flex;
   box-sizing: border-box;
 }
diff --git a/app/assets/stylesheets/common/components/date-time-input.scss b/app/assets/stylesheets/common/components/date-time-input.scss
index 6d113b31307..5e0d2af2dad 100644
--- a/app/assets/stylesheets/common/components/date-time-input.scss
+++ b/app/assets/stylesheets/common/components/date-time-input.scss
@@ -1,6 +1,6 @@
 .d-date-time-input {
   display: flex;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   box-sizing: border-box;
   position: relative;
 
diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss
index 3c8d172edb8..7bfa1da4218 100644
--- a/app/assets/stylesheets/common/components/footer-nav.scss
+++ b/app/assets/stylesheets/common/components/footer-nav.scss
@@ -21,7 +21,7 @@ body.footer-nav-visible {
 }
 
 .footer-nav {
-  background-color: rgba($header_background, 0.9);
+  background-color: rgba(var(--header_background-rgb), 0.9);
   box-shadow: shadow("footer-nav");
   height: $footer-nav-height;
   position: fixed;
@@ -32,7 +32,7 @@ body.footer-nav-visible {
   transition: all linear 0.1s;
 
   .d-icon {
-    color: $header_primary-medium;
+    color: var(--header_primary-medium);
   }
 
   &.visible {
@@ -63,7 +63,7 @@ body.footer-nav-visible {
 
 @supports (-webkit-backdrop-filter: blur(10px)) {
   body:not(.footer-nav-ipad) .footer-nav {
-    background-color: rgba($header_background, 0.7);
+    background-color: rgba(var(--header_background-rgb), 0.7);
     -webkit-backdrop-filter: blur(20px);
   }
 }
@@ -73,7 +73,7 @@ body.footer-nav-ipad {
   .footer-nav {
     bottom: auto;
     top: 0px;
-    background-color: $header_background;
+    background-color: var(--header_background);
     z-index: z("ipad-header-nav");
     padding-bottom: 0; // resets safe-area-inset-bottom
   }
diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index 0d379db7e86..e5327218475 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -1,10 +1,10 @@
 a.hashtag {
-  color: $primary-or-primary-low-mid;
+  color: var(--primary-or-primary-low-mid);
   font-weight: bold;
 
   &:visited,
   &:hover {
-    color: $primary-or-primary-low-mid;
+    color: var(--primary-or-primary-low-mid);
   }
 
   &:hover {
diff --git a/app/assets/stylesheets/common/components/ignored-user-list.scss b/app/assets/stylesheets/common/components/ignored-user-list.scss
index 25de7842828..6fda27d524d 100644
--- a/app/assets/stylesheets/common/components/ignored-user-list.scss
+++ b/app/assets/stylesheets/common/components/ignored-user-list.scss
@@ -4,13 +4,13 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  background-color: $secondary;
+  background-color: var(--secondary);
   min-height: 30px;
   box-sizing: border-box;
 }
 
 .ignored-user-list-item {
-  border: 1px solid $primary-medium;
+  border: 1px solid var(--primary-medium);
   border-radius: 5px;
   padding: 0;
   display: flex;
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 644b357dde5..9e5e74ab449 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -7,12 +7,12 @@
 .topic-list-item.selected td:first-child,
 .latest-topic-list-item.selected,
 .search-results .fps-result.selected {
-  box-shadow: inset 3px 0 0 $danger; // needs to be inset for Edge
+  box-shadow: inset 3px 0 0 var(--danger); // needs to be inset for Edge
 }
 
 .featured-topic.selected,
 .topic-post.selected {
-  box-shadow: -3px 0 0 $danger;
+  box-shadow: -3px 0 0 var(--danger);
 }
 
 .latest .featured-topic {
@@ -51,7 +51,7 @@
     }
 
     span {
-      background: $primary-very-low;
+      background: var(--primary-very-low);
       border-radius: 3px;
       display: inline-flex;
       margin: 0 6px;
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 622493ee0d8..f43114d7925 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -28,7 +28,7 @@
     > a {
       border: none;
       padding: 6px 12px;
-      color: $primary;
+      color: var(--primary);
       font-size: $font-up-1;
       line-height: $line-height-small;
       box-sizing: border-box;
@@ -43,14 +43,14 @@
       }
 
       &:hover {
-        color: $quaternary;
-        background-color: $quaternary-low;
+        color: var(--quaternary);
+        background-color: var(--quaternary-low);
       }
     }
 
     a.active {
-      color: $secondary;
-      background-color: $quaternary;
+      color: var(--secondary);
+      background-color: var(--quaternary);
 
       .d-icon {
         opacity: 1;
@@ -66,10 +66,10 @@
   @extend %nav;
   padding: 0;
   overflow: hidden;
-  background: $primary-low;
+  background: var(--primary-low);
 
   li {
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     position: relative;
 
     &:last-of-type {
@@ -87,11 +87,11 @@
     font-size: $font-up-1;
     line-height: $line-height-small;
     cursor: pointer;
-    color: $primary;
+    color: var(--primary);
 
     &.active {
-      color: $secondary;
-      background-color: $quaternary;
+      color: var(--secondary);
+      background-color: var(--quaternary);
 
       &::after {
         left: 90%;
@@ -99,7 +99,7 @@
         content: " ";
         position: absolute;
         border: 8px solid transparent;
-        border-left-color: $secondary;
+        border-left-color: var(--secondary);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/components/share-and-invite-modal.scss b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
index c4e2a58bfdd..3a301fd751b 100644
--- a/app/assets/stylesheets/common/components/share-and-invite-modal.scss
+++ b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
@@ -28,7 +28,7 @@
       margin-bottom: 8px;
 
       .post-date {
-        color: $primary-medium;
+        color: var(--primary-medium);
         font-size: $font-down-1;
       }
     }
diff --git a/app/assets/stylesheets/common/components/tap-tile.scss b/app/assets/stylesheets/common/components/tap-tile.scss
index 51f2264fac7..cbadecd00e7 100644
--- a/app/assets/stylesheets/common/components/tap-tile.scss
+++ b/app/assets/stylesheets/common/components/tap-tile.scss
@@ -3,33 +3,33 @@
   margin: 0.5em 0 1em 0;
 
   .tap-tile {
-    color: $primary-high;
+    color: var(--primary-high);
     padding: 0.75em 0.25em;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     cursor: pointer;
 
     &:first-child {
-      border-top: 1px solid $primary-low;
+      border-top: 1px solid var(--primary-low);
     }
 
     &:hover {
-      background-color: $tertiary-low;
+      background-color: var(--tertiary-low);
     }
 
     &.active {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium);
     }
 
     .d-icon {
-      color: $primary-high;
+      color: var(--primary-high);
       margin: 0 0.5em 0 0;
     }
 
     .tap-tile-title {
-      color: $primary;
+      color: var(--primary);
       margin-right: auto;
     }
 
diff --git a/app/assets/stylesheets/common/components/time-input.scss b/app/assets/stylesheets/common/components/time-input.scss
index 73d5ef692cd..65cb2e09787 100644
--- a/app/assets/stylesheets/common/components/time-input.scss
+++ b/app/assets/stylesheets/common/components/time-input.scss
@@ -8,7 +8,7 @@
 
     &:not(.has-selection) {
       .select-kit-selected-name .name {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
 
@@ -18,7 +18,7 @@
       }
 
       &:focus {
-        outline: 1px solid $tertiary;
+        outline: 1px solid var(--tertiary);
       }
     }
 
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index cf6db6107e7..5a28b647470 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -20,9 +20,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     content: "";
     background: linear-gradient(
       to right,
-      $primary-very-low 10%,
-      $primary-low 18%,
-      $primary-very-low 33%
+      var(--primary-very-low) 10%,
+      var(--primary-low) 18%,
+      var(--primary-very-low) 33%
     );
     height: $avatar_width;
     width: $card_width;
@@ -34,8 +34,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
 .group-card {
   width: $card_width;
   box-shadow: shadow("card");
-  color: $primary;
-  background: $secondary center center;
+  color: var(--primary);
+  background: var(--secondary) center center;
   background-size: cover;
   transition: opacity 0.2s, transform 0.2s;
   -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
@@ -47,7 +47,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   }
   .card-content {
     padding: 10px;
-    background: rgba($secondary, 0.85);
+    background: rgba(var(--secondary-rgb), 0.85);
     margin-top: 80px;
     &:after {
       content: "";
@@ -105,17 +105,17 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   h1 {
     line-height: $line-height-medium;
     .d-icon {
-      color: $primary;
+      color: var(--primary);
     }
   }
   h3 {
     display: inline;
     margin-right: 0.5em;
-    color: $primary;
+    color: var(--primary);
     &.email,
     .desc,
     a {
-      color: $primary-high;
+      color: var(--primary-high);
     }
   }
   h1,
@@ -127,7 +127,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   h1,
   h2 {
     a {
-      color: $primary;
+      color: var(--primary);
     }
   }
   h2,
@@ -152,7 +152,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       margin-top: $avatar_margin;
     }
     .new-user a {
-      color: $primary-low-mid;
+      color: var(--primary-low-mid);
     }
   }
   // user bio - suspension reason
@@ -161,7 +161,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     overflow: auto;
     .bio {
       a {
-        color: $primary;
+        color: var(--primary);
         text-decoration: underline;
       }
       a.mention {
@@ -173,7 +173,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       }
     }
     .suspended {
-      color: $danger;
+      color: var(--danger);
       .suspension-reason-title,
       .suspension-date {
         font-weight: bold;
@@ -187,10 +187,10 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   // featured topic
   .featured-topic {
     .desc {
-      color: $primary-high;
+      color: var(--primary-high);
     }
     a {
-      color: $primary;
+      color: var(--primary);
       text-decoration: underline;
     }
   }
@@ -213,7 +213,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     .website-name a,
     .location span {
       @include ellipsis;
-      color: $primary;
+      color: var(--primary);
     }
     .location,
     .local-time,
@@ -235,9 +235,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     align-items: flex-start;
     .user-badge {
       @include ellipsis;
-      background: $primary-very-low;
-      border: 1px solid $primary-low;
-      color: $primary;
+      background: var(--primary-very-low);
+      border: 1px solid var(--primary-low);
+      color: var(--primary);
     }
     .more-user-badges {
       a {
@@ -261,7 +261,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       background-repeat: no-repeat;
       width: $avatar_width;
       height: $avatar_width;
-      color: $primary;
+      color: var(--primary);
       .d-icon {
         margin: auto;
         font-size: $avatar_width / 1.5;
@@ -277,7 +277,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     overflow: auto;
     .bio {
       a {
-        color: $primary;
+        color: var(--primary);
         text-decoration: underline;
       }
       img {
diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss
index 9fea237fd7b..dcb26e786b6 100644
--- a/app/assets/stylesheets/common/components/user-info.scss
+++ b/app/assets/stylesheets/common/components/user-info.scss
@@ -29,17 +29,17 @@
 
     .username a {
       font-weight: bold;
-      color: $primary-high-or-secondary-low;
+      color: var(--primary-high-or-secondary-low);
     }
 
     .name {
       margin-left: 5px;
-      color: $primary-high-or-secondary-low;
+      color: var(--primary-high-or-secondary-low);
     }
 
     .title {
       margin-top: 3px;
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
   }
 
@@ -71,7 +71,7 @@
       min-width: 250px;
 
       .granted-on {
-        color: $primary-med-or-secondary-med;
+        color: var(--primary-med-or-secondary-med);
       }
 
       .post-link {
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index bd393a1e49a..451c27c23ab 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -7,16 +7,16 @@
   // selectors below are its children
   .item,
   .user-stream-item {
-    background-color: $secondary;
-    border-bottom: 1px solid $primary-low;
+    background-color: var(--secondary);
+    border-bottom: 1px solid var(--primary-low);
     padding: 1em 0.53em;
 
     &.moderator-action {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium);
     }
 
     &.deleted {
-      background-color: $danger-low-mid;
+      background-color: var(--danger-low-mid);
     }
 
     &.hidden {
@@ -27,14 +27,14 @@
 
   .type,
   span.name {
-    color: $primary;
+    color: var(--primary);
   }
 
   .time,
   .delete-info,
   .draft-type {
     float: right;
-    color: $primary-medium;
+    color: var(--primary-medium);
     font-size: $font-down-2;
   }
 
@@ -56,7 +56,7 @@
     float: right;
     margin-right: 0.5em;
     line-height: $line-height-small;
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 
   .avatar-link {
@@ -76,7 +76,7 @@
   }
 
   .edit-reason {
-    background-color: $highlight-medium;
+    background-color: var(--highlight-medium);
     padding: 3px 5px 5px 5px;
   }
 
@@ -95,14 +95,14 @@
       display: inline-block;
 
       span:first-child {
-        color: $primary;
+        color: var(--primary);
       }
     }
 
     // common/base/header.scss
     .fa,
     .icon {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       font-size: $font-up-4;
     }
   }
@@ -111,12 +111,12 @@
     margin: 1em 0 0 0;
     font-size: $font-0;
     word-wrap: break-word;
-    color: $primary;
+    color: var(--primary);
     &:empty {
       display: none;
     }
     details.disabled {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
@@ -138,9 +138,9 @@
   .fa {
     width: 15px;
     display: inline-block;
-    color: $primary;
+    color: var(--primary);
     &.d-icon-heart {
-      color: $love;
+      color: var(--love);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/components/widget-dropdown.scss b/app/assets/stylesheets/common/components/widget-dropdown.scss
index ddc6f2837eb..9530286a1f0 100644
--- a/app/assets/stylesheets/common/components/widget-dropdown.scss
+++ b/app/assets/stylesheets/common/components/widget-dropdown.scss
@@ -12,9 +12,9 @@
     display: flex;
     flex-direction: column;
     padding: 0.25em;
-    background: $secondary;
+    background: var(--secondary);
     z-index: z("dropdown");
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     max-height: 250px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -28,22 +28,22 @@
     align-items: center;
 
     .d-icon {
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin-right: 0.25em;
     }
 
     &.separator {
       padding: 0;
-      background: $primary-low;
+      background: var(--primary-low);
       margin: 0.25em 0;
 
       &:hover {
-        background: $primary-low;
+        background: var(--primary-low);
       }
     }
 
     &:hover {
-      background: $tertiary-low;
+      background: var(--tertiary-low);
     }
   }
 
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index f04e2613f93..3e7a645f4a8 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -18,9 +18,9 @@
 .d-editor-textarea-wrapper {
   display: flex;
   flex-direction: column;
-  background-color: $secondary;
+  background-color: var(--secondary);
   position: relative;
-  border: 1px solid $primary-medium;
+  border: 1px solid var(--primary-medium);
 
   textarea {
     background: transparent;
@@ -49,18 +49,18 @@
   display: flex;
   align-items: center;
   min-height: 30px;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
 
   .btn,
   .btn-default {
     background-color: transparent;
     display: inline-block;
-    color: $primary-medium;
+    color: var(--primary-medium);
     .d-icon {
       color: currentColor;
     }
     &:hover {
-      color: $primary-low;
+      color: var(--primary-low);
     }
 
     svg {
@@ -75,7 +75,7 @@
   .d-editor-spacer {
     height: 1em;
     display: inline-block;
-    border-left: 1px solid $primary-low-mid;
+    border-left: 1px solid var(--primary-low-mid);
   }
 
   .btn:not(.no-text) {
@@ -134,7 +134,7 @@
 
 .composing-whisper .d-editor-preview {
   font-style: italic;
-  color: $primary-medium !important;
+  color: var(--primary-medium) !important;
 }
 
 .d-editor-preview > *:first-child {
@@ -167,14 +167,14 @@
     display: block;
   }
   .d-editor-textarea-wrapper {
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
   }
   .d-editor-preview-wrapper {
     max-width: 100%;
     margin: 10px 0 0 0;
   }
   .d-editor-preview {
-    background-color: $primary-very-low;
+    background-color: var(--primary-very-low);
     padding: 5px;
     &:empty {
       padding: 0;
@@ -185,7 +185,7 @@
 .user-preferences .bio-composer,
 .group-form-bio {
   padding: 10px;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
 }
 
 .d-editor-preview img {
@@ -231,11 +231,11 @@
     transition: all 0.25s;
     z-index: 1; // needs to be higher than image
     width: 100%;
-    background: $secondary; // for when images are wider than controls
+    background: var(--secondary); // for when images are wider than controls
 
     .scale-btn {
-      background: $secondary; // for when controls are wider than image
-      color: $tertiary;
+      background: var(--secondary); // for when controls are wider than image
+      color: var(--tertiary);
       padding: 0 1em;
       &:first-child,
       &:last-child {
@@ -244,7 +244,7 @@
 
       &.active {
         font-weight: bold;
-        color: $primary;
+        color: var(--primary);
       }
 
       &:not(.active):hover {
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 2ddcaab8987..414f451c62b 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -6,11 +6,11 @@
 // --------------------------------------------------
 
 html {
-  color: $primary;
+  color: var(--primary);
   font-family: $base-font-family;
   font-size: $base-font-size;
   line-height: $line-height-large;
-  background-color: $secondary;
+  background-color: var(--secondary);
   overflow-y: scroll;
   direction: ltr;
 
@@ -35,17 +35,17 @@ html {
 // --------------------------------------------------
 
 a {
-  color: $tertiary;
+  color: var(--tertiary);
   text-decoration: none;
   cursor: pointer;
   &:visited {
-    color: $tertiary;
+    color: var(--tertiary);
   }
   &:hover {
-    color: $tertiary;
+    color: var(--tertiary);
   }
   &:active {
-    color: $tertiary;
+    color: var(--tertiary);
   }
 }
 
@@ -57,7 +57,7 @@ hr {
   height: 1px;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding: 0;
 }
 
@@ -136,11 +136,11 @@ table {
 }
 
 tbody {
-  border-top: 3px solid $primary-low;
+  border-top: 3px solid var(--primary-low);
 }
 
 tr {
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
   &.highlighted {
     animation: background-fade-highlight 2.5s ease-out;
   }
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index edf76e104a6..787999059a7 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -89,8 +89,8 @@ $breakpoints: (
 
 // Stuff we repeat
 @mixin post-aside {
-  border-left: 5px solid $primary-low;
-  background-color: $blend-primary-secondary-5;
+  border-left: 5px solid var(--primary-low);
+  background-color: var(--blend-primary-secondary-5);
 }
 
 // We still need -webkit for latest iPhone and Safari
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 1ca29065151..5a37065b979 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -7,7 +7,7 @@
   padding: 5px 10px;
   z-index: z("tooltip");
   &.bad {
-    background: $danger-medium;
+    background: var(--danger-medium);
     color: white;
     box-shadow: shadow("dropdown");
   }
@@ -17,7 +17,7 @@
   }
   .close {
     float: right;
-    color: $primary;
+    color: var(--primary);
     opacity: 0.5;
     font-size: $font-0;
     margin: 0 0 0 4px;
diff --git a/app/assets/stylesheets/common/select-kit/category-chooser.scss b/app/assets/stylesheets/common/select-kit/category-chooser.scss
index 11c5435917f..d0c876682ca 100644
--- a/app/assets/stylesheets/common/select-kit/category-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/category-chooser.scss
@@ -23,14 +23,14 @@
 
         .topic-count {
           font-size: $font-down-1;
-          color: $primary-medium;
+          color: var(--primary-medium);
           white-space: nowrap;
           margin-left: 0.5em;
           font-weight: normal;
         }
 
         .category-status {
-          color: $primary;
+          color: var(--primary);
           line-height: $line-height-large;
           -webkit-box-flex: 0;
           -ms-flex: 1 1 auto;
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 792665b8963..4d2fc6f2305 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -45,13 +45,13 @@
 
         &[data-value="all-categories"],
         &[data-value="no-categories"] {
-          color: $tertiary;
+          color: var(--tertiary);
           font-weight: 700;
         }
 
         .category-desc {
           font-weight: normal;
-          color: $primary-medium;
+          color: var(--primary-medium);
           margin-top: 2px;
         }
 
@@ -62,7 +62,7 @@
         .topic-count {
           margin-left: 0.5em;
           font-weight: normal;
-          color: $primary-medium;
+          color: var(--primary-medium);
           font-size: $font-down-1;
         }
 
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index 368a481d726..b7398aabace 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -27,14 +27,14 @@
     }
 
     .select-kit-header {
-      background: $secondary;
-      border: 1px solid $primary-medium;
+      background: var(--secondary);
+      border: 1px solid var(--primary-medium);
       padding: 0 0.25em 0 0.5em;
       font-weight: 500;
       font-size: $font-0;
 
       &.is-focused {
-        border: 1px solid $tertiary;
+        border: 1px solid var(--tertiary);
         box-shadow: shadow("focus");
       }
     }
@@ -48,12 +48,12 @@
       .collection-header {
         a {
           white-space: nowrap;
-          color: $primary;
+          color: var(--primary);
           line-height: $line-height-medium;
           font-weight: bold;
           display: block;
           padding: 0.75em;
-          color: $tertiary;
+          color: var(--tertiary);
 
           &:hover {
             text-decoration: underline;
@@ -64,18 +64,18 @@
 
     &.is-disabled {
       .select-kit-header {
-        background: $primary-low;
-        border-color: $primary-low-mid;
-        color: $primary-medium;
+        background: var(--primary-low);
+        border-color: var(--primary-low-mid);
+        color: var(--primary-medium);
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
     }
 
     &.is-highlighted {
       .select-kit-header {
-        border: 1px solid $tertiary;
+        border: 1px solid var(--tertiary);
         box-shadow: shadow("focus");
       }
     }
@@ -83,7 +83,7 @@
     &.is-expanded {
       .select-kit-wrapper {
         display: block;
-        border: 1px solid $tertiary;
+        border: 1px solid var(--tertiary);
         box-shadow: shadow("focus");
       }
     }
@@ -104,7 +104,7 @@
     }
 
     &.tag-drop {
-      color: $primary-high;
+      color: var(--primary-high);
     }
 
     &.group-dropdown {
diff --git a/app/assets/stylesheets/common/select-kit/composer-actions.scss b/app/assets/stylesheets/common/select-kit/composer-actions.scss
index 93f420fe5c9..a1ff8a9e424 100644
--- a/app/assets/stylesheets/common/select-kit/composer-actions.scss
+++ b/app/assets/stylesheets/common/select-kit/composer-actions.scss
@@ -7,14 +7,14 @@
         outline: none;
         padding: 0;
         margin-right: 5px;
-        border: 1px solid $primary-low;
+        border: 1px solid var(--primary-low);
         min-height: unset;
         .d-icon {
           padding: 5px 6px;
         }
         &:hover,
         &:focus {
-          background: $primary-low;
+          background: var(--primary-low);
         }
       }
       .d-icon {
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 30e978ae642..9dd5bd04a90 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -12,7 +12,7 @@
     }
 
     .select-kit-body {
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low);
       background-clip: padding-box;
       box-shadow: shadow("dropdown");
     }
@@ -46,7 +46,7 @@
           flex: 1 1 auto;
           font-weight: bold;
           font-size: $font-0;
-          color: $primary;
+          color: var(--primary);
           padding: 0;
           @include ellipsis;
           max-width: 100%;
@@ -56,7 +56,7 @@
           flex: 1 1 auto;
           font-size: $font-down-1;
           font-weight: normal;
-          color: $primary-medium;
+          color: var(--primary-medium);
           white-space: normal;
           min-width: 350px;
         }
@@ -82,7 +82,7 @@
 
       &.is-focused {
         outline-style: auto;
-        outline-color: $tertiary;
+        outline-color: var(--tertiary);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index 1d92da56b1d..951c54744a5 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -10,7 +10,7 @@
       }
 
       .future-date-input-selector-datetime {
-        color: $primary-medium;
+        color: var(--primary-medium);
         margin-left: auto;
         white-space: nowrap;
 
@@ -30,7 +30,7 @@
 
       .future-date-input-selector-row {
         .future-date-input-selector-icons {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/icon-picker.scss b/app/assets/stylesheets/common/select-kit/icon-picker.scss
index 2b726810ee1..904c71b80af 100644
--- a/app/assets/stylesheets/common/select-kit/icon-picker.scss
+++ b/app/assets/stylesheets/common/select-kit/icon-picker.scss
@@ -2,7 +2,7 @@
   &.icon-picker {
     .multi-select-header {
       .select-kit-selected-name .d-icon {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
index b167d540959..1fa09b32cb5 100644
--- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
@@ -6,7 +6,7 @@
 
       &.no-tags {
         .select-kit-header .selected-name {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
 
@@ -43,12 +43,12 @@
         }
 
         &.is-highlighted.is-selected {
-          background: $tertiary-low;
+          background: var(--tertiary-low);
         }
 
         .discourse-tag {
           &:hover {
-            color: $primary;
+            color: var(--primary);
           }
         }
 
@@ -61,14 +61,14 @@
         max-height: 125px;
         overflow-y: auto;
         display: flex;
-        border-bottom: 1px solid $primary-low;
+        border-bottom: 1px solid var(--primary-low);
         padding: 0.25em 0 0 0.25em;
         box-sizing: border-box;
         flex-wrap: wrap;
         width: 100%;
 
         .selected-tag {
-          background: $primary-low;
+          background: var(--primary-low);
           box-sizing: border-box;
           margin: 0;
           padding: 0.5em;
@@ -82,16 +82,16 @@
           }
 
           &.is-highlighted {
-            box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05);
+            box-shadow: 0 0 2px var(--danger), 0 1px 0 rgba(0, 0, 0, 0.05);
           }
 
           .d-icon {
-            color: $primary-low-mid;
+            color: var(--primary-low-mid);
             vertical-align: middle;
           }
 
           &:hover .d-icon.d-icon-times {
-            color: $danger;
+            color: var(--danger);
           }
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index 83648c0eb55..bc28c076ab5 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -1,7 +1,7 @@
 .select-kit {
   &.multi-select {
     width: 300px;
-    background: $secondary;
+    background: var(--secondary);
     border-radius: 0;
 
     .select-kit-row {
@@ -18,8 +18,8 @@
     }
 
     .multi-select-header {
-      background: $secondary;
-      border: 1px solid $primary-medium;
+      background: var(--secondary);
+      border: 1px solid var(--primary-medium);
 
       &.is-focused {
         box-shadow: shadow("focus");
@@ -29,11 +29,11 @@
 
     &.is-disabled {
       .multi-select-header {
-        background: $primary-low;
-        border-color: $primary-low-mid;
-        color: $primary-medium;
+        background: var(--primary-low);
+        border-color: var(--primary-low-mid);
+        color: var(--primary-medium);
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
       }
     }
@@ -41,7 +41,7 @@
     &.is-expanded {
       .select-kit-wrapper {
         display: block;
-        border: 1px solid $tertiary;
+        border: 1px solid var(--tertiary);
         box-shadow: shadow("focus");
         border-radius: 0;
       }
@@ -139,7 +139,7 @@
       }
 
       .selected-name {
-        background: $primary-low;
+        background: var(--primary-low);
         padding: 0.25em;
         flex: 1;
         align-items: center;
@@ -147,7 +147,7 @@
         justify-content: space-between;
 
         .d-icon {
-          color: $primary-low-mid;
+          color: var(--primary-low-mid);
           vertical-align: middle;
 
           &:last-child {
@@ -155,11 +155,11 @@
           }
         }
         &:hover .d-icon:last-child {
-          color: $danger;
+          color: var(--danger);
         }
 
         &.is-highlighted {
-          box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05);
+          box-shadow: 0 0 2px var(--danger), 0 1px 0 rgba(0, 0, 0, 0.05);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/notifications-filter.scss b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
index 45e90fd1677..3592594e549 100644
--- a/app/assets/stylesheets/common/select-kit/notifications-filter.scss
+++ b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
@@ -17,19 +17,19 @@
 
         .filter-text {
           margin-right: 0.5em;
-          color: $primary-medium;
+          color: var(--primary-medium);
           cursor: pointer;
           margin-bottom: 0;
         }
 
         .header-text {
-          color: $tertiary;
+          color: var(--tertiary);
           cursor: pointer;
           margin-bottom: 0;
         }
 
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
           margin: 0 0 0 0.25em;
           font-size: $font-up-2;
         }
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index 1085e3184ed..15a9ff2c7e0 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -17,25 +17,25 @@
         padding: 0;
 
         h2.selected-name {
-          color: $secondary;
+          color: var(--secondary);
           display: inline-block;
           box-sizing: border-box;
 
           .date-section {
-            color: $primary;
+            color: var(--primary);
             margin-right: 5px;
           }
 
           .top-date-string {
             font-size: $font-down-1;
-            color: $primary-med-or-secondary-high;
+            color: var(--primary-med-or-secondary-high);
             font-weight: normal;
             text-transform: uppercase;
           }
         }
 
         .d-icon {
-          color: $primary;
+          color: var(--primary);
           opacity: 1;
           margin: 5px 0 10px 5px;
           font-size: $font-up-3;
@@ -61,13 +61,13 @@
         }
 
         .date-section {
-          color: $primary;
+          color: var(--primary);
         }
 
         .top-date-string {
           font-weight: normal;
           font-size: $font-down-1;
-          color: $primary-med-or-secondary-high;
+          color: var(--primary-med-or-secondary-high);
           text-transform: uppercase;
           margin-left: 5px;
         }
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 215a5ef9526..dde65b38563 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -46,7 +46,7 @@
   }
 
   .d-icon {
-    color: $primary-high;
+    color: var(--primary-high);
   }
 
   .select-kit-header {
@@ -130,7 +130,7 @@
 
   .select-kit-body {
     display: none;
-    background: $secondary;
+    background: var(--secondary);
     box-sizing: border-box;
   }
 
@@ -157,20 +157,20 @@
     }
 
     &.is-highlighted {
-      background: $tertiary-low;
+      background: var(--tertiary-low);
     }
 
     &.is-selected {
-      background: $highlight-medium;
+      background: var(--highlight-medium);
     }
 
     &.is-selected.is-highlighted {
-      background: $tertiary-low;
+      background: var(--tertiary-low);
     }
 
     .discourse-tag,
     .discourse-tag-count {
-      color: $primary;
+      color: var(--primary);
     }
 
     &.create-color-row {
@@ -180,7 +180,7 @@
   }
 
   .select-kit-collection {
-    background: $secondary;
+    background: var(--secondary);
     overflow-x: hidden;
     overflow-y: auto;
     border-radius: inherit;
@@ -192,7 +192,7 @@
 
     .validation-message {
       white-space: nowrap;
-      color: $danger;
+      color: var(--danger);
       flex: 1 0 auto;
       margin: 5px;
       padding: 0 2px;
@@ -203,7 +203,7 @@
       margin: 0;
 
       &:hover .select-kit-row.is-highlighted:hover {
-        background: $tertiary-low;
+        background: var(--tertiary-low);
       }
     }
 
@@ -215,7 +215,7 @@
     &::-webkit-scrollbar-thumb {
       cursor: pointer;
       border-radius: 5px;
-      background: $primary-med-or-secondary-med;
+      background: var(--primary-med-or-secondary-med);
     }
 
     &::-webkit-scrollbar-track {
@@ -267,7 +267,7 @@
   }
 
   .select-kit-errors-collection {
-    background: $danger;
+    background: var(--danger);
     padding: 0.25em 1em;
     margin: 0;
     width: 100%;
@@ -275,7 +275,7 @@
 
     .select-kit-error {
       list-style: none;
-      color: $secondary;
+      color: var(--secondary);
     }
   }
 
@@ -286,7 +286,7 @@
     padding: 0.5em;
     width: 100%;
     box-sizing: border-box;
-    background: $secondary;
+    background: var(--secondary);
   }
 
   .is-loading {
diff --git a/app/assets/stylesheets/common/select-kit/single-select.scss b/app/assets/stylesheets/common/select-kit/single-select.scss
index fa77aaa13f2..8692177c1d1 100644
--- a/app/assets/stylesheets/common/select-kit/single-select.scss
+++ b/app/assets/stylesheets/common/select-kit/single-select.scss
@@ -4,14 +4,14 @@
 
     &.is-expanded {
       padding: 0.25em 0.5em;
-      border-top: 1px solid $primary-low;
-      border-bottom: 1px solid $primary-low;
+      border-top: 1px solid var(--primary-low);
+      border-bottom: 1px solid var(--primary-low);
     }
   }
 
   &.is-expanded {
     .select-kit-header {
-      border: 1px solid $tertiary;
+      border-color: var(--tertiary);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index 94d46293580..382c3787321 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -6,7 +6,7 @@
       .select-kit-row {
         &[data-value="all-tags"],
         &[data-value="no-tags"] {
-          color: $tertiary;
+          color: var(--tertiary);
           font-weight: 700;
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
index 60ba59881bf..def2df8c2fc 100644
--- a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
+++ b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
@@ -9,7 +9,7 @@
 
       .select-kit-row {
         padding: 0.75em 0.5em;
-        border-bottom: 1px solid rgba($primary-low, 0.5);
+        border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
 
         &:last-child {
           border: none;
@@ -22,14 +22,14 @@
         }
 
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
 
         &.is-highlighted,
         &.is-selected,
         &:hover {
-          background: $tertiary-low;
-          color: $primary;
+          background: var(--tertiary-low);
+          color: var(--primary);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/user-row.scss b/app/assets/stylesheets/common/select-kit/user-row.scss
index fbc4f848b4c..f6d5d98d69a 100644
--- a/app/assets/stylesheets/common/select-kit/user-row.scss
+++ b/app/assets/stylesheets/common/select-kit/user-row.scss
@@ -6,12 +6,12 @@
     }
 
     .username {
-      color: $primary;
+      color: var(--primary);
       white-space: nowrap;
     }
 
     .name {
-      color: $primary-high;
+      color: var(--primary-high);
       font-size: $font-down-1;
       margin-left: 0.5em;
       overflow: hidden;
diff --git a/app/assets/stylesheets/common/topic-entrance.scss b/app/assets/stylesheets/common/topic-entrance.scss
index 63765d15948..0ab8c3336e6 100644
--- a/app/assets/stylesheets/common/topic-entrance.scss
+++ b/app/assets/stylesheets/common/topic-entrance.scss
@@ -1,7 +1,7 @@
 #topic-entrance {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   padding: 5px;
-  background: $secondary;
+  background: var(--secondary);
   box-shadow: shadow("card");
   z-index: z("dropdown");
 
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 494db0876b9..98b69dfc9f4 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -53,11 +53,11 @@
     transition: max-height 0.3s ease-in;
     position: fixed;
     margin-left: 0;
-    background-color: $secondary;
+    background-color: var(--secondary);
     bottom: 0;
     left: 0;
     right: 0;
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     box-shadow: shadow("composer");
     padding: 20px 0px;
     z-index: z("fullscreen");
@@ -89,7 +89,7 @@
         }
       }
       .username {
-        color: $primary-high-or-secondary-low;
+        color: var(--primary-high-or-secondary-low);
         word-wrap: break-word;
         font-weight: bold;
       }
@@ -107,7 +107,7 @@
           @include line-clamp(4);
         }
         a {
-          color: $primary;
+          color: var(--primary);
         }
       }
       .timeline-last-read {
@@ -197,14 +197,14 @@
 
     .start-date {
       @include unselectable;
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
 
     .timeline-scrollarea {
       margin-top: 0.5em;
       margin-left: 0.5em;
       border-left: 1px solid;
-      border-color: $tertiary-low-or-tertiary-high;
+      border-color: var(--tertiary-low-or-tertiary-high);
       position: relative;
       -webkit-transform: translate3d(0, 0, 0);
     }
@@ -220,7 +220,7 @@
     .timeline-handle {
       border-radius: 0.8em;
       width: 0.35em;
-      background-color: $tertiary-low-or-tertiary-high;
+      background-color: var(--tertiary-low-or-tertiary-high);
       height: 100%;
       float: left;
       z-index: z("base") + 1;
@@ -231,7 +231,7 @@
     }
 
     .timeline-ago {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
 
     .timeline-scroller {
@@ -255,7 +255,7 @@
       margin-left: -0.35em;
       .progress {
         font-size: 0.8em;
-        color: $tertiary;
+        color: var(--tertiary);
         margin-right: 1em;
       }
       z-index: z("base") + 2; // above timeline-handle
@@ -269,7 +269,7 @@
     .now-date {
       @include unselectable;
       display: inline-block;
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       margin-top: 0.5em;
     }
   }
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index aa81f8db5b0..3ed65ef0af2 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -29,7 +29,7 @@
   .topics .badge-notification,
   .category .badge-notification {
     background-color: transparent;
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
   }
 
   .topics {
@@ -77,7 +77,7 @@
     a.last-posted-at,
     a.last-posted-at:visited {
       font-size: $font-down-1;
-      color: $primary-med-or-secondary-high;
+      color: var(--primary-med-or-secondary-high);
     }
     .title {
       @include ellipsis;
@@ -99,7 +99,7 @@
       h4 {
         line-height: $line-height-medium;
         a[href] {
-          color: $primary;
+          color: var(--primary);
         }
       }
 
diff --git a/app/assets/stylesheets/desktop/components/user-stream-item.scss b/app/assets/stylesheets/desktop/components/user-stream-item.scss
index 52ef60c37de..70aa8530aea 100644
--- a/app/assets/stylesheets/desktop/components/user-stream-item.scss
+++ b/app/assets/stylesheets/desktop/components/user-stream-item.scss
@@ -8,7 +8,7 @@
 
   .notification {
     &.unread {
-      background-color: $tertiary-low;
+      background-color: var(--tertiary-low);
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 9fb8c27a0a5..aa0ff1d6ff5 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -62,13 +62,13 @@
   .grippie {
     cursor: row-resize;
     padding: 4px 0;
-    background: $tertiary;
+    background: var(--tertiary);
     &:before {
       content: "";
       display: block;
       width: 27px;
       margin: auto;
-      border-top: 3px double $secondary;
+      border-top: 3px double var(--secondary);
     }
   }
 }
@@ -98,17 +98,17 @@
   z-index: z("composer", "popover");
   padding: 10px 10px 35px 10px;
   box-shadow: shadow("card");
-  background: $highlight-medium;
+  background: var(--highlight-medium);
   .hide-preview & {
     z-index: z("composer", "dropdown") + 1;
   }
 
   &.urgent {
-    background: $danger-low;
+    background: var(--danger-low);
   }
 
   &.education-message {
-    background-color: $tertiary-low;
+    background-color: var(--tertiary-low);
   }
 
   h3 {
@@ -125,7 +125,7 @@
     position: absolute;
     right: 10px;
     top: 10px;
-    color: $primary;
+    color: var(--primary);
     opacity: 0.5;
     font-size: $font-up-1;
     &:before {
@@ -158,21 +158,21 @@
 }
 
 .custom-body {
-  background-color: $tertiary-low;
+  background-color: var(--tertiary-low);
   p {
     max-width: 98%;
   }
 }
 
 .similar-topics {
-  background-color: $tertiary-low;
+  background-color: var(--tertiary-low);
 
   a[href] {
-    color: $primary;
+    color: var(--primary);
   }
 
   .posts-count {
-    background-color: $tertiary;
+    background-color: var(--tertiary);
   }
 
   .search-link {
@@ -187,12 +187,12 @@
       margin-left: 0;
     }
     .blurb {
-      color: $primary-high;
+      color: var(--primary-high);
     }
     .topic-title,
     .blurb {
       .d-icon {
-        color: $primary-high;
+        color: var(--primary-high);
       }
     }
     span.topic {
@@ -224,9 +224,9 @@
 }
 
 a.toggle-preview {
-  color: $primary-high;
+  color: var(--primary-high);
   &:hover {
-    color: $tertiary;
+    color: var(--tertiary);
   }
 }
 
@@ -256,7 +256,7 @@ a.toggle-preview {
         margin-top: 1%;
       }
       .reply-to {
-        border-bottom: 1px solid $primary-low;
+        border-bottom: 1px solid var(--primary-low);
         padding-bottom: 3px;
         margin: 0;
         .composer-controls {
@@ -267,7 +267,7 @@ a.toggle-preview {
         border: none;
       }
       &.show-preview .d-editor-textarea-wrapper {
-        border-right: 1px solid $primary-low;
+        border-right: 1px solid var(--primary-low);
       }
       #draft-status,
       #file-uploading {
@@ -279,7 +279,7 @@ a.toggle-preview {
       }
       &:before {
         content: "";
-        background: $secondary;
+        background: var(--secondary);
         width: 100%;
         height: 100%;
         position: fixed;
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 01f03f5c86f..ebcee9c726f 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -64,7 +64,7 @@ textarea {
   margin-bottom: 9px;
   font-size: $font-0;
   line-height: $line-height-large;
-  color: $primary;
+  color: var(--primary);
 }
 
 input,
@@ -79,7 +79,7 @@ input[type="file"] {
 
 select {
   width: 220px;
-  background: $secondary;
+  background: var(--secondary);
 
   &[multiple],
   &[size] {
@@ -114,7 +114,7 @@ input {
 }
 
 .control-instructions {
-  color: $primary-medium;
+  color: var(--primary-medium);
   font-size: 0.875rem;
 }
 
@@ -162,7 +162,7 @@ input {
 .bootbox.modal {
   .modal-footer {
     a.btn-primary {
-      color: $secondary;
+      color: var(--secondary);
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index 401b26f758d..8513149f843 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -15,13 +15,13 @@
     border: none;
 
     a {
-      color: $primary-med-or-secondary-high;
+      color: var(--primary-med-or-secondary-high);
       padding: 8px 0;
 
       &.active {
         background-color: transparent;
         font-weight: bold;
-        color: $primary;
+        color: var(--primary);
 
         &:after {
           display: none;
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 83c8b589d48..9918bfa8ac0 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -37,12 +37,12 @@
 }
 
 .search-link .blurb {
-  color: $secondary-medium;
+  color: var(--secondary-medium);
   display: block;
   word-wrap: break-word;
   font-size: $font-down-2;
   line-height: $line-height-large;
   .search-highlight {
-    color: $primary-high-or-secondary-low;
+    color: var(--primary-high-or-secondary-low);
   }
 }
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index 9f11b58e81c..ca0e10b5c20 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -10,10 +10,10 @@
   #revision-controls {
     .btn[disabled] {
       cursor: not-allowed;
-      background-color: $primary-low;
+      background-color: var(--primary-low);
     }
     .btn-danger[disabled] {
-      background-color: $danger-medium;
+      background-color: var(--danger-medium);
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
index 69ea9e690c9..33aeee78b58 100644
--- a/app/assets/stylesheets/desktop/latest-topic-list.scss
+++ b/app/assets/stylesheets/desktop/latest-topic-list.scss
@@ -4,7 +4,7 @@
 
   .table-heading {
     padding: 12px 5px;
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
   }
 
   .no-topics,
@@ -15,7 +15,7 @@
 
 .latest-topic-list-item {
   padding: 1em;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
   display: flex;
 
   align-items: center;
@@ -49,10 +49,10 @@
   .topic-stats {
     flex: 1 0 0px;
     text-align: right;
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
   }
 
   .topic-last-activity a {
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
   }
 }
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index f2ec4bd06c8..c5bdc7bdabd 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -61,7 +61,7 @@
       justify-content: flex-start;
       padding-top: 2.7em;
       + .login-form {
-        border-right: 1px solid $primary-low; // Only show border when login-form is present
+        border-right: 1px solid var(--primary-low); // Only show border when login-form is present
       }
     }
   }
@@ -71,7 +71,7 @@
     flex: 1 0 auto;
     padding: 0 24px;
     + #login-buttons {
-      border-left: 1px solid $primary-low; // Only show border when login-form is present
+      border-left: 1px solid var(--primary-low); // Only show border when login-form is present
     }
   }
 
@@ -157,8 +157,8 @@
       }
       background-image: linear-gradient(
         to bottom,
-        rgba($secondary, 0) 0%,
-        rgba($secondary, 0.9) 100%
+        rgba(var(--secondary-rgb), 0) 0%,
+        rgba(var(--secondary-rgb), 0.9) 100%
       );
     }
     &:before {
@@ -166,8 +166,8 @@
       height: 25px;
       background-image: linear-gradient(
         to top,
-        rgba($secondary, 0) 0%,
-        rgba($secondary, 1) 100%
+        rgba(var(--secondary-rgb), 0) 0%,
+        rgba(var(--secondary-rgb), 1) 100%
       );
     }
     form {
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 341e33fdd0b..bb8608ef657 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -28,11 +28,11 @@
   font-size: $font-up-3;
   text-decoration: none;
   &:visited {
-    color: $primary-high;
+    color: var(--primary-high);
   }
   cursor: pointer;
   &:hover {
-    color: $primary;
+    color: var(--primary);
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index e55a142475b..0d05ee43362 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -34,16 +34,16 @@
 
 .topic-list-icons {
   .d-icon-thumbtack {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
   .d-icon-thumbtack.unpinned {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
   a.title {
-    color: $primary;
+    color: var(--primary);
   }
   .d-icon-bookmark {
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
 }
 
@@ -63,7 +63,7 @@
   }
   th {
     button .d-icon {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
   }
 
@@ -104,7 +104,7 @@
 
       &.posters-more-count {
         cursor: default;
-        color: $primary-med-or-secondary-med;
+        color: var(--primary-med-or-secondary-med);
         line-height: $td-posters-more-lh;
         font-size: $font-down-1;
       }
@@ -134,7 +134,7 @@
   .post-actions {
     clear: both;
     width: auto;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     text-align: left;
     font-size: $font-down-1;
     margin-top: 5px;
@@ -142,7 +142,7 @@
       margin-right: 2px;
     }
     a {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
       margin-right: 3px;
       line-height: $line-height-large;
     }
@@ -201,7 +201,7 @@
   position: fixed;
   right: 20px;
   top: 130px;
-  background-color: $secondary;
+  background-color: var(--secondary);
   z-index: z("dropdown");
   @supports (position: sticky) {
     @media screen and (min-width: 1250px) {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index cba3642f425..6aa3c1af487 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -26,7 +26,7 @@
   }
   .reply-to-tab {
     z-index: z("base") + 1;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
   }
   .actions .fade-out {
     .discourse-no-touch & {
@@ -67,12 +67,12 @@ nav.post-controls {
     // Some buttons can be doubled up, like likes or flags
     .double-button {
       display: inline-flex;
-      color: $primary-low-mid;
+      color: var(--primary-low-mid);
       margin-right: 0.15em;
       &:hover {
         button {
-          background: $primary-low;
-          color: $primary-medium;
+          background: var(--primary-low);
+          color: var(--primary-medium);
         }
       }
       button {
@@ -87,28 +87,28 @@ nav.post-controls {
         &.regular-likes {
           // Like count on posts
           .d-icon {
-            color: $primary-low-mid;
+            color: var(--primary-low-mid);
             padding-left: 0.45em;
           }
         }
         &.like {
           // Like button with 0 likes
           &.d-hover {
-            background: $love-low;
+            background: var(--love-low);
             .d-icon {
-              color: $love;
+              color: var(--love);
             }
           }
         }
         &.has-like {
           // Like button after I've liked
           .d-icon {
-            color: $love;
+            color: var(--love);
           }
           &.d-hover {
-            background: $primary-low;
+            background: var(--primary-low);
             .d-icon {
-              color: $primary-medium;
+              color: var(--primary-medium);
             }
           }
         }
@@ -122,13 +122,13 @@ nav.post-controls {
             padding-right: 0;
           }
           &.d-hover {
-            color: $primary;
+            color: var(--primary);
           }
           + .toggle-like {
             // Like button when like count is present
             padding-left: 0.45em;
             &.d-hover {
-              background: $primary-low;
+              background: var(--primary-low);
             }
           }
         }
@@ -136,7 +136,7 @@ nav.post-controls {
     }
     a,
     button {
-      color: $primary-low-mid-or-secondary-high;
+      color: var(--primary-low-mid-or-secondary-high);
       .d-icon {
         opacity: 1;
       }
@@ -154,10 +154,10 @@ nav.post-controls {
 
     button.create {
       margin-right: 0;
-      color: $primary-high-or-secondary-low;
+      color: var(--primary-high-or-secondary-low);
       margin-left: 10px;
       .d-icon {
-        color: $primary-high-or-secondary-low;
+        color: var(--primary-high-or-secondary-low);
       }
     }
     .create .d-icon {
@@ -172,8 +172,8 @@ nav.post-controls {
       margin-left: 3px;
       &.d-hover,
       &:focus {
-        background: $primary-low;
-        color: $primary;
+        background: var(--primary-low);
+        color: var(--primary);
       }
       &:active {
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
@@ -187,16 +187,16 @@ nav.post-controls {
       &.delete.d-hover,
       &.delete:hover,
       &.delete:focus {
-        background: $danger;
-        color: $secondary;
+        background: var(--danger);
+        color: var(--secondary);
         .d-icon {
-          color: $secondary;
+          color: var(--secondary);
         }
       }
       &.bookmark {
         padding: 8px 11px;
         &.bookmarked .d-icon {
-          color: $tertiary;
+          color: var(--tertiary);
         }
       }
     }
@@ -207,10 +207,10 @@ nav.post-controls {
     margin-left: -10px;
     font-size: inherit;
     padding: 10px;
-    color: $primary-medium;
+    color: var(--primary-medium);
     &:hover {
-      color: $primary;
-      background: $primary-low;
+      color: var(--primary);
+      background: var(--primary-low);
     }
     .d-icon {
       margin-left: 5px;
@@ -236,7 +236,7 @@ pre.copy-codeblocks:hover .copy-cmd {
   h3 {
     margin: 10px 0;
   }
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   .topic-body {
     box-sizing: border-box;
     width: calc(100% - 70px); // [100% - .topic-avatar width]
@@ -255,9 +255,9 @@ pre.copy-codeblocks:hover .copy-cmd {
   .collapse-down,
   .collapse-up {
     position: absolute;
-    color: $primary-medium;
-    background: $secondary;
-    border: 1px solid $primary-low;
+    color: var(--primary-medium);
+    background: var(--secondary);
+    border: 1px solid var(--primary-low);
     padding: 6px 9px 8px;
     z-index: 99; // Needs to be higher than topic-avatar
     .d-icon {
@@ -265,8 +265,8 @@ pre.copy-codeblocks:hover .copy-cmd {
     }
     .discourse-no-touch & {
       &:hover {
-        background: $primary-low;
-        color: $primary-high;
+        background: var(--primary-low);
+        color: var(--primary-high);
         .d-icon {
           color: currentColor;
         }
@@ -290,7 +290,7 @@ pre.copy-codeblocks:hover .copy-cmd {
       padding-bottom: 0.5em;
       .topic-avatar,
       .topic-body {
-        border-top: 1px solid $primary-low;
+        border-top: 1px solid var(--primary-low);
       }
     }
   } // top means "in reply to expansion" above a post
@@ -305,7 +305,7 @@ pre.copy-codeblocks:hover .copy-cmd {
       border-bottom: none;
       .topic-avatar,
       .topic-body {
-        border-top: 1px solid $primary-low;
+        border-top: 1px solid var(--primary-low);
       }
     }
   }
@@ -313,7 +313,7 @@ pre.copy-codeblocks:hover .copy-cmd {
     padding: 0;
   }
   .post-date {
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
   }
   .d-icon-arrow-up,
   .d-icon-arrow-down {
@@ -331,11 +331,11 @@ pre.copy-codeblocks:hover .copy-cmd {
     font-size: $font-down-1;
     a {
       font-weight: bold;
-      color: $primary-low-mid-or-secondary-high;
+      color: var(--primary-low-mid-or-secondary-high);
     }
   }
   .arrow {
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
   }
 }
 
@@ -365,7 +365,7 @@ pre.copy-codeblocks:hover .copy-cmd {
       }
     }
     .number {
-      color: $primary-high;
+      color: var(--primary-high);
     }
     .number,
     .d-icon {
@@ -374,7 +374,7 @@ pre.copy-codeblocks:hover .copy-cmd {
     }
     button .d-icon,
     button:hover .d-icon {
-      color: $primary-high;
+      color: var(--primary-high);
     }
     .avatar a {
       float: left;
@@ -387,20 +387,20 @@ pre.copy-codeblocks:hover .copy-cmd {
   .links,
   .information {
     padding: 7px 10px 7px 10px;
-    color: $primary;
+    color: var(--primary);
   }
   .buttons {
     float: right;
     .btn {
       border: 0;
       padding: 0 23px;
-      color: $primary-med-or-secondary-high;
-      background: $blend-primary-secondary-5;
-      border-left: 1px solid $primary-low;
+      color: var(--primary-med-or-secondary-high);
+      background: var(--blend-primary-secondary-5);
+      border-left: 1px solid var(--primary-low);
       border-top: 1px solid transparent;
       &:hover {
-        color: $primary;
-        background: $primary-low;
+        color: var(--primary);
+        background: var(--primary-low);
       }
       &.collapsed {
         padding-bottom: 1px;
@@ -413,12 +413,12 @@ pre.copy-codeblocks:hover .copy-cmd {
     }
   }
   .link-summary .btn {
-    color: $primary-med-or-secondary-high;
-    background: $blend-primary-secondary-5;
+    color: var(--primary-med-or-secondary-high);
+    background: var(--blend-primary-secondary-5);
     width: 100%;
     &:hover {
-      color: $primary;
-      background: $primary-low;
+      color: var(--primary);
+      background: var(--primary-low);
     }
   }
 }
@@ -428,16 +428,16 @@ pre.copy-codeblocks:hover .copy-cmd {
 
   .bookmark {
     .d-icon-bookmark.bookmarked {
-      color: $tertiary;
+      color: var(--tertiary);
     }
   }
 
   .bookmark.bookmarked .d-icon-bookmark,
   .bookmark.bookmarked .d-icon-discourse-bookmark-clock {
-    color: $tertiary;
+    color: var(--tertiary);
   }
   .feature-on-profile.featured-on-profile .d-icon-id-card {
-    color: $tertiary;
+    color: var(--tertiary);
   }
 }
 
@@ -457,8 +457,8 @@ pre.copy-codeblocks:hover .copy-cmd {
 }
 
 span.post-count {
-  background: $primary;
-  color: $secondary;
+  background: var(--primary);
+  color: var(--secondary);
   opacity: 0.8;
 }
 
@@ -512,7 +512,7 @@ video {
 
 .deleted {
   .topic-body {
-    background-color: $danger-low-mid;
+    background-color: var(--danger-low-mid);
   }
 }
 
@@ -528,7 +528,7 @@ video {
 
 .info-line {
   margin: 10px 0;
-  color: $primary;
+  color: var(--primary);
 }
 
 /* solo quotes */
@@ -545,7 +545,7 @@ blockquote {
 .quote {
   & > blockquote {
     .onebox-result {
-      background-color: $primary-very-low;
+      background-color: var(--primary-very-low);
     }
   }
   aside {
@@ -554,8 +554,8 @@ blockquote {
     blockquote,
     .onebox,
     .onebox-result {
-      background: $primary-very-low;
-      border-left: 5px solid $primary-low;
+      background: var(--primary-very-low);
+      border-left: 5px solid var(--primary-low);
     }
     aside.quote > blockquote,
     aside.quote > .title {
@@ -569,7 +569,7 @@ blockquote {
   width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2));
   float: left;
   position: relative;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding: 12px 0 0 0;
   .topic-meta-data,
   .cooked {
@@ -584,7 +584,7 @@ blockquote {
 }
 
 .topic-avatar {
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding-top: 15px;
   width: $topic-avatar-width;
   float: left;
@@ -606,7 +606,7 @@ blockquote {
 }
 
 .time-gap + .topic-post .embedded-posts.top {
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
 }
 
 .posts-wrapper {
@@ -623,7 +623,7 @@ blockquote {
   width: 0;
   height: 0;
   vertical-align: middle;
-  border-top: 4px solid $primary;
+  border-top: 4px solid var(--primary);
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -664,7 +664,7 @@ blockquote {
   }
   h3 {
     font-size: $font-up-4;
-    color: $primary;
+    color: var(--primary);
     margin-bottom: 5px;
     .d-icon {
       margin-right: 7px;
@@ -701,11 +701,11 @@ a.attachment:before {
 
   .post-info {
     a {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
 
     a.wiki {
-      color: $wiki;
+      color: var(--wiki);
     }
   }
 }
@@ -719,18 +719,18 @@ a.attachment:before {
 }
 
 span.highlighted {
-  background-color: $tertiary-low;
+  background-color: var(--tertiary-low);
 }
 
 .first.new-user:not(.staff) a {
-  color: $primary-low-mid;
+  color: var(--primary-low-mid);
 }
 
 .read-state {
   position: absolute;
   // We use absolute positioning here because we want it to display in the padding
   align-self: center;
-  color: $tertiary-medium;
+  color: var(--tertiary-medium);
   right: 0;
   font-size: 0.571em;
 }
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 6700cb0a8a9..a54d3e6b655 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -30,14 +30,14 @@
     overflow-wrap: break-word;
     width: 100%;
     a {
-      color: $primary;
+      color: var(--primary);
     }
   }
 
   .remove-featured-link {
     float: right;
     text-transform: lowercase;
-    color: $primary-med-or-secondary-med;
+    color: var(--primary-med-or-secondary-med);
     font-size: 0.857rem;
   }
 }
@@ -62,7 +62,7 @@
 }
 
 .topic-status-info {
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding: 10px 0;
   max-width: 758px;
   .topic-timer-heading {
@@ -89,9 +89,9 @@
 }
 
 #topic-progress-expanded {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   padding: 5px;
-  background: $secondary;
+  background: var(--secondary);
 
   position: relative;
   left: 340px;
@@ -136,9 +136,9 @@
   &.hidden {
     display: none;
   }
-  background-color: $secondary;
-  color: $tertiary;
-  border: 1px solid $tertiary-low;
+  background-color: var(--secondary);
+  color: var(--tertiary);
+  border: 1px solid var(--tertiary-low);
   border-bottom: none;
   width: 145px;
   height: 34px;
@@ -173,14 +173,14 @@
     bottom: 0;
     width: 0;
     max-width: 145px;
-    border-right: 1px solid $tertiary-low;
-    background-color: $tertiary-low;
+    border-right: 1px solid var(--tertiary-low);
+    background-color: var(--tertiary-low);
     transition: width 0.75s;
   }
 }
 
 #topic-filter {
-  background-color: $highlight-medium;
+  background-color: var(--highlight-medium);
   padding: 8px;
   bottom: 0;
   position: fixed;
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index 09278ba0af8..6e13c6b8897 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -24,7 +24,7 @@
       }
       .description,
       .hint {
-        color: $primary-med-or-secondary-med;
+        color: var(--primary-med-or-secondary-med);
         display: block;
       }
       .hint {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 9a398bcfe80..9432a82ff98 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -34,10 +34,10 @@
     }
 
     a {
-      color: $primary-medium;
+      color: var(--primary-medium);
 
       &.active {
-        color: $primary;
+        color: var(--primary);
         font-weight: bold;
         background-color: transparent;
 
@@ -52,7 +52,7 @@
 .user-content {
   padding-bottom: 12px;
   margin-bottom: 12px;
-  background-color: $secondary;
+  background-color: var(--secondary);
   box-sizing: border-box;
 
   &.user-badges-list {
@@ -111,7 +111,7 @@
       .details {
         padding: 15px 0;
         margin: 0;
-        color: $secondary;
+        color: var(--secondary);
       }
     }
 
@@ -204,7 +204,7 @@
         position: relative;
         padding: 0;
         margin-top: 0;
-        border-bottom: 1px solid $primary-low;
+        border-bottom: 1px solid var(--primary-low);
       }
     }
   }
@@ -236,7 +236,7 @@
   }
 
   h3 {
-    color: $primary;
+    color: var(--primary);
     margin: 20px 0 10px 0;
   }
 
diff --git a/app/assets/stylesheets/mobile/admin_report_table.scss b/app/assets/stylesheets/mobile/admin_report_table.scss
index 73497ff27df..29401efd0dd 100644
--- a/app/assets/stylesheets/mobile/admin_report_table.scss
+++ b/app/assets/stylesheets/mobile/admin_report_table.scss
@@ -5,7 +5,7 @@
 
   .table .admin-report-table-header {
     font-weight: 500;
-    border-right: 1px solid $primary-low;
+    border-right: 1px solid var(--primary-low);
     padding: auto;
 
     .title {
diff --git a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
index 6b0ebfcbc8d..b81f960a46b 100644
--- a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
+++ b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
@@ -3,7 +3,7 @@
     &.topic-footer-mobile-dropdown {
       .select-kit-row {
         padding: 0.75em 0.5em;
-        border-bottom: 1px solid rgba($primary-low, 0.5);
+        border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
 
         .name {
           line-height: $line-height-medium;
@@ -14,20 +14,20 @@
         }
 
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
 
         &.is-highlighted {
-          background: $tertiary-low;
+          background: var(--tertiary-low);
 
           .name {
-            color: $primary;
+            color: var(--primary);
           }
         }
 
         &.bookmarked {
           .d-icon {
-            color: $tertiary;
+            color: var(--tertiary);
           }
         }
       }
diff --git a/app/assets/stylesheets/mobile/components/user-stream-item.scss b/app/assets/stylesheets/mobile/components/user-stream-item.scss
index 84898059bce..676c8258227 100644
--- a/app/assets/stylesheets/mobile/components/user-stream-item.scss
+++ b/app/assets/stylesheets/mobile/components/user-stream-item.scss
@@ -6,7 +6,7 @@
 
   .notification {
     &.unread {
-      background-color: $tertiary-low;
+      background-color: var(--tertiary-low);
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 21e6c067edf..69c746dea3d 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -95,7 +95,7 @@
       }
       .cancel {
         font-size: 1.4em;
-        color: $primary-low-mid;
+        color: var(--primary-low-mid);
         margin-left: 0.6em;
         padding: 3px 6px;
       }
@@ -125,7 +125,7 @@
     .submit-panel {
       padding-top: 10px;
       z-index: z("fullscreen") + 1;
-      background-color: $secondary;
+      background-color: var(--secondary);
       .cancel,
       .mobile-file-upload,
       .mobile-preview {
@@ -139,8 +139,8 @@
       bottom: 0;
       left: 0;
       right: 0;
-      background-color: $secondary;
-      border-bottom: 40px solid $secondary;
+      background-color: var(--secondary);
+      border-bottom: 40px solid var(--secondary);
       max-width: 100%;
       margin: 0;
       padding: 10px;
diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss
index f963433e290..fc5e77237f4 100644
--- a/app/assets/stylesheets/mobile/directory.scss
+++ b/app/assets/stylesheets/mobile/directory.scss
@@ -19,12 +19,12 @@
   }
 
   .total-rows {
-    color: $primary-medium;
+    color: var(--primary-medium);
     padding: 5px;
   }
 
   .user {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     padding: 1em;
     display: flex;
     flex-wrap: wrap;
@@ -41,10 +41,10 @@
       }
       .label {
         margin-left: 0.2em;
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
       .d-icon-heart {
-        color: $love;
+        color: var(--love);
       }
     }
   }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index feefdb59c1d..b7dfe695611 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -6,12 +6,12 @@
 // Base Elements
 
 body {
-  background-color: $secondary;
+  background-color: var(--secondary);
 }
 
 .ios-device {
   textarea {
-    background-color: $secondary;
+    background-color: var(--secondary);
     font-size: $font-size-ios-input;
     -webkit-tap-highlight-color: transparent;
   }
@@ -74,15 +74,15 @@ blockquote {
   list-style: none;
   overflow: visible;
   position: relative;
-  border: 1px solid $primary-medium;
+  border: 1px solid var(--primary-medium);
   // Prevents the dropdowns from collapsing while content loads, so they look more like placeholders and less like dark 2px lines
   min-height: 37px;
 
   a {
-    color: $primary;
+    color: var(--primary);
     .d-icon {
       margin-right: 0.25em;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 
@@ -109,12 +109,12 @@ blockquote {
       display: block;
       position: absolute;
       z-index: z("dropdown");
-      background-color: $secondary;
+      background-color: var(--secondary);
       width: 100%;
       list-style: none;
       margin: 0;
       padding: 5px;
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low);
       box-sizing: border-box;
 
       li {
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index 99c0d05633b..e441eb0097f 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -17,7 +17,7 @@
 
 .group-members {
   .group-member {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
 
     .user-info {
       margin: 0;
@@ -30,7 +30,7 @@
     }
 
     .group-member-info {
-      color: $primary-medium;
+      color: var(--primary-medium);
 
       label {
         margin-bottom: 0;
diff --git a/app/assets/stylesheets/mobile/lightbox.scss b/app/assets/stylesheets/mobile/lightbox.scss
index 8c864502ba5..b4cd69fa4ca 100644
--- a/app/assets/stylesheets/mobile/lightbox.scss
+++ b/app/assets/stylesheets/mobile/lightbox.scss
@@ -6,8 +6,8 @@
 
 .meta {
   align-items: center;
-  background: $secondary;
-  color: $primary-high;
+  background: var(--secondary);
+  color: var(--primary-high);
   height: 25px;
   width: 25px;
   bottom: 0;
@@ -20,6 +20,6 @@
   }
 
   .d-icon-discourse-expand {
-    color: $primary-high;
+    color: var(--primary-high);
   }
 }
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 10c59d0a95b..c6932cb39bd 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -33,7 +33,7 @@
     }
 
     + #login-form {
-      border-top: 1px solid $primary-low;
+      border-top: 1px solid var(--primary-low);
     }
   }
 
@@ -156,12 +156,12 @@
   flex-direction: column;
   tr.instructions {
     label {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
   }
 
   #login-buttons {
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
   }
 
   .login-form {
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index 1966954317f..7e03afc153b 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -18,7 +18,7 @@
 }
 
 .user-menu .quick-access-panel.quick-access-profile li:not(.show-all) {
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
 
   a {
     // accounts for menu "ears" 4px + border 1px
diff --git a/app/assets/stylesheets/mobile/reviewables.scss b/app/assets/stylesheets/mobile/reviewables.scss
index 16c00d79f12..7b088643ab2 100644
--- a/app/assets/stylesheets/mobile/reviewables.scss
+++ b/app/assets/stylesheets/mobile/reviewables.scss
@@ -26,7 +26,7 @@
 }
 
 .reviewable-filters {
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
   padding: 0.5em 1em 1em 1em;
   margin-bottom: 1em;
 
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index c448d23079f..7754b136155 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -91,7 +91,7 @@
     > li {
       margin-right: 0;
       font-size: $font-down-1;
-      border: 1px solid $primary-medium;
+      border: 1px solid var(--primary-medium);
     }
     > li > a {
       line-height: $line-height-large;
@@ -103,10 +103,10 @@
       }
     }
     .drop {
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low);
       position: absolute;
       z-index: z("dropdown") - 1;
-      background-color: $secondary;
+      background-color: var(--secondary);
       padding: 0 10px 10px 10px;
       width: 150px;
       top: 100%;
@@ -149,13 +149,13 @@
     position: relative;
     z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
     a.title {
-      color: $primary;
+      color: var(--primary);
       padding: 0.5em 0 1.2em 0;
     }
     .topic-statuses {
       a {
         line-height: 0.8;
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
   }
@@ -169,7 +169,7 @@
     line-height: $line-height-small;
     padding: 0.15em 0.4em 0.2em 0.4em;
     .d-icon {
-      color: $secondary;
+      color: var(--secondary);
     }
 
     &.new-topic::before {
@@ -183,7 +183,7 @@
   .category-topic-link td.num .badge-notification {
     &.new-posts,
     &.unread-posts {
-      color: $secondary;
+      color: var(--secondary);
     }
   }
 
@@ -202,7 +202,7 @@
     .num .fa,
     a,
     a:visited {
-      color: $primary-med-or-secondary-med;
+      color: var(--primary-med-or-secondary-med);
     }
   }
 
@@ -211,7 +211,7 @@
     a {
       // let's make all ages dim on mobile so we're not
       // overwhelming people with info about each topic
-      color: $primary-low-mid-or-secondary-high !important;
+      color: var(--primary-low-mid-or-secondary-high) !important;
     }
   }
 }
@@ -223,7 +223,7 @@
 
   td {
     padding: 12px 5px;
-    color: $primary-med-or-secondary-high;
+    color: var(--primary-med-or-secondary-high);
     vertical-align: top;
   }
 
@@ -285,11 +285,11 @@
   width: calc(100% + 20px);
   margin: 1.25em 10px 0;
   border-bottom: none !important;
-  border-top: 1px solid $primary-low !important;
+  border-top: 1px solid var(--primary-low) !important;
   &:last-of-type {
     margin-top: 0;
     margin-bottom: 1.25em;
-    border-bottom: 1px solid $primary-low !important;
+    border-bottom: 1px solid var(--primary-low) !important;
   }
   td:first-of-type {
     padding: 12px 0px;
@@ -303,7 +303,7 @@
 }
 
 tr.category-topic-link {
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low);
   &:last-of-type {
     border-bottom: none;
   }
@@ -322,7 +322,7 @@ tr.category-topic-link {
       margin-right: 5px;
     }
     a[href] {
-      color: $primary;
+      color: var(--primary);
     }
   }
 
@@ -377,7 +377,7 @@ tr.category-topic-link {
     float: left;
   }
   > footer {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     padding: 7px 10px;
     figure {
       float: left;
@@ -398,8 +398,8 @@ tr.category-topic-link {
 
 .category-list-item {
   padding: 0.5em 0 0.25em;
-  border-top: 1px solid $primary-low !important;
-  border-bottom: 1px solid $primary-low !important;
+  border-top: 1px solid var(--primary-low) !important;
+  border-bottom: 1px solid var(--primary-low) !important;
   margin-bottom: 2em;
 }
 
@@ -432,7 +432,7 @@ tr.category-topic-link {
   width: 0;
   height: 0;
   vertical-align: middle;
-  border-top: 4px solid $primary;
+  border-top: 4px solid var(--primary);
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -544,7 +544,7 @@ td .main-link {
 }
 
 .category-list .category.muted a.category-title-link {
-  color: $primary-medium;
+  color: var(--primary-medium);
   font-size: $font-down-1;
 }
 
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 3fcb8342de0..72945296fb2 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -10,7 +10,7 @@
 }
 
 .topic-post article {
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding: 15px 0 8px 0;
 }
 
@@ -28,7 +28,7 @@ span.badge-posts {
 
 .topic-post {
   nav.post-controls {
-    color: $primary-low-mid-or-secondary-high;
+    color: var(--primary-low-mid-or-secondary-high);
     .actions {
       display: flex;
 
@@ -82,18 +82,18 @@ span.badge-posts {
         }
         &.reply {
           .d-icon {
-            color: $primary-high;
+            color: var(--primary-high);
           }
           margin-left: auto;
         }
         &.has-like {
           .d-icon {
-            color: $love;
+            color: var(--love);
           }
         }
         &.bookmarked {
           .d-icon {
-            color: $tertiary;
+            color: var(--tertiary);
           }
         }
       }
@@ -131,7 +131,7 @@ span.badge-posts {
 
 a.reply-to-tab {
   z-index: z("base") + 1;
-  color: $primary-med-or-secondary-med;
+  color: var(--primary-med-or-secondary-med);
   margin-right: 0.5em;
 }
 
@@ -166,7 +166,7 @@ a.reply-to-tab {
     }
     .number,
     .d-icon {
-      color: $primary-high-or-secondary-low;
+      color: var(--primary-high-or-secondary-low);
       font-size: $font-up-1;
     }
     .avatar + a {
@@ -180,7 +180,7 @@ a.reply-to-tab {
   .information,
   .avatars {
     padding: 10px;
-    color: $primary;
+    color: var(--primary);
     overflow: auto;
   }
   .information {
@@ -192,9 +192,9 @@ a.reply-to-tab {
     .btn {
       border: 0;
       padding: 0 15px;
-      color: $primary-med-or-secondary-high;
-      background: $blend-primary-secondary-5;
-      border-left: 1px solid $primary-low;
+      color: var(--primary-med-or-secondary-high);
+      background: var(--blend-primary-secondary-5);
+      border-left: 1px solid var(--primary-low);
       .fa {
         margin: 0;
         font-size: $font-up-2;
@@ -203,8 +203,8 @@ a.reply-to-tab {
     }
   }
   .link-summary .btn {
-    color: $primary-med-or-secondary-high;
-    background: $blend-primary-secondary-5;
+    color: var(--primary-med-or-secondary-high);
+    background: var(--blend-primary-secondary-5);
     width: 100%;
   }
 }
@@ -212,7 +212,7 @@ a.reply-to-tab {
 #topic-footer-buttons {
   .d-icon-bookmark.bookmarked,
   .d-icon-discourse-bookmark-clock.bookmarked {
-    color: $tertiary;
+    color: var(--tertiary);
   }
 
   .topic-footer-mobile-dropdown {
@@ -253,8 +253,8 @@ a.reply-to-tab {
 }
 
 span.post-count {
-  background: $primary;
-  color: $secondary;
+  background: var(--primary);
+  color: var(--secondary);
   opacity: 0.8;
 }
 
@@ -312,7 +312,7 @@ button.select-post {
 
 .deleted {
   .topic-body {
-    background-color: $danger-low-mid;
+    background-color: var(--danger-low-mid);
   }
 }
 
@@ -344,7 +344,7 @@ pre.copy-codeblocks code {
 }
 
 span.highlighted {
-  background-color: $highlight-low;
+  background-color: var(--highlight-low);
 }
 
 .topic-avatar {
@@ -390,11 +390,11 @@ span.highlighted {
 }
 
 .username.new-user a {
-  color: $primary-low-mid;
+  color: var(--primary-low-mid);
 }
 
 .user-title {
-  color: $primary-medium;
+  color: var(--primary-medium);
   overflow: hidden;
   margin-right: 50px;
 }
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 27c0e25d981..9787bdf5f37 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -1,5 +1,5 @@
 .post-info a {
-  color: $primary-medium;
+  color: var(--primary-medium);
 }
 
 .topic-meta-data-inside {
@@ -18,7 +18,7 @@
     font-size: $font-up-3;
     line-height: $line-height-medium;
     a {
-      color: $primary;
+      color: var(--primary);
       vertical-align: middle;
       word-wrap: break-word;
     }
@@ -30,7 +30,7 @@
 
 .topic-status-info {
   padding-left: 10px;
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low);
   padding-top: 10px;
   h3 {
     margin: 0;
@@ -52,9 +52,9 @@
 }
 
 #topic-progress-expanded {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
   padding: 5px;
-  background: $secondary;
+  background: var(--secondary);
 
   position: absolute;
   bottom: 34px;
@@ -97,9 +97,9 @@
   &.hidden {
     display: none;
   }
-  background-color: $secondary;
-  color: $tertiary;
-  border: 1px solid $tertiary-low;
+  background-color: var(--secondary);
+  color: var(--tertiary);
+  border: 1px solid var(--tertiary-low);
   width: 145px;
   height: 42px;
 
@@ -129,8 +129,8 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-right: 1px solid $tertiary-low;
-    background-color: $tertiary-low;
+    border-right: 1px solid var(--tertiary-low);
+    background-color: var(--tertiary-low);
     transition: width 0.75s;
   }
 }
diff --git a/app/assets/stylesheets/mobile/upload.scss b/app/assets/stylesheets/mobile/upload.scss
index 40d7faa9d91..6900f8d1a26 100644
--- a/app/assets/stylesheets/mobile/upload.scss
+++ b/app/assets/stylesheets/mobile/upload.scss
@@ -7,7 +7,7 @@
     line-height: $line-height-medium;
   }
   .description {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
   .radios {
     display: flex;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 28c43fa3d12..cf8aa99f005 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -36,7 +36,7 @@
 
   .user-content {
     box-sizing: border-box;
-    background-color: $secondary;
+    background-color: var(--secondary);
     table {
       width: 100%;
       margin-top: 12px;
@@ -45,7 +45,7 @@
 
   .about {
     margin-bottom: 0;
-    color: $secondary;
+    color: var(--secondary);
 
     .secondary {
       dl {
@@ -115,7 +115,7 @@
     .primary {
       display: flex;
       flex-wrap: wrap;
-      color: $primary;
+      color: var(--primary);
 
       .avatar {
         margin: 0 0 12px;
@@ -129,7 +129,7 @@
       }
 
       .bio {
-        color: $primary;
+        color: var(--primary);
         margin: 0 auto 8px;
         max-width: 700px;
         text-align: center;
diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss
index ea367f69cad..0ec9a3d0b13 100644
--- a/app/assets/stylesheets/vendor/pikaday.scss
+++ b/app/assets/stylesheets/vendor/pikaday.scss
@@ -10,24 +10,24 @@
 // Variables are namespaced with the pd (pikaday) prefix
 
 // Colours
-$pd-text-color: $primary !default;
-$pd-title-color: $primary !default;
-$pd-title-bg: $secondary !default;
-$pd-picker-bg: $secondary !default;
-$pd-picker-border: $primary-low !default;
-$pd-picker-border-bottom: $primary-low !default;
+$pd-text-color: var(--primary) !default;
+$pd-title-color: var(--primary) !default;
+$pd-title-bg: var(--secondary) !default;
+$pd-picker-bg: var(--secondary) !default;
+$pd-picker-border: var(--primary-low) !default;
+$pd-picker-border-bottom: var(--primary-low) !default;
 $pd-picker-shadow: rgba(0,0,0,.5) !default;
-$pd-th-color: $primary !default;
-$pd-day-color: $primary !default;
-$pd-day-bg: $secondary !default;
-$pd-day-hover-color: $primary !default;
-$pd-day-hover-bg: $tertiary-low !default;
-$pd-day-today-color: $tertiary !default;
-$pd-day-selected-color: $secondary !default;
-$pd-day-selected-bg: $tertiary !default;
-$pd-day-selected-shadow: $tertiary-low !default;
-$pd-day-disabled-color: $primary !default;
-$pd-week-color: $primary !default;
+$pd-th-color: var(--primary) !default;
+$pd-day-color: var(--primary) !default;
+$pd-day-bg: var(--secondary) !default;
+$pd-day-hover-color: var(--primary) !default;
+$pd-day-hover-bg: var(--tertiary-low) !default;
+$pd-day-today-color: var(--tertiary) !default;
+$pd-day-selected-color: var(--secondary) !default;
+$pd-day-selected-bg: var(--tertiary) !default;
+$pd-day-selected-shadow: var(--tertiary-low) !default;
+$pd-day-disabled-color: var(--primary) !default;
+$pd-week-color: var(--primary) !default;
 
 // Font
 $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
@@ -120,8 +120,8 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
     background-size: 75% 75%;
     opacity: .5;
     @if (lightness($secondary) < 50) { // invert the black png if the background is dark
-        filter: invert(1); 
-    } 
+        filter: invert(1);
+    }
 
     &:hover {
         opacity: 1;
@@ -230,15 +230,15 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 }
 
 .is-startrange .pika-button {
-    color: $secondary;
+    color: var(--secondary);
     background: #6CB31D;
     box-shadow: none;
     border-radius: 3px;
 }
 
 .is-endrange .pika-button {
-    color: $secondary;
-    background: $tertiary;
+    color: var(--secondary);
+    background: var(--tertiary);
     box-shadow: none;
     border-radius: 3px;
 }
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index f6bda658a38..15513b3fac8 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -450,6 +450,17 @@ module ApplicationHelper
     Stylesheet::Manager.stylesheet_link_tag(name, 'all', ids)
   end
 
+  def discourse_color_scheme_stylesheets
+    result = +""
+    result << Stylesheet::Manager.color_scheme_stylesheet_link_tag(scheme_id)
+
+    dark_scheme_id = SiteSetting.default_dark_mode_color_scheme_id
+    if dark_scheme_id != -1
+      result << Stylesheet::Manager.color_scheme_stylesheet_link_tag(dark_scheme_id, '(prefers-color-scheme: dark)')
+    end
+    result.html_safe
+  end
+
   def preloaded_json
     return '{}' if @preloaded.blank?
     @preloaded.transform_values { |value| escape_unicode(value) }.to_json
diff --git a/app/views/common/_discourse_stylesheet.html.erb b/app/views/common/_discourse_stylesheet.html.erb
index 2992572d0d1..a0fa07f1239 100644
--- a/app/views/common/_discourse_stylesheet.html.erb
+++ b/app/views/common/_discourse_stylesheet.html.erb
@@ -1,3 +1,5 @@
+<%= discourse_color_scheme_stylesheets() %>
+
 <%- if rtl? %>
   <%= discourse_stylesheet_link_tag(mobile_view? ? :mobile_rtl : :desktop_rtl) %>
 <%- else %>
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 20f1e1a81a4..a50d59f2c9f 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -245,6 +245,9 @@ basic:
   default_theme_id:
     default: -1
     hidden: true
+  default_dark_mode_color_scheme_id:
+    default: -1
+    hidden: true
   relative_date_duration:
     client: true
     default: 30
diff --git a/lib/stylesheet/compiler.rb b/lib/stylesheet/compiler.rb
index 08532a6c704..54675699bb6 100644
--- a/lib/stylesheet/compiler.rb
+++ b/lib/stylesheet/compiler.rb
@@ -37,6 +37,7 @@ module Stylesheet
                                  theme_id: options[:theme_id],
                                  theme: options[:theme],
                                  theme_field: options[:theme_field],
+                                 color_scheme_id: options[:color_scheme_id],
                                  load_paths: [Stylesheet::Common::ASSET_ROOT])
 
       result = engine.render
diff --git a/lib/stylesheet/importer.rb b/lib/stylesheet/importer.rb
index 2966b7843cc..7798f9cf90e 100644
--- a/lib/stylesheet/importer.rb
+++ b/lib/stylesheet/importer.rb
@@ -46,7 +46,16 @@ module Stylesheet
 
       register_import "theme_colors" do
         contents = +""
-        colors = (@theme_id && theme.color_scheme) ? theme.color_scheme.resolved_colors : ColorScheme.base_colors
+        if @color_scheme_id
+          colors = begin
+            ColorScheme.find(@color_scheme_id).resolved_colors
+          rescue
+            ColorScheme.base_colors
+          end
+        else
+          colors = (@theme_id && theme.color_scheme) ? theme.color_scheme.resolved_colors : ColorScheme.base_colors
+        end
+
         colors.each do |n, hex|
           contents << "$#{n}: ##{hex} !default;\n"
         end
@@ -110,6 +119,8 @@ module Stylesheet
       @theme = options[:theme]
       @theme_id = options[:theme_id]
       @theme_field = options[:theme_field]
+      @color_scheme_id = options[:color_scheme_id]
+
       if @theme && !@theme_id
         # make up an id so other stuff does not bail out
         @theme_id = @theme.id || -1
diff --git a/lib/stylesheet/manager.rb b/lib/stylesheet/manager.rb
index 5f5365512ad..fbdf89df8c6 100644
--- a/lib/stylesheet/manager.rb
+++ b/lib/stylesheet/manager.rb
@@ -11,6 +11,7 @@ class Stylesheet::Manager
   MANIFEST_DIR ||= "#{Rails.root}/tmp/cache/assets/#{Rails.env}"
   MANIFEST_FULL_PATH ||= "#{MANIFEST_DIR}/stylesheet-manifest"
   THEME_REGEX ||= /_theme$/
+  COLOR_SCHEME_STYLESHEET ||= "color_definitions"
 
   @lock = Mutex.new
 
@@ -92,6 +93,37 @@ class Stylesheet::Manager
     end
   end
 
+  def self.color_scheme_stylesheet_details(color_scheme_id = nil)
+    color_scheme = begin
+      ColorScheme.find(color_scheme_id)
+    rescue
+      Theme.find(SiteSetting.default_theme_id).color_scheme || ColorScheme.base
+    end
+
+    target = COLOR_SCHEME_STYLESHEET.to_sym
+    current_hostname = Discourse.current_hostname
+    color_scheme_name = Slug.for(color_scheme.name)
+    array_cache_key = "color_scheme_stylesheet_#{color_scheme_name}_#{current_hostname}"
+    stylesheets = cache[array_cache_key]
+    return stylesheets if stylesheets.present?
+
+    stylesheet = { color_scheme_name: color_scheme_name }
+
+    builder = self.new(target, nil, color_scheme)
+
+    builder.compile unless File.exists?(builder.stylesheet_fullpath)
+    href = builder.stylesheet_path(current_hostname)
+    stylesheet[:new_href] = href
+    cache[array_cache_key] = stylesheet.freeze
+    stylesheet
+  end
+
+  def self.color_scheme_stylesheet_link_tag(color_scheme_id = nil, media = 'all')
+    stylesheet = color_scheme_stylesheet_details(color_scheme_id)
+    href = stylesheet[:new_href]
+    %[<link href="#{href}" media="#{media}" rel="stylesheet"/>].html_safe
+  end
+
   def self.precompile_css
     themes = Theme.where('user_selectable OR id = ?', SiteSetting.default_theme_id).pluck(:id, :name)
     themes << nil
@@ -107,6 +139,18 @@ class Stylesheet::Manager
         cache[cache_key] = nil
       end
     end
+
+    cs_ids = Theme.where('user_selectable OR id = ?', SiteSetting.default_theme_id).pluck(:color_scheme_id)
+    ColorScheme.where(id: cs_ids).each do |cs|
+      target = COLOR_SCHEME_STYLESHEET
+      cache_key = "#{target}_#{cs.id}"
+      STDERR.puts "precompile target: #{target} #{cs.name}"
+
+      builder = self.new(target, nil, cs)
+      builder.compile(force: true)
+      cache[cache_key] = nil
+    end
+
     nil
   end
 
@@ -143,9 +187,10 @@ class Stylesheet::Manager
     "#{Rails.root}/#{CACHE_PATH}"
   end
 
-  def initialize(target = :desktop, theme_id)
+  def initialize(target = :desktop, theme_id = nil, color_scheme = nil)
     @target = target
     @theme_id = theme_id
+    @color_scheme = color_scheme
   end
 
   def compile(opts = {})
@@ -173,7 +218,8 @@ class Stylesheet::Manager
         @target,
          rtl: rtl,
          theme_id: theme&.id,
-         source_map_file: source_map_filename
+         source_map_file: source_map_filename,
+         color_scheme_id: @color_scheme&.id
       )
     rescue SassC::SyntaxError => e
       if Stylesheet::Importer::THEME_TARGETS.include?(@target.to_s)
@@ -247,6 +293,8 @@ class Stylesheet::Manager
   def qualified_target
     if is_theme?
       "#{@target}_#{theme.id}"
+    elsif @color_scheme
+      "#{@target}_#{Slug.for(@color_scheme.name)}"
     else
       scheme_string = theme && theme.color_scheme ? "_#{theme.color_scheme.id}" : ""
       "#{@target}#{scheme_string}"
diff --git a/spec/components/stylesheet/compiler_spec.rb b/spec/components/stylesheet/compiler_spec.rb
index 5191d72e967..1d93aec2415 100644
--- a/spec/components/stylesheet/compiler_spec.rb
+++ b/spec/components/stylesheet/compiler_spec.rb
@@ -64,4 +64,25 @@ describe Stylesheet::Compiler do
     expect(css).to include("url('/favicons/github.png')")
     expect(css).not_to include('image-url')
   end
+
+  context "with a color scheme" do
+    it "returns the default color definitions when no color scheme is specified" do
+      css, _map = Stylesheet::Compiler.compile_asset("color_definitions")
+      expect(css).to include("--header_background:")
+      expect(css).to include("--primary:")
+    end
+
+    it "returns color definitions for a custom color scheme" do
+      cs = Fabricate(:color_scheme, name: 'Stylish', color_scheme_colors: [
+        Fabricate(:color_scheme_color, name: 'header_primary', hex: '88af8e'),
+        Fabricate(:color_scheme_color, name: 'header_background', hex: 'f8745c')
+      ])
+
+      css, _map = Stylesheet::Compiler.compile_asset("color_definitions", color_scheme_id: cs.id)
+
+      expect(css).to include("--header_background: #f8745c")
+      expect(css).to include("--header_primary: #88af8e")
+      expect(css).to include("--header_background-rgb: 248,116,92")
+    end
+  end
 end
diff --git a/spec/components/stylesheet/manager_spec.rb b/spec/components/stylesheet/manager_spec.rb
index 9b782657e24..f99a403571c 100644
--- a/spec/components/stylesheet/manager_spec.rb
+++ b/spec/components/stylesheet/manager_spec.rb
@@ -165,6 +165,42 @@ describe Stylesheet::Manager do
     end
   end
 
+  describe 'color_scheme_stylesheets' do
+    it "returns something by default" do
+      link = Stylesheet::Manager.color_scheme_stylesheet_link_tag()
+      expect(link).not_to eq("")
+    end
+
+    it "does not crash on missing color scheme" do
+      link = Stylesheet::Manager.color_scheme_stylesheet_link_tag(125)
+      expect(link).not_to eq("")
+    end
+
+    it "uses the correct color scheme from the default site theme" do
+      cs = Fabricate(:color_scheme, name: 'Funky')
+      theme = Fabricate(:theme, color_scheme_id: cs.id)
+      SiteSetting.default_theme_id = theme.id
+
+      link = Stylesheet::Manager.color_scheme_stylesheet_link_tag()
+      expect(link).to include("/stylesheets/color_definitions_funky_")
+    end
+
+    it "uses the correct scheme when colors are passed" do
+      link = Stylesheet::Manager.color_scheme_stylesheet_link_tag(ColorScheme.first.id)
+      expect(link).to include("/stylesheets/color_definitions_#{Slug.for(ColorScheme.first.name)}_")
+    end
+
+    it "does not fail with a color scheme name containing spaces and special characters" do
+      cs = Fabricate(:color_scheme, name: 'Funky Bunch -_ @#$*(')
+      theme = Fabricate(:theme, color_scheme_id: cs.id)
+      SiteSetting.default_theme_id = theme.id
+
+      link = Stylesheet::Manager.color_scheme_stylesheet_link_tag()
+      expect(link).to include("/stylesheets/color_definitions_funky-bunch_")
+    end
+
+  end
+
   # this test takes too long, we don't run it by default
   describe ".precompile_css", if: ENV["RUN_LONG_TESTS"] == "1" do
     before do
@@ -189,6 +225,7 @@ describe Stylesheet::Manager do
       scheme2 = ColorScheme.create!(name: "scheme2")
       core_targets = [:desktop, :mobile, :desktop_rtl, :mobile_rtl, :admin]
       theme_targets = [:desktop_theme, :mobile_theme]
+      color_scheme_targets = ["color_definitions_scheme1", "color_definitions_scheme2"]
 
       Theme.update_all(user_selectable: false)
       user_theme = Fabricate(:theme, user_selectable: true, color_scheme: scheme1)
@@ -200,7 +237,7 @@ describe Stylesheet::Manager do
       Stylesheet::Manager.precompile_css
       results = StylesheetCache.pluck(:target)
 
-      expect(results.size).to eq(14) # 2 themes x 7 targets
+      expect(results.size).to eq(16) # (2 themes x 7 targets) + (2 themes x 1 color scheme)
       core_targets.each do |tar|
         expect(results.count { |target| target =~ /^#{tar}_(#{scheme1.id}|#{scheme2.id})$/ }).to eq(2)
       end
@@ -214,7 +251,8 @@ describe Stylesheet::Manager do
 
       Stylesheet::Manager.precompile_css
       results = StylesheetCache.pluck(:target)
-      expect(results.size).to eq(19) # (2 themes x 7 targets) + (1 no/default/core theme x 5 core targets)
+
+      expect(results.size).to eq(21) # (2 themes x 7 targets) + (1 no/default/core theme x 5 core targets) + (2 themes x 1 color scheme)
 
       core_targets.each do |tar|
         expect(results.count { |target| target =~ /^(#{tar}_(#{scheme1.id}|#{scheme2.id})|#{tar})$/ }).to eq(3)
@@ -223,6 +261,9 @@ describe Stylesheet::Manager do
       theme_targets.each do |tar|
         expect(results.count { |target| target =~ /^#{tar}_(#{user_theme.id}|#{default_theme.id})$/ }).to eq(2)
       end
+
+      expect(results).to include(color_scheme_targets[0])
+      expect(results).to include(color_scheme_targets[1])
     end
   end
 end
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
index 2ccca114b3f..7879aa9c569 100644
--- a/spec/helpers/application_helper_spec.rb
+++ b/spec/helpers/application_helper_spec.rb
@@ -347,4 +347,19 @@ describe ApplicationHelper do
       end
     end
   end
+
+  describe 'discourse_color_scheme_stylesheets' do
+    it 'returns a stylesheet link tag by default' do
+      cs_stylesheets = helper.discourse_color_scheme_stylesheets
+      expect(cs_stylesheets).to include("stylesheets/color_definitions")
+    end
+
+    it 'returns two color scheme link tags when dark mode is enabled' do
+      SiteSetting.default_dark_mode_color_scheme_id = ColorScheme.where(name: "Dark").pluck(:id).first
+      cs_stylesheets = helper.discourse_color_scheme_stylesheets
+
+      expect(cs_stylesheets).to include("(prefers-color-scheme: dark)")
+      expect(cs_stylesheets.scan("stylesheets/color_definitions").size).to eq(2)
+    end
+  end
 end