Index: src/assets/js/ward-sky.js
===================================================================
--- src/assets/js/ward-sky.js	(revision 5412cbbcf42cb02fb3fb6d67ef433290c95bb38c)
+++ src/assets/js/ward-sky.js	(revision 39dab6b0c3b5fd70bb2f06743430f0014384b3b7)
@@ -99,5 +99,5 @@
 
 /** Eén canvas met alle avatars naast elkaar, zodat tekenen één drawImage is. */
-async function buildAtlas(faces) {
+async function buildAtlas(faces, accent) {
   const size = FACE * 2;                       // retina-scherp
   const cols = Math.max(1, Math.ceil(Math.sqrt(faces.length || 1)));
@@ -120,5 +120,5 @@
       g.save();
       g.beginPath(); g.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2); g.clip();
-      g.fillStyle = '#5a32e6'; g.fillRect(x, y, size, size);
+      g.fillStyle = accent || '#5a32e6'; g.fillRect(x, y, size, size);
       g.fillStyle = '#fff';
       g.font = `600 ${size * 0.45}px system-ui, sans-serif`;
@@ -176,6 +176,16 @@
     this.faces = faces;
     this.spots = orbitPlacement(faces.map((f) => f.ageMs));
-    this.atlas = await buildAtlas(faces);
+    this.atlas = await buildAtlas(faces, this._accent());
     this._resize();
+  }
+
+  /** De themakleur uit de CSS-variabele, voor de placeholder-schijfjes. */
+  _accent() {
+    return getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#5a32e6';
+  }
+
+  /** Het thema veranderde: de letters-op-schijf opnieuw in het nieuwe accent. */
+  async reskin() {
+    if (this.faces.length) this.atlas = await buildAtlas(this.faces, this._accent());
   }