feat: brand icons for widgets, fix stale accent color
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:
+10
-2
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user