support for prefers-color-scheme (#1008)

* support for `prefers-color-scheme`

* 2x brightness for captions and links in dark color scheme

* table dark color scheme

* prefers-color-scheme for links, footer, and table-of-contents

* paginator css for `prefers-color-scheme`

Author: peterbecich

datafiles/static/hackage.css

@@ -9,9 +9,19 @@ html {
   height: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #333;
+    color: #fefefe;
+  }
+}
+@media (prefers-color-scheme: light) {
+  body {
+    background: #fefefe;
+    color: #333;
+  }
+}
 body {
-  background: #fefefe;
-  color: #333;
   text-align: left;
   min-height: 100vh;
   position: relative;
@@ -59,8 +69,16 @@ dd {
 }
 
 a { text-decoration: none; }
-a[href]:link { color: #9E358F; }
-a[href]:visited {color: #6F5F9C; }
+
+@media (prefers-color-scheme: dark) {
+  a[href]:link { color: #EB82DC; }    /* 30% brighter */
+  a[href]:visited { color: #D5C5FF; } /* 40% brighter */
+}
+@media (prefers-color-scheme: light) {
+  a[href]:link { color: #9E358F; }
+  a[href]:visited {color: #6F5F9C; }
+}
+
 a[href]:hover { text-decoration:underline; }
 
 /* @end */
@@ -142,9 +160,19 @@ pre, code, kbd, samp, .src {
 
 /* @group Common */
 
+@media (prefers-color-scheme: dark) {
+  .caption, h1, h2, h3, h4, h5, h6 {
+    color: #5E5184;
+    filter: brightness(2.0);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .caption, h1, h2, h3, h4, h5, h6 {
+    color: #5E5184;
+  }
+}
 .caption, h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
-  color: #5E5184;
   margin: 1.33em 0 0.7em 0;
   line-height: 1.05em;
 }
@@ -194,10 +222,19 @@ ul.links li a, ul.links li form {
   cursor: pointer;
 }
 
+@media (prefers-color-scheme: dark) {
+  pre {
+      background-color: #474747; /* 20% brighter than background */
+  }
+}
+@media (prefers-color-scheme: light) {
+  pre {
+      background-color: #f7f7f7;
+  }
+}
 pre {
   padding: 0.5rem 1rem;
   margin: 1em 0;
-  background-color: #f7f7f7;
   overflow: auto;
 }
 
@@ -402,7 +439,6 @@ table.properties td, table.properties th {
   }
 
   div #properties {
-      background: #fefefe;
       width: 40%;
       margin-bottom: 2em;
   }
@@ -583,11 +619,21 @@ div#style-menu-holder {
   display: block;
 }
 
+@media (prefers-color-scheme: dark) {
+  #footer {
+    background: #222;
+    color: #ededed;
+  }
+}
+@media (prefers-color-scheme: light) {
+  #footer {
+    background: #ededed;
+    color: #222;
+  }
+}
 #footer {
-  background: #ededed;
   border-top: 1px solid #aaa;
   padding: 0.5em 0;
-  color: #222;
   text-align: center;
   width: 100%;
   height: 3em;
@@ -625,8 +671,17 @@ ul.links li form button {
 
 /* @group Front Matter */
 
+@media (prefers-color-scheme: dark) {
+  #table-of-contents {
+    background: #222;
+  }
+}
+@media (prefers-color-scheme: light) {
+  #table-of-contents {
+    background:  #f7f7f7;
+  }
+}
 #table-of-contents {
-  background:  #f7f7f7;
   padding: 1em;
   margin: 0;
   margin-top: 1em;
@@ -986,6 +1041,17 @@ table.fancy th {
   background: #f0f0f0;
 }
 
+@media (prefers-color-scheme: dark) {
+  table.fancy td, table.properties td,
+  table.fancy th, table.properties th {
+    background: #333;
+  }
+  table.dataTable.compact.fancy tbody th,
+  table.dataTable.compact.fancy tbody td {
+    background: #333;
+  }
+}
+
 table.fancy td, table.properties td,
 table.fancy th, table.properties th {
   padding: 0.15em 0.45em;
@@ -997,8 +1063,8 @@ table.fancy tr.even td {
 
 table.dataTable.compact.fancy tbody th,
 table.dataTable.compact.fancy tbody td {
-    padding: 6px 10px;
-    line-height: normal;
+  padding: 6px 10px;
+  line-height: normal;
 }
 
 ul.searchresults li {
@@ -1063,8 +1129,20 @@ a.deprecated[href]:visited {
 }
 
 /* Styles Next/Prev when they have no href */
+
+@media (prefers-color-scheme: dark) {
+      .paginator a {
+        color: #474747;
+      }
+}
+
+@media (prefers-color-scheme: light) {
+      .paginator a {
+        color: #666 !important;
+      }
+}
+
 .paginator a {
-  color: #666;
   cursor: default;
   background: none;
   border: none;
@@ -1077,22 +1155,58 @@ a.deprecated[href]:visited {
   padding: 0.5em 1em;
 }
 
+
+@media (prefers-color-scheme: dark) {
+      .paginator a:link:hover, .paginator a:visited:hover {
+        color: #474747;
+      }
+}
+
+@media (prefers-color-scheme: light) {
+      .paginator a:link:hover, .paginator a:visited:hover {
+        color: #333 !important;
+      }
+}
+
 .paginator a:link, .paginator a:visited {
-  color: #333;
   border: 1px solid transparent;
   border-radius: 2px;
 }
 
+@media (prefers-color-scheme: dark) {
+      .paginator a:link:hover, .paginator a:visited:hover {
+        color: #585858;
+        background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
+      }
+}
+
+@media (prefers-color-scheme: light) {
+      .paginator a:link:hover, .paginator a:visited:hover {
+        color: white !important;
+        background: linear-gradient(to bottom, #585858 0%, #111 100%);
+      }
+}
+
 .paginator a:link:hover, .paginator a:visited:hover {
-  color: white;
   border: 1px solid #111;
-  background: linear-gradient(to bottom, #585858 0%, #111 100%);
   text-decoration: none;
 }
 
+@media (prefers-color-scheme: dark) {
+      .paginator .current, .paginator .current:hover {
+        color: #474747;
+        background: linear-gradient(to bottom, #585858 0%, #111 100%);
+      }
+}
+
+@media (prefers-color-scheme: light) {
+      .paginator .current, .paginator .current:hover {
+        color: #666 !important;
+        background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
+      }
+}
+
 .paginator .current,
 .paginator .current:hover {
-  color: #333;
   border: 1px solid #979797;
-  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
 }

datafiles/templates/Html/browse.html.st

@@ -173,7 +173,7 @@
           <dd>Only show packages with more than 1000 downloads within the last 30 days. The download count is inexact because Hackage uses a <a href="https://en.wikipedia.org/wiki/Content_delivery_network" target=_blank>content delivery network</a>.</dd>
           <dt>(lastUpload &lt; 2021-10-29)</dt>
           <dd>Only show packages for which the last upload was before (i.e. excluding) the given UTC date in <a target=_blank href="https://www.w3.org/TR/NOTE-datetime">the 'complete date' format as specified using ISO 8601</a>.</dd>
-          <dt>(lastUpload = 2021-10-29)</dt>
+          <dt>(lastUpload = 2021-10-29)</dt>x
           <dd>Only show packages for which the last upload was within the 24 hours of the given UTC date.</dd>
           <dt>(maintainer:SimonMarlow)</dt>
           <dd>Only show packages for which the maintainers list includes the user name <a target=_blank href="/user/SimonMarlow">SimonMarlow</a>.</dd>