diff --git a/theme/assets/js/dashboard-animator.js b/theme/assets/js/dashboard-animator.js index cf2ea60..f8f07a4 100644 --- a/theme/assets/js/dashboard-animator.js +++ b/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, diff --git a/theme/assets/js/main.js b/theme/assets/js/main.js index 80f324f..ad07b99 100644 --- a/theme/assets/js/main.js +++ b/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 */