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
+10 -2
View File
@@ -3,8 +3,6 @@ settings:
theme:
mode: dark
variables:
--pn-accent: "#38bdf8"
# Manual widgets below always take precedence over an auto-discovered one for
# the same container - this is on as a safety net for anything added to
@@ -21,6 +19,7 @@ groups:
- type: docker
name: Traefik
containerName: traefik
icon: traefik
interval: 10s
# No href: the dashboard is disabled (--api.dashboard=false).
# Swap for a `traefik` widget (router/entrypoint/middleware view)
@@ -29,6 +28,7 @@ groups:
- type: docker
name: Coolify
containerName: coolify
icon: coolify
href: https://${TRAEFIK_HOST_COOLIFY}
interval: 10s
@@ -37,12 +37,14 @@ groups:
- type: docker
name: Gitea
containerName: gitea
icon: gitea
href: https://${TRAEFIK_HOST_GITEA}
interval: 10s
- type: docker
name: Gitea Runner
containerName: gitea_runner
icon: gitea
showStats: true
interval: 15s
@@ -57,35 +59,41 @@ groups:
- type: docker
name: Immich
containerName: immich
icon: immich
href: https://${TRAEFIK_HOST_IMMICH}
interval: 10s
- type: docker
name: Immich ML
containerName: immich_ml
icon: immich
interval: 15s
- type: docker
name: n8n
containerName: n8n
icon: n8n
href: https://${TRAEFIK_HOST_N8N}
interval: 10s
- type: docker
name: Passbolt
containerName: passbolt
icon: passbolt
href: https://${TRAEFIK_HOST_PASSBOLT}
interval: 10s
- type: docker
name: Umami
containerName: umami
icon: umami
href: https://${TRAEFIK_HOST_UMAMI}
interval: 10s
- type: docker
name: Headscale
containerName: headscale
icon: headscale
href: https://${TRAEFIK_HOST_HEADSCALE}
interval: 10s