Update

site/views/css/style.css

@@ -22,8 +22,9 @@
 :root {
     --background: whitesmoke;
     --cell_background: transparent;
-	--cp_color: grey;
+    --text_color: grey;
     --title-color: #333333;
+    --dev-background: red;
 }
 
 body {
@@ -33,11 +34,11 @@ body {
     font-family: osl;
     max-width: 1300px;
     padding: 1rem;
+    color: var(--text_color);
 }
 
 .page-container {
     display: block;
-
 }
 
 .container {
@@ -78,7 +79,7 @@ body {
 
 .copyright img {
     height: 30px;
-	  padding-top: 3px;;
+    padding-top: 3px;
 }
 
 .copyright-text {
@@ -107,7 +108,7 @@ body {
 .in-development {
     height: 70px;
     width: 100%;
-	  background-color: red;
+    background-color: var(--dev-background);
     color: white;
     text-align: center;
     font-size: 50px;
@@ -115,14 +116,26 @@ body {
 }
 
 @media (min-width: 900px) {
-	.containers { grid-template-columns: repeat(2, 1fr); }
+    .containers {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
 @media only screen and (max-device-width: 480px) {
-	.containers { grid-template-columns: repeat(1, 1fr); }
+    .containers {
+        grid-template-columns: repeat(1, 1fr);
+    }
 }
 
-
+@media (prefers-color-scheme: dark) {
+     :root {
+        --background: rgb(34, 34, 34);
+        --cell_background: transparent;
+        --text_color: rgb(252, 252, 252);
+        --title-color: #ebebeb;
+        --dev-background: rgb(0, 89, 255);
+    }
+}
 
 main svg {
     position: relative;