CSS Variables Plugin

💡 This is a web-only plugin

This internal plugin inserts all theme tokens as CSS variables in your global styles.

Example:

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(
  View,
  {
    w: 200,
    h: 200,
    bg: '$blue500',
  },
  {
    descendantStyle: ['_text'],
  }
);

const StyledText = styledCssTokensVariables(
  Text,
  {},
  {
    ancestorStyle: ['_text'],
  }
);

export function CSSVariables() {
  return (
    <Wrapper>
      <StyledView>
        <StyledText
          style={{
            color: 'var(--gluestack-style-colors-orange300)',
            margin: 'var(--gluestack-style-space-4)',
          }}
        >
          Hello, World!
        </StyledText>
      </StyledView>
    </Wrapper>
  );
}