diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index a7728806..423598da 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -3,17 +3,9 @@
 }
 
 #my-checks-tags .up {
-    color: #333;
-    background-color: #fff;
-    border-color: #ccc;
-}
-
-@media (prefers-color-scheme: dark) {
-    #my-checks-tags .up {
-        color: #e0e0e2;
-        background-color: #25252a;
-        border-color: #303033;
-    }
+    color: var(--tag-up-color);
+    background-color: var(--tag-up-bg);
+    border-color: var(--tag-up-border);
 }
 
 #my-checks-tags .grace {
@@ -29,19 +21,10 @@
 }
 
 #my-checks-tags .checked {
-    box-shadow: 0 0 3px #ddd;
-    background: #333;
-    color: #eee;
-    border-color: #000;
-}
-
-@media (prefers-color-scheme: dark) {
-    #my-checks-tags .checked {
-        box-shadow: none;
-        background: #fff;
-        color: #333;
-        border-color: #ccc;
-    }
+    box-shadow: 0 0 3px var(--tag-checked-shadow);
+    background: var(--tag-checked-bg);
+    color: var(--tag-checked-color);
+    border-color: var(--tag-checked-border);
 }
 
 #search {
diff --git a/static/css/nouislider.dark.css b/static/css/nouislider.dark.css
index a5562b68..5ea6c0c3 100644
--- a/static/css/nouislider.dark.css
+++ b/static/css/nouislider.dark.css
@@ -1,29 +1,27 @@
-@media (prefers-color-scheme: dark) {
-    .noUi-background {
-        background-color: #3c3939;
-        box-shadow:  none;
-    }
+body.dark .noUi-background {
+    background-color: #3c3939;
+    box-shadow:  none;
+}
 
-    .noUi-target {
-        border-color: #515151;
-        box-shadow: none;
-    }
+body.dark .noUi-target {
+    border-color: #515151;
+    box-shadow: none;
+}
 
-    .noUi-target.noUi-connect {
-        box-shadow: none;
-    }
+body.dark .noUi-target.noUi-connect {
+    box-shadow: none;
+}
 
-    .noUi-handle {
-        background-color: #515050;
-        border-color: #605c5c;
-        box-shadow: none;
-    }
+body.dark .noUi-handle {
+    background-color: #515050;
+    border-color: #605c5c;
+    box-shadow: none;
+}
 
-    .noUi-marker {
-        background: #777;
-    }
+body.dark .noUi-marker {
+    background: #777;
+}
 
-    .noUi-pips {
-        color: #777780;
-    }
-}
\ No newline at end of file
+body.dark .noUi-pips {
+    color: #777780;
+}
diff --git a/static/css/pricing.css b/static/css/pricing.css
index c1bdcb2e..fd646183 100644
--- a/static/css/pricing.css
+++ b/static/css/pricing.css
@@ -10,56 +10,29 @@
 
     display: inline-block;
     line-height: 0.9;
-    text-shadow: 0px 1px white, -1px 1px white, 1px 1px white, -1px 0px white;
+    text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg);
 }
 
 .hobbyist h1 {
-    color: #0a220c;
-    border-bottom: 3px solid #A5D6A7;
+    color: var(--plan-hobbyist-color);
+    border-bottom: 3px solid var(--plan-hobbyist-border);
 }
 
 .supporter h1 {
-    color: #1d190f;
-    border-bottom: 3px solid #FFE082;
+    color: var(--plan-supporter-color);
+    border-bottom: 3px solid var(--plan-supporter-border);
 }
 
 .business h1 {
-    color: #141c22;
-    border-bottom: 3px solid #90CAF9;
+    color: var(--plan-business-color);
+    border-bottom: 3px solid var(--plan-business-border);
 }
 
 .business-plus h1 {
-    color: #221f1e;
-    border-bottom: 3px solid #BCAAA4;
+    color: var(--plan-business-plus-color);
+    border-bottom: 3px solid var(--plan-business-plus-border);
 }
 
-@media (prefers-color-scheme: dark) {
-    .panel.plan h1 {
-        text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg);
-    }
-
-    .hobbyist h1 {
-        color: #e3ffe4;
-        border-bottom: 3px solid #A5D6A7;
-    }
-
-    .supporter h1 {
-        color: #fff0c4;
-        border-bottom: 3px solid #FFE082;
-    }
-
-    .business h1 {
-        color: #e8f2f9;
-        border-bottom: 3px solid #90CAF9;
-    }
-
-    .business-plus h1 {
-        color: #fff5f2;
-        border-bottom: 3px solid #BCAAA4;
-    }
-}
-
-
 .mo {
     font-size: 16px;
 }
diff --git a/static/css/selectize.dark.css b/static/css/selectize.dark.css
index d391df7c..94306d02 100644
--- a/static/css/selectize.dark.css
+++ b/static/css/selectize.dark.css
@@ -1,5 +1,3 @@
-@media (prefers-color-scheme: dark) {
-    .selectize-input input {
-        color: var(--input-color);
-    }
-}
\ No newline at end of file
+.selectize-input input {
+    color: var(--input-color);
+}
diff --git a/static/css/syntax.css b/static/css/syntax.css
index 4df5c952..95cfe4cd 100644
--- a/static/css/syntax.css
+++ b/static/css/syntax.css
@@ -59,74 +59,74 @@
 .highlight .vi { color: #008080 } /* Name.Variable.Instance */
 .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
 
-@media (prefers-color-scheme: dark) {
-.highlight .hll { background-color: #49483e }
-.highlight .c { color: #75715e } /* Comment */
-.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
-.highlight .k { color: #66d9ef } /* Keyword */
-.highlight .l { color: #ae81ff } /* Literal */
-.highlight .n { color: #f8f8f2 } /* Name */
-.highlight .o { color: #f92672 } /* Operator */
-.highlight .p { color: #f8f8f2 } /* Punctuation */
-.highlight .ch { color: #75715e } /* Comment.Hashbang */
-.highlight .cm { color: #75715e } /* Comment.Multiline */
-.highlight .cp { color: #75715e } /* Comment.Preproc */
-.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
-.highlight .c1 { color: #75715e } /* Comment.Single */
-.highlight .cs { color: #75715e } /* Comment.Special */
-.highlight .gd { color: #f92672 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gi { color: #a6e22e } /* Generic.Inserted */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #75715e } /* Generic.Subheading */
-.highlight .kc { color: #66d9ef } /* Keyword.Constant */
-.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
-.highlight .kn { color: #f92672 } /* Keyword.Namespace */
-.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
-.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
-.highlight .kt { color: #66d9ef } /* Keyword.Type */
-.highlight .ld { color: #e6db74 } /* Literal.Date */
-.highlight .m { color: #ae81ff } /* Literal.Number */
-.highlight .s { color: #e6db74 } /* Literal.String */
-.highlight .na { color: #a6e22e } /* Name.Attribute */
-.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
-.highlight .nc { color: #a6e22e } /* Name.Class */
-.highlight .no { color: #66d9ef } /* Name.Constant */
-.highlight .nd { color: #a6e22e } /* Name.Decorator */
-.highlight .ni { color: #f8f8f2 } /* Name.Entity */
-.highlight .ne { color: #a6e22e } /* Name.Exception */
-.highlight .nf { color: #a6e22e } /* Name.Function */
-.highlight .nl { color: #f8f8f2 } /* Name.Label */
-.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
-.highlight .nx { color: #a6e22e } /* Name.Other */
-.highlight .py { color: #f8f8f2 } /* Name.Property */
-.highlight .nt { color: #f92672 } /* Name.Tag */
-.highlight .nv { color: #f8f8f2 } /* Name.Variable */
-.highlight .ow { color: #f92672 } /* Operator.Word */
-.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
-.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
-.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
-.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
-.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
-.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
-.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
-.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
-.highlight .sc { color: #e6db74 } /* Literal.String.Char */
-.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
-.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
-.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
-.highlight .se { color: #ae81ff } /* Literal.String.Escape */
-.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
-.highlight .sx { color: #e6db74 } /* Literal.String.Other */
-.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
-.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
-.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
-.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
-.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
-.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-}
+
+body.dark .highlight .hll { background-color: #49483e }
+body.dark .highlight .c { color: #75715e } /* Comment */
+body.dark .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+body.dark .highlight .k { color: #66d9ef } /* Keyword */
+body.dark .highlight .l { color: #ae81ff } /* Literal */
+body.dark .highlight .n { color: #f8f8f2 } /* Name */
+body.dark .highlight .o { color: #f92672 } /* Operator */
+body.dark .highlight .p { color: #f8f8f2 } /* Punctuation */
+body.dark .highlight .ch { color: #75715e } /* Comment.Hashbang */
+body.dark .highlight .cm { color: #75715e } /* Comment.Multiline */
+body.dark .highlight .cp { color: #75715e } /* Comment.Preproc */
+body.dark .highlight .cpf { color: #75715e } /* Comment.PreprocFile */
+body.dark .highlight .c1 { color: #75715e } /* Comment.Single */
+body.dark .highlight .cs { color: #75715e } /* Comment.Special */
+body.dark .highlight .gd { color: #f92672 } /* Generic.Deleted */
+body.dark .highlight .ge { font-style: italic } /* Generic.Emph */
+body.dark .highlight .gi { color: #a6e22e } /* Generic.Inserted */
+body.dark .highlight .gs { font-weight: bold } /* Generic.Strong */
+body.dark .highlight .gu { color: #75715e } /* Generic.Subheading */
+body.dark .highlight .kc { color: #66d9ef } /* Keyword.Constant */
+body.dark .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+body.dark .highlight .kn { color: #f92672 } /* Keyword.Namespace */
+body.dark .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+body.dark .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+body.dark .highlight .kt { color: #66d9ef } /* Keyword.Type */
+body.dark .highlight .ld { color: #e6db74 } /* Literal.Date */
+body.dark .highlight .m { color: #ae81ff } /* Literal.Number */
+body.dark .highlight .s { color: #e6db74 } /* Literal.String */
+body.dark .highlight .na { color: #a6e22e } /* Name.Attribute */
+body.dark .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+body.dark .highlight .nc { color: #a6e22e } /* Name.Class */
+body.dark .highlight .no { color: #66d9ef } /* Name.Constant */
+body.dark .highlight .nd { color: #a6e22e } /* Name.Decorator */
+body.dark .highlight .ni { color: #f8f8f2 } /* Name.Entity */
+body.dark .highlight .ne { color: #a6e22e } /* Name.Exception */
+body.dark .highlight .nf { color: #a6e22e } /* Name.Function */
+body.dark .highlight .nl { color: #f8f8f2 } /* Name.Label */
+body.dark .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+body.dark .highlight .nx { color: #a6e22e } /* Name.Other */
+body.dark .highlight .py { color: #f8f8f2 } /* Name.Property */
+body.dark .highlight .nt { color: #f92672 } /* Name.Tag */
+body.dark .highlight .nv { color: #f8f8f2 } /* Name.Variable */
+body.dark .highlight .ow { color: #f92672 } /* Operator.Word */
+body.dark .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+body.dark .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
+body.dark .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+body.dark .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+body.dark .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+body.dark .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+body.dark .highlight .sa { color: #e6db74 } /* Literal.String.Affix */
+body.dark .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+body.dark .highlight .sc { color: #e6db74 } /* Literal.String.Char */
+body.dark .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
+body.dark .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+body.dark .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+body.dark .highlight .se { color: #ae81ff } /* Literal.String.Escape */
+body.dark .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+body.dark .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+body.dark .highlight .sx { color: #e6db74 } /* Literal.String.Other */
+body.dark .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+body.dark .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+body.dark .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+body.dark .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+body.dark .highlight .fm { color: #a6e22e } /* Name.Function.Magic */
+body.dark .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+body.dark .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+body.dark .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+body.dark .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
+body.dark .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
diff --git a/static/css/variables.css b/static/css/variables.css
index 6ccef4b0..77c85014 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -23,6 +23,7 @@
     --channel-off-color: #ddd;
     --close-color: #000;
     --debug-warning-bg:  #eee;
+    --get-started-bg: #f2f5f2;
     --input-bg-disabled: #eeeeee;
     --input-border: #ccc;
     --input-color:  #555;
@@ -31,62 +32,91 @@
     --log-missing-bg: #fff3f2;
     --modal-content-bg: #fff;
     --nav-pills-active-link-hover-bg: #eee;
-    --panel-bg: transparent;
+    --panel-bg: #fff;
     --panel-success-bg: #dff0d8;
+    --plan-business-border:  #90CAF9;
+    --plan-business-color: #141c22;
+    --plan-business-plus-border:  #BCAAA4;
+    --plan-business-plus-color: #221f1e;
+    --plan-hobbyist-border:  #A5D6A7;
+    --plan-hobbyist-color: #0a220c;
+    --plan-supporter-border:  #FFE082;
+    --plan-supporter-color: #1d190f;
     --pre-bg: #f5f5f5;
     --small-text-color: #111;
     --status-new-color: #ccc;
     --table-bg-hover: #f5f5f5;
     --tag-bg: #eee;
+    --tag-checked-bg: #333;
+    --tag-checked-border: #000;
+    --tag-checked-color: #eee;
+    --tag-checked-shadow: #ddd;
     --tag-color: #555;
+    --tag-up-bg: #fff;
+    --tag-up-border: #ccc;
+    --tag-up-color: #333;
     --text-color: #333;
     --text-muted:  #777;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --alert-info-bg: #123051;
-        --alert-info-border: #163c64;
-        --alert-info-color: #e0e2f5;
-        --alert-no-data-bg: #29292c;
-        --alert-no-data-border: #303033;
-        --alert-no-data-color: #878790;
-        --alert-success-bg: #0f2c1c;
-        --alert-success-border: #2b4939;
-        --alert-success-color: #ebf5ef;
-        --body-bg: #161619;
-        --border-color: #303033;
-        --border-muted: #303033;
-        --breadcrumb-bg: #25252a;
-        --btn-active-bg: #6f6f7f;
-        --btn-active-border: #818191;
-        --btn-default-bg: #383840;
-        --btn-default-border: #4e4e59;
-        --btn-default-color: #e0e0e2;
-        --btn-remove-bg: #202024;
-        --btn-remove-color: #ff4c46;
-        --btn-remove-hover: #3f1a22;
-        --channel-off-color: #464649;
-        --close-color: #fff;
-        --debug-warning-bg: #60002d;
-        --input-bg-disabled: #29292c;
-        --input-border:  #464649;
-        --input-color:  #b0b0b2;
-        --input-group-addon-bg: #29292c;
-        --jumbotron-bg: #1f1f22;
-        --log-missing-bg: #2d1e21;
-        --modal-content-bg: #1f1f22;
-        --nav-pills-active-link-hover-bg: #383840;
-        --panel-bg: #25252a;
-        --panel-success-bg: #165b35;
-        --pre-bg: #29292c;
-        --small-text-color: #f0f0f2;
-        --status-new-color: #464649;
-        --table-bg-hover: #25252a;
-        --tag-bg: #303033;
-        --tag-color: #e0e0e2;
-        --text-color: #e0e0e2;
-        --text-muted: #777780;
-  }
 
-}
\ No newline at end of file
+body.dark {
+    --alert-info-bg: #123051;
+    --alert-info-border: #163c64;
+    --alert-info-color: #e0e2f5;
+    --alert-no-data-bg: #29292c;
+    --alert-no-data-border: #303033;
+    --alert-no-data-color: #878790;
+    --alert-success-bg: #0f2c1c;
+    --alert-success-border: #2b4939;
+    --alert-success-color: #ebf5ef;
+    --body-bg: #161619;
+    --border-color: #303033;
+    --border-muted: #303033;
+    --breadcrumb-bg: #25252a;
+    --btn-active-bg: #6f6f7f;
+    --btn-active-border: #818191;
+    --btn-default-bg: #383840;
+    --btn-default-border: #4e4e59;
+    --btn-default-color: #e0e0e2;
+    --btn-remove-bg: #202024;
+    --btn-remove-color: #ff4c46;
+    --btn-remove-hover: #3f1a22;
+    --channel-off-color: #464649;
+    --close-color: #fff;
+    --debug-warning-bg: #60002d;
+    --get-started-bg: #2c2e2c;
+    --input-bg-disabled: #29292c;
+    --input-border:  #464649;
+    --input-color:  #b0b0b2;
+    --input-group-addon-bg: #29292c;
+    --jumbotron-bg: #1f1f22;
+    --log-missing-bg: #2d1e21;
+    --modal-content-bg: #1f1f22;
+    --nav-pills-active-link-hover-bg: #383840;
+    --panel-bg: #25252a;
+    --panel-success-bg: #165b35;
+    --plan-business-border:  #90CAF9;
+    --plan-business-color: #e8f2f9;
+    --plan-business-plus-border:  #BCAAA4;
+    --plan-business-plus-color: #fff5f2;
+    --plan-hobbyist-border:  #A5D6A7;
+    --plan-hobbyist-color: #e3ffe4;
+    --plan-supporter-border:  #FFE082;
+    --plan-supporter-color: #fff0c4;
+    --pre-bg: #29292c;
+    --small-text-color: #f0f0f2;
+    --status-new-color: #464649;
+    --table-bg-hover: #25252a;
+    --tag-bg: #303033;
+    --tag-checked-bg: #fff;
+    --tag-checked-border: #ccc;
+    --tag-checked-color: #333;
+    --tag-checked-shadow: #000;
+    --tag-color: #e0e0e2;
+    --tag-up-bg: #25252a;
+    --tag-up-border: #303033;
+    --tag-up-color: #e0e0e2;
+    --text-color: #e0e0e2;
+    --text-muted: #777780;
+}
diff --git a/static/css/welcome.css b/static/css/welcome.css
index fc036ec5..1188eb49 100644
--- a/static/css/welcome.css
+++ b/static/css/welcome.css
@@ -7,16 +7,10 @@
 }
 
 .get-started-bleed {
-    background: #f2f5f2;
+    background: var(--get-started-bg);
     padding: 3em 0;
 }
 
-@media (prefers-color-scheme: dark) {
-    .get-started-bleed {
-        background: #2c2e2c;
-    }
-}
-
 .footer-jumbo-bleed {
     background: #eee;
 }