dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-09-26 13:27:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: server theme config actually applies on the client

Browse Source 
- Dark mode: now merges theme + themeDark and applies correctly
- Added missing CSS var mappings: navText, navTextMuted, background, sectionBg, font, mono
- Fixed 'background' key mapping (was 'surface0', never matched)
- Derived vars (content-bg, card-bg) set from server config
- Type colors from server config now applied to TYPE_COLORS global
- syncBadgeColors called after type color override
This commit is contained in:
you
2026-03-23 04:53:57 +00:00
parent cb3ce5e764
commit d3c4fdc6d6
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+25 -10
View File
@@ -513,26 +513,33 @@ window.addEventListener('DOMContentLoaded', () => {
// User's localStorage preferences take priority over server config
const userTheme = (() => { try { return JSON.parse(localStorage.getItem('meshcore-user-theme') || '{}'); } catch { return {}; } })();
// Apply CSS variable overrides from theme.* (server config, skipped if user has local overrides)
if (cfg.theme && !userTheme.theme && !userTheme.themeDark) {
// Apply CSS variable overrides from theme config (skipped if user has local overrides)
if (!userTheme.theme && !userTheme.themeDark) {
const dark = document.documentElement.getAttribute('data-theme') === 'dark' ||
(document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
const themeData = dark ? { ...(cfg.theme || {}), ...(cfg.themeDark || {}) } : (cfg.theme || {});
const root = document.documentElement.style;
const varMap = {
accent: '--accent', accentHover: '--accent-hover',
navBg: '--nav-bg', navBg2: '--nav-bg2',
navBg: '--nav-bg', navBg2: '--nav-bg2', navText: '--nav-text', navTextMuted: '--nav-text-muted',
background: '--surface-0', text: '--text', textMuted: '--text-muted', border: '--border',
statusGreen: '--status-green', statusYellow: '--status-yellow', statusRed: '--status-red',
text: '--text', textMuted: '--text-muted', border: '--border',
surface0: '--surface-0', surface1: '--surface-1', surface2: '--surface-2', surface3: '--surface-3',
surface1: '--surface-1', surface2: '--surface-2', surface3: '--surface-3',
cardBg: '--card-bg', contentBg: '--content-bg', inputBg: '--input-bg',
rowStripe: '--row-stripe', rowHover: '--row-hover', detailBg: '--detail-bg',
selectedBg: '--selected-bg'
selectedBg: '--selected-bg', sectionBg: '--section-bg',
font: '--font', mono: '--mono'
};
for (const [key, cssVar] of Object.entries(varMap)) {
if (cfg.theme[key]) root.setProperty(cssVar, cfg.theme[key]);
if (themeData[key]) root.setProperty(cssVar, themeData[key]);
}
// Also update nav gradient if navBg is customized
if (cfg.theme.navBg) {
// Derived vars
if (themeData.background) root.setProperty('--content-bg', themeData.contentBg || themeData.background);
if (themeData.surface1) root.setProperty('--card-bg', themeData.cardBg || themeData.surface1);
// Nav gradient
if (themeData.navBg) {
const nav = document.querySelector('.top-nav');
if (nav) nav.style.background = `linear-gradient(135deg, ${cfg.theme.navBg} 0%, ${cfg.theme.navBg2 || cfg.theme.navBg} 50%, ${cfg.theme.navBg} 100%)`;
if (nav) nav.style.background = `linear-gradient(135deg, ${themeData.navBg} 0%, ${themeData.navBg2 || themeData.navBg} 50%, ${themeData.navBg} 100%)`;
}
}
@@ -544,6 +551,14 @@ window.addEventListener('DOMContentLoaded', () => {
}
}
// Apply type color overrides (skip if user has local preferences)
if (cfg.typeColors && !userTheme.typeColors) {
for (const [type, color] of Object.entries(cfg.typeColors)) {
if (window.TYPE_COLORS && type in window.TYPE_COLORS) window.TYPE_COLORS[type] = color;
}
if (window.syncBadgeColors) window.syncBadgeColors();
}
// Apply branding (skip if user has local preferences)
if (cfg.branding && !userTheme.branding) {
if (cfg.branding.siteName) {