Five control marks — the checkbox tick, the checkbox dash, the radio dot, the switch thumb and the select chevron. None of them is a glyph or a border trick: each is an SVG data URI held in its own custom property, because currentColor and var() do not resolve inside a data URI. That is why re-inking a mark is a property swap, and why data-mark="dark" exists as a ready-made second ink.

Default ink vs data-mark="dark"

checkbox
checkbox, dark
indeterminate
indeterminate, dark
radio
radio, dark
switch
switch, dark
select
select, dark
select, light

Why the second ink ships

Both rows below force --primary to a pale mint. The default white ink measures about 1.15:1 against it — invisible. data-mark="dark" is the whole fix.

white ink on a light --primary
the same, data-mark="dark"

Theming a mark

The engine keeps its own artwork in the use-site fallback rather than declaring it on the control, so setting one of the five properties anywhere above the control — :root, a theme block, or a single element as below — retints it. data-mark still wins over a global default, because an explicit opt-in should. Ink belongs to a color theme, not a shape theme: the stock white mark is sized to a dark --primary, and re-inking it black is only right when the palette makes the fill light. ?shape_theme=brutal deliberately leaves the marks alone.

custom checkbox mark
custom switch thumb