Styling Overview

All the components of @gluestack-ui/themed by default are unstyled. Styling is provided by our styling engine @gluestack-style/react by passing config file from @gluestack-ui/config. Config file exports an object which is passed inside the GluestackUIProvider(a Wrapper component that applies the theme to all the children).

import { config } from "@gluestack-ui/config"
import { GluestackUIProvider } from "@gluestack-ui/themed"

function App({ children }) {
  return <GluestackUIProvider config={config}>{children}</GluestackUIProvider>
}

The imported config contains a theme object which contains all the configuration, the structure looks something like the following:

{
  "aliases": {
    # Adding bg as alias of background Color
    "bg": "backgroundColor"
  },
  "tokens": {
    # All the tokens are defined here like colors, borderWidths, radii, breakpoints, mediaQueries ....
  },
  "globalStyle": {
    # All the global style is defined here
  },
  "components": {
    # All the components style is defined here
  },
  "themes": {
    # All the themes are defined here
  },
  "plugins":{
    # All the plugins are defined here
  }
}

The theme object has aliases, tokens, global style, components and themes.

aliases: This is useful when you want to use a shorter name for a token. For example, you can use bg instead of backgroundColor for the backgroundColor token.
tokens: This is where you define your design tokens. Tokens helps us to maintain consistent designs.
globalStyle: The styles written inside globalStyle are applied globally in the application.
components: This is where you can add component specific styling
themes: Here you can create themes for your app with different values for a particular token for more flexibility and reusability of tokens.
plugins: gluestack-style provides a plugin system to extend the existing functionality of the styled function, making it ideal for adding support for new aliases, tokens, and more.