diff --git a/html/Agda.css b/html/Agda.css
index 656783c..877db88 100644
--- a/html/Agda.css
+++ b/html/Agda.css
@@ -1,39 +1,55 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --default-text: black;
+    --symbol: #404040;
+    --primitive: #0000CD;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --default-text: white;
+    --symbol: #b0b0b0;
+    --blue: #9999FF;
+  }
+}
+
 /* Aspects. */
 .content .Agda .Comment       { color: #B22222 }
 .content .Agda .Background    {}
-.content .Agda .Markup        { color: #000000 }
+.content .Agda .Markup        { color: var(--default-text); }
 .content .Agda .Keyword       { color: #CD6600 }
 .content .Agda .String        { color: #B22222 }
 .content .Agda .Number        { color: #A020F0 }
-.content .Agda .Symbol        { color: #404040 }
-.content .Agda .PrimitiveType { color: #0000CD }
-.content .Agda .Pragma        { color: black   }
+.content .Agda .Symbol        { color: var(--symbol); }
+.content .Agda .PrimitiveType { color: var(--blue); }
+.content .Agda .Pragma        { color: var(--default-text);   }
 .content .Agda .Operator      {}
 .content .Agda .Hole          { background: #B4EEB4 }
 
 /* NameKinds. */
-.content .Agda .Bound                  { color: black   }
-.content .Agda .Generalizable          { color: black   }
+.content .Agda .Bound                  { color: var(--default-text);   }
+.content .Agda .Generalizable          { color: var(--default-text);   }
 .content .Agda .InductiveConstructor   { color: #008B00 }
 .content .Agda .CoinductiveConstructor { color: #8B7500 }
-.content .Agda .Datatype               { color: #0000CD }
+.content .Agda .Datatype               { color: var(--blue); }
 .content .Agda .Field                  { color: #EE1289 }
-.content .Agda .Function               { color: #0000CD }
+.content .Agda .Function               { color: var(--blue); }
 .content .Agda .Module                 { color: #A020F0 }
-.content .Agda .Postulate              { color: #0000CD }
-.content .Agda .Primitive              { color: #0000CD }
-.content .Agda .Record                 { color: #0000CD }
+.content .Agda .Postulate              { color: var(--blue); }
+.content .Agda .Primitive              { color: var(--blue); }
+.content .Agda .Record                 { color: var(--blue); }
 
 /* OtherAspects. */
 .content .Agda .DottedPattern        {}
-.content .Agda .UnsolvedMeta         { color: black; background: yellow         }
-.content .Agda .UnsolvedConstraint   { color: black; background: yellow         }
-.content .Agda .TerminationProblem   { color: black; background: #FFA07A        }
-.content .Agda .IncompletePattern    { color: black; background: #F5DEB3        }
+.content .Agda .UnsolvedMeta         { color: var(--default-text); background: yellow         }
+.content .Agda .UnsolvedConstraint   { color: var(--default-text); background: yellow         }
+.content .Agda .TerminationProblem   { color: var(--default-text); background: #FFA07A        }
+.content .Agda .IncompletePattern    { color: var(--default-text); background: #F5DEB3        }
 .content .Agda .Error                { color: red;   text-decoration: underline }
-.content .Agda .TypeChecks           { color: black; background: #ADD8E6        }
-.content .Agda .Deadcode             { color: black; background: #808080        }
-.content .Agda .ShadowingInTelescope { color: black; background: #808080        }
+.content .Agda .TypeChecks           { color: var(--default-text); background: #ADD8E6        }
+.content .Agda .Deadcode             { color: var(--default-text); background: #808080        }
+.content .Agda .ShadowingInTelescope { color: var(--default-text); background: #808080        }
 
 /* Standard attributes. */
 .Agda a { text-decoration: none }