Theming

Many design tokens are provided by a theme that sets all important values such as colors, sizes, fonts and breakpoints. Depending on the breakpoints, some components take so called responsive values that map to each breakpoint.

Accessing Theme

To use values from the theme, we need to access it somehow.
The theme is passed down via React's Context API by our

ThemeProvider

component.

Flora exports a hook that will return the current theme.

Dark Mode

function Component() {
  const theme = useTheme()

  return <Text>Baseline grid is {theme.baselineGrid}px</Text>
}function Component() {
  const theme = useTheme()

  return <Text>Baseline grid is {theme.baselineGrid}px</Text>
}

Theme Values

Next to passing theme values directly, we can also leverage Fela's theme-value

(new tab)

plugin. It allows us to use string references to theme values directly with some properties, most prominently colors.

The following properties all resolve values from

theme.colors

color
background
backgroundColor
borderColor
borderTopColor
borderBottomColor
borderLeftColor
borderRightColor
stroke
fill

Dark Mode
Open in Playroom

<Box bg="background.primary">
  <Text color="foreground.destructive">Destructive</Text>
</Box><Box bg="background.primary">
  <Text color="foreground.destructive">Destructive</Text>
</Box>