diff --git a/test/config.yml b/test/config.yml
index d1270add4..bf3c154e9 100644
--- a/test/config.yml
+++ b/test/config.yml
@@ -5,3 +5,4 @@
 :queues:
   - [<%="very_"%>often, 2]
   - [seldom, 1]
+:web_theme: dark
diff --git a/test/config_environment.yml b/test/config_environment.yml
index b53ab451f..052aca5cb 100644
--- a/test/config_environment.yml
+++ b/test/config_environment.yml
@@ -8,3 +8,4 @@ staging:
   :queues:
     - [<%="very_"%>often, 2]
     - [seldom, 1]
+  :web_theme: "dark"
diff --git a/test/config_string.yml b/test/config_string.yml
index 9eb50306a..1d4418bc5 100644
--- a/test/config_string.yml
+++ b/test/config_string.yml
@@ -5,4 +5,5 @@ concurrency:  50
 queues:
   - [<%="very_"%>often, 2]
   - [seldom, 1]
+web_theme: dark
 
diff --git a/test/test_cli.rb b/test/test_cli.rb
index 4cb5c544c..8ad19e55e 100644
--- a/test/test_cli.rb
+++ b/test/test_cli.rb
@@ -152,6 +152,7 @@ def logdev
             assert_equal 50, Sidekiq.options[:concurrency]
             assert_equal 2, Sidekiq.options[:queues].count { |q| q == 'very_often' }
             assert_equal 1, Sidekiq.options[:queues].count { |q| q == 'seldom' }
+            assert_equal "dark", Sidekiq.options[:web_theme]
           end
 
           it 'accepts stringy keys' do
@@ -164,6 +165,7 @@ def logdev
             assert_equal 50, Sidekiq.options[:concurrency]
             assert_equal 2, Sidekiq.options[:queues].count { |q| q == 'very_often' }
             assert_equal 1, Sidekiq.options[:queues].count { |q| q == 'seldom' }
+            assert_equal "dark", Sidekiq.options[:web_theme]
           end
 
           it 'accepts environment specific config' do
@@ -176,6 +178,7 @@ def logdev
             assert_equal 50, Sidekiq.options[:concurrency]
             assert_equal 2, Sidekiq.options[:queues].count { |q| q == 'very_often' }
             assert_equal 1, Sidekiq.options[:queues].count { |q| q == 'seldom' }
+            assert_equal "dark", Sidekiq.options[:web_theme]
           end
         end
 
@@ -227,6 +230,7 @@ def logdev
               assert_equal 100, Sidekiq.options[:concurrency]
               assert_equal 7, Sidekiq.options[:queues].count { |q| q == 'often' }
               assert_equal 3, Sidekiq.options[:queues].count { |q| q == 'seldom' }
+              assert_equal "dark", Sidekiq.options[:web_theme]
             end
           end
 
diff --git a/web/assets/stylesheets/application-dark.css b/web/assets/stylesheets/application-dark.css
index 33e0599b1..00d646ea4 100644
--- a/web/assets/stylesheets/application-dark.css
+++ b/web/assets/stylesheets/application-dark.css
@@ -1,125 +1 @@
-@media (prefers-color-scheme: dark) {
-
-  body {
-    background-color: #000;
-    color: #ccc;
-  }
-
-  a,
-  .title,
-  .summary_bar ul .count,
-  .navbar .navbar-brand {
-    color: #af0014;
-  }
-
-  .navbar .navbar-brand:hover {
-    color: #ccc;
-  }
-
-  .navbar .navbar-brand .status {
-    color: #ccc;
-  }
-
-  .navbar-inverse {
-    background-color: #000;
-    border-color: #333;
-  }
-
-  table.table-white {
-    background-color: #111;
-  }
-
-  .table-striped > tbody > tr:nth-of-type(odd) {
-    background-color: #222;
-  }
-
-  .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 #333;
-  }
-
-  .table-hover > tbody > tr:hover {
-    background-color: #333;
-  }
-
-  .alert {
-    border: none;
-    color: #ccc;
-  }
-
-  .alert-success {
-    background-color: #000;
-  }
-
-  a:link,
-  a:active,
-  a:hover,
-  a:visited {
-    color: #63798c;
-  }
-
-  a.btn {
-    color: #000;
-  }
-
-  .summary_bar .summary {
-    background-color: #000;
-    border: 1px solid #333;
-  }
-
-  .navbar-default {
-    background-color: #000;
-    border-color: #3d3d3d;
-  }
-
-  .navbar-default .navbar-nav > .active > a,
-  .navbar-default .navbar-nav > .active > a:focus,
-  .navbar-default .navbar-nav > .active > a:hover {
-    color: #ccc;
-    background-color: #282828;
-  }
-
-  .navbar-default .navbar-nav > li > a:hover {
-    color: #ccc;
-  }
-
-  .pagination > li > a,
-  .pagination > li > a:hover,
-  .pagination > li > span {
-    color: #ccc;
-    background-color: #282828;
-    border-color: #353535;
-  }
-  .pagination > .disabled > a,
-  .pagination > .disabled > a:focus,
-  .pagination > .disabled > a:hover,
-  .pagination > .disabled > span,
-  .pagination > .disabled > span:focus,
-  .pagination > .disabled > span:hover {
-    color: #a5a5a5;
-    background-color: #282828;
-    border-color: #353535;
-  }
-
-  .stat {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  #live-poll {
-    color: #ccc;
-  }
-
-  .btn-warn {
-    color: #333;
-  }
-
-  .rickshaw_graph .y_ticks.glow text {
-    fill: #ccc;
-    color: #ccc;
-  }
-}
+@import "application-dark_base.css"  (prefers-color-scheme: dark);
diff --git a/web/assets/stylesheets/application-dark_base.css b/web/assets/stylesheets/application-dark_base.css
new file mode 100644
index 000000000..ad4da7820
--- /dev/null
+++ b/web/assets/stylesheets/application-dark_base.css
@@ -0,0 +1,123 @@
+body {
+    background-color: #000;
+    color: #ccc;
+}
+
+a,
+.title,
+.summary_bar ul .count,
+.navbar .navbar-brand {
+    color: #af0014;
+}
+
+.navbar .navbar-brand:hover {
+    color: #ccc;
+}
+
+.navbar .navbar-brand .status {
+    color: #ccc;
+}
+
+.navbar-inverse {
+    background-color: #000;
+    border-color: #333;
+}
+
+table.table-white {
+    background-color: #111;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #222;
+}
+
+.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 #333;
+}
+
+.table-hover > tbody > tr:hover {
+    background-color: #333;
+}
+
+.alert {
+    border: none;
+    color: #ccc;
+}
+
+.alert-success {
+    background-color: #000;
+}
+
+a:link,
+a:active,
+a:hover,
+a:visited {
+    color: #63798c;
+}
+
+a.btn {
+    color: #000;
+}
+
+.summary_bar .summary {
+    background-color: #000;
+    border: 1px solid #333;
+}
+
+.navbar-default {
+    background-color: #000;
+    border-color: #3d3d3d;
+}
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:focus,
+.navbar-default .navbar-nav > .active > a:hover {
+    color: #ccc;
+    background-color: #282828;
+}
+
+.navbar-default .navbar-nav > li > a:hover {
+    color: #ccc;
+}
+
+.pagination > li > a,
+.pagination > li > a:hover,
+.pagination > li > span {
+    color: #ccc;
+    background-color: #282828;
+    border-color: #353535;
+}
+
+.pagination > .disabled > a,
+.pagination > .disabled > a:focus,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > span,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > span:hover {
+    color: #a5a5a5;
+    background-color: #282828;
+    border-color: #353535;
+}
+
+.stat {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+#live-poll {
+    color: #ccc;
+}
+
+.btn-warn {
+    color: #333;
+}
+
+.rickshaw_graph .y_ticks.glow text {
+    fill: #ccc;
+    color: #ccc;
+}
diff --git a/web/views/layout.erb b/web/views/layout.erb
index 8531de79e..b5b86bf26 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -10,8 +10,16 @@
     <link href="<%= root_path %>stylesheets/bootstrap-rtl.min.css" media="screen" rel="stylesheet" type="text/css"/>
     <% 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 Sidekiq.options[:web_theme] %>>
+      <link href="<%= root_path %>stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
+      <% if Sidekiq.options[:web_theme] == 'dark' %>>
+        <link href="<%= root_path %>stylesheets/application-dark_base.css" media="screen" rel="stylesheet" type="text/css" />
+      <% end %>>
+    <% else %>>
+      <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" />
+    <% end %>>
+
     <% if rtl? %>
     <link href="<%= root_path %>stylesheets/application-rtl.css" media="screen" rel="stylesheet" type="text/css" />
     <% end %>