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;
 }

js/bg.js

@@ -8,6 +8,19 @@ function resize() {
     canvas.height = window.innerHeight;
 }
 
+var dark_theme = false;
+
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    dark_theme = true;
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    dark_theme = event.matches;
+    gradientsArray.forEach((gradient) => {
+        gradient.color = getRandomColor();
+    });
+});
+
 let particlesArray = [];
 
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max)
@@ -53,7 +66,7 @@ class Particle {
     }
 
     draw() {
-        ctx.fillStyle = '#bbb';
+        ctx.fillStyle = dark_theme ? "#333" : '#bbb';
         ctx.save();
         ctx.translate(this.x, this.y);
         if (this.shape === 'circle') {
@@ -139,7 +152,12 @@ class Gradient {
     draw() {
         const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
         gradient.addColorStop(0, this.color);
-        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+        if (dark_theme) {
+            gradient.addColorStop(1, `rgba(0, 0, 0, 0)`);
+        }
+        else {
+            gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+        }
 
         ctx.globalAlpha = this.alpha;
         ctx.fillStyle = gradient;
@@ -154,10 +172,18 @@ class Gradient {
 let gradientsArray = [];
 
 function getRandomColor() {
-    const r = Math.floor((Math.random() * 100) + 155);
-    const g = Math.floor((Math.random() * 100) + 155);
-    const b = Math.floor((Math.random() * 100) + 155);
-    return `rgb(${r}, ${g}, ${b})`;
+    if (dark_theme) {
+        const r = Math.floor((Math.random() * 255) - 100);
+        const b = Math.floor((Math.random() * 255) - 100);
+        const g = Math.floor((Math.random() * 255) - 100);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    else {
+        const r = Math.floor((Math.random() * 100) + 155);
+        const g = Math.floor((Math.random() * 100) + 155);
+        const b = Math.floor((Math.random() * 100) + 155);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
 }
 
 function init() {