- entrypoint copies example config to /app/data/config.json on first run
- symlinks /app/config.json → /app/data/config.json so app code unchanged
- theme.json also symlinked from /app/data/ if present
- config persists across container rebuilds without extra bind mounts
- updated README with new config/theme instructions
- Import File button opens file picker for .json theme files
- Merges imported theme into current state, applies live preview
- Also syncs ROLE_COLORS/TYPE_COLORS globals on import
- Moved Copy/Download buttons out of collapsed details
- Raw JSON textarea now editable (was readonly)
- Server reads from theme.json (separate from config.json), hot-loads on every request
- POST /api/config/theme writes theme.json directly — no manual file editing
- GET /api/config/theme now merges: defaults → config.json → theme.json
- Also returns themeDark and typeColors (were missing from API)
- Customizer: replaced 'merge into config.json' instructions with Save/Load Server buttons
- JSON export moved to collapsible details section
- theme.json added to .gitignore (instance-specific)
CSS changes:
- style.css: .live-dot.connected, .hop-global-fallback, .perf-slow, .perf-warn
now use var(--status-green/red/yellow) instead of hardcoded hex
- live.css: live recording dot uses var(--status-red), LCD text uses var(--status-green)
JS changes (analytics.js):
- Added cssVar/statusGreen/statusYellow/statusRed/accentColor/snrColor helpers
that read from CSS custom properties with hardcoded fallbacks
- Replaced ~20 hardcoded status colors in: SNR histograms, quality zones,
zone borders/patterns, SNR timeline, daily SNR bars, collision badges
(Local/Regional/Distant), distance classification, subpath map markers,
hop distance distribution, network status cards, self-loop bars
JS changes (live.js):
- Added statusGreen helper for LCD clock color
- Legend dots now read from TYPE_COLORS global instead of hardcoded hex
All colors now respond to theme customization via the customize panel.
app.js was fetching /api/config/theme and overwriting ROLE_COLORS,
ROLE_STYLE, branding AFTER customize.js had already restored them
from localStorage. Now skips server overrides for any section
where user has local preferences.
Also added branding restore from localStorage on DOMContentLoaded.
Added --nav-text and --nav-text-muted CSS variables. All nav
selectors (.top-nav, .nav-brand, .nav-link, .nav-btn, .nav-stats)
use these instead of --text/--text-muted. Nav Text is in Basic
settings. Nav Muted Text in Advanced.
This is separate from page text because nav sits on a dark
background — page text color would be unreadable on the nav.
customize.js was loading last — saved colors restored AFTER the
map already created markers with default colors. Now loads right
after roles.js, before app.js. ROLE_STYLE colors are updated
before any page renders.
- Move --status-green/yellow/red from home.css to style.css :root (light+dark)
- Replace hardcoded status colors in style.css (.tl-snr, .health-dot, .byop-err,
.badge-hash-*, .fav-star.on, .spark-fill) with CSS variable references
- Replace hardcoded colors in live.css (VCR mode, stat pills, fdc-link, playhead)
- Replace --primary/--bg-secondary/--text-primary/--text-secondary dead vars with
canonical --accent/--input-bg/--text/--text-muted in style.css, map.js, live.js,
traces.js, packets.js
- Fix nodes.js legend colors to use ROLE_COLORS globals instead of hardcoded hex
- Replace hardcoded hex in home.js (SNR), perf.js (indicators), map.js (accuracy
circles) with CSS variable references via getComputedStyle or var()
- Add --detail-bg to customizer (THEME_CSS_MAP, DEFAULTS, ADVANCED_KEYS, labels)
- Move font/mono out of ADVANCED_KEYS into separate Fonts section in customizer
- Remove debug console.log lines from customize.js
- Bump cache busters in index.html
customize.js loads after roles.js but before app.js triggers
navigate(). Restoring colors in the IIFE body (not DOMContentLoaded)
ensures ROLE_STYLE/ROLE_COLORS/TYPE_COLORS are updated BEFORE
the map or any page creates markers.
Changed nav brand, links, buttons from hardcoded #fff/#cbd5e1 to
var(--text) and var(--text-muted). Setting primary text color
now changes nav text too. Removed unnecessary --nav-text variable.
State now loads: DEFAULTS → server config → localStorage.
Admin saves locally, comes back later, opens customizer —
sees their saved values, export includes everything.
Every color pick, text edit, step change auto-saves (debounced
500ms). No manual save needed. Also fixed syncBadgeColors on
restore and removed stray closing brace.
Textareas use var(--input-bg) and var(--text) instead of white.
Markdown syntax hint shown below each textarea:
**bold** *italic* `code` [text](url) - list
Added miniMarkdown() — simple markdown→HTML (bold, italic, code,
links, lists, line breaks). Home page description/answer fields
render markdown. Customizer uses textareas with markdown hint
for description and answer fields.
Steps/checklist/links were cramming 3+ inputs in one row,
truncating content. Now emoji+title+buttons on row 1,
description on row 2. All content visible.
Badge colors were hardcoded in style.css with different values
than TYPE_COLORS, causing mismatch between customizer and actual
display. Removed all .badge-advert/.badge-grp-txt/etc color rules.
syncBadgeColors() in roles.js now generates them from TYPE_COLORS
on every page load.
Badge CSS (.badge-advert etc.) was hardcoded in style.css with
different colors than TYPE_COLORS. Now roles.js generates badge
CSS from TYPE_COLORS on page load via syncBadgeColors(). Customizer
calls syncBadgeColors() after changes. Badges always match the
color pickers and TYPE_COLORS, in both light and dark mode.
Badge classes (.badge-advert etc.) use hardcoded CSS colors.
Now injects a <style> element with color overrides derived from
TYPE_COLORS on every theme preview update.
--content-bg and --card-bg reference --surface-0/--surface-1 via
var() which doesn't live-update when source changes via JS. Now
explicitly sets the derived vars alongside the source.
theme-changed now dispatches theme-refresh event instead of
full navigate(). Map re-renders markers, packets re-renders
table rows. No teardown/rebuild, no flash.
Color changes dispatch theme-changed event → app.js re-navigates
to current page, rebuilding markers/rows with new colors.
Conflict badges (.hop-ambiguous, .hop-conflict-btn) now use
var(--status-yellow) so they follow the customized status color.
Added global window.TYPE_COLORS in roles.js. Live.js and audio-lab.js
now reference the global. Customizer shows packet type colors with
emoji + descriptions. Changes sync to TYPE_COLORS in real-time.
Saved/restored via localStorage alongside node colors.
Changing node colors in the customizer now updates both ROLE_COLORS
(used for badges, labels) and ROLE_STYLE (used for map markers).
Also fixed localStorage restore to sync both objects.
- Nav bar now uses CSS variables (was hardcoded gradient)
- 19 customizable colors: accent, text, backgrounds, borders,
surfaces, inputs, stripes, hover, selected, status indicators
- Light and dark mode have separate color sets
- Theme tab shows which mode you are editing
- Toggle ☀️/🌙 in nav bar to switch modes and edit the other set
- Export includes both theme and themeDark sections
- localStorage save/restore handles both modes
Export tab now has two sections:
- "My Preferences" — save colors to browser localStorage, auto-applied
on every page load. Personal to you, no server changes.
- "Admin Export" — download config.json for server deployment,
applies to all users.
User theme auto-loads on DOMContentLoaded, overriding CSS variables
and node colors from localStorage.
Click 🎨 in nav to toggle a floating panel. Stays open as you
navigate between pages — tweak colors, check packets, tweak more.
Draggable by header. Close with ✕. Preview persists everywhere.
Each color picker now has a description underneath:
- Accent: 'Active nav tab, buttons, links, selected rows, badges'
- Status Green: 'Healthy nodes, online indicators, good SNR'
- Repeater: 'Infrastructure nodes — map markers, packet path badges'
etc.
Preview was reverting on destroy (page leave). Now CSS variable
overrides stay active until explicit reset, so you can navigate
to packets/map/etc and see your color changes.
New page at #/customize with 5 tabs:
- Branding: site name, tagline, logo/favicon URLs
- Theme Colors: color pickers for all CSS variables with live preview
- Node Colors: per-role color pickers with dot previews
- Home Page: editable hero, steps, checklist, footer links
- Export: JSON diff output, copy/download buttons
Only exports values that differ from defaults. Self-contained CSS.
Mobile responsive, dark mode compatible.
Add GET /api/config/theme endpoint serving branding, theme colors,
node colors, and home page content from config.json with sensible
defaults so unconfigured instances look identical to before.
Client-side (app.js):
- Fetch theme config on page load, before first render
- Override CSS variables from theme.* on document root
- Override ROLE_COLORS/ROLE_STYLE from nodeColors.*
- Replace nav brand text, logo, favicon from branding.*
- Store config in window.SITE_CONFIG for other pages
Home page (home.js):
- Hero title/subtitle from config.home
- Steps and checklist from config.home
- Footer links from config.home.footerLinks
- Chooser welcome text uses configured siteName
Config example updated with all available theme options.
No default appearance changes — all overrides are optional.
you