demo · v131
dark-mode reskin from one variable
A single color declaration on the wrapper drives every sub-element: borders, pill backgrounds, dividers, and a tinted card surface — all expressed as oklch(from currentcolor ...). Flip the theme and every part recalculates correctly. Before currentcolor in RCS this required a CSS variable per derived shade.
derived border, divider, pill
Every shade on this card is computed from currentcolor. Switch the theme and the whole palette recomputes — including this card's left rail, pill bg, and divider.
tip live v131
tinted surface
The faint card background is oklch(from currentcolor l c h / 0.06) — 6% alpha of the current text color. Always contrasts because it's derived, not picked.
the api
.theme-dark { color: #d6e0ff; }
.card {
/* border = current color at 40% alpha */
border: 1px solid oklch(from currentcolor l c h / 0.4);
/* tinted bg = current color at 6% alpha */
background: oklch(from currentcolor l c h / 0.06);
/* accent rail = current color shifted lighter */
border-left: 4px solid oklch(from currentcolor calc(l + 0.1) c h);
}