feat: Update color palette logic to use CSS custom properties for theme consistency

theme/assets/js/dashboard-animator.js

@@ -13,11 +13,17 @@
   var LINE_W   = 340;    // line graph width in SVG units
   var PIE_R    = 55;     // pie chart radius
 
-  var DARK  = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#1A1A1A' };
-  var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' };
-
-  function isDark() { return document.documentElement.getAttribute('data-theme') === 'dark'; }
-  function pal()    { return isDark() ? DARK : LIGHT; }
+  /* Resolve colors from CSS custom properties so the animator always reflects
+   * the active theme (including any admin-customised palette values). */
+  function pal() {
+    var s = getComputedStyle(document.documentElement);
+    return {
+      text:   s.getPropertyValue('--color-text').trim(),
+      muted:  s.getPropertyValue('--color-text-muted').trim(),
+      border: s.getPropertyValue('--color-border').trim(),
+      center: s.getPropertyValue('--color-bg').trim()
+    };
+  }
 
   function wave(t, off) {
     return Math.max(0, Math.min(1,

theme/assets/js/main.js

@@ -179,7 +179,11 @@ document.addEventListener('DOMContentLoaded', () => {
    *   4. Visibility API + IntersectionObserver pause rAF when hidden/off-screen.
    */
 
-  /* -- colour palette -------------------------------------------------------- */
+  /* -- colour palette --------------------------------------------------------
+   * These values are intentionally hardcoded dark colours. The datacenter
+   * hero is designed to always depict a physical dark server room and does
+   * NOT adapt to the site's light / dark theme toggle.
+   * ---------------------------------------------------------------------- */
   const ROOM_TOP    = '#020509';
   const ROOM_BOT    = '#030b08';
   const RACK_SHELL  = '#111b2e';   /* outer frame -- dark navy              */