Changing themes in your app.
The package tamagui
is a superset of @tamagui/core
. If you are using tamagui
, be sure to
import Theme from there - there's no need to add core to your package.json.
Changing themes in Tamagui is as easy as passing their name to the Theme component.
Change themes anywhere in your app like so:
import { Theme, Button } from '@tamagui/core'export default () => (<Theme name="dark"><Button>I'm a dark button</Button></Theme>)
A good example of this setup is the source of this site itself .
There is one special property of themes that's very helpful for what is essentially sub-themes, or tints.
Basically, if you have a base dark
theme and a light
theme, you may want to have "tinted" versions of those themes. For example light_pink
and light_dark
. Instead of having hard-coded color values like $pink3
, you create as many pink themes as you want: light_pink_alt1
, light_pink_alt2
, etc.
Each of those themes is then smaller: just having values that map to ViewStyle or TextStyle, like $color
(and that can postfix pseudo states, like $colorHover
).
Then, you just give your component a theme="pink"
prop, or wrap it in <Theme name="pink" />
. Note you can leave out the light_
or even light_pink
prefix, Tamagaui will nest properly so long as the parent is set.
It's easier to understand with an example. First, define your tokens and themes:
import { createTokens, createTamagui } from 'tamagui'const tokens = createTokens({color: {pinkDark: '#610c62',pinkLight: '#f17efc',}})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,}}})
Using the _pink
suffix, the Theme
component will now let us automatically do subsetting:
import { Theme, Button } from 'tamagui'export default () => {return (<Theme name="dark"><Button>I have the theme dark</Button><Theme name="pink"><Button>I have the theme pink-dark</Button></Theme></Theme>)}
Notice we just use the name pink
. Because theres no pink
theme, the Theme component will automatically check if theres a theme that matches the pattern [currentThemeName]_[givenName]
, in this case dark_pink
. This is really useful for things like having an active
or error
theme that match your parent theme styles.
The ThemeInverse
component is handy for flipping from light to dark without having to do manual logic with context.
The themeable
helper function is a "higher order component" that wraps any React component definition and adds two props:
theme
for changing the theme on that component and its childrenthemeInverse
which wraps the component with <ThemeInverse>
It's used for example on Button.