Accent Color

Use accent-{color} utilities to change the accent color of form controls like checkboxes and radios. The Style widget injects a Theme whose colorScheme.primary is set to the resolved color, so any Material Checkbox, Radio, or Switch inside picks up the tint automatically.

Setting the accent color

Use utilities like accent-rose-500 and accent-lime-600 to change the accent color of an element:

Style('...', children: [
  Checkbox(value: true, onChanged: (_) {}),
  Text('Browser default'),
])
Style('...', children: [
  Style('accent-pink-500', child: Checkbox(value: true, onChanged: (_) {})),
  Text('Customized'),
])

This is helpful for styling checkboxes and radio groups by overriding the default tint.

Changing the opacity

Use the color opacity modifier to control the opacity of an element’s accent color:

Style('...', children: [
  Style('accent-purple-500/25', child: Checkbox(value: true, onChanged: (_) {})),
  Text('accent-purple-500/25'),
])
Style('...', children: [
  Style('accent-purple-500/75', child: Checkbox(value: true, onChanged: (_) {})),
  Text('accent-purple-500/75'),
])

Applying on hover

Combine hover: with accent-{color} to switch the accent on pointer hover:

Style('...', children: [
  Style('accent-black hover:accent-pink-500', child: Checkbox(value: true, onChanged: (_) {})),
  Text('Agree to terms'),
])

Class reference

Class	Description
accent-{color}-{shade}	Set accent to a palette color (e.g. accent-pink-500).
accent-{color}-{shade}/{N}	Set accent with N% opacity (e.g. accent-purple-500/25).
accent-transparent	Transparent accent.
accent-black	Solid black.
accent-white	Solid white.
hover:accent-{color}	Apply on hover. Same modifier rules apply (/N, etc.).