Colors and Styles

If you want to spend minimal time on styling but still want to align with your brand, you can customize the colors of the Stack app. Colors are stored in React context and can be easily overridden.

There are some color variables that you can customize:

• background
• foreground
• card
• cardForeground
• popover
• popoverForeground
• primary
• primaryForeground
• secondary
• secondaryForeground
• muted
• mutedForeground
• accent
• accentForeground
• destructive
• destructiveForeground
• border
• input
• ring

And some other variables:

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

These variables are css variables so you can use the syntax like hsl(0, 0%, 0%), black, #fff, etc.

The colors can be different for light and dark mode. You can pass these into the StackTheme component (in your layout.tsx file if you followed the get started guide) as follows:

1
const 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>