---
 static/css/base.css | 43 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index b9ac76d..18bf6ea 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,6 +1,16 @@
+:root {
+    --background: white;
+    --text-color: black;
+    --title-color: black;
+    --footer-background: #eee;
+    --border: black;
+    --link: blue;
+}
 html, body {
     padding: 0;
     margin: 0;
+    background-color: var(--background);
+    color: var(--text-color);
 }
 
 body, td, th {
@@ -25,12 +35,12 @@ div.rank {
 div.stage {
     flex: 1;
     padding: 12px;
-    border-left: 1px dotted black;
+    border-left: 2px dotted var(--border);
     margin-bottom: 24px;
 }
 
 h1 a {
-    color: black;
+    color: var(--title-color);
 }
 
 h4 {
@@ -45,7 +55,7 @@ h4 span {
 
 span.ingredient {
     font-weight: bold;
-    border-bottom: 1px dotted black;
+    border-bottom: 1px dotted var(--border);
 }
 
 table.details th {
@@ -80,7 +90,7 @@ a.title {
 
 footer {
     margin-top: 48px;
-    background: #eee;
+    background: var(--footer-background);
     font-size: 0.8em;
     padding: 20px;
 }
@@ -99,4 +109,27 @@ label input {
     position: absolute;
     top: 0;
     left: 0;
-}
\ No newline at end of file
+}
+
+a {
+    color: var(--link);
+}
+
+input {
+    background-color: transparent;
+    border: 1px solid var(--border);
+    padding: 0.5em;
+    color: var(--text-color);
+    border-radius: 0.5em;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #111;
+        --text-color: #ccc;
+        --title-color: #ccc;
+        --footer-background: #222;
+        --border: #ccc;
+        --link: #0087ff;
+    }
+}
-- 
2.31.1