Automatic dark theme

css/colormaticstudios.css

@@ -42,7 +42,7 @@ div.project-grid-container {
 }
 
 div.project-grid-container div.project-grid-box {
-flex: 1;
+  flex: 1;
   color: #383c3f;
   margin: 16px;
   border: solid 1px #00000033;
@@ -50,6 +50,7 @@ flex: 1;
   box-shadow: 1px 1px 8px #00000033;
   padding: 16px;
   text-align: center;
+  color: var(--text-color);
   min-width: 40%;
   max-width: 50%;
   background-color: #ffffff22;

css/style.css

@@ -2,6 +2,15 @@
   --text-color: #383c3f;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: white;
+  }
+  body {
+    background-color: black;
+  }
+}
+
 body {
   font-family: "Noto Sans", sans-serif;
   margin: 0;
@@ -19,7 +28,8 @@ nav {
   grid-template-columns: 1fr min-content 1fr;
   align-items: center;
   padding: 12px;
-  border-bottom: solid 1px #00000033;
+  /* border-bottom: solid 1px #00000033; */
+  border-bottom: solid 1px var(--text-color);
   z-index: 1;
 
   margin: 0 auto;
@@ -247,7 +257,8 @@ ul.videolist li a span {
 }
 
 div.footer {
-  border-top: solid 1px #00000033;
+  /* border-top: solid 1px #00000033; */
+  border-top: solid 1px var(--text-color);
   width: 95%;
   margin: 0 auto;
 }