diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css
index 7a9e05616..eb9799580 100644
--- a/datafiles/static/hackage.css
+++ b/datafiles/static/hackage.css
@@ -140,22 +140,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 +545,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 +1029,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 +1234,14 @@ 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;
+  }
+}
diff --git a/datafiles/templates/packagePageAssets.st b/datafiles/templates/packagePageAssets.st
index 672335daa..ef924af99 100644
--- a/datafiles/templates/packagePageAssets.st
+++ b/datafiles/templates/packagePageAssets.st
@@ -20,7 +20,6 @@
 
   div#modal #content {
     border-radius: 8px;
-    background: #fff;
     padding: 20px;
   }