feat: brand icons for widgets, fix stale accent color
CI / Static checks (push) Successful in 34s
CI / Build and push image (push) Skipped

Two separate issues, both real bugs:

- Dark mode was showing light blue instead of green: config.yml still
  had a leftover --pn-accent: #38bdf8 override from before the design
  redesign, which won via the runtime theme injector regardless of
  what app/globals.css defaulted to. Removed the override and pushed
  the dark-mode default from a soft mint (#5ee08c) to an actual neon
  green (#39ff88) - closer to what "neon" means and closer to the real
  phosphor-green a cardiac monitor trace uses, which fits the pulse
  metaphor better than the pastel version did.

- No per-service brand icons anywhere. Added an optional `icon` field
  to docker/bookmark widgets (a key into lib/brand-icons.ts) rather
  than guessing from containerName, since a heuristic would silently
  misfire for anyone's own container naming. database widgets derive
  their icon automatically from `engine` (postgres/redis) since that's
  already required and unambiguous. Icon path data comes from the CC0
  simple-icons package via scripts/extract-brand-icons.py, extracted
  and committed as plain TS data (lib/brand-icons.ts) rather than
  imported live - keeps it self-hosted (no unpkg.com/CDN calls at
  runtime, matching the fonts) and pinned regardless of dependency
  updates. Rendered monochrome (currentColor, not each brand's own
  hex) to stay consistent with the single-accent design rather than a
  dozen competing colors - only the shape carries the identity.

Wired real icons into config.yml for every service that has one:
traefik, coolify, gitea (+ gitea_runner), immich (+ immich_ml), n8n,
passbolt, umami, headscale, plus postgresql/redis on every database
widget. code and mailpit have no brand match in the curated set, so
they render without one rather than a wrong/generic substitute.

Verified in the actual rendered page: compiled CSS confirms
--pn-accent is #39ff88 (dark) / #339a5a (light) with no trace of the
old #38bdf8, and all 18 expected icon instances (10 docker + 8
database widgets) are present.
This commit is contained in:
2026-08-17 17:55:27 +02:00
parent db1b933c33
commit 4308169608
12 changed files with 152 additions and 23 deletions
+12 -4
View File
@@ -54,8 +54,8 @@ settings:
theme:
mode: dark # dark | light | auto
variables:
--pn-accent: "#38bdf8"
# variables: # override any --pn-* token from app/globals.css
# --pn-accent: "#ff6b6b"
# customCssPath: custom.css # relative to config/, served at /api/theme/custom-css
discovery:
@@ -87,9 +87,9 @@ reload; never exposed to the client. See `config/.env.example`.
| `type` | Required fields | Notes |
|------------|-------------------------------------|-------|
| `bookmark` | `name`, `href` | Static link card. Optional `description`. |
| `bookmark` | `name`, `href` | Static link card. Optional `description`, `icon` (see below). |
| `search` | - | Client-side search box. Optional `engines` (`duckduckgo`/`google`/`bing`, default `[duckduckgo]`), `defaultEngine`. |
| `docker` | `name`, `containerName` | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `showStats` (default `true`), `interval` (default `5s`). |
| `docker` | `name`, `containerName` | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `icon` (see below), `showStats` (default `true`), `interval` (default `5s`). |
| `database` | `name`, `containerName`, `engine` | Thin skin over the same Docker collector - `engine` is `postgres` or `redis`, used for icon/label only. `interval` default `10s`. |
| `system` | - | Host CPU/mem/disk/network via `systeminformation`. Optional `name` (default `System`), `interval` (default `5s`). |
| `http` | `name`, `url` | HTTP health check with latency and consecutive-failure tracking. Optional `method` (default `GET`), `timeout` (default `5s`), `interval` (default `30s`), `expect.status` (default `200`). |
@@ -97,6 +97,14 @@ reload; never exposed to the client. See `config/.env.example`.
`interval`/`timeout` values are duration strings: `500ms`, `5s`, `1m`, `1h`.
`icon` on `docker`/`bookmark` widgets is a key into `lib/brand-icons.ts` (currently
`traefik`, `coolify`, `gitea`, `docker`, `immich`, `n8n`, `passbolt`, `umami`,
`postgresql`, `redis`, `headscale`), rendered monochrome so it doesn't compete
with the accent color. `database` widgets pick their icon automatically from
`engine`. Regenerate/extend the icon set with `python3 scripts/extract-brand-icons.py`
after adding an entry to that script's `ICONS` map (path data comes from the
CC0-licensed `simple-icons` package, bundled at build time - no runtime CDN calls).
### Auto-discovery
With `discovery.docker.enabled: true`, PulseNode scans running containers