Themes

@gluestack-style/react allows you to easily create themes for your app with different values for a particular token for more flexibility and reusability of tokens.
Note: Themes is an optional feature, you can use gluestack-style without themes.
name
function App() {
const StyledLinkButton = styled(
Pressable,
{
borderRadius: 4,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
m: "$3",
bg: "$backgroundDark300",
variants: {
size: {
sm: {
px: "$4",
py: "$3",
},
md: {
px: "$5",
py: "$4",
},
},
},
defaultProps: {
size: "md",
variant: "redbox",
},
},
{
DEBUG: "Button",
}
)
const Box = styled(View, {})
const Text = styled(RNText, { color: "$textColor" })
return (
<Provider config={config()}>
<View
style={{
justifyContent: "center",
alignItems: "center",
}}
>
<Box
flexDirection="row"
p="$2"
pr="$4"
w="$full"
bg="$blue800"
borderTopRightRadius={"$md"}
borderTopLeftRadius={"$md"}
>
<Text color="$white">Theme Switcher</Text>
<Box flex={1}></Box>
<Text color="$white">x</Text>
</Box>
<Box
bg="$gray100"
h="400px"
w="350px"
alignItems="center"
justifyContent="center"
>
<Theme name="classic">
<Box
h="200px"
w="200px"
bg="$backgroundColor"
borderWidth="$borderWidth"
borderColor="$borderColor"
borderRadius={"$borderRadius"}
overflow="hidden"
>
<Box
flexDirection="row"
p="$2"
pr="$4"
w="$full"
bg="$headerColor"
>
<Text color="$textColor">Explorer</Text>
<Box flex={1}></Box>
<Text>x</Text>
</Box>
</Box>
</Theme>
</Box>
</View>
</Provider>
)
}

How to create a Theme?

To create a theme you need to create a config, you need to use the createConfig function from @gluestack-style/react package.
import { createConfig } from "@gluestack-style/react"
export const config = createConfig({
aliases: {
// aliases
},
tokens: {
colors: {
primary: "#000",
secondary: "#fff",
// ...
red300: "#000",
red400: "#000",
red500: "#000",
// ...
brown300: "#000",
brown400: "#000",
brown500: "#000",
// ...
},
// ...
},
themes: {
classic: {
colors: {
primary: "$colors$brown400",
secondary: "$colors$brown100",
},
},
modern: {
colors: {
primary: "$colors$red400",
secondary: "$colors$red100",
},
},
},
})
Now you have your themes defined, you can use them in your app. How to use it you ask?

How to use a Theme?

To use a theme you need to import the Theme component from @gluestack-style/react package. Theme component accepts a name prop which is the name of the theme you want to use.
Important: Theme adds a View to the DOM tree.
import { styled, StyledProvider, Theme } from "@gluestack-style/react"
import { Pressable } from "react-native"
import { config } from "./config"
const Button = styled(Pressable, {
backgroundColor: "$primary",
padding: "$3",
})
const ButtonText = styled(Pressable, {
color: "$secondary",
})
export const App = () => {
return (
<StyledProvider config={config}>
<Theme name="classic">
<Button>
<ButtonText>Classic Button</ButtonText>
</Button>
</Theme>
</StyledProvider>
)
}
Note: Theme name should always be a string.

Theme specific style

You can apply theme-specific styling by using the . prefix with the theme name. This API is supported in both styled() and the sx prop.
import { styled, StyledProvider, Theme } from "@gluestack-style/react"
import { Pressable } from "react-native"
import { config } from "./config"
const Button = styled(Pressable, {
backgroundColor: "$primary",
padding: "$3",
".classic": {
backgroundColor: "$secondary",
},
})
const ButtonText = styled(Pressable, {
color: "$secondary",
".classic": {
color: "$primary",
},
})
export const App = () => {
return (
<StyledProvider config={config}>
<Theme name="classic">
<Button>
<ButtonText>Classic Button</ButtonText>
</Button>
</Theme>
</StyledProvider>
)
}
Note: Components must be wrapped inside the Theme component to use the theme. Else default tokens from config will be used.