Add dark mode CSS for web interface (Issue #152)

CHANGES.md

@@ -38,6 +38,7 @@ CUPS v2.4rc1 (Pending)
 - The IPP backend now retries Validate-Job requests (Issue #132)
 - Now show better error messages when a driver interface program fails to
   provide a PPD file (Issue #148)
+- Added dark mode support to the CUPS web interface (Issue #152)
 - Added a workaround for Solaris in `httpAddrConnect2` (Issue #156)
 - Fixed an interaction between `--remote-admin` and `--remote-any` for the
   `cupsctl` command (Issue #158)

doc/cups.css

@@ -281,7 +281,7 @@ tr.data th {
 }
 
 div.table table {
-  border: solid thin #999999;
+  border: solid thin rgba(191,191,191,.3);
   border-collapse: collapse;
   border-spacing: 0;
   margin-left: auto;
@@ -299,14 +299,14 @@ div.table caption {
 
 div.table table td {
   background: white;
-  border: solid thin #bbbbbb;
+  border: solid thin rgba(191,191,191,.45);
   padding: 5pt 10pt 0;
 }
 
 div.table table th {
-  background: #f0f0f0;
+  background: rgba(191,191,191,.15);
   border: none;
-  border-bottom: solid thin #999999;
+  border-bottom: solid thin rgba(191,191,191,.3);
 }
 
 div.figure table {
@@ -394,9 +394,9 @@ table.list {
 table.list th {
   background: white;
   border-bottom: solid thin #cccccc;
+  border-right: 2px solid rgba(191,191,191,.45);
   color: #444444;
-  padding-top: 10pt;
-  padding-left: 5pt;
+  padding: 5px 10px 5px 12px;
   text-align: left;
   vertical-align: bottom;
   white-space: nowrap;
@@ -407,17 +407,16 @@ table.list th a {
 }
 
 table.list td {
-  border-bottom: solid thin #eeeeee;
-  padding-top: 5pt;
-  padding-left: 5pt;
+  border-bottom: solid thin rgba(191,191,191,.45);
+  padding: 5px 2px 5px 10px;
 }
 
 table.list tr:nth-child(even) {
-  background: #f8f8f8;
+  background: rgba(191,191,191,0.15);
 }
 
 table.list tr:nth-child(odd) {
-  background: #f4f4f4;
+  background: rgba(191,191,191,0.3);
 }
 
 div.sidebar {
@@ -452,8 +451,8 @@ div.sidebar p.l2 {
 }
 
 table.inset {
-  background: #f0f0f0;
-  border: thin solid #e0e0e0;
+  background: rgba(191,191,191,0.15);
+  border: thin solid rgba(191,191,191,0.3);
   margin-top: 1em;
   padding: 0;
   width: 100%;
@@ -634,25 +633,6 @@ ul.contents > li {
 ul.contents li ul.code, ul.contents li ul.subcontents {
   padding-left: 2em;
 }
-table.list {
-  border-collapse: collapse;
-  width: 100%;
-}
-table.list tr:nth-child(even) {
-  background: rgba(127,127,127,0.1);
-}
-table.list th {
-  border-right: 2px solid gray;
-  font-family: monospace;
-  padding: 5px 10px 5px 12px;
-  text-align: left;
-  vertical-align: top;
-}
-table.list td {
-  padding: 5px 2px 5px 10px;
-  text-align: left;
-  vertical-align: top;
-}
 
 /* iPhone/iPod touch overrides */
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px),
@@ -719,3 +699,25 @@ table.list td {
     display: none;
   }
 }
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  body {
+    background: black;
+    color: #ccc;
+  }
+  a:link, a:visited, table.list th a {
+    color: #6666ff;
+  }
+  a:link:hover, a:visited:hover, a:active, table.list th a {
+    color: #ff66ff;
+  }
+  hr {
+    color: #666;
+  }
+  div.table table td, table.list th {
+    background: black;
+  }
+  table.list th {
+    color: #666;
+}