Design Tokens & Global CSS
The whole application brand, color palette, typography, spacing, and dark mode tokens are centrally controlled via global.css.
In gluestack-ui pro, your entire app's visual brand identity is centrally configured inside a single global.css file using Tailwind CSS v4 and NativeWind v5 CSS variables.
Centralized Brand Control (global.css)
Rather than managing tokens in complex JS config objects, gluestack-ui pro uses standard CSS custom properties defined in @theme. Modifying global.css instantly updates every button, input, card, and screen across both Web and Native (iOS/Android):
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
/* Brand Primary Colors */
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
/* UI Surface & Border Tokens */
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
/* Radius Tokens */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
}
/* Light Theme Variables */
:root {
--background: #ffffff;
--foreground: #09090b;
--card: #ffffff;
--card-foreground: #09090b;
--primary: #18181b;
--primary-foreground: #fafafa;
--secondary: #f4f4f5;
--secondary-foreground: #18181b;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--border: #e4e4e7;
--input: #e4e4e7;
--ring: #18181b;
--radius: 0.75rem;
}
/* Dark Theme Overrides */
.dark {
--background: #09090b;
--foreground: #fafafa;
--card: #09090b;
--card-foreground: #fafafa;
--primary: #fafafa;
--primary-foreground: #18181b;
--secondary: #27272a;
--secondary-foreground: #fafafa;
--muted: #27272a;
--muted-foreground: #a1a1aa;
--border: #27272a;
--input: #27272a;
--ring: #d4d4d8;
}Customizing Brand Theme
How to customize your brand identity using design tokens:
1. Update Brand Primary Color
Change --primary and --primary-foreground in :root and .dark in global.css to apply your brand color across all screens.
2. Adjust Corner Radius
Modify --radius in global.css to switch between sharp (0rem), rounded (0.5rem), or pill (1rem) styles.
3. Seamless Dark Mode
Dark mode tokens inside .dark automatically handle native and web theme switching without runtime recalculation.
4. Cross-Platform Parity
NativeWind v5 compiles these CSS variables to Native StyleSheet objects for iOS and Android while using CSS variables on Web.