Theme

Change themes contextually

Changing themes in Tamagui is as easy as passing their name to the Theme component.

Usage

Change themes anywhere in your app like so:

import { Square, Theme } from 'tamagui' // or '@tamagui/core'

export default () => (
  <Theme name="dark">
    <Button>I'm a dark button</Button>
    <Button theme="subtle">I'm using dark_subtle theme</Button>
  </Theme>
)

Defining Themes

Themes live one level below tokens. Tokens are your static variables, where themes are more dynamic like CSS variables.

You can define themes however you want, but for the tamagui UI kit, the components default styling will use a set of pre-defined keys. Those keys are:

background, backgroundHover,backgroundPress, backgroundFocus
borderColor, borderColorHover,borderColorPress, borderColorFocus
shadowColor

These are optional, as you can always set unstyled on any Tamagui component to use your own styles.

Here’s a simplified theme definition:

import { createTamagui, createTokens } from 'tamagui'

const tokens = createTokens({
  color: {
    pinkDark: '#610c62',
    pinkLight: '#f17efc',
  },
  // ... see configuration docs for required tokens
})

export default createTamagui({
  tokens,
  themes: {
    dark: {
      background: '#000',
      color: '#fff',
    },
    light: {
      color: '#000',
      background: '#fff',
    },
    dark_pink: {
      background: tokens.color.pinkDark,
      color: tokens.color.pinkLight,
    },
    light_pink: {
      background: tokens.color.pinkLight,
      color: tokens.color.pinkDark,
    },
  },
})

Passing tokens to themes will reduce CSS, but is not required.

You can then access theme values for any style value, either through styled() or through a Styled Component like View or Text:

const P = styled(Text, {
  color: '$color12'
})

// or directly
<Text color="$color11" />

Because we defined sub-themes light_pink and dark_pink, the Theme component will now let us do this:

import { Button, Theme } from 'tamagui'

export default () => {
  return (
    <Theme name="dark">
      <Button>I have the theme dark</Button>
      <Theme name="pink">
        <Button>I have the theme dark_pink</Button>
      </Theme>
    </Theme>
  )
}

Notice we just use the name pink, easy!

For more on themes see our advanced theme guide which also introduces the createThemes and createThemeBuilder, both of which help generate larger and richer, typed themes more easily.

View & Text

FontLanguage

Edit this page on GitHub.