CSS Variables Plugin

💡 This is a web-only plugin
This internal plugin inserts all theme tokens as CSS variables in your global styles.


Include the AddCssTokenVariables Plugin in your createStyled array.Once this is done, you can directly use the tokens in your styles as CSS variables.
Initialize the plugin with: const styledCssTokensVariables = createStyled([new AddCssTokenVariables({})])
const StyledView = styledCssTokensVariables(
w: 200,
h: 200,
bg: '$blue500',
descendantStyle: ['_text'],
const StyledText = styledCssTokensVariables(
ancestorStyle: ['_text'],
export function CSSVariables() {
return (
color: 'var(--gluestack-style-colors-orange300)',
margin: 'var(--gluestack-style-space-4)',
Hello, World!
Edit this page on GitHub