How do I override the --accent color in dieter/ds for a specific section of my app — like a sports dashboard that should use green instead of the default orange?
You have two options, depending on scope.
1 · scoped override. Apply a class on :root or any ancestor element, then redefine --accent inside that class. This is the recommended pattern — it lets you mix accents per area without touching the system files 1.
/* in your page or app stylesheet */ :root.theme-pitch { --accent: var(--green); --on-accent: var(--ink); }
Every component that reads var(--accent) — buttons, active tabs, badge--new, jersey, primary CTA — flips automatically 2. The default --on-accent falls back to --invert-fg; if your accent is a mid-tone (like green), set --on-accent: var(--ink) for better text contrast.
2 · global override. Set it directly on :root if the whole app uses the new accent. Same one-line override, no theme class needed 3.
For the night theme variant, the override stacks: :root.theme-night.theme-pitch will compose night-mode surfaces with green accent 4.
Avoid editing system.css directly. The discipline is: theming = swap tokens on :root. Never edit component CSS to "tweak" — change the token instead.
And if I want the accent green to also drive the LED dot pulse — does that need a separate override?
No — the LED component reads var(--accent) for both its base color and the breathing animation glow, so the override cascades automatically 1. The keyframe led-breath uses color-mix(in srgb, var(--accent) 70%, transparent) for the box-shadow, which stays in sync with whatever accent is active in the current scope.