diff --git a/datafiles/static/hackage.css b/datafiles/static/hackage.css
index 578c1602a..7a9e05616 100644
--- a/datafiles/static/hackage.css
+++ b/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%);
}
diff --git a/datafiles/templates/Html/browse.html.st b/datafiles/templates/Html/browse.html.st
index 8f79ce634..a8b8e6afa 100644
--- a/datafiles/templates/Html/browse.html.st
+++ b/datafiles/templates/Html/browse.html.st
@@ -173,7 +173,7 @@
Only show packages with more than 1000 downloads within the last 30 days. The download count is inexact because Hackage uses a content delivery network.
(lastUpload < 2021-10-29)
Only show packages for which the last upload was before (i.e. excluding) the given UTC date in the 'complete date' format as specified using ISO 8601.
- (lastUpload = 2021-10-29)
+ (lastUpload = 2021-10-29)x
Only show packages for which the last upload was within the 24 hours of the given UTC date.
(maintainer:SimonMarlow)
Only show packages for which the maintainers list includes the user name SimonMarlow.