diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index d271e8d..f3bc717 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -23,8 +23,13 @@
 }
 
 :root {
+  color-scheme: light dark;
+  --body-background-color: light-dark(#FFFAED, black);
+  --body-color: light-dark(black, lightgray);
   --kufi-family: "Raqq", serif;
-  --kufi-color: #DFDFDF;
+  --kufi-color: light-dark(black, #DFDFDF);
+  --download-background-color: light-dark(black, #F4F4F4);
+  --download-color: light-dark(#FFFAED, #676767);
   --main-family: "Amiri", serif;
   --heading-family: "Reem Kufi", sans-serif;
   --h1-font-size: 40px;
@@ -37,8 +42,10 @@
   --h1-font-size: 1.5em;
 }
 
-body * {
-  font-palette: dark;
+@media (prefers-color-scheme: dark) {
+  body * {
+    font-palette: dark;
+  }
 }
 
 body {
@@ -46,8 +53,8 @@ body {
   font-size: 14pt;
   font-weight: 400;
   font-variant-numeric: proportional-nums;
-  background-color: black;
-  color: lightgray;
+  background-color: var(--body-background-color);
+  color: var(--body-color);
   max-width: 1240px;
   padding: 0 15px;
   margin: 50px auto;
@@ -171,7 +178,7 @@ footer p {
 }
 
 .downloads {
-  background: #f4f4f4;
+  background: var(--download-background-color);
   border-radius: 35px;
   border: 1px solid #e0e0e0;
 }
@@ -179,7 +186,7 @@ footer p {
 .downloads a {
   line-height: 200%;
   font-size: 120%;
-  color: #676767;
+  color: var(--download-color);
   text-align: center;
 }