Night mode fixes (#1163)

* night mode fix for candidate packages

* night mode fix for reverse dependencies modal

* indentation

* untested, fix quickjump night mode

* fix background color for mobile devices

closes: #1167

Author: peterbecich

datafiles/static/hackage.css

@@ -4,18 +4,23 @@
 
 /* Is this portable? */
 html {
-  background-color: white;
   width: 100%;
   height: 100%;
 }
 
 @media (prefers-color-scheme: dark) {
+  html {
+    background-color: #333;
+  }
   body {
     background: #333;
     color: #fefefe;
   }
 }
 @media (prefers-color-scheme: light) {
+  html {
+    background-color: #fefefe;
+  }
   body {
     background: #fefefe;
     color: #333;
@@ -140,22 +145,38 @@ pre, code, kbd, samp, .src {
   font-size: 85%; /* 11pt */
 }
 
-.candidate-warn {
-    background-color: #ffdddd;
+@media (prefers-color-scheme: dark) {
+  .candidate-warn {
     border-left: 6px solid #f44336;
     padding: 0.01em 16px;
     margin-bottom: 8px !important;
     margin-top: 8px !important;
+  }
+
+  .candidate-info {
+    border-left: 6px solid #2196F3;
+    padding: 0.01em 16px;
+    margin-bottom: 8px;
+  }
 }
 
-.candidate-info {
+@media (prefers-color-scheme: light) {
+  .candidate-warn {
+    background-color: #ffdddd;
+    border-left: 6px solid #f44336;
+    padding: 0.01em 16px;
+    margin-bottom: 8px !important;
+    margin-top: 8px !important;
+  }
+
+  .candidate-info {
     background-color: #e7f3fe;
     border-left: 6px solid #2196F3;
     padding: 0.01em 16px;
     margin-bottom: 8px;
+  }
 }
 
-
 /* @end */
 
 /* @group Common */
@@ -529,7 +550,6 @@ table.properties td, table.properties th {
   padding-bottom: 3em;
 }
 
-
 #page-header {
   background: #5E5184;
   border-bottom: 5px solid rgba(69, 59, 97, 0.5);
@@ -1014,12 +1034,21 @@ p.tip {
 
 /* Misc admin forms */
 
-.box {
-  background: #faf9dc;
-  border: 1px solid #d8d7ad;
-  padding: 0.5em 1em;
-  max-width: 35em;
-  margin: 0.5em 0 1em 1em;
+@media (prefers-color-scheme: dark) {
+    .box {
+        padding: 0.5em 1em;
+        max-width: 35em;
+        margin: 0.5em 0 1em 1em;
+    }
+}
+@media (prefers-color-scheme: light) {
+    .box {
+        background: #faf9dc;
+        border: 1px solid #d8d7ad;
+        padding: 0.5em 1em;
+        max-width: 35em;
+        margin: 0.5em 0 1em 1em;
+    }
 }
 
 table.simpletable th, table.simpletable td {
@@ -1210,3 +1239,20 @@ a.deprecated[href]:visited {
 .paginator .current:hover {
   border: 1px solid #979797;
 }
+
+@media (prefers-color-scheme: dark) {
+  div#modal #content {
+    background: #222;
+  }
+}
+@media (prefers-color-scheme: light) {
+  div#modal #content {
+    background: #fff;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  #search-results {
+    background: #222;
+  }
+}

datafiles/templates/packagePageAssets.st

@@ -20,7 +20,6 @@
 
   div#modal #content {
     border-radius: 8px;
-    background: #fff;
     padding: 20px;
   }