ZapStack

Theming

Custom your site colors

All colors set

Update the color palette in /app/globals.css that is using hsl colors, you can use hslpicker to convert your hex colors to hsl colors. For example to change the primary colors:

@layer base {
  :root {
    ...
    --primary: 42 99.1% 55.3%;
    ...
  }
  .dark {
    ...
    --primary: 42 99.1% 55.3%;
    ...
  }
}

Primary button colors in email templates

Another place need to update for primary color is in /configs/misc.ts:

export const EmailTemplateButtonBackground = '#FEB91C';
export const EmailTemplateButtonTextColor = '#FFF';

These colors are using for primary button in Email templates.

On this page