STUDIO DREWSKIIOne hue, two jobs
An accent color does two jobs: it fills buttons and it colors links and highlights. On light backgrounds the filled version needs a dark text on top; on dark backgrounds the same fill needs light text. Choose the hue so both readings work, then set per-theme text colors instead of fighting the hue.
The per-theme pattern: accent stays identical, accent-text (the readable variant for links) shifts darker in light mode and lighter in dark mode. One hue, two derived colors.
The contrast floor
Run the math before you fall in love. Text on the accent fill needs 4.5:1 for normal size, and accent-text on the page background needs 4.5:1 too. Orange like #E87040 clears both with a near-black fill text and a darkened link variant.
Do not eyeball it. A two-line contrast function in a console beats a week of squinting.
Ring and glow variants
Accent needs a ring (border/focus, 0.3–0.4 alpha) and a glow (text-shadow on highlights, 0.25 light / 0.5 dark). Those alphas live in the theme, not the component.
The test: focus state, hover state, and selected state must all stay distinguishable in both themes without the hue changing.