diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index a06c6670a..64b4e18a5 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -15,8 +15,6 @@ require('jquery-hotkeys');
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
 
-importAll(require.context('../src/styles/base', true, /\.scss$/));
-
 require("jquery-ui/ui/widgets/autocomplete");
 require("jquery-ui/ui/widgets/button");
 require("jquery-ui/ui/widgets/dialog");
@@ -31,8 +29,7 @@ require("jquery-ui/themes/base/resizable.css");
 require("jquery-ui/themes/base/theme.css");
 
 importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/));
-importAll(require.context('../src/styles/common', true, /\.scss(?:\.erb)?$/));
-importAll(require.context('../src/styles/specific', true, /\.scss(?:\.erb)?$/));
+importAll(require.context('../src/styles', true, /\.s?css(?:\.erb)?$/));
 
 export { default as Autocomplete } from '../src/javascripts/autocomplete.js.erb';
 export { default as Blacklist } from '../src/javascripts/blacklists.js';
diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss
index f97c666c5..cb1e5ca73 100644
--- a/app/javascript/src/styles/base/000_vars.scss
+++ b/app/javascript/src/styles/base/000_vars.scss
@@ -1,7 +1,3 @@
-$menu_color: #F5F5FF;
-$link_color: hsl(213, 100%, 50%);
-$link_hover_color: lighten($link_color, 25%);
-$highlight_color: lighten($link_color, 45%);
 $h1_size: 2em;
 $h2_size: 1.5em;
 $h3_size: 1.16667em;
@@ -17,26 +13,14 @@ $h2_padding: 0.8em 0 0.25em 0;
 $h3_padding: 0.8em 0 0.25em 0;
 $h4_padding: 0.8em 0 0.25em 0;
 $base_font_family: Verdana, Helvetica, sans-serif;
-$preview_has_children_color: #0F0;
-$preview_has_parent_color: #CC0;
-$preview_deleted_color: #000;
-$preview_pending_color: #00F;
-$preview_flagged_color: #F00;
-$preview_sample_warning_color:  hsl(0,  100%, 90%); // light red
-$preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
-
-$note_highlight_color: $preview_pending_color;
-
-$error_color: hsl(0, 100%, 95%); // light red
-$success_color: hsl(120, 100%, 95%); // light green
 
 @mixin animated-icon {
   content: "►";
   position: absolute;
   width: 20px;
   height: 20px;
-  color: white; 
-  background-color: rgba(0,0,0,0.5);
+  color: var(--preview-icon-color);
+  background: var(--preview-icon-background);
   margin: 2px;
   text-align: center;
 }
@@ -46,8 +30,8 @@ $success_color: hsl(120, 100%, 95%); // light green
   position: absolute;
   width: 20px;
   height: 20px;
-  color: white; 
-  background-color: rgba(0,0,0,0.5);
+  color: var(--preview-icon-color);
+  background: var(--preview-icon-background);
   margin: 2px;
   text-align: center;
 }
diff --git a/app/javascript/src/styles/base/010_reset.scss b/app/javascript/src/styles/base/010_reset.scss
index ae050714d..67f172277 100644
--- a/app/javascript/src/styles/base/010_reset.scss
+++ b/app/javascript/src/styles/base/010_reset.scss
@@ -1,7 +1,5 @@
 // Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass
 
-@import "../base/000_vars.scss";
-
 // Reset.sass
 // Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an
 // adapted version here	that cuts out some of the reset HTML elements we will
diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index d2e8c5838..570bd372f 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -1,7 +1,7 @@
 @import "../base/000_vars.scss";
 
 body {
-  background-color: #FFF;
+  background-color: var(--body-background-color);
   font-family: $base_font_family;
   font-size: 87.5%;
   line-height: 1.25em;
@@ -11,13 +11,6 @@ abbr[title=required] {
   display: none;
 }
 
-blockquote {
-  margin: 0 0 1em 0;
-  padding: 1em 1em 0.2em;
-  border: 1px solid #666;
-  background: #EEE;
-}
-
 code {
   font-family: monospace;
   font-size: 1.2em;
@@ -88,17 +81,17 @@ table tfoot {
 }
 
 .hint {
-  color: #666;
+  color: var(--hint-color);
   font-style: italic;
 }
 
 .tn {
   font-size: 0.8em;
-  color: gray;
+  color: var(--translation-note-color);
 }
 
 p.info {
-  color: #AAA;
+  color: var(--info-color);
   font-style: italic;
   font-size: 80%;
 }
diff --git a/app/javascript/src/styles/base/030_links.scss b/app/javascript/src/styles/base/030_links.scss
index ed4cdf9ca..6cf867630 100644
--- a/app/javascript/src/styles/base/030_links.scss
+++ b/app/javascript/src/styles/base/030_links.scss
@@ -1,22 +1,20 @@
-@import "../base/000_vars.scss";
-
 a:link {
-  color: $link_color;
+  color: var(--link-color);
   text-decoration: none;
 }
 
 a:visited {
-  color: $link_color;
+  color: var(--link-color);
   text-decoration: none;
 }
 
 a:hover {
-  color: $link_hover_color;
+  color: var(--link-hover-color);
   text-decoration: none;
 }
 
 a:active {
-  color: $link_color;
+  color: var(--link-color);
   text-decoration: none;
 }
 
diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
new file mode 100644
index 000000000..0910dc464
--- /dev/null
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -0,0 +1,261 @@
+:root {
+  --body-background-color: white;
+
+  --hint-color: #666;
+  --translation-note-color: gray;
+
+  --info-color: #AAA;
+
+  --link-color: hsl(213, 100%, 50%);
+  --link-hover-color: hsl(213, 100%, 75%);
+  --note-highlight-color: var(--preview-pending-color);
+
+  --subnav-menu-background-color: #F5F5FF;
+
+  --responsive-menu-background-color: var(--link-hover-color);
+  --responsive-sidebar-submit-button-background-color: #EEE;
+  --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197);
+  --responsive-form-input-border: 1px solid #c5c5c5;
+
+  --user-upgrade-gold-background-color: #FFF380;
+  --user-upgrade-platinum-background-color: #EEE;
+  --user-upgrade-table-row-hover-background-color: #FEF;
+  --user-upgrade-cost-footnote-color: gray;
+
+  --table-header-border: 2px solid #666;
+  --table-header-text-color: #333;
+  --table-row-border: 1px solid #CCC;
+  --table-row-hover-background: hsl(213, 100%, 95%);
+  --table-even-row-background: #FAFAFA;
+
+  --preview-pending-color: #00F;
+  --preview-flagged-color: #F00;
+  --preview-deleted-color: black;
+  --preview-has-children-color: #0F0;
+  --preview-has-parent-color: #CC0;
+
+  --preview-icon-color: white;
+  --preview-icon-background: rgba(0, 0, 0, 0.5);
+
+  --modqueue-sample-warning-color: hsl(0,  100%, 90%); // light red
+  --modqueue-quality-warning-color: hsl(50, 100%, 90%); // light yellow
+  --modqueue-postive-score-background-color: rgb(230, 255, 230);
+  --modqueue-negative-score-background-color: rgb(255, 230, 230);
+
+  --uploads-dropzone-border: 4xp dashed #DDD;
+  --uploads-dropzone-placeholder-color: #333;
+  --uploads-dropzone-error-border-color: hsl(0, 43%, 61%);
+  --uploads-dropzone-error-background-color: hsl(0, 43%, 91%);
+  --uploads-dropzone-success-border-color: hsl(103, 44%, 59%);
+  --uploads-dropzone-success-background-color: hsl(103, 44%, 89%);
+  --uploads-dropzone-progress-border: 1px solid #CCC;
+  --uploads-dropzone-progress-background-color: 1px solid #CCC;
+
+  --forum-new-topic-color: red;
+  --forum-locked-topic-color: gray;
+  --forum-level-restricted-topic-color: #F66;
+  --forum-deleted-topic-color: gray;
+  --forum-info-color: #AAA;
+  --forum-vote-up-color: green;
+  --forum-vote-meh-color: goldrenrod;
+  --forum-vote-down-color: red;
+  --forum-post-box-shadow: 1px 1px 2px #AAA;
+  --forum-post-border: 1px solid #AAA;
+  --forum-post-highlight-background-color: #FFC;
+
+  --comment-sticky-background-color: var(--subnav-menu-background-color);
+
+  --post-tooltip-border-color: #767676;
+  --post-tooltip-header-background-color: var(--subnav-menu-background-color);
+  --post-tooltip-info-color: #555;
+  --post-tooltip-inactive-color: #777;
+  --post-tooltip-scrollbar-background: #999999;
+  --post-tooltip-scrollbar-border: 0px none white;
+  --post-tooltip-scrollbar-thumb-color: #AAAAAA;
+  --post-tooltip-scrollbar-track-background: #EEEEEE;
+  --post-tooltip-scrollbar-track-border: 0px none white;
+
+  --iqdb-preview-border: 1px solid lightgrey;
+
+  --preview-current-post-background: rgba(0, 0, 0, 0.1);
+
+  --error-color: hsl(0, 100%, 95%); // light red
+  --error-hover-color: hsl(0, 100%, 90%);
+  --success-color: hsl(120, 100%, 95%); // light green
+  --success-hover-color: hsl(120, 100%, 90%);
+
+  --autocomplete-background-color: #F0F0F0;
+  --autocomplete-border-color: #C5C5C5;
+
+  --diff-list-added-color: green;
+  --diff-list-removed-color: red;
+  --diff-list-obsolete-added-color: darkGreen;
+  --diff-list-obsolete-removed-color: darkRed;
+
+  --wiki-page-versions-diff-del-background: #FCC;
+  --wiki-page-versions-diff-ins-background: #CFC;
+  --wiki-page-versions-version-color: #AAA;
+
+  --post-parent-notice-border-color: #C0FCC0;
+  --post-parent-notice-background: #D8FCD9;
+  --post-child-notice-border-color: #FCFCC0;
+  --post-child-notice-background: #FBFCD8;
+  --post-pending-notice-border-color: #C0C0FC;
+  --post-pending-notice-background: #D8D8FC;
+  --post-flagged-notice-border-color: #FCC0C0;
+  --post-flagged-notice-background: #FCD9D8;
+  --post-deleted-notice-border-color: #FF8C8C;
+  --post-deleted-notice-background: #FFA7A5;
+  --post-appealed-notice-border-color: #C0ECFC;
+  --post-appealed-notice-background: #D8F2FC;
+  --post-resized-notice-border-color: #E4C0FC;
+  --post-resized-notice-background: #EED8FC;
+
+  --post-nav-notice-background: #EEE;
+  --post-nav-notice-border: 1px solid #AAA;
+  --post-seq-nav-hover-background: rgb(250, 250, 250);
+
+  --post-artist-commentary-container-background: #F8F8F8;
+  --post-artist-commentary-container-border: 1px solid #CCC;
+  --post-artist-commentary-disabled-color: gray;
+
+  --note-body-background: #FFE;
+  --note-body-border: 1px solid black;
+  --note-box-border: 1px solid white;
+  --note-box-background: transparent;
+  --note-box-inner-border: 1px solid black;
+  --unsaved-note-box-inner-border: 1px solid red;
+  --note-preview-border: 1px solid red;
+  --note-preview-background: white;
+  --note-highlight-color: blue;
+  --note-tn-color: gray;
+
+  --post-events-resolved-background: #DDD;
+  --post-events-unresolved-background: white;
+
+  --user-name-change-requests-positive-background: #DDFFDD;
+  --user-name-change-requests-negative-background: #FFDDDD;
+
+  --series-pool-color: #A0A;
+  --series-pool-hover-color: #B6B;
+
+  --collection-pool-color: var(--general-tag-color);
+  --collection-pool-hover-color: var(--general-tag-hover-color);
+
+  --profile-page-header-color: #333;
+  --settings-page-active-tab-color: black;
+
+  --fetch-source-data-border-color: #666;
+
+  --post-mode-menu-view-background: white;
+  --post-mode-menu-edit-background: #5C5;
+  --post-mode-menu-tag-script-background: #D6D;
+  --post-mode-menu-add-fav-background: #FFA;
+  --post-mode-menu-remove-fav-background: #FFA;
+  --post-mode-menu-vote-up-background: #AFA;
+  --post-mode-menu-vote-down-background: #FAA;
+  --post-mode-menu-lock-rating-background: #AA3;
+  --post-mode-menu-lock-note-background: #3AA;
+  --post-mode-menu-approve-background: #48C;
+  --post-mode-menu-translation-background: #5CD;
+  --post-mode-menu-ban-background: #F33;
+
+  --tag-count-color: #CCC;
+  --low-post-count-color: red;
+
+  --tag-count-indicator-frown-color: red;
+  --tag-count-indicator-meh-color: darkkhaki;
+  --tag-count-indicator-smile-color: green;
+
+  --remove-favorite-button: deeppink;
+
+  --ugoira-seek-slider-background: #EEE;
+  --ugoira-seek-slider-progressbar-background: white;
+
+  // used for "(deleted)" messages
+  --inactive-color: #AAA;
+
+  // used for "page N" links in /forum_topics and /pools
+  --last-page-link-color: #666;
+
+  --keyboard-shortcut-color: white;
+  --keyboard-shortcut-background-color: #333;
+
+  // XXX unused?
+  --error-color: red;
+  --error-message-color: #A00;
+
+  --new-artist-color: #A00;
+
+  --bulk-update-request-approved-color: green;
+  --bulk-update-request-failed-color: red;
+
+  --dmail-preview-border-color: #CCC;
+
+  --notice-background: #FFFBBF;
+  --notice-border: 1px solid #CCC999;
+
+  --sign-in-link-color: #E00;
+
+  --search-box-button-color: white;
+  --sidebar-submit-button-color: #EEE;
+  --footer-border: 1px solid #EEE;
+
+  --jquery-ui-button-border: 1px solid darkgrey;
+  --jquery-ui-button-background: #f6f6f6;
+  --jquery-ui-button-hover-background: #fefefe;
+  --jquery-ui-button-hover-box-shadow: grey;
+
+  --jquery-ui-state-error-background: #FDDFDE;
+  --jquery-ui-state-error-border: 1px solid #FBC7C6;
+
+  --jquery-ui-state-highlight-background: #FDF5D9;
+  --jquery-ui-state-highlight-border: 1px solid #FCEEC1;
+  --jquery-ui-state-highlight-color: #363636;
+
+  --jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
+
+  --dtext-blockquote-border: 1px solid #666;
+  --dtext-blockquote-background: #EEE;
+  --dtext-code-background: #EEE;
+  --dtext-expand-border: 1px inset #666;
+  --dtext-spoiler-color: black;
+  --dtext-spoiler-background-color: black;
+  --dtext-spoiler-hover-color: white;
+
+  --wiki-page-other-name-background-color: #EEE;
+
+  --user-feedback-positive-background-color: #DDFFDD !important;
+  --user-feedback-negative-background-color: #FFDDDD !important;
+  --user-feedback-neutral-background-color: #FFFFFF !important;
+
+  --paginator-ellipsis-color: grey;
+  --paginator-arrow-background-color: white;
+  --paginator-arrow-color: var(--link-color);
+
+  --general-tag-color: var(--link-color);
+  --general-tag-hover-color: var(--link-hover-color);
+  --character-tag-color: #0A0;
+  --character-tag-hover-color: #6B6;
+  --copyright-tag-color: #A0A;
+  --copyright-tag-hover-color: #B6B;
+  --artist-tag-color: #A00;
+  --artist-tag-hover-color: #B66;
+  --meta-tag-color: #F80;
+  --meta-tag-hover-color: #FA6;
+  --selected-tag-color: white;
+
+  --user-admin-color: red;
+  --user-moderator-color: orange;
+  --user-builder-color: #6633FF;
+  --user-platinum-color: gray;
+  --user-gold-color: blue;
+  --user-member-color: auto;
+
+  --news-updates-background: #EEE;
+  --news-updates-border: 2px solid #666;
+
+  --related-tags-container-background: #EEE;
+  --selected-related-tag-background-color: var(--link-color);
+  --selected-related-tag-color: white;
+}
diff --git a/app/javascript/src/styles/common/autocomplete.scss b/app/javascript/src/styles/common/autocomplete.scss
index a273a3a0c..7d0b25a8d 100644
--- a/app/javascript/src/styles/common/autocomplete.scss
+++ b/app/javascript/src/styles/common/autocomplete.scss
@@ -1,14 +1,12 @@
-@import "../base/000_vars.scss";
-
 .ui-autocomplete {
   font-size: 0.9em;
 
   .ui-state-active {
     border: none;
     margin: 0 -1px;
-    background-color: #F0F0F0;
-    border-left: 1px solid #C5C5C5;
-    border-right: 1px solid #C5C5C5;
+    background-color: var(--autocomplete-background-color);
+    border-left: 1px solid var(--autocomplete-border-color);
+    border-right: 1px solid var(--autocomplete-border-color);
   }
 
   .ui-menu-item-wrapper {
diff --git a/app/javascript/src/styles/common/blacklists.scss b/app/javascript/src/styles/common/blacklists.scss
index 9f667159d..8096c3eb1 100644
--- a/app/javascript/src/styles/common/blacklists.scss
+++ b/app/javascript/src/styles/common/blacklists.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 #blacklist-box {
   display: none;
   margin-bottom: 1em;
diff --git a/app/javascript/src/styles/common/diffs.scss b/app/javascript/src/styles/common/diffs.scss
index 48a3be944..1cfdad042 100644
--- a/app/javascript/src/styles/common/diffs.scss
+++ b/app/javascript/src/styles/common/diffs.scss
@@ -1,43 +1,43 @@
 .diff-list {
   .added, .added a {
-    color: green;
+    color: var(--diff-list-added-color);
     text-decoration: none;
     margin-right: 0.5em;
   }
 
   .added.obsolete, .added.obsolete a {
-    color: darkGreen;
+    color: var(--diff-list-obsolete-added-color);
   }
 
   .removed, .removed a {
-    color: red;
+    color: var(--dif-list-removed-color);
     text-decoration: line-through;
     margin-right: 0.5em;
   }
 
   .removed.obsolete, .removed.obsolete a {
-    color: darkRed;
+    color: var(--diff-list-obsolete-removed-color);
   }
 }
 
 .diff-list {
   ins, ins a {
-    color: green;
+    color: var(--diff-list-added-color);
     text-decoration: none;
     margin-right: 0.5em;
   }
 
   del, del a {
-    color: red;
+    color: var(--diff-list-removed-color);
     text-decoration: line-through;
     margin-right: 0.5em;
   }
 
   ins.obsolete, ins.obsolete a {
-    color: darkGreen;
+    color: var(--diff-list-obsolete-added-color);
   }
 
   del.obsolete, del.obsolete a {
-    color: darkRed;
+    color: var(--diff-list-obsolete-removed-color);
   }
 }
diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index d7c9ad241..162f14ce8 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -55,18 +55,25 @@ div.prose {
     font-size: 1.2em;
     margin: 0.5em 0;
     padding: 0.5em 1em;
-    background: #EEE;
+    background: var(--dtext-code-background-color);
     white-space: pre-wrap;
   }
 
+  blockquote {
+    margin-bottom: 1em;
+    padding: 1em 1em 0.2em;
+    border: var(--dtext-blockquote-border);
+    background: var(--dtext-blockquote-background);
+  }
+
   code {
     font-family: monospace;
-    background: #EEE;
+    background: var(--dtext-code-background);
   }
 
   div.expandable {
     margin-bottom: 1em;
-    border: 1px inset #666;
+    border: var(--dtext-expand-border);
   }
 
   div.expandable-header {
@@ -81,7 +88,7 @@ div.prose {
   div.expandable-content {
     display: none;
     padding: 0.4em;
-    border-top: 1px solid #666;
+    border-top: 1px solid var(--dtext-expand-border-color);
 
     > :last-child {
       margin-bottom: 0;
diff --git a/app/javascript/src/styles/common/inline.scss b/app/javascript/src/styles/common/inline.scss
index 2e762d5b0..e265b99a8 100644
--- a/app/javascript/src/styles/common/inline.scss
+++ b/app/javascript/src/styles/common/inline.scss
@@ -1,26 +1,24 @@
-@import "../base/000_vars.scss";
-
 span.error {
   display: block;
   font-weight: bold;
-  color: red;
+  color: var(--error-color);
 }
 
 span.link {
-  color: $link_color;
+  color: var(--link-color);
   cursor: pointer;
 }
 
 span.count {
-  color: #CCC;
+  color: var(--tag-count-color);
   margin-left: 0.5em;
 }
 
 kbd.key {
-  background: #333;
-  border: 1px solid #333;
+  background: var(--keyboard-shortcut-background-color);
+  border: 1px solid var(--keyboard-shortcut-background-color);
   padding: 1px 6px;
-  color: white;
+  color: var(--keyboard-shortcut-color);
 /*  width: 1em;*/
   text-align: center;
   display: inline-block;
@@ -28,9 +26,9 @@ kbd.key {
 }
 
 span.inactive {
-  color: #AAA;
+  color: var(--inactive-color);
 }
 
 td a.last-page {
-  color: #666;
+  color: var(--last-page-link-color);
 }
diff --git a/app/javascript/src/styles/common/jquery_ui_custom.scss b/app/javascript/src/styles/common/jquery_ui_custom.scss
index e1da6ddd9..2cf603b0b 100644
--- a/app/javascript/src/styles/common/jquery_ui_custom.scss
+++ b/app/javascript/src/styles/common/jquery_ui_custom.scss
@@ -9,11 +9,11 @@
 }
 
 .ui-widget-content a {
-  color: $link_color;
+  color: var(--link-color);
 }
 
 .ui-widget-content a:hover {
-  color: $link_hover_color;
+  color: var(--link-hover-color);
 }
 
 div.ui-dialog {
@@ -21,7 +21,7 @@ div.ui-dialog {
   overflow: visible;
   font-size: 1em;
   z-index: 999 !important;
-  box-shadow: 2px 2px 1px grey;
+  box-shadow: var(--jquery-ui-dialog-box-shadow);
   padding: 0;
 
   .ui-dialog-titlebar {
@@ -36,33 +36,29 @@ div.ui-dialog {
 }
 
 .ui-state-highlight {
-  border: 1px solid #FCEEC1;
-  background: #FDF5D9;
-  color: #363636;
+  border: var(--jquery-ui-state-highlight-border);
+  background: var(--jquery-ui-state-highlight-background);
+  color: var(--jquery-ui-state-highlight-color);
 
   a, a:active, a:visited {
-    color: $link_color;
+    color: var(--link-color);
   }
 
   a:hover {
-    color: $link_hover_color;
+    color: var(--link-hover-color);
   }
 }
 
 .ui-state-error {
-  border: 1px solid #FBC7C6;
-  background: #FDDFDE;
+  border: var(--jquery-ui-state-error-border);
+  background: var(--jquery-ui-state-error-background);
 }
 
 .ui-button {
   margin: 0;
   padding: 0.25em 1em;
-  background-color: #f6f6f6;
-  border-top: 1px solid silver;
-  border-left: 1px solid silver;
-  border-bottom: 1px solid darkgrey;
-  border-right: 1px solid darkgrey;
-  background: linear-gradient(#f6f6f6, #e5e5e5);
+  border: var(--jquery-ui-button-border);
+  background: var(--jquery-ui-button-background);
 
   &.sub {
     font-size: 90%;
@@ -75,8 +71,8 @@ div.ui-dialog {
 }
 
 .ui-button:hover {
-  box-shadow: 1px 1px grey;
-  background: linear-gradient(#fefefe, #f0f0f0);
+  box-shadow: var(--jquery-ui-button-hover-box-shadow);
+  background: var(--jquery-ui-button-hover-background);
 }
 
 .ui-front {
diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index 8bbbf0701..5f685fc3a 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -6,12 +6,12 @@ div#search {
 
 div#search-box button {
   -webkit-appearance: button;
-  border: 1px solid $link_color;
-  background-color: $link_color;
-  color: #FFF;
+  border: 1px solid var(--link-color);
+  background-color: var(--link-color);
+  color: var(--search-box-button-color);
   &:hover, &:focus {
-    border: 1px solid $link_hover_color;
-    background-color: $link_hover_color;
+    border: 1px solid var(--link-hover-color);
+    background-color: var(--link-hover-color);
   }
 }
 
@@ -55,7 +55,7 @@ div#page {
 
     button[type=submit] {
       padding: 2px 6px;
-      background: #EEE;
+      background: var(--sidebar-submit-button-color);
     }
 
     #search-box button[type=submit] {
@@ -84,7 +84,7 @@ footer#page-footer {
   margin-top: 1em;
   text-align: center;
   padding: 1em 0 1em;
-  border-top: 1px solid #EEE;
+  border-top: var(--footer-border);
 }
 
 div.clearfix {
diff --git a/app/javascript/src/styles/common/news.scss b/app/javascript/src/styles/common/news.scss
index 1e6e52e8e..71c5958a4 100644
--- a/app/javascript/src/styles/common/news.scss
+++ b/app/javascript/src/styles/common/news.scss
@@ -1,7 +1,7 @@
 div#news-updates {
   padding: 5px;
-  background: #EEE;
-  border-bottom: 2px solid #666;
+  background: var(--news-updates-background);
+  border-bottom: var(--news-updates-border);
   overflow: hidden;
   font-size: 0.8em;
 
diff --git a/app/javascript/src/styles/common/notices.scss b/app/javascript/src/styles/common/notices.scss
index f92ebacc1..dcf2974d1 100644
--- a/app/javascript/src/styles/common/notices.scss
+++ b/app/javascript/src/styles/common/notices.scss
@@ -4,7 +4,7 @@ div.error-messages {
 
   h1 {
     font-size: 1em;
-    color: #A00;
+    color: var(--error-message-color);
   }
 }
 
@@ -17,8 +17,8 @@ div#notice {
   z-index: 100;
 
   &:not(.ui-state-error) {
-    background-color: #FFFBBF;
-    border: 1px solid #CCC999;
+    background: var(--notice-background);
+    border: var(--notice-border);
   }
 }
 
diff --git a/app/javascript/src/styles/common/page_header.scss b/app/javascript/src/styles/common/page_header.scss
index e17e71ae1..8784d6e7d 100644
--- a/app/javascript/src/styles/common/page_header.scss
+++ b/app/javascript/src/styles/common/page_header.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 #maintoggle {
   display: none;
 }
@@ -12,7 +10,7 @@ header#top {
 
   menu {
     margin-top: -2px;
-    background: $menu_color;
+    background: var(--subnav-menu-background-color);
     padding: 6px 20px;
 
     form {
@@ -39,13 +37,13 @@ header#top {
     background: none;
 
     li.current a {
-      background: $menu_color;
+      background: var(--subnav-menu-background-color);
       font-weight: bold;
     }
 
     li#nav-sign-in a {
       font-weight: bold;
-      color: #e00;
+      color: var(--sign-in-link-color);
     }
 
     li.forum-updated a {
diff --git a/app/javascript/src/styles/common/paginator.scss b/app/javascript/src/styles/common/paginator.scss
index bb492e8c9..9858c356a 100644
--- a/app/javascript/src/styles/common/paginator.scss
+++ b/app/javascript/src/styles/common/paginator.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div.paginator {
   display: block;
   padding: 2em 0 1em 0;
@@ -13,17 +11,17 @@ div.paginator {
     }
 
     &.more {
-      color: grey;
+      color: var(--paginator-ellipsis-color);
     }
 
     a.arrow:hover {
-      background: white;
-      color: $link_color;
+      background: var(--paginator-arrow-background-color);
+      color: var(--paginator-arrow-color);
     }
 
     a:hover {
-      background: $link_color;
-      color: white;
+      background: var(--paginator-arrow-color);
+      color: var(--paginator-arrow-background-color);
     }
 
     span {
diff --git a/app/javascript/src/styles/common/spoiler.scss b/app/javascript/src/styles/common/spoiler.scss
index 0b8bd4892..d4b3b6bf0 100644
--- a/app/javascript/src/styles/common/spoiler.scss
+++ b/app/javascript/src/styles/common/spoiler.scss
@@ -1,16 +1,8 @@
-.spoiler {
-  color: black;
-  background: black;
+.spoiler, .spoiler a {
+  color: var(--dtext-spoiler-color);
+  background: var(--dtext-spoiler-background-color);
 }
 
-.spoiler a {
-  color: black;
-}
-
-.spoiler:hover {
-  color: white;
-}
-
-.spoiler:hover a{
-  color: white;
+.spoiler:hover, .spoiler:hover a {
+  color: var(--dtext-spoiler-hover-color);
 }
diff --git a/app/javascript/src/styles/common/tables.scss b/app/javascript/src/styles/common/tables.scss
index 9ec70cb76..80f762617 100644
--- a/app/javascript/src/styles/common/tables.scss
+++ b/app/javascript/src/styles/common/tables.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 table.striped {
   td, th {
     padding: 4px 6px;
@@ -7,10 +5,10 @@ table.striped {
 
   tbody {
     tr {
-      border-bottom: 1px solid #CCC;
+      border-bottom: var(--table-row-border);
 
       &:hover {
-        background-color: $highlight_color;
+        background: var(--table-row-hover-background);
       }
     }
   }
@@ -21,18 +19,18 @@ table.striped {
 
   thead {
     tr {
-      border-bottom: 2px solid #666;
+      border-bottom: var(--table-header-border);
     }
 
     th {
       font-weight: bold;
       text-align: left;
-      color: #333;
+      color: var(--table-header-text-color);
     }
   }
 
   tr:nth-child(even) {
-    background-color: #FAFAFA;
+    background: var(--table-even-row-background);
   }
 }
 
diff --git a/app/javascript/src/styles/common/tags.scss.erb b/app/javascript/src/styles/common/tags.scss.erb
index 78bd70d0e..f87f4f88b 100644
--- a/app/javascript/src/styles/common/tags.scss.erb
+++ b/app/javascript/src/styles/common/tags.scss.erb
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 <% TagCategory.css_mapping.each do |category,cssmap| %>
   .category-<%= category %> a,
   a.tag-type-<%= category %>,
@@ -16,7 +14,7 @@
     }
 
     &.selected {
-      color: white;
+      color: var(--selected-tag-color);
     }
   }
 
@@ -32,7 +30,7 @@
     }
 
     &.selected {
-      color: white;
+      color: var(--selected-tag-color);
     }
   }
 <% end %>
diff --git a/app/javascript/src/styles/common/user_styles.scss b/app/javascript/src/styles/common/user_styles.scss
index 0ee75aae1..8c92cba98 100644
--- a/app/javascript/src/styles/common/user_styles.scss
+++ b/app/javascript/src/styles/common/user_styles.scss
@@ -1,27 +1,23 @@
 a.user-admin.with-style {
-  color: red;
+  color: var(--user-admin-color);
 }
 
 a.user-moderator.with-style {
-  color: orange;
-}
-
-a.user-contributor.with-style {
-  color: purple;
+  color: var(--user-moderator-color);
 }
 
 a.user-builder.with-style {
-  color: #6633FF;
+  color: var(--user-builder-color);
 }
 
 a.user-platinum.with-style {
-  color: gray;
+  color: var(--user-platinum-color);
 }
 
 a.user-gold.with-style {
-  color: #0000FF;
+  color: var(--user-gold-color);
 }
 
 a.user-member.with-style {
-  color: auto;
+  color: var(--user-member-color);
 }
diff --git a/app/javascript/src/styles/specific/artists.scss b/app/javascript/src/styles/specific/artists.scss
index 563cbef61..1eb024ad2 100644
--- a/app/javascript/src/styles/specific/artists.scss
+++ b/app/javascript/src/styles/specific/artists.scss
@@ -3,7 +3,7 @@
 div#c-artists, div#excerpt {
   span.new-artist {
     font-weight: bold;
-    color: #A00;
+    color: var(--new-artist-color);
   }
 
   ul ul {
diff --git a/app/javascript/src/styles/specific/bans.scss b/app/javascript/src/styles/specific/bans.scss
index 0672b5877..57ffd4e0c 100644
--- a/app/javascript/src/styles/specific/bans.scss
+++ b/app/javascript/src/styles/specific/bans.scss
@@ -1,19 +1,17 @@
-@import "../base/000_vars.scss";
-
 #c-bans #a-index {
   tr[data-expired="true"] {
-    background-color: $success_color !important;
+    background-color: var(--success-color) !important;
 
     &:hover {
-      background-color: darken($success_color, 5%) !important;
+      background-color: var(--success-hover-color) !important;
     }
   }
 
   tr[data-expired="false"] {
-    background-color: $error_color !important;
+    background-color: var(--error-color) !important;
 
     &:hover {
-      background-color: darken($error_color, 5%) !important;
+      background-color: var(--error-hover-color) !important;
     }
   }
 }
diff --git a/app/javascript/src/styles/specific/bulk_update_requests.scss b/app/javascript/src/styles/specific/bulk_update_requests.scss
index abd993a7f..8a8a4ae3d 100644
--- a/app/javascript/src/styles/specific/bulk_update_requests.scss
+++ b/app/javascript/src/styles/specific/bulk_update_requests.scss
@@ -1,9 +1,9 @@
 #c-bulk-update-requests {
   s.approved {
-    color: green;
+    color: var(--bulk-update-request-approved-color);
   }
 
   s.failed {
-    color: red;
+    color: var(--bulk-update-request-rejected-color);
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/src/styles/specific/comments.scss b/app/javascript/src/styles/specific/comments.scss
index 680ac11b0..c46f86b53 100644
--- a/app/javascript/src/styles/specific/comments.scss
+++ b/app/javascript/src/styles/specific/comments.scss
@@ -12,7 +12,7 @@ div.comments-for-post {
       padding: 5px;
 
       &[data-is-sticky="true"] {
-        background: $menu_color;
+        background: var(--comment-sticky-background-color);
       }
 
       &[data-is-voted="true"] {
diff --git a/app/javascript/src/styles/specific/dmails.scss b/app/javascript/src/styles/specific/dmails.scss
index a82d1ce6f..a98127514 100644
--- a/app/javascript/src/styles/specific/dmails.scss
+++ b/app/javascript/src/styles/specific/dmails.scss
@@ -7,7 +7,7 @@ div#c-dmails {
 
   div#preview {
     margin: 1em 0;
-    border: 1px solid #CCC;
+    border: 1px solid var(--dmail-preview-border-color);
     padding: 1em;
     width: 40em;
 
diff --git a/app/javascript/src/styles/specific/dropzone.scss b/app/javascript/src/styles/specific/dropzone.scss
index a3c33331e..c9f237789 100644
--- a/app/javascript/src/styles/specific/dropzone.scss
+++ b/app/javascript/src/styles/specific/dropzone.scss
@@ -1,5 +1,5 @@
 #filedropzone {
-  border: 4px dashed #DDD;
+  border: var(--uploads-dropzone-border);
   padding: 0;
   min-height: 100px;
   display: flex;
@@ -9,18 +9,18 @@
 
   .placeholder {
     font-style: italic;
-    color: #333;
+    color: var(--uploads-dropzone-place-holder-color);
     height: 100%;
   }
 
   &.error {
-    border-color: darken(#f2dede, 30%);
-    background-color: #f2dede;
+    border-color: var(--uploads-dropzone-error-border-color);
+    background-color: var(--uploads-dropzone-error-background-color);
   }
 
   &.success {
-    border-color: darken(#dff0d8, 30%);
-    background-color: #dff0d8;
+    border-color: var(--uploads-dropzone-success-border-color);
+    background-color: var(--uploads-dropzone-success-background-color);
   }
 }
 
@@ -31,11 +31,11 @@
 .dz-progress {
   height: 20px;
   width: 300px;
-  border: 1px solid #CCC;
+    background-color: var(--uploads-dropzone-progress-border);
 
   .dz-upload {
-    background-color: #F5F5FF;
+    background-color: var(--uploads-dropzone-progress-background-color);
     display: block;
     height: 20px;
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/src/styles/specific/error.scss b/app/javascript/src/styles/specific/error.scss
index c629edbdf..a0f389c32 100644
--- a/app/javascript/src/styles/specific/error.scss
+++ b/app/javascript/src/styles/specific/error.scss
@@ -2,7 +2,7 @@ ul.backtrace {
   font-family: monospace;
   font-size: 1.2em;
   list-style-type: none;
-  background: #EEE;
+  background: var(--dtext-code-background-color);
   padding: 1em;
   margin-bottom: 1em;
 }
diff --git a/app/javascript/src/styles/specific/explore.scss b/app/javascript/src/styles/specific/explore.scss
index cb3d98173..3a99a0990 100644
--- a/app/javascript/src/styles/specific/explore.scss
+++ b/app/javascript/src/styles/specific/explore.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div#c-explore-posts {
   header {
     text-align: center;
diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss
index b02db639e..29b9bc8e8 100644
--- a/app/javascript/src/styles/specific/forum.scss
+++ b/app/javascript/src/styles/specific/forum.scss
@@ -1,32 +1,28 @@
 div.list-of-forum-posts {
   article {
-    border: 1px solid #AAA;
+    border: var(--forum-post-border);
     margin: 1em 0em;
     word-wrap: break-word;
-    box-shadow: 1px 1px 2px #AAA;
+    box-shadow: var(--forum-post-box-shadow);
 
     a.voted {
       font-weight: bold;
     }
-    
-    span.desc {
-      color: grey;
-    }
 
     &:target {
-      background-color: #FFC;
+      background-color: var(--forum-post-highlight-background-color);
     }
 
     .vote-score-up {
-      color: green;
+      color: var(--forum-vote-up-color);
     }
 
     .vote-score-meh {
-      color: goldenrod;
+      color: var(--forum-vote-meh-color);
     }
 
     .vote-score-down {
-      color: red;
+      color: var(--forum-vote-down-color);
     }
 
     div.author {
@@ -64,21 +60,21 @@ div.list-of-forum-posts {
 
 div#c-forum-topics {
   span.info {
-    color: #AAA;
+    color: var(--forum-info-color);
   }
 
   span.new {
     font-size: 80%;
-    color: red;
+    color: var(--forum-new-topic-color);
     margin-right: 0.5em;
   }
 
   span.locked-topic {
-    color: gray;
+    color: var(--forum-locked-topic-color);
   }
 
   span.level-topic {
-    color: #f66;
+    color: var(--forum-level-restricted-topic-color);
     font-weight: bold;
   }
   
@@ -91,6 +87,6 @@ div#c-forum-topics {
   tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
   tr[data-is-deleted="true"] .forum-post-excerpt::after {
     content: " (deleted)";
-    color: gray;
+    color: var(--forum-deleted-topic-color);
   }
 }
diff --git a/app/javascript/src/styles/specific/iqdb_queries.scss b/app/javascript/src/styles/specific/iqdb_queries.scss
index 5386b552d..2c03a0ff6 100644
--- a/app/javascript/src/styles/specific/iqdb_queries.scss
+++ b/app/javascript/src/styles/specific/iqdb_queries.scss
@@ -3,7 +3,7 @@ div#c-iqdb-queries {
     article.post-preview {
       height: 180px;
       width: 180px;
-      border: lightgrey solid 1px;
+      border: var(--iqdb-preview-border);
 
       img {
         margin-top: 10px;
diff --git a/app/javascript/src/styles/specific/mod_queue.scss.erb b/app/javascript/src/styles/specific/mod_queue.scss.erb
index 5766f9255..ef213d6c7 100644
--- a/app/javascript/src/styles/specific/mod_queue.scss.erb
+++ b/app/javascript/src/styles/specific/mod_queue.scss.erb
@@ -6,11 +6,11 @@ div#c-moderator-post-queues {
     overflow: hidden;
 
     &.post-pos-score {
-      background: rgb(230, 255, 230);
+      background: var(--modqueue-positive-score-background-color);
     }
 
     &.post-neg-score {
-      background: rgb(255, 230, 230);
+      background: var(--modqueue-negative-score-background-color);
     }
 
     aside {
@@ -27,13 +27,13 @@ div#c-moderator-post-queues {
 
     <% Danbooru.config.modqueue_quality_warning_tags.each do |tag| %>
       &[data-tags~="<%= tag %>"] {
-        background-color: $preview_quality_warning_color;
+        background-color: var(--modqueue-quality-warning-color);
       }
     <% end %>
 
     <% Danbooru.config.modqueue_sample_warning_tags.each do |tag| %>
       &[data-tags~="<%= tag %>"] {
-        background-color: $preview_sample_warning_color;
+        background-color: var(--modqueue-sample-warning-color);
       }
     <% end %>
 
diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss
index 866eabd3c..aa4ec997a 100644
--- a/app/javascript/src/styles/specific/notes.scss
+++ b/app/javascript/src/styles/specific/notes.scss
@@ -1,13 +1,11 @@
-@import "../base/000_vars.scss";
-
 div#note-container {
   position: absolute;
   z-index: 50;
 
   div.note-body {
     position: absolute;
-    border: 1px solid black;
-    background: #FFE;
+    border: var(--note-body-border);
+    background: var(--note-body-background);
     min-width: 140px;
     min-height: 1em;
     line-height: normal;
@@ -62,22 +60,22 @@ div#note-container {
 
   div.note-box {
     position: absolute;
-    border: 1px solid white;
+    border: var(--note-box-border);
     min-width: 5px;
     min-height: 5px;
     width: 100px;
     height: 100px;
     cursor: move;
-    background: transparent;
+    background: var(--note-box-background);
     line-height: normal;
 
     div.note-box-inner-border {
-      border: 1px solid black;
-      background: #FFE;
+      border: var(--note-box-inner-border);
+      background: var(--note-body-background);
     }
 
     div.note-box-inner-border.unsaved {
-      border: 1px solid red;
+      border: var(--unsaved-note-box-inner-border);
     }
 
     &.embedded {
@@ -96,17 +94,17 @@ div#note-container {
     }
 
     &.note-box-highlighted {
-      outline: 2px solid $note_highlight_color;
+      outline: 2px solid var(--note-highlight-color);
     }
   }
 }
 
 div#note-preview {
   position: absolute;
-  border: 1px solid red;
+  border: var(--note-preview-border);
   opacity: 0.6;
   display: none;
-  background: white;
+  background: var(--note-preview-background);
 }
 
 div.note-edit-dialog {
diff --git a/app/javascript/src/styles/specific/pools.scss b/app/javascript/src/styles/specific/pools.scss
index 30f1d0191..cb36b5802 100644
--- a/app/javascript/src/styles/specific/pools.scss
+++ b/app/javascript/src/styles/specific/pools.scss
@@ -1,18 +1,18 @@
 @import "../base/000_vars.scss";
 
 a.pool-category-series, .pool-category-series a {
-  color: #A0A;
+  color: var(--series-pool-color);
 
   &:hover {
-    color: #B6B;
+    color: var(--series-pool-hover-color);
   }
 }
 
 a.pool-category-collection, .pool-category-collection a {
-  color: $link_color;
+  color: var(--collection-pool-color);
 
   &:hover {
-    color: $link_hover_color;
+    color: var(--collection-pool-hover-color);
   }
 }
 
diff --git a/app/javascript/src/styles/specific/post_events.scss b/app/javascript/src/styles/specific/post_events.scss
index 10fabfc64..985f48be6 100644
--- a/app/javascript/src/styles/specific/post_events.scss
+++ b/app/javascript/src/styles/specific/post_events.scss
@@ -1,11 +1,11 @@
 div#c-post-events {
   #a-index {
     tr.resolved-true {
-      background: #DDD;
+      background: var(--post-events-resolved-background);
     }
 
     tr.resolved-false {
-      background: #FFF;
+      background: var(--post-events-unresolved-background);
     }
   }
 }
diff --git a/app/javascript/src/styles/specific/post_flags.scss b/app/javascript/src/styles/specific/post_flags.scss
index 3c60047e8..825a94a47 100644
--- a/app/javascript/src/styles/specific/post_flags.scss
+++ b/app/javascript/src/styles/specific/post_flags.scss
@@ -1,9 +1,9 @@
 div#c-post-flags {
   tr.resolved-true {
-    background: #DDD !important;
+    background: var(--post-events-resolved-background) !important;
   }
 
   tr.resolved-false {
-    background: #FFF !important;
+    background: var(--post-events-unresolved-background) !important;
   }
 }
diff --git a/app/javascript/src/styles/specific/post_mode_menu.scss b/app/javascript/src/styles/specific/post_mode_menu.scss
index c65888ef3..1d3a7221e 100644
--- a/app/javascript/src/styles/specific/post_mode_menu.scss
+++ b/app/javascript/src/styles/specific/post_mode_menu.scss
@@ -1,51 +1,51 @@
 body.mode-view {
-  background-color: #FFF;
+  background-color: var(--post-mode-menu-view-background);
 }
 
 body.mode-edit {
-  background-color: #5C5;
+  background-color: var(--post-mode-menu-edit-background);
 }
 
 body.mode-tag-script {
-  background-color: #D6D;
+  background-color: var(--post-mode-menu-tag-script-background);
 }
 
 body.mode-add-fav {
-  background-color: #FFA;
+  background-color: var(--post-mode-menu-add-fav-background);
 }
 
 body.mode-remove-fav {
-  background-color: #FFA;
+  background-color: var(--post-mode-menu-remove-fav-background);
 }
 
 body.mode-vote-up {
-  background-color: #AFA;
+  background-color: var(--post-mode-menu-vote-up-background);
 }
 
 body.mode-vote-down {
-  background-color: #FAA;
+  background-color: var(--post-mode-menu-vote-down-background);
 }
 
 body.mode-lock-rating {
-  background-color: #AA3;
+  background-color: var(--post-mode-menu-lock-rating-background);
 }
 
 body.mode-lock-note {
-  background-color: #3AA;
+  background-color: var(--post-mode-menu-lock-note-background);
 }
 
 body.mode-approve {
-  background-color: #48C;
+  background-color: var(--post-mode-menu-approve-background);
 }
 
 body.mode-translation {
-  background-color: #5CD;
+  background-color: var(--post-mode-menu-translation-background);
 }
 
 body.mode-ban {
-  background-color: #F33;
+  background-color: var(--post-mode-menu-ban-background);
 }
 
 #page, #top, #page-footer {
-  background-color: white;
+  background-color: var(--body-background-color);
 }
diff --git a/app/javascript/src/styles/specific/post_tooltips.scss b/app/javascript/src/styles/specific/post_tooltips.scss
index e96b5adaf..9b9828c80 100644
--- a/app/javascript/src/styles/specific/post_tooltips.scss
+++ b/app/javascript/src/styles/specific/post_tooltips.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 $tooltip-line-height: 16px;
 $tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.
 $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
@@ -16,31 +14,31 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #999999;
-    border: 0px none #FFFFFF;
+    background: var(--post-tooltip-scrollbar-background);
+    border: none;
     border-radius: 0px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: #AAAAAA;
+    background: var(--post-tooltip-scrollbar-thumb-color);
   }
 
   &::-webkit-scrollbar-thumb:active {
-    background: #AAAAAA;
+    background: var(--post-tooltip-scrollbar-thumb-color);
   }
 
   &::-webkit-scrollbar-track {
-    background: #EEEEEE;
-    border: 0px none #ffffff;
+    background: var(--post-tooltip-scrollbar-track-background);
+    border: none;
     border-radius: 0px;
   }
 
   &::-webkit-scrollbar-track:hover {
-    background: #EEEEEE;
+    background: var(--post-tooltip-scrollbar-track-background);
   }
 
   &::-webkit-scrollbar-track:active {
-    background: #EEEEEE;
+    background: var(--post-tooltip-scrollbar-track-background);
   }
 
   &::-webkit-scrollbar-corner {
@@ -55,7 +53,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
   box-sizing: border-box;
   font-size: 11px;
   line-height: $tooltip-line-height;
-  border-color: #767676;
+  border-color: var(--post-tooltip-border-color);
 
   .qtip-content {
     padding: 0;
@@ -75,7 +73,7 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
     }
 
     .post-tooltip-header {
-      background-color: $menu_color;
+      background-color: var(--post-tooltip-header-background-color);
       display: flex;
       white-space: nowrap;
       overflow: hidden;
@@ -100,14 +98,14 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
 
     .post-tooltip-info {
       margin-left: 0.5em;
-      color: #555;
+      color: var(--post-tooltip-info-color);
       font-size: 10px;
     }
   }
 
   &:not(:hover) {
     a, span {
-      color: #777 !important;
+      color: var(--post-tooltip-inactive-color) !important;
     }
   }
 
diff --git a/app/javascript/src/styles/specific/post_versions.scss b/app/javascript/src/styles/specific/post_versions.scss
index ee95ad7e4..6c4921734 100644
--- a/app/javascript/src/styles/specific/post_versions.scss
+++ b/app/javascript/src/styles/specific/post_versions.scss
@@ -1,9 +1,7 @@
-@import "../base/000_vars.scss";
-
 div#c-post-versions {
   div#a-index {
     tr.hilite {
-      background: $highlight_color;
+      background: var(--table-row-hover-color);
     }
   }
 }
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index ddce24600..a9cd9d6e7 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -76,78 +76,78 @@ article.post-preview {
   }
 
   &.post-status-has-children img {
-    border-color: $preview_has_children_color;
+    border-color: var(--preview-has-children-color);
   }
 
   &.post-status-has-parent img {
-    border-color: $preview_has_parent_color;
+    border-color: var(--preview-has-parent-color);
   }
   
   &.post-status-has-children.post-status-has-parent img {
-    border-color: $preview_has_children_color $preview_has_parent_color $preview_has_parent_color $preview_has_children_color;
+    border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);
   }
 
 
   &.post-status-deleted img {
-    border-color: $preview_deleted_color;
+    border-color: var(--preview-deleted-color);
   }
 
   &.post-status-has-children.post-status-deleted img {
-    border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_children_color;
+    border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);
   }
 
   &.post-status-has-parent.post-status-deleted img {
-    border-color: $preview_has_parent_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
+    border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
   }
 
   &.post-status-has-children.post-status-has-parent.post-status-deleted img {
-    border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
+    border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
   }
 
 
   /* Pending and flagged posts have blue borders (except in the modqueue). */
   &.post-status-pending:not(.mod-queue-preview) img,
   &.post-status-flagged:not(.mod-queue-preview) img {
-    border-color: $preview_pending_color;
+    border-color: var(--preview-pending-color);
   }
 
   &.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
   &.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
-    border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_children_color;
+    border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);
   }
 
   &.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
   &.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
-    border-color: $preview_has_parent_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
+    border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
   }
 
   &.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
   &.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
-    border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
+    border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
   }
 }
 
 /* Flagged posts have red borders for approvers. */
 body[data-user-can-approve-posts="true"] .post-preview {
   &.post-status-flagged img {
-    border-color: $preview_flagged_color;
+    border-color: var(--preview-flagged-color);
   }
 
   &.post-status-has-children.post-status-flagged img {
-    border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_children_color;
+    border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
   }
 
   &.post-status-has-parent.post-status-flagged img {
-    border-color: $preview_has_parent_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
+    border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
   }
 
   &.post-status-has-children.post-status-has-parent.post-status-flagged img {
-    border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
+    border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
   }
 }
 
 .post-preview.current-post {
-  background-color: rgba(0,0,0,0.1);
+  background-color: var(--preview-current-post-background);
 }
 
 #has-parent-relationship-preview, #has-children-relationship-preview {
@@ -163,12 +163,12 @@ body[data-user-can-approve-posts="true"] .post-preview {
 }
 
 .post-count {
-  color: #CCC;
+  color: var(--tag-count-color);
   margin-left: 0.2em;
 }
 
 .low-post-count {
-  color: red;
+  color: var(--low-post-count-color);
 }
 
 div#c-posts {
@@ -186,7 +186,7 @@ div#c-posts {
   }
 
   #remove-fav-button i.fa-heart {
-    color: deeppink;
+    color: var(--remove-favorite-button);
   }
 
   #remove-fav-button.animate i {
@@ -206,10 +206,10 @@ div#c-posts {
       margin-top: 0.5em;
       float: right;
       overflow: visible;
-      background: #EEE;
+      background: var(--ugoira-seek-slider-background);
 
       .ui-progressbar-value {
-        background: white;
+        background: var(--ugoira-seek-slider-progressbar-background);
       }
     }
 
@@ -251,46 +251,46 @@ div#c-posts {
     }
 
     &.notice-parent {
-      border-color: #C0FCC0;
-      background: #D8FCD9;
+      border-color: var(--post-parent-notice-border-color);
+      background: var(--post-parent-notice-background);
     }
 
     &.notice-child {
-      border-color: #FCFCC0;
-      background: #FBFCD8;
+      border-color: var(--post-child-notice-border-color);
+      background: var(--post-child-notice-background);
     }
 
     &.notice-pending {
-      border-color: #C0C0FC;
-      background: #D8D8FC;
+      border-color: var(--post-pending-notice-border-color);
+      background: var(--post-pending-notice-background);
     }
 
     &.notice-flagged {
-      border-color: #FCC0C0;
-      background: #FCD9D8;
+      border-color: var(--post-flagged-notice-border-color);
+      background: var(--post-flagged-notice-background);
     }
 
     &.notice-deleted {
-      border-color: #FF8C8C;
-      background: #FFA7A5;
+      border-color: var(--post-deleted-notice-border-color);
+      background: var(--post-deleted-notice-background);
     }
 
     &.notice-appealed {
-      border-color: #C0ECFC;
-      background: #D8F2FC;
+      border-color: var(--post-appealed-notice-border-color);
+      background: var(--post-appealed-notice-background);
     }
 
     &.notice-resized {
-      border-color: #E4C0FC;
-      background: #EED8FC;
+      border-color: var(--post-resized-notice-border-color);
+      background: var(--post-resized-notice-background);
     }
   }
 
   div.nav-notice {
     padding: 0.5em;
     margin: 1em 0;
-    background: #EEE;
-    border: 1px solid #AAA;
+    background: var(--post-nav-notice-background);
+    border: var(--post-nav-notice-border);
     position: relative;
 
     p {
@@ -416,7 +416,7 @@ div#c-posts {
         }
 
         &:hover {
-          background: rgb(250, 250, 250);
+          background: var(--post-seq-nav-hover-background);
         }
       }
     }
@@ -433,9 +433,9 @@ div#c-posts {
     }
 
     #artist-commentary {
-      border: 1px solid #CCC;
+      border: var(--post-artist-commentary-container-border);
       border-radius: 8px;
-      background-color: #F8F8F8;
+      background: var(--post-artist-commentary-container-background);
       margin-top: 1em;
       padding: 0.5em;
 
@@ -445,7 +445,7 @@ div#c-posts {
       }
 
       .disabled {
-        color: gray;
+        color: var(--post-artist-commentary-disabled-color);
       }
     }
   }
@@ -473,7 +473,7 @@ div#c-posts, div#c-uploads {
     border-radius: 4px;
     margin: 1em 0;
     padding: 1em;
-    border: 1px solid #666;
+    border: 1px solid var(--fetch-source-data-border-color);
 
     &:not(.loading) #source-info-loading { display: none; }
     &.loading #source-info-content { display: none; }
diff --git a/app/javascript/src/styles/specific/related_tags.scss b/app/javascript/src/styles/specific/related_tags.scss
index 78f25db97..b4ddf0912 100644
--- a/app/javascript/src/styles/specific/related_tags.scss
+++ b/app/javascript/src/styles/specific/related_tags.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div#related-tags-container {
   &.visible a#show-related-tags-link,
   &.hidden a#hide-related-tags-link,
@@ -12,7 +10,7 @@ div.related-tags {
   width: 100%;
   margin-bottom: 1em;
   padding: 1em;
-  background: #EEE;
+  background: var(--related-tags-container-background);
   overflow: auto;
   border-radius: 4px;
   display: flex;
@@ -52,8 +50,8 @@ div.related-tags {
         }
 
         a.selected {
-          background-color: $link_color;
-          color: white;
+          background: var(--selected-related-tag-background-color);
+          color: var(--selected-related-tag-color);
         }
       }
     }
diff --git a/app/javascript/src/styles/specific/sessions.scss b/app/javascript/src/styles/specific/sessions.scss
index 190a3ce83..1ed32256d 100644
--- a/app/javascript/src/styles/specific/sessions.scss
+++ b/app/javascript/src/styles/specific/sessions.scss
@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div#c-sessions {
   div#a-new {
     label#remember-label {
diff --git a/app/javascript/src/styles/specific/tags.scss b/app/javascript/src/styles/specific/tags.scss
index ec8796a21..6328a5e77 100644
--- a/app/javascript/src/styles/specific/tags.scss
+++ b/app/javascript/src/styles/specific/tags.scss
@@ -30,7 +30,7 @@ div#c-tags {
       justify-self: end;
 
       .count {
-        color: gray;
+        color: var(--tag-count-color);
         text-decoration: italic;
         margin-left: 0.25em;
         padding-bottom: 0.2em;
@@ -42,15 +42,15 @@ div#c-tags {
       }
 
       .fa-frown {
-        color: red;
+        color: var(--tag-count-indicator-frown-color);
       }
 
       .fa-meh {
-        color: darkkhaki;
+        color: var(--tag-count-indicator-meh-color);
       }
 
       .fa-smile {
-        color: green;
+        color: var(--tag-count-indicator-smile-color);
       }
     }
   }
diff --git a/app/javascript/src/styles/specific/user_feedback.scss b/app/javascript/src/styles/specific/user_feedback.scss
index 58a6bf359..153c08dc1 100644
--- a/app/javascript/src/styles/specific/user_feedback.scss
+++ b/app/javascript/src/styles/specific/user_feedback.scss
@@ -1,14 +1,14 @@
 div#c-user-feedbacks, div#c-moderator-dashboards div#col2 {
   .feedback-category-positive {
-    background: #DDFFDD !important;
+    background: var(--user-feedback-positive-background-color);
   }
 
   .feedback-category-negative {
-    background: #FFDDDD !important;
+    background: var(--user-feedback-negative-background-color);
   }
 
   .feedback-category-neutral {
-    background: #FFFFFF !important;
+    background: var(--user-feedback-neutral-background-color);
   }
 
   #negative-policy {
diff --git a/app/javascript/src/styles/specific/user_name_change_requests.scss b/app/javascript/src/styles/specific/user_name_change_requests.scss
index 2258ae927..c9e518e76 100644
--- a/app/javascript/src/styles/specific/user_name_change_requests.scss
+++ b/app/javascript/src/styles/specific/user_name_change_requests.scss
@@ -1,10 +1,10 @@
 #c-user-name-change-requests {
   .feedback-category-positive {
-    background: #DDFFDD !important;
+    background: var(--user-name-change-requests-positive-background) !important;
   }
 
   .feedback-category-negative {
-    background: #FFDDDD !important;
+    background: var(--user-name-change-requests-negative-background) !important;
   }
   
   li {
diff --git a/app/javascript/src/styles/specific/user_upgrades.scss b/app/javascript/src/styles/specific/user_upgrades.scss
index 34ddc1e02..10ba0c162 100644
--- a/app/javascript/src/styles/specific/user_upgrades.scss
+++ b/app/javascript/src/styles/specific/user_upgrades.scss
@@ -26,11 +26,11 @@ div#c-user-upgrades {
         }
 
         colgroup#gold  {
-          background-color: #FFF380;
+          background-color: var(--user-upgrade-gold-background-color);
         }
 
         colgroup#platinum {
-          background-color: #eee;
+          background-color: var(--user-upgrade-platinum-background-color);
         }
 
         td, th {
@@ -41,13 +41,13 @@ div#c-user-upgrades {
 
         tbody {
           tr:hover {
-            background-color: #FEF;
+            background-color: var(--user-upgrade-table-row-hover-background-color);
           }
         }
 
         p.cost-footnote {
           font-size: 80%;
-          color: gray;
+          color: var(--user-upgrade-cost-footnote-color);
           margin: 0;
         }
       }
diff --git a/app/javascript/src/styles/specific/users.scss b/app/javascript/src/styles/specific/users.scss
index 3139500d7..9ebb25719 100644
--- a/app/javascript/src/styles/specific/users.scss
+++ b/app/javascript/src/styles/specific/users.scss
@@ -1,10 +1,8 @@
-@import "../base/000_vars.scss";
-
 div#c-users {
   div#a-show {
     div.box {
       h2, h3 {
-        color: #333;
+        color: var(--profile-page-header-color);
       }
 
       margin-bottom: 2em;
@@ -57,7 +55,7 @@ div#c-users {
     }
 
     .active {
-      color: black;
+      color: var(--settings-page-active-tab-color);
     }
   }
 
diff --git a/app/javascript/src/styles/specific/wiki_page_versions.scss b/app/javascript/src/styles/specific/wiki_page_versions.scss
index 74f3cee8c..2cbef88aa 100644
--- a/app/javascript/src/styles/specific/wiki_page_versions.scss
+++ b/app/javascript/src/styles/specific/wiki_page_versions.scss
@@ -1,12 +1,12 @@
 div#c-wiki-page-versions {
   #a-diff {
     del {
-      background: #FCC;
+      background: var(--wiki-page-versions-diff-del-background);
       text-decoration: none;
     }
 
     ins {
-      background: #CFC;
+      background: var(--wiki-page-versions-diff-ins-background);
       text-decoration: none;
     }
   }
@@ -19,7 +19,7 @@ div#c-wiki-page-versions {
 
   #a-show {
     span.version {
-      color: #AAA;
+      color: var(--wiki-page-versions-version-color);
     }
   }
 }
diff --git a/app/javascript/src/styles/specific/wiki_pages.scss b/app/javascript/src/styles/specific/wiki_pages.scss
index 64b657fd8..2bdd2ad82 100644
--- a/app/javascript/src/styles/specific/wiki_pages.scss
+++ b/app/javascript/src/styles/specific/wiki_pages.scss
@@ -9,7 +9,7 @@ div#c-wiki-pages {
 }
 
 .wiki-other-name {
-  background-color: #EEE;
+  background-color: var(--wiki-page-other-name-background-color);
   padding: 3px;
   border-radius: 3px;
 }
diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss
index 9e78293ef..0acf567c6 100644
--- a/app/javascript/src/styles/specific/z_responsive.scss
+++ b/app/javascript/src/styles/specific/z_responsive.scss
@@ -38,10 +38,10 @@
 
     button[type=submit] {
       font-size: 1.2em;
-      background-color: #EEE;
+      background-color: var(--responsive-sidebar-submit-button-background-color);
       height: 42px;
       padding: 2px 10px;
-      border: 1px solid rgb(197, 197, 197);
+      border: var(--responsive-sidebar-submit-button-border);
     }
   }
 
@@ -74,11 +74,6 @@
     top: 2vw;
     right: 3vw;
     font-size: 2em;
-
-    &.toggler-active {
-      background-color: lighten($link_color, 25%);
-      color: #000;    
-    }
   }
 
   /* Make the quick search box in the navbar full width. */
@@ -94,12 +89,12 @@
     input[type=text] {
       vertical-align: top;
       font-size: 24pt;
-      border: 1px solid #c5c5c5;
+      border: var(--responsive-form-input-border);
     }
 
     textarea {
       vertical-align: top;
-      border: 1px solid #c5c5c5;
+      border: var(--responsive-form-input-border);
     }
 
     input[type=submit] {
@@ -245,7 +240,7 @@
   }
   
   header#top menu.main {
-    background-color: lighten($link_color, 25%);
+    background-color: var(--responsive-menu-background-color);
     padding: 5px 10px;
   }
   
diff --git a/config/danbooru_default_config.rb b/config/danbooru_default_config.rb
index 38c4506f6..e8054750a 100644
--- a/config/danbooru_default_config.rb
+++ b/config/danbooru_default_config.rb
@@ -250,8 +250,8 @@ module Danbooru
           "humanized" => nil,
           "relatedbutton" => "General",
           "css" => {
-            "color" => "$link_color",
-            "hover" => "$link_hover_color"
+            "color" => "var(--general-tag-color)",
+            "hover" => "var(--general-tag-hover-color)"
           }
         },
         "character" => {
@@ -267,8 +267,8 @@ module Danbooru
           },
           "relatedbutton" => "Characters",
           "css" => {
-            "color" => "#0A0",
-            "hover" => "#6B6"
+            "color" => "var(--character-tag-color)",
+            "hover" => "var(--character-tag-hover-color)"
           }
         },
         "copyright" => {
@@ -284,8 +284,8 @@ module Danbooru
           },
           "relatedbutton" => "Copyrights",
           "css" => {
-            "color" => "#A0A",
-            "hover" => "#B6B"
+            "color" => "var(--copyright-tag-color)",
+            "hover" => "var(--copyright-tag-hover-color)"
           }
         },
         "artist" => {
@@ -301,8 +301,8 @@ module Danbooru
           },
           "relatedbutton" => "Artists",
           "css" => {
-            "color" => "#A00",
-            "hover" => "#B66"
+            "color" => "var(--artist-tag-color)",
+            "hover" => "var(--artist-tag-hover-color)"
           }
         },
         "meta" => {
@@ -313,8 +313,8 @@ module Danbooru
           "humanized" => nil,
           "relatedbutton" => nil,
           "css" => {
-            "color" => "#F80",
-            "hover" => "#FA6"
+            "color" => "var(--meta-tag-color)",
+            "hover" => "var(--meta-tag-hover-color)"
           }
         }
       }
diff --git a/postcss.config.js b/postcss.config.js
index aa5998a80..90427d404 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -6,6 +6,10 @@ module.exports = {
       autoprefixer: {
         flexbox: 'no-2009'
       },
+      // https://github.com/csstools/postcss-preset-env#importfrom
+      importFrom: [
+        'app/javascript/src/styles/base/040_colors.css'
+      ],
       stage: 3
     })
   ]