Colors and Styles

Customizing the styles of your Stack Auth components allows you to maintain your brand identity while leveraging the pre-built functionality. This approach is ideal when you want to quickly align the authentication UI with your application’s design system without building custom components from scratch. Stack’s theming system uses a React context to store colors and styling variables that can be easily overridden.

You can customize the following color variables to match your brand:

  • background: Main background color of the application
  • foreground: Main text color on the background
  • card: Background color for card elements
  • cardForeground: Text color for card elements
  • popover: Background color for popover elements like dropdowns
  • popoverForeground: Text color for popover elements
  • primary: Primary brand color, used for buttons and important elements
  • primaryForeground: Text color on primary-colored elements
  • secondary: Secondary color for less prominent elements
  • secondaryForeground: Text color on secondary-colored elements
  • muted: Color for muted or disabled elements
  • mutedForeground: Text color for muted elements
  • accent: Accent color for highlights and emphasis
  • accentForeground: Text color on accent-colored elements
  • destructive: Color for destructive actions like delete buttons
  • destructiveForeground: Text color on destructive elements
  • border: Color used for borders
  • input: Border color for input fields
  • ring: Focus ring color for interactive elements

And some other variables:

  • radius: border radius of components like buttons, inputs, etc.

These variables are CSS variables so you can use any valid CSS color syntax like hsl(0, 0%, 0%), black, #fff, rgb(255, 0, 0), etc.

The colors can be different for light and dark mode, allowing you to create a cohesive experience across both themes. You can pass these into the StackTheme component (in your layout.tsx file if you followed the Getting Started guide) as follows:

app/layout.tsx
1const theme = {
2 light: {
3 primary: 'red',
4 },
5 dark: {
6 primary: '#00FF00',
7 },
8 radius: '8px',
9}
10
11// ...
12
13<StackTheme theme={theme}>
14 {/* children */}
15</StackTheme>