diff --git a/app/static/css/style.css b/app/static/css/style.css
index 0a3d5b678..1abe30ea0 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -18,6 +18,7 @@
 
   --brand-sand-light: hsl(var(--brand-hue-yellow), 59%, 92%);
   --brand-creme-light: hsl(var(--brand-hue-yellow), 60%, 97%);
+  --brand-background-dark: hsl(var(--brand-hue-yellow), 16%, 11%);
 
   --brand-orange-light: hsl(var(--brand-hue-orange), 100%, 80%);
   --brand-orange-dark: hsl(var(--brand-hue-orange), 50%, 50%);
@@ -54,6 +55,12 @@ body {
   background: var(--brand-creme-light);
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background: var(--brand-background-dark);
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;