diff --git a/src/style.css b/src/style.css
index 9362d6b2b..bed117d3a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -11,7 +11,40 @@
  *
  * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
  */
+:root {
+  --text: black;
+  --background: #fefbfb;
+  --backgroundLight: #fefbfb;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --text: white;
+    --background: #222020;
+    --backgroundLight: #222020;
+  }
+}
 
+html.theme--light {
+  --text: black;
+  --background: #fefbfb;
+  --backgroundLight: #fefbfb;
+  background-color: #fefbfb;
+}
+html.theme--dark {
+  color-scheme: dark;
+  background-color: #000000;
+  --text: white;
+  --background: #000000;
+  --backgroundLight: #000000;
+}
+html.theme--dim {
+  color-scheme: dark;
+  background-color: #222020;
+  --text: white;
+  --background: #222020;
+  --backgroundLight: #222020;
+}
 /* Buttons and inputs have a font set by UA, so we'll have to reset that */
 button,
 input,
@@ -75,11 +108,11 @@ a[role='link'][data-no-underline='1']:hover {
   pointer-events: none;
 }
 .ProseMirror .mention {
-  color: #ED5345;
+  color: #ed5345;
 }
 .ProseMirror a,
 .ProseMirror .autolink {
-  color: #ED5345;
+  color: #ed5345;
 }
 /* OLLIE: TODO -- this is not accessible */
 /* Remove focus state on inputs */