From c5229d6505bd003c50f7caba1bb509b4e9753e92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Thu, 27 May 2021 19:09:46 +0300
Subject: [PATCH] Add CSS for dark mode

---
 CHANGELOG.md                     |   1 +
 static/css/badges.css            |   4 +-
 static/css/base.css              |  19 +++--
 static/css/billing.css           |   2 +-
 static/css/bootstrap-colors.css  | 125 +++++++++++++++++++++++++++++++
 static/css/channel_checks.css    |   4 -
 static/css/channels.css          |  10 +--
 static/css/details.css           |  19 +++--
 static/css/docs.css              |  14 ++--
 static/css/log.css               |   7 +-
 static/css/login.css             |   6 +-
 static/css/my_checks.css         |  28 +++++--
 static/css/my_checks_desktop.css |  14 ++--
 static/css/nouislider.dark.css   |  29 +++++++
 static/css/pricing.css           |  27 +++++++
 static/css/profile.css           |   9 ++-
 static/css/projects.css          |   4 +-
 static/css/selectize.dark.css    |   5 ++
 static/css/selectize.hc.css      |   2 +-
 static/css/settings.css          |   7 +-
 static/css/syntax.css            |  73 +++++++++++++++++-
 static/css/variables.css         |  92 +++++++++++++++++++++++
 static/css/welcome.css           |  18 +++--
 templates/base.html              |   7 +-
 24 files changed, 456 insertions(+), 70 deletions(-)
 create mode 100644 static/css/bootstrap-colors.css
 create mode 100644 static/css/nouislider.dark.css
 create mode 100644 static/css/selectize.dark.css
 create mode 100644 static/css/variables.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18787787..d3b3eba4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file.
 - Add support for "... is UP" SMS notifications
 - Add an option for weekly reports (in addition to monthly)
 - Implement PagerDuty Simple Install Flow
+- Implement dark mode (using prefers-color-scheme: dark)
 
 ## v1.20.0 - 2020-04-22
 
diff --git a/static/css/badges.css b/static/css/badges.css
index 8d7bb249..8c06f93b 100644
--- a/static/css/badges.css
+++ b/static/css/badges.css
@@ -1,13 +1,13 @@
 .table.badge-preview th {
     border-top: 0;
-    color: #777777;
+    color: var(--text-muted);
     font-weight: normal;
     font-size: 12px;
     padding-top: 32px;
 }
 
 #badges-json .fetch-json {
-    background: #eee;
+    background: var(--pre-bg);
     padding: 3px;
 }
 
diff --git a/static/css/base.css b/static/css/base.css
index e9af141f..364ddde2 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -4,6 +4,8 @@ html {
 }
 
 body {
+    background: var(--body-bg);
+    color:  var(--text-color);
     /* Margin bottom by footer height */
     margin-bottom: 84px;
 }
@@ -15,7 +17,7 @@ body {
     /* Set the fixed height of the footer here */
     height: 84px;
     color: #AAA;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-muted);
 }
 
 .footer ul {
@@ -46,13 +48,18 @@ body {
 
 @media (min-width: 768px) {
     .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li > a:hover {
-        border-bottom: 5px solid #eee;
+        border-bottom: 5px solid var(--border-muted);
         padding-bottom: 25px;
     }
 }
 
+.navbar-default {
+    border-color: transparent;
+    border-bottom-color:  var(--border-muted);
+}
+
 .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
-    color: #333;
+    color: var(--text-color);
     font-weight: bold;
 }
 
@@ -100,7 +107,7 @@ body {
 }
 
 .status.ic-up, .status.ic-started { color: #5cb85c; }
-.status.ic-new, .status.ic-paused { color: #CCC; }
+.status.ic-new, .status.ic-paused { color: var(--status-new-color); }
 .status.ic-grace { color: #f0ad4e; }
 .status.ic-down { color: #d9534f; }
 
@@ -142,7 +149,7 @@ pre {
 }
 
 #debug-warning {
-    background: #eeeeee;
+    background: var(--debug-warning-bg);
     text-align: center;
     font-size: small;
     padding: 2px 0;
@@ -211,4 +218,4 @@ pre {
     to {
         opacity: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/static/css/billing.css b/static/css/billing.css
index 33225123..9a60b522 100644
--- a/static/css/billing.css
+++ b/static/css/billing.css
@@ -27,7 +27,7 @@
 }
 
 #change-billing-plan-modal .plan {
-    border-color: #ddd;
+    border-color: var(--border-color);
     padding: 24px;
     position: relative;
     cursor: pointer;
diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css
new file mode 100644
index 00000000..2cf012c8
--- /dev/null
+++ b/static/css/bootstrap-colors.css
@@ -0,0 +1,125 @@
+.panel {
+    background-color: var(--panel-bg);
+}
+
+.panel-default, .list-group-item {
+    border-color: var(--border-color);
+}
+
+.jumbotron {
+    background-color:  var(--jumbotron-bg);
+}
+
+.table > tbody > tr > th, .table > tbody > tr > td {
+    border-top-color: var(--border-color);
+}
+
+.btn-default {
+    color: var(--btn-default-color);
+    background-color: var(--btn-default-bg);
+    border-color: var(--btn-default-border);
+}
+
+.btn-default.active,
+.btn-default:hover,
+.btn-default:hover:active,
+.btn-default:focus,
+.btn-default:active,
+.btn-default.active:hover {
+    color: var(--btn-default-color);
+    background-color: var(--btn-active-bg);
+    border-color: var(--btn-active-border);
+}
+
+.nav > li > a:hover {
+    background-color:  var(--nav-pills-active-link-hover-bg);
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+    color: var(--text-color);
+    background-color:  var(--nav-pills-active-link-hover-bg);
+}
+
+pre {
+    color: var(--text-color);
+    background-color:  var(--pre-bg);
+}
+
+.modal-content {
+    background-color: var(--modal-content-bg);
+}
+
+.modal-footer {
+    border-top-color: var(--border-color);
+}
+
+hr {
+    border-top-color: var(--border-color);
+}
+
+.close, .close:hover, .close:focus {
+    color: var(--close-color);
+}
+
+.nav-tabs {
+    border-bottom-color: var(--border-color);
+}
+
+.form-control {
+    border-color:  var(--input-border);
+    color:  var(--input-color);
+}
+
+.form-control[disabled] {
+    background-color:  var(--input-bg-disabled);
+}
+
+.navbar-default .navbar-nav > li > a {
+    color:  var(--text-muted);
+}
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > li > a:hover {
+    color:  var(--text-color);
+}
+
+.breadcrumb {
+    background-color:  var(--breadcrumb-bg);
+}
+
+.modal-header {
+    border-bottom-color:  var(--border-muted);
+}
+
+code {
+    color:  var(--text-color);
+}
+
+.alert-info {
+    background-color: var(--alert-info-bg);
+    border-color: var(--alert-info-border);
+    color: var(--alert-info-color);
+}
+
+.panel-info {
+    border-color: var(--alert-info-border);
+}
+
+.alert-success {
+    background-color: var(--alert-success-bg);
+    border-color: var(--alert-success-border);
+    color: var(--alert-success-color);
+}
+
+.panel-success {
+    border-color: var(--alert-success-border);
+}
+
+.input-group-addon {
+    background-color: var(--input-group-addon-bg);
+    border-color: var(--input-border);
+    color:  var(--input-color);
+}
diff --git a/static/css/channel_checks.css b/static/css/channel_checks.css
index a956c979..a0316a57 100644
--- a/static/css/channel_checks.css
+++ b/static/css/channel_checks.css
@@ -2,10 +2,6 @@
     padding-left: 16px;
 }
 
-.channel-checks-table .check-all-cell {
-    background: #EEE;
-}
-
 .channel-checks-table .unnamed {
     color: #999;
     font-style: italic;
diff --git a/static/css/channels.css b/static/css/channels.css
index 7218e447..eed648ce 100644
--- a/static/css/channels.css
+++ b/static/css/channels.css
@@ -12,7 +12,7 @@
     padding-top: 10px;
     padding-bottom: 10px;
     vertical-align: middle;
-    border-top: 1px solid #f1f1f1;
+    border-top: 1px solid var(--border-muted);
 }
 
 .channels-table .icon-cell {
@@ -36,7 +36,7 @@
 
 
 .channels-table .channel-row:hover > td {
-    background: #f5f5f5;
+    background: var(--table-bg-hover);
 }
 
 table.channels-table > tbody > tr > th {
@@ -58,7 +58,7 @@ table.channels-table > tbody > tr > th {
 }
 
 .channel-details-mini span {
-    color: #111;
+    color: var(--small-text-color);
 }
 
 .rw .channel-row:hover .edit-name,
@@ -68,7 +68,7 @@ table.channels-table > tbody > tr > th {
 }
 
 .edit-checks {
-    color: #333;
+    color: var(--text-color);
 }
 
 .edit-checks:hover {
@@ -108,7 +108,7 @@ table.channels-table > tbody > tr > th {
 }
 
 .add-integration li:hover {
-    background: #eee;
+    background: var(--table-bg-hover);
 }
 
 .add-integration .icon {
diff --git a/static/css/details.css b/static/css/details.css
index af91d599..f138ad8c 100644
--- a/static/css/details.css
+++ b/static/css/details.css
@@ -27,7 +27,8 @@
     display: block;
     padding: 8px;
     margin-bottom: 8px;
-    background: #f5f5f5;
+    color:  var(--text-color);
+    background: var(--pre-bg);
 }
 
 .details-block form {
@@ -75,14 +76,18 @@
 
 #details-integrations.rw tr:hover th, #details-integrations.rw tr:hover td {
     cursor: pointer;
-    background-color: #f5f5f5;
+    background-color: var(--table-bg-hover);
 }
 
 
 #details-remove-check {
     border-color: #d43f3a;
-    color: #d43f3a;
-    background: #FFF;
+    color: var(--btn-remove-color);
+    background-color: var(--btn-remove-bg);
+}
+
+#details-remove-check:hover {
+    background-color: var(--btn-remove-hover);
 }
 
 #downtimes table {
@@ -101,9 +106,9 @@
 }
 
 .alert.no-events, .alert.no-channels {
-    border: #ddd;
-    background: #F5F5F5;
-    color: #444;
+    border: var(--alert-no-data-border);
+    background: var(--alert-no-data-bg);
+    color: var(--alert-no-data-color);
     text-align: center;
     padding: 32px;
 }
diff --git a/static/css/docs.css b/static/css/docs.css
index 7af68b92..cbc77979 100644
--- a/static/css/docs.css
+++ b/static/css/docs.css
@@ -10,7 +10,7 @@
 }
 
 .docs-nav li.nav-header {
-    color: #333;
+    color: var(--text-color);
     font-weight: bold;
 }
 
@@ -23,7 +23,7 @@ li + li.nav-header {
 }
 
 h2.rule {
-    border-top: 3px solid #eee;
+    border-top: 3px solid var(--border-muted);
     margin-top: 30px;
     padding-top: 30px;
 }
@@ -31,8 +31,8 @@ h2.rule {
 .page-docs code {
     padding: 2px 4px;
     font-size: 90%;
-    color: #333;
-    background-color: #f5f5f5;
+    color: var(--text-color);
+    background: var(--pre-bg);
     border-radius: 4px;
 }
 
@@ -74,7 +74,7 @@ h2.rule {
 
 .docs-content img {
     max-width: 66%;
-    border: 6px solid #DDD;
+    border: 6px solid var(--border-color);
 }
 
 
@@ -95,7 +95,7 @@ h2.rule {
 
 .docs-api td {
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color);
 }
 
 
@@ -110,7 +110,7 @@ h2.rule {
 }
 
 .page-docs dt, .page-docs dd {
-    border-top: 1px solid #DDD;
+    border-top: 1px solid var(--border-color);
     padding: 8px 0;
 }
 
diff --git a/static/css/log.css b/static/css/log.css
index 3505d5b0..32ad7977 100644
--- a/static/css/log.css
+++ b/static/css/log.css
@@ -8,10 +8,9 @@
 }
 
 #log td {
-    color: #444;
     position: relative;
     border: 0;
-    border-bottom: 1px solid #E5E5E5;
+    border-bottom: 1px solid var(--border-muted);
 }
 
 #log .date, #log .time {
@@ -50,13 +49,13 @@
 }
 
 #log tr.ok:hover td {
-    background-color: #f5f5f5;
+    background-color: var(--table-bg-hover);
 }
 
 
 #log tr.missing td {
     color: #d9534f;
-    background: #fff3f2;
+    background: var(--log-missing-bg);
 }
 
 #log td.event {
diff --git a/static/css/login.css b/static/css/login.css
index 31629b5f..8d7c8126 100644
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -34,7 +34,7 @@
 }
 
 #login-sep {
-    background:#ddd;
+    background: var(--border-color);
     position: absolute;
     top: 10%;
     right: -1px;
@@ -48,7 +48,7 @@
     width: 40px;
     left: -20px;
     text-align: center;
-    background: #fff;
+    background: var(--body-bg);
     font-style: italic;
     color: #666;
     font-size: 12px;
@@ -70,7 +70,7 @@
     margin: 0 auto;
     width: 30px;
     top: -9px;
-    background: #fff;
+    background: var(--body-bg);
 }
 
 #login-password {
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 45aeec03..a7728806 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -8,6 +8,14 @@
     border-color: #ccc;
 }
 
+@media (prefers-color-scheme: dark) {
+    #my-checks-tags .up {
+        color: #e0e0e2;
+        background-color: #25252a;
+        border-color: #303033;
+    }
+}
+
 #my-checks-tags .grace {
     color: #fff;
     background-color: #f0ad4e;
@@ -27,6 +35,15 @@
     border-color: #000;
 }
 
+@media (prefers-color-scheme: dark) {
+    #my-checks-tags .checked {
+        box-shadow: none;
+        background: #fff;
+        color: #333;
+        border-color: #ccc;
+    }
+}
+
 #search {
     padding-left: 15px;
     border-radius: 16px;
@@ -92,13 +109,12 @@
     font-weight: bold;
     font-style: italic;
     font-size: 18px;
-    color: #FFF;
-    color: #333;
+    color: var(--text-color);
     padding: 16px 8px 0px 8px;
 }
 
 #cron-preview {
-    background: #f8f8f8;
+    background: var(--pre-bg);
     min-height: 298px;
 }
 
@@ -166,8 +182,8 @@
 }
 
 .label-tag {
-    background-color: #eee;
-    color: #555;
+    background-color: var(--tag-bg);
+    color: var(--tag-color);
     font-style: normal;
     font-weight: 500;
 }
@@ -197,7 +213,7 @@
 }
 
 #show-usage-modal .highlight:nth-child(n+2) {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
 }
 
 .add-check-note {
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index 8cc1a97c..f58a20db 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -3,7 +3,7 @@
 }
 
 #checks-table .checks-row:hover {
-    background-color: #f5f5f5;
+    background-color: var(--table-bg-hover);
 }
 
 .my-checks-name.unnamed {
@@ -20,7 +20,7 @@
 }
 
 #checks-table a.default {
-    color: #333;
+    color: var(--text-color);
 }
 
 #checks-table tr:hover a.default {
@@ -29,7 +29,7 @@
 
 #checks-table td {
     vertical-align: middle;
-    border-top: 1px solid #f1f1f1;
+    border-top: 1px solid var(--border-muted);
 }
 
 #checks-table .my-checks-name,
@@ -63,7 +63,7 @@
 }
 
 #checks-table .integrations span.off:before {
-    color: #DDD;
+    color: var(--channel-off-color);
 }
 
 .timeout-grace .cron-expression {
@@ -121,7 +121,6 @@ tr:hover .copy-link {
     font-size: 11.7px;
     position: relative;
     line-height: 36px;
-    color: #333;
 }
 
 .checks-subline-duration {
@@ -135,6 +134,7 @@ tr:hover .copy-link {
 
 #checks-table .btn {
     border-color: transparent;
+    background-color: transparent;
     font-size: 20px;
     color: #999;
 }
@@ -146,8 +146,8 @@ tr:hover .copy-link {
 }
 
 #checks-table tr:hover .btn:hover {
-    background: #DDD;
-    color: #000;
+    background: var(--btn-active-bg);
+    color: var(--btn-default-color);
 }
 
 #checks-table .pause {
diff --git a/static/css/nouislider.dark.css b/static/css/nouislider.dark.css
new file mode 100644
index 00000000..a5562b68
--- /dev/null
+++ b/static/css/nouislider.dark.css
@@ -0,0 +1,29 @@
+@media (prefers-color-scheme: dark) {
+    .noUi-background {
+        background-color: #3c3939;
+        box-shadow:  none;
+    }
+
+    .noUi-target {
+        border-color: #515151;
+        box-shadow: none;
+    }
+
+    .noUi-target.noUi-connect {
+        box-shadow: none;
+    }
+
+    .noUi-handle {
+        background-color: #515050;
+        border-color: #605c5c;
+        box-shadow: none;
+    }
+
+    .noUi-marker {
+        background: #777;
+    }
+
+    .noUi-pips {
+        color: #777780;
+    }
+}
\ No newline at end of file
diff --git a/static/css/pricing.css b/static/css/pricing.css
index a5fd6d5a..c1bdcb2e 100644
--- a/static/css/pricing.css
+++ b/static/css/pricing.css
@@ -33,6 +33,33 @@
     border-bottom: 3px solid #BCAAA4;
 }
 
+@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/profile.css b/static/css/profile.css
index 39440c80..ff9b7eb5 100644
--- a/static/css/profile.css
+++ b/static/css/profile.css
@@ -1,6 +1,6 @@
 .panel-success .panel-footer {
-    background: #dff0d8;
-    color: #3c763d;
+    background: var(--panel-success-bg);
+    color: var(--alert-success-color);
     font-size: small;
     text-align: center;
     border-top: 0;
@@ -8,8 +8,8 @@
 }
 
 .panel-info .panel-footer {
-    background: #d9edf7;
-    color: #31708f;
+    background: var(--alert-info-bg);
+    color: var(--alert-info-color);
     font-size: small;
     text-align: center;
     border-top: 0;
@@ -40,6 +40,7 @@ span.loading {
 
 .at-limit span {
     display: inline-block;
+    color: #333;
     background-color: #FFD54F;
     font-weight: bold;
     font-size: 12px;
diff --git a/static/css/projects.css b/static/css/projects.css
index d20c3df5..0f172326 100644
--- a/static/css/projects.css
+++ b/static/css/projects.css
@@ -1,5 +1,5 @@
 #project-selector a {
-    color: #333;
+    color: var(--text-color);
 }
 
 #project-selector a:hover {
@@ -11,7 +11,7 @@
 }
 
 #project-selector .project {
-    border-color: #ddd;
+    border-color: var(--border-color);
     padding: 24px 24px 24px 64px;
     position: relative;
     min-height: 120px;
diff --git a/static/css/selectize.dark.css b/static/css/selectize.dark.css
new file mode 100644
index 00000000..d391df7c
--- /dev/null
+++ b/static/css/selectize.dark.css
@@ -0,0 +1,5 @@
+@media (prefers-color-scheme: dark) {
+    .selectize-input input {
+        color: var(--input-color);
+    }
+}
\ No newline at end of file
diff --git a/static/css/selectize.hc.css b/static/css/selectize.hc.css
index 15592323..bca539ea 100644
--- a/static/css/selectize.hc.css
+++ b/static/css/selectize.hc.css
@@ -32,7 +32,7 @@
   display: inline-block;
 }
 .selectize-input {
-  border: 1px solid #ccc;
+  border: 1px solid var(--input-border);
   padding: 6px 12px;
   display: inline-block;
   width: 100%;
diff --git a/static/css/settings.css b/static/css/settings.css
index 410d0fbc..19b07642 100644
--- a/static/css/settings.css
+++ b/static/css/settings.css
@@ -18,15 +18,16 @@
 #close-account, #remove-project {
     margin-left: 24px;
     border-color: #d43f3a;
-    color: #d43f3a;
+    color: var(--btn-remove-color);
+    background-color:  var(--btn-remove-bg);
 }
 
 #close-account:hover, #remove-project:hover {
-    background-color: #ffebea;
+    background-color: var(--btn-remove-hover);
 }
 
 .invite-suggestion {
-    color: #888;
+    color: var(--text-muted);
 }
 
 #suggestions-row td {
diff --git a/static/css/syntax.css b/static/css/syntax.css
index 2d83de3b..4df5c952 100644
--- a/static/css/syntax.css
+++ b/static/css/syntax.css
@@ -1,5 +1,4 @@
 .highlight .hll { background-color: #ffffcc }
-.highlight  { background: #ffffff; }
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { font-weight: bold } /* Keyword */
@@ -59,3 +58,75 @@
 .highlight .vg { color: #008080 } /* Name.Variable.Global */
 .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 */
+}
diff --git a/static/css/variables.css b/static/css/variables.css
new file mode 100644
index 00000000..6ccef4b0
--- /dev/null
+++ b/static/css/variables.css
@@ -0,0 +1,92 @@
+:root {
+    --alert-info-bg: #d9edf7;
+    --alert-info-border: #bce8f1;
+    --alert-info-color: #31708f;
+    --alert-no-data-bg: #f5f5f5;
+    --alert-no-data-border: #ddd;
+    --alert-no-data-color: #444;
+    --alert-success-bg: #dff0d8;
+    --alert-success-border: #d6e9c6;
+    --alert-success-color: #3c763d;
+    --body-bg: #FFF;
+    --border-color: #ddd;
+    --border-muted:  #eee;
+    --breadcrumb-bg: #f5f5f5;
+    --btn-active-bg: #e6e6e6;
+    --btn-active-border: #adadad;
+    --btn-default-bg: #fff;
+    --btn-default-border: #ccc;
+    --btn-default-color: #333;
+    --btn-remove-bg: #fff;
+    --btn-remove-color: #d43f3a;
+    --btn-remove-hover: #ffebea;
+    --channel-off-color: #ddd;
+    --close-color: #000;
+    --debug-warning-bg:  #eee;
+    --input-bg-disabled: #eeeeee;
+    --input-border: #ccc;
+    --input-color:  #555;
+    --input-group-addon-bg: #eeeeee;
+    --jumbotron-bg:  #eee;
+    --log-missing-bg: #fff3f2;
+    --modal-content-bg: #fff;
+    --nav-pills-active-link-hover-bg: #eee;
+    --panel-bg: transparent;
+    --panel-success-bg: #dff0d8;
+    --pre-bg: #f5f5f5;
+    --small-text-color: #111;
+    --status-new-color: #ccc;
+    --table-bg-hover: #f5f5f5;
+    --tag-bg: #eee;
+    --tag-color: #555;
+    --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
diff --git a/static/css/welcome.css b/static/css/welcome.css
index c469ab69..fc036ec5 100644
--- a/static/css/welcome.css
+++ b/static/css/welcome.css
@@ -3,7 +3,6 @@
 }
 
 .index-bleed {
-    background: #FFF;
     padding-bottom: 2em;
 }
 
@@ -12,6 +11,12 @@
     padding: 3em 0;
 }
 
+@media (prefers-color-scheme: dark) {
+    .get-started-bleed {
+        background: #2c2e2c;
+    }
+}
+
 .footer-jumbo-bleed {
     background: #eee;
 }
@@ -45,7 +50,8 @@
 }
 
 #pitch-url code {
-    background: #f5f5f5;
+    color: var(--text-color);
+    background: var(--pre-bg);
     display: inline-block;
     margin-top: 0px;
     padding: 6px 9px;
@@ -90,8 +96,8 @@
 
 #welcome-integrations .integration {
     display: block;
-    color: #333;
-    border: 1px solid #ddd;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
     border-radius: 3px;
     padding: 20px 0;
     text-align: center;
@@ -123,7 +129,7 @@
 }
 
 .page-welcome .tab-content {
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color);
     border-top: 0;
 }
 
@@ -133,7 +139,7 @@
 }
 
 .page-welcome .highlight:nth-child(n+2) {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
 }
 
 .page-welcome .tab-pane pre {
diff --git a/templates/base.html b/templates/base.html
index 789d1dee..bf5f1159 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,13 +19,17 @@
     <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/selectize.hc.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/selectize.dark.css' %}" type="text/css">
+
+    <link rel="stylesheet" href="{% static 'css/variables.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/bootstrap-colors.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
 
     <link rel="stylesheet" href="{% static 'css/add_credential.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/add_project_modal.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/add_pushover.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/webhook_form.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/badges.css' %}" type="text/css">
-    <link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/billing.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/channel_checks.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/channels.css' %}" type="text/css">
@@ -40,6 +44,7 @@
     <link rel="stylesheet" href="{% static 'css/my_checks_desktop.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/nouislider.dark.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/ping_details.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/pricing.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/profile.css' %}" type="text/css">