Better dark mode

Fixes #422
WebAssembly · Jan 15, 2025 · cc86249 · cc86249
1 parent 2c54f4f
commit cc86249
Showing 1 changed file with 37 additions and 1 deletion.
diff --git a/css/custom.css b/css/custom.css
@@ -238,6 +238,9 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+/* WebAssembly.org CSS */
+
 :root {
   color-scheme: dark light;
 }
@@ -1999,6 +2002,21 @@ header {
   color: #9c8529;
 }
 
+@media (prefers-color-scheme: dark) {
+  .flash.flash-warn {
+    color: CanvasText;
+    background-color: #555;
+  }
+
+  .flash.flash-warn a {
+    color: #f2db81;
+  }
+
+  ::after {
+    filter: invert(1) brightness(0.8);
+  }
+}
+
 .flash.flash-error {
   background-color: #ffcdd2;
 }
@@ -2490,14 +2508,32 @@ table td {
 }
 
 table tr {
-  background-color: #fff;
   border-top: 1px solid #ccc;
 }
 
 table tr:nth-child(2n) {
   background-color: #f8f8f8;
 }
 
+@media (prefers-color-scheme: dark) {
+  table th,
+  table td {
+    border: 1px solid #222;
+  }
+
+  table tr {
+    border-top: 1px solid #333;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #303030;
+  }
+
+  .feature-cell {
+    filter: brightness(2);
+  }
+}
+
 code {
   padding: 0;
   padding-top: 0.2em;