From afd1a7d7fda36af47c520eb3f3ee8c6f6e49d412 Mon Sep 17 00:00:00 2001
From: Himadri Bhattacharjee <107522312+lavafroth@users.noreply.github.com>
Date: Mon, 8 Sep 2025 11:16:54 +0530
Subject: [PATCH] fix: theme switcher is gone

---
 content/post/project-mana-demo.md |  2 --
 content/post/project_mana.html    | 18 +++++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/content/post/project-mana-demo.md b/content/post/project-mana-demo.md
index 3f31f514..0b3644cc 100644
--- a/content/post/project-mana-demo.md
+++ b/content/post/project-mana-demo.md
@@ -21,5 +21,3 @@ Frames for the outline animation will be recomputed on the fly! The hardcoded du
 is 5 seconds in this example.
 
 {{< rawhtml "content/post/project_mana.html" >}}
-
-Try toggling the theme switcher: the sun or moon icon up in the header.
diff --git a/content/post/project_mana.html b/content/post/project_mana.html
index 1230bd23..79015a12 100644
--- a/content/post/project_mana.html
+++ b/content/post/project_mana.html
@@ -111,10 +111,10 @@ void main() {
 import * as THREE from 'three';
 import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
-let dark = true
-var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
-var width = document.querySelector('#stage').offsetWidth;
-var height = Math.round(9/16 * width);
+const dark = window.matchMedia("(prefers-color-scheme: dark)");
+let renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+let width = document.querySelector('#stage').offsetWidth;
+let height = Math.round(9/16 * width);
 renderer.setSize(width, height);
 document.querySelector('#stage').appendChild(renderer.domElement);
 
@@ -128,15 +128,15 @@ const maskScene = new THREE.Scene();
 const evolveScene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
 const color = 0xFFFFFF;
-var ambientLight = new THREE.AmbientLight(color, dark ? 1: 10);
+let ambientLight = new THREE.AmbientLight(color, dark ? 1: 10);
 solidScene.add(ambientLight);
-var light = new THREE.PointLight(color, 200);
+let light = new THREE.PointLight(color, 200);
 light.position.set(10, 10, 15);
 solidScene.add(light);
 camera.position.set(6,8,14);
 
-var buffer = new THREE.WebGLRenderTarget(width, height, {format: THREE.RGBAFormat})
-var outlineBuffer = new THREE.WebGLRenderTarget(width, height, {format: THREE.RGBAFormat})
+let buffer = new THREE.WebGLRenderTarget(width, height, {format: THREE.RGBAFormat})
+let outlineBuffer = new THREE.WebGLRenderTarget(width, height, {format: THREE.RGBAFormat})
 
 const orbit = new OrbitControls(camera, renderer.domElement);
 orbit.update();
@@ -157,7 +157,7 @@ const material = new THREE.ShaderMaterial({
     transparent: true,
 });
 
-var solidMeshMaterial = new THREE.MeshPhysicalMaterial({
+let solidMeshMaterial = new THREE.MeshPhysicalMaterial({
     color: dark ? 0xaaeadb : 0xffffff,
     metalness: 0.8,
     clearcoat: 0.4,