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

Author: peterbecich

datafiles/static/hackage.css

@@ -14,18 +14,12 @@ html {
     background: #333;
     color: #fefefe;
   }
-  pre {
-      background-color: black;
-  }
 }
 @media (prefers-color-scheme: light) {
   body {
     background: #fefefe;
     color: #333;
   }
-  pre {
-      background-color: white;
-  }
 }
 
 body {
@@ -78,14 +72,8 @@ dd {
 a { text-decoration: none; }
 
 @media (prefers-color-scheme: dark) {
-  a[href]:link {
-    color: #9E358F;
-    filter: brightness(2.0);
-  }
-  a[href]:visited {
-    color: #6F5F9C;
-    filter: brightness(2.0);
-  }
+  a[href]:link { color: #EB82DC; }    /* 30% brighter */
+  a[href]:visited { color: #D5C5FF; } /* 40% brighter */
 }
 @media (prefers-color-scheme: light) {
   a[href]:link { color: #9E358F; }
@@ -235,6 +223,17 @@ 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;
@@ -442,7 +441,6 @@ table.properties td, table.properties th {
   }
 
   div #properties {
-      background: #fefefe;
       width: 40%;
       margin-bottom: 2em;
   }
@@ -623,11 +621,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;
@@ -665,8 +673,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;