OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-05 21:41:08 -04:00
parent 5c1f7f43ce
commit cebad6e143
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
theme/assets/js/dashboard-animator.js
View File

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

6
theme/assets/js/main.js
View File

@@ -179,7 +179,11 @@ document.addEventListener('DOMContentLoaded', () => {
* 4. Visibility API + IntersectionObserver pause rAF when hidden/off-screen. * 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_TOP = '#020509';
const ROOM_BOT = '#030b08'; const ROOM_BOT = '#030b08';
const RACK_SHELL = '#111b2e'; /* outer frame -- dark navy */ const RACK_SHELL = '#111b2e'; /* outer frame -- dark navy */