Checked checkbox styling in v9 fluent UI

[djayMehrotra]

How can I change the checked checkbox's color from primary blue to red in v9 Fluent UI?

[micahgodbolt]

Components are styled with CSS tokens so that you don't need to override specific selectors and styles.

The 3 colors used in the Checkbox are colorCompoundBrandBackground, colorCompoundBrandBackgroundHover and colorCompoundBrandBackgroundPressed.

Tokens can be applied via FluentTheme provider, or as a 1 off with a style tag

<Checkbox
    style={{
      "--colorCompoundBrandBackground": "red",
      "--colorCompoundBrandBackgroundHover": "darkred",
      "--colorCompoundBrandBackgroundPressed": "maroon"
    }}
    {...props}
  />