1de80a9eaf
## Summary Part of #669 — M2: Link the builder from the app. - **`public/geofilter-builder.html`** — the existing `tools/geofilter-builder.html` is now served by the static file server at `/geofilter-builder.html`. Additions vs the original: a `← CoreScope` back-link in the header, inline code comments explaining the output format, and a help bar below the output panel with paste instructions and a link to the documentation. - **`public/customize-v2.js`** — adds a "Tools" section at the bottom of the Export tab with a `🗺️ GeoFilter Builder →` link and a one-line description. - **`docs/user-guide/customization.md`** — documents the new GeoFilter Builder entry in the Export tab. > **Note:** `tools/geofilter-builder.html` is kept as-is for local/offline use. The `public/` copy is what the server serves. > **Depends on:** #734 (M1 docs) for `docs/user-guide/geofilter.md` — the link in the help bar references that file. Can be merged independently; the link still works once M1 lands. ## Test plan - [x] Open the app, go to Customizer → Export tab — "Tools" section appears with GeoFilter Builder link - [x] Click the link — opens `/geofilter-builder.html` in a new tab - [x] Builder loads the Leaflet map, draw 3+ points — JSON output appears - [x] Copy button works, output is valid `{ "geo_filter": { ... } }` JSON - [x] `← CoreScope` back-link navigates to `/` - [x] Help bar shows paste instructions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
3.0 KiB
Customization
CoreScope includes a built-in theme customizer. Access it from Tools → Customization in the navigation menu.
[Screenshot: theme customizer panel with color pickers]
What you can customize
Branding
- Site name — displayed in the nav bar and browser tab
- Tagline — shown on the home page
- Logo URL — replace the default logo
- Favicon URL — custom browser tab icon
Theme colors (Light & Dark)
Every color in the UI is customizable:
- Accent — primary color for links, buttons, highlights
- Navigation — nav bar background, text, and muted text colors
- Background — page background and content area
- Surfaces — cards, panels, input fields, detail panes
- Status — green (healthy), yellow (degraded), red (silent)
- Text — primary text, muted text, borders
- Tables — row stripe, hover, and selected row colors
Both light and dark themes are independently configurable.
Node colors
Set the color for each role: repeater, companion, room, sensor, observer. These colors appear on the map, in node badges, and throughout the UI.
Packet type colors
Customize the color for each packet type: Advert, Channel Msg, Direct Msg, ACK, Request, Response, Trace, Path.
Home page
Customize the onboarding experience:
- Hero title and subtitle
- Getting-started steps (emoji, title, description for each)
- FAQ items
- Footer links
Timestamps
- Display mode — relative ("5 min ago") or absolute
- Timezone — local or UTC
- Format preset — ISO or other presets
Live preview
Changes apply instantly as you edit. You see the result in real time without saving.
Exporting a theme
Click Export JSON to download your customizations as a JSON file. This produces a config-compatible block you can paste into your config.json.
Importing a theme
Click Import JSON and paste a previously exported theme. The customizer loads all values and applies them immediately.
Resetting
Click Reset to Defaults to restore all settings to the built-in defaults.
GeoFilter Builder
The Export tab includes a GeoFilter Builder → link. Click it to open a Leaflet map where you can draw a polygon boundary for your deployment area. The tool generates a geo_filter block you can paste directly into config.json.
See Geographic Filtering for full details on what geo filtering does and how to configure it.
How it works
The customizer writes CSS custom properties (variables) to override the defaults. Exported JSON maps directly to the theme, nodeColors, branding, and home sections of config.json.