From b6b232d90ea8f66c77c7e120e9d09de912c79644 Mon Sep 17 00:00:00 2001
From: Sam Wilson <sam@binarycake.ca>
Date: Thu, 30 Apr 2026 16:30:26 -0400
Subject: [PATCH] Add dark mode

---
 src/docc/plugins/html/static/docc.css | 35 +++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/docc/plugins/html/static/docc.css b/src/docc/plugins/html/static/docc.css
index 61258d7..62c116e 100644
--- a/src/docc/plugins/html/static/docc.css
+++ b/src/docc/plugins/html/static/docc.css
@@ -16,6 +16,9 @@
 
     --comment-color: gray;
 
+    --tooltip-color: #177cb9;
+    --hi-link-border-color: rgba(0, 0, 0, 0.3);
+
     --code-max-width: 100%;
 
     --grid-maxWidth: 100%;
@@ -32,6 +35,14 @@ pre {
     padding: 0;
 }
 
+input:not([type=checkbox], [type=radio], [type=submit], [type=color], [type=button], [type=reset]),
+select,
+textarea {
+    /* Explicitly style these so we can override them in dark mode */
+    background-color: var(--bg-color);
+    color: var(--font-color);
+}
+
 a > code {
   text-decoration: underline dotted;
 }
@@ -180,7 +191,7 @@ details[open] > summary::after {
 }
 
 .tooltip > :not(:first-child) {
-    color: #177cb9;
+    color: var(--tooltip-color);
 }
 
 .tooltip-content {
@@ -248,7 +259,7 @@ details[open] > summary::after {
 /* Theme */
 .hi a {
     text-decoration: none;
-    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
+    border-bottom: 1px dotted var(--hi-link-border-color);
 }
 
 .hi-function-def,
@@ -334,3 +345,23 @@ details[open] > summary::after {
 .header-anchor:focus-within .link-logo {
     visibility: visible;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* chota */
+        --bg-color: #000;
+        --bg-secondary-color: #131316;
+        --font-color: #f5f5f5;
+        --color-grey: #ccc;
+        --color-darkGrey: #777;
+
+        /* docc */
+        --bg-highlight-color: #5c4d10;
+        --default-color: #f5f5f5;
+        --keyword-color: #7aa2f7;
+        --literal-color: #5eead4;
+        --name-color: #f7768e;
+        --tooltip-color: #7aa2f7;
+        --hi-link-border-color: rgba(255, 255, 255, 0.3);
+    }
+}