Add dark color scheme

1 files changed, 36 insertions, 0 deletions

diff --git a/static/grapheneos.css b/static/grapheneos.css
index 8d5ec16a..dec5f69d 100644
--- a/static/grapheneos.css
+++ b/static/grapheneos.css
@@ -204,3 +204,39 @@ footer a, footer a:visited {
     src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/fonts/robotomono-v13-bold-latin.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #121212;
+        color: rgba(255, 255, 255, 0.87); /* 87% white */
+    }
+
+    a {
+        color: #90caf9; /* blue200 */
+    }
+
+    a:visited {
+        color: #ce93d8; /* purple200 */
+    }
+
+    h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited {
+        color: rgba(255, 255, 255, 0.87); /* 87% white */
+    }
+
+    code, pre {
+        background-color: #424242; /* grey800 */
+    }
+
+    footer a, footer a:visited {
+        color: #9f9f9f;
+    }
+
+    footer img {
+        filter: invert(87%);
+    }
+
+    .error-text {
+        /* Baseline Material dark error color */
+        color: #cf6679;
+    }
+}