From 569b7cd27bf514ff56ff090ce324d8a2ba8c5441 Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Sat, 4 Jan 2025 19:13:47 -0800
Subject: [PATCH] Automatic dark theme

---
 css/colormaticstudios.css |  3 ++-
 css/style.css             | 15 +++++++++++++--
 js/bg.js                  | 38 ++++++++++++++++++++++++++++++++------
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css
index 81c43b3..eae327f 100644
--- a/css/colormaticstudios.css
+++ b/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;
diff --git a/css/style.css b/css/style.css
index b8ef494..06ed9b9 100644
--- a/css/style.css
+++ b/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;
 }
diff --git a/js/bg.js b/js/bg.js
index dcea6f0..69ba922 100644
--- a/js/bg.js
+++ b/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() {