Switch theming

Every cosmetic value Switch renders is a --rozie-switch-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

css

.rozie-switch {
  --rozie-switch-width: 2.75rem;
  --rozie-switch-off-bg: rgba(0, 0, 0, 0.25);
  --rozie-switch-thumb-size: 1.25rem;
  --rozie-switch-focus-ring-width: 2px;
}

Tokens

track box model

Token	Default
`--rozie-switch-width`	`2.75rem`
`--rozie-switch-height`	`1.5rem`
`--rozie-switch-track-padding`	`0.125rem`
`--rozie-switch-radius`	`999px`

track colors — off vs on (on is the single accent most consumers set)

Token	Default
`--rozie-switch-off-bg`	`rgba(0, 0, 0, 0.25)`
`--rozie-switch-on-bg`	`#0066cc`

thumb

Token	Default
`--rozie-switch-thumb-size`	`1.25rem`
`--rozie-switch-thumb-bg`	`#fff`
`--rozie-switch-thumb-shadow`	`0 1px 2px rgba(0, 0, 0, 0.3)`
`--rozie-switch-thumb-travel`	`calc(2.75rem - 1.5rem)`

focus ring

Token	Default
`--rozie-switch-focus-ring-width`	`2px`
`--rozie-switch-focus-ring-color`	`rgba(0, 102, 204, 0.5)`
`--rozie-switch-focus-ring-offset`	`2px`

disabled

Token	Default
`--rozie-switch-disabled-opacity`	`0.55`

Design-system bridges

Each package ships token presets that map Switch's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/switch-react/themes/base.css';
import '@rozie-ui/switch-react/themes/bootstrap.css';
import '@rozie-ui/switch-react/themes/material.css';
import '@rozie-ui/switch-react/themes/shadcn.css';

Switch theming ​

Tokens ​

track box model ​

track colors — off vs on (on is the single accent most consumers set) ​

thumb ​

focus ring ​

disabled ​

Design-system bridges ​

See also ​