From 64be95f4ae294e70a1f4759f3fc7056bbf510799 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Mon, 23 Mar 2020 21:37:35 +0900
Subject: [PATCH] Use media attribute for prefers-color-scheme (#4500)

---
 web/assets/stylesheets/application-dark.css | 245 ++++++++++----------
 web/views/layout.erb                        |   2 +-
 2 files changed, 122 insertions(+), 125 deletions(-)

diff --git a/web/assets/stylesheets/application-dark.css b/web/assets/stylesheets/application-dark.css
index 33e0599b..3c608fed 100644
--- a/web/assets/stylesheets/application-dark.css
+++ b/web/assets/stylesheets/application-dark.css
@@ -1,125 +1,122 @@
-@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;
-  }
+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 8531de79..39ab6348 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -11,7 +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" />
+    <link href="<%= root_path %>stylesheets/application-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet" type="text/css" />
     <% if rtl? %>
     <link href="<%= root_path %>stylesheets/application-rtl.css" media="screen" rel="stylesheet" type="text/css" />
     <% end %>