diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 76e735e..d6c07c7 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -33,8 +33,14 @@
 }
 
 :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);
+  --button-background-color: light-dark(#D9D9D9, #D9D9D9);
   --title-family: "Qahiri", serif;
   --main-family: "Amiri", serif;
   --heading-family: "Reem Kufi", sans-serif;
@@ -48,8 +54,10 @@
   --h1-font-size: 1.5em;
 }
 
-body * {
-  font-palette: dark;
+@media (prefers-color-scheme: dark) {
+    body * {
+      font-palette: dark;
+    }
 }
 
 body {
@@ -57,8 +65,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;
@@ -138,11 +146,17 @@ img {
 img.button,
 img.زر {
   max-width: revert;
-  background-color: #D9D9D9;
+  background-color: var(--button-background-color);
   border: none;
   padding: 6px 8px;
   vertical-align: text-bottom;
-  filter: invert(1);
+}
+
+@media (prefers-color-scheme: dark) {
+    img.button,
+    img.زر {
+        filter: invert(0);
+    }
 }
 
 #sitedesigner {
@@ -191,7 +205,7 @@ footer p {
 }
 
 .downloads {
-  background: #f4f4f4;
+  background: var(--download-background-color);
   border-radius: 35px;
   border: 1px solid #e0e0e0;
 }
@@ -199,7 +213,7 @@ footer p {
 .downloads a {
   line-height: 200%;
   font-size: 120%;
-  color: #676767;
+  color: var(--download-color);
   text-align: center;
 }