useColor

<div
  style={{
    height: 50,
    width: 50,
    background: useColor().background.brandAccent,
  }}
/>

Open in Playroom

You should only use this Hook if you’re unable to use Box or vars.

Alternatives

Box — For custom layouts.

Development considerations

Retrieves the semantic colour palette of the current theme from context.

const { background } = useColor()

return (
  <div
    style={{
      width: 50,
      height: 50,
      backgroundColor: background.brandAccent,
    }}
  />
)

Braid Logo