From e49e16b6e717a66f06ecab1c15402b5088a1fd90 Mon Sep 17 00:00:00 2001
From: Mike Perham <mperham@gmail.com>
Date: Tue, 27 Aug 2019 10:34:39 -0700
Subject: [PATCH] Initial pass at dark mode support, courtesy of @silent-e

---
 web/assets/javascripts/dashboard.js         |  4 +-
 web/assets/stylesheets/application-dark.css | 84 +++++++++++++++++++++
 web/views/layout.erb                        |  1 +
 3 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 web/assets/stylesheets/application-dark.css

diff --git a/web/assets/javascripts/dashboard.js b/web/assets/javascripts/dashboard.js
index b741ddbe..16864248 100644
--- a/web/assets/javascripts/dashboard.js
+++ b/web/assets/javascripts/dashboard.js
@@ -27,7 +27,7 @@ var realtimeGraph = function(updatePath) {
     renderer: 'line',
     interpolation: 'linear',
 
-    series: new Rickshaw.Series.FixedDuration([{ name: graphElement.dataset.failedLabel, color: '#B1003E' }, { name: graphElement.dataset.processedLabel, color: '#006f68' }], undefined, {
+    series: new Rickshaw.Series.FixedDuration([{ name: graphElement.dataset.failedLabel, color: '#af0014' }, { name: graphElement.dataset.processedLabel, color: '#006f68' }], undefined, {
       timeInterval: timeInterval,
       maxDataPoints: 100,
     })
@@ -125,7 +125,7 @@ var historyGraph = function() {
     interpolation: 'linear',
     series: [
       {
-        color: "#B1003E",
+        color: "#af0014",
         data: failed,
         name: graphElement.dataset.failedLabel
       }, {
diff --git a/web/assets/stylesheets/application-dark.css b/web/assets/stylesheets/application-dark.css
new file mode 100644
index 00000000..d2dbec13
--- /dev/null
+++ b/web/assets/stylesheets/application-dark.css
@@ -0,0 +1,84 @@
+@media (prefers-color-scheme: dark) {
+
+  body {
+    background-color: #111;
+    color: #fff;
+  }
+
+  a,
+  .title,
+  .summary_bar ul .count,
+  .navbar .navbar-brand {
+    color: #af0014;
+  }
+
+  table.table-white {
+    background-color: hsl(0, 0%, 21%);
+  }
+
+  .table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: hsl(0, 0%, 13%);
+  }
+
+  .table-bordered,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > td,
+  .table-bordered > tfoot > tr > th,
+  .table-bordered > thead > tr > td,
+  .table-bordered > thead > tr > th {
+    border: 1px solid hsl(0, 0%, 24%);
+  }
+
+  .table-hover > tbody > tr:hover {
+    background-color: hsl(217, 15%, 34%);
+  }
+
+  .alert-success {
+    background-color: black;
+  }
+
+  a:link,
+  a:active,
+  a:hover,
+  a:visited {
+    color: hsl(208, 29%, 55%);
+  }
+
+  .summary_bar .summary {
+    background-color: hsl(0, 0%, 16%);
+  }
+
+  .navbar-default {
+    background-color: hsl(0, 0%, 13%);
+    border-color: hsl(0, 0%, 24%);
+  }
+
+  .navbar-default .navbar-nav > .active > a,
+  .navbar-default .navbar-nav > .active > a:focus,
+  .navbar-default .navbar-nav > .active > a:hover {
+    color: hsl(0, 0%, 100%);
+    background-color: hsl(0, 0%, 16%);
+  }
+
+  .pagination > li > a,
+  .pagination > li > span {
+    color: hsl(0, 0%, 100%);
+    background-color: hsl(0, 0%, 16%);
+    border-color: hsl(0, 0%, 21%);
+  }
+  .pagination > .disabled > a,
+  .pagination > .disabled > a:focus,
+  .pagination > .disabled > a:hover,
+  .pagination > .disabled > span,
+  .pagination > .disabled > span:focus,
+  .pagination > .disabled > span:hover {
+    color: hsl(0, 0%, 65%);
+    background-color: hsl(0, 0%, 16%);
+    border-color: hsl(0, 0%, 21%);
+  }
+
+  .stat {
+    border: 1px solid hsla(0, 0%, 100%, 0.1);
+  }
+}
diff --git a/web/views/layout.erb b/web/views/layout.erb
index c7023e4d..8531de79 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -11,6 +11,7 @@
     <% end %>
 
     <link href="<%= root_path %>stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="<%= root_path %>stylesheets/application-dark.css" media="screen" rel="stylesheet" type="text/css" />
     <% if rtl? %>
     <link href="<%= root_path %>stylesheets/application-rtl.css" media="screen" rel="stylesheet" type="text/css" />
     <% end %>