diff --git a/public/css/index.css b/public/css/index.css
index 1e76d16..1228f99 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -33,6 +33,8 @@
   --background-color:  #212529;
   --background-color-alt:  #343a40;
 	--text-color: #e9ecef;
+  --background-btn: rgba(255 255 255 / 10%);
+  --hover: rgba(255 255 255 / 30%);
 	
 	--font-family: Inter,
       -apple-system,
@@ -53,6 +55,16 @@
     sans-serif;
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    --background-color:  #f8f9fa;
+    --background-color-alt: #e9ecef;
+    --text-color: #212529;
+    --background-btn: rgba(0 0 0 / 5%);
+    --hover: rgba(0 0 0 / 10%);
+  }
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -117,7 +129,7 @@ nav a, a.btn {
 }
 
 nav, .btn {
-  background-color: rgba(255 255 255 / 10%);
+  background-color: var(--background-btn);
 }
 
 a {
@@ -128,7 +140,7 @@ a {
 }
 
 a:hover {
-  background-color: rgba(255 255 255 / 30%);
+  background-color: var(--hover);
 }
 
 .header-anchor {