Customizing Theme

Customizing the theme in gluestack-ui-flutter involves defining a theme configuration and applying it using GluestackProvider, enabling you to style your application's visual elements according to your design preferences.

Customizing Theme

gluestack-ui-flutter is intentionally designed as an optionally styled library, providing you with the flexibility to style your widgets as you prefer. For users looking for a seamless integration experience, we offer the @gluestack-ui-flutter/lib/src/theme/config, which comes with pre-configured theme that can easily be integrated within your app for a convenient styling solution.

Customizing Theme

You can add customize your app theme with help of gsThemeToken parameter under GluestackProvider inside of gluestackTokenConfig. gluestack-ui for flutter comes with 2 deafult themes, light and dark, named 'light_theme' and 'dark_theme' respectively. To modify certain specific colors of the base theme, simply create a Map like so:

const myTheme = {
  light_theme: {
    colors: {
      primary300: Color(0xffe11d48),
      primary400: Color(0xffe11d48),
      primary600: Color(0xffe11d48),
      primary700: Color(0xffe11d48),
      success500: Color(0xffe11d48),
    },
  },
}

and provide this value to the gsThemeToken, as shown below:

return GluestackProvider(
      gluestackTokenConfig: GluestackTokenConfig(
        gsThemeToken: myTheme,
      ),
      child: GSApp(
        theme: GSThemeData.fromTheme('light_theme'),
      ),
    )

To dyamically toggle theme application wide, you can provide theme present in the above example like so, here currentTheme is a state varaible, value of which can be 'light_theme' or 'dark_theme' or your custom theme name.

theme: GSThemeData.fromTheme(currentTheme),

To create a new theme entirely, you can create the myTheme variable present in the above examples as shown below:

const myTheme = {
  cyan_theme: {
    colors: {
      primary0: Color(0xffb2ebf2),
      primary50: Color(0xff80deea),
      primary100: Color(0xff4dd0e1),
      primary200: Color(0xff26c6da),
      primary300: Color(0xff00bcd4),
      primary400: Color(0xff00acc1),
      primary500: Color(0xff0097a7),
      primary600: Color(0xff00838f),
      primary700: Color(0xff006064),
      primary800: Color(0xff004d40),
      primary900: Color(0xff00332a),
      primary950: Color(0xff00251a),
      secondary0: Color(0xffb2ebf2),
      secondary50: Color(0xff80deea),
      secondary100: Color(0xff4dd0e1),
      secondary200: Color(0xff26c6da),
      secondary300: Color(0xff00bcd4),
      secondary400: Color(0xff00acc1),
      secondary500: Color(0xff0097a7),
      secondary600: Color(0xff00838f),
      secondary700: Color(0xff006064),
      secondary800: Color(0xff004d40),
      secondary900: Color(0xff00332a),
      secondary950: Color(0xff00251a),
      //... Other theme colors ...
    },
  },
}

To check for current theme being used by the application, you can access GSTheme.of(context).themeId. Show below is an example of how we can conditionally use values of colors depending on current app theme.

GSTheme.of(context).themeId == 'dark_theme'
          ? const Color(0xFF262626)
          : null,

Alternatively, you can try our very own Token Configurator tool which can help you to generate code for theming. This interactive tool not only provides a visual representation of your currently configured theme but also demonstrates how theme and token adjustments can impact your UI/UX. Click here to see it in action!

Edit this page on GitHub