Theme

Accessibility

Light and dark appearances must meet contrast requirements for text, icons, and focus rings. Check both :where(:root) and [data-theme='dark'] when a surface uses custom color.

createAppearancePreference does not disable motion. Reduced motion is prefers-reduced-motion and data-motion="reduced" on the document element. Appearance changes still apply; they do not animate in those cases.

Do not communicate state with color alone. Status text uses the --color-status-* foreground tokens, and focus uses --color-border-focus or the accent ring.

Theme / API and Development

Time / Usage

Theme

Accessibility

Light and dark appearances must meet contrast requirements for text, icons, and focus rings. Check both :where(:root) and [data-theme='dark'] when a surface uses custom color.

Do not communicate state with color alone. Status text uses the --color-status-* foreground tokens, and focus uses --color-border-focus or the accent ring.

Theme / API and Development

Time / Usage