Theming | Next.js Supabase SaaS Kit

Makerkit's theming is defined in two places:

1. the global.css file
2. the tailwind.config.js file.

Colors

To update the theme's colors, please update the global.css file in your project and update the CSS variables with your color palette.

Using the ShadCN themes

The ShadCN UI themes are predefined themes that you can use in your Makerkit project too.

You can copy/paste the ShadCN themes into your global.css file and update the CSS variables to use the Makerkit color palette.

Next - you need to update the tailwind.config.js file in your project and update the colors object. These should match the CSS variables you have defined in the global.css file.

Updating the Tailwind configuration

Additionally, we need to update the Tailwind configuration: since Makerkit uses a color palette based on Tailwind's palette system, we need to update the tailwind.config.js file in your project and update the colors object.

For example, since the default color for the primary color is violet.500, we need to update the colors object to:

primary: {
  DEFAULT: 'hsl(var(--primary))',
  foreground: 'hsl(var(--primary-foreground))',
  ...colors.violet,
}

The code above spreads the violet color palette into the primary object, which means that the primary color will be the violet.500 color.

The variable --primary is the hsl value of the violet.500 color.

Additionally, we can access other colors of the primary palette using primary-500, primary-600, etc. This helps us to access the color palette in a more semantic way.

Dark Mode

We need to do the same for the dark mode. Makerkit has historically used the dark color palette convention to define the dark mode colors.

By default, Makerkit uses slate as the dark mode color palette, so we need to update the colors object to:

dark: {
  ...colors.slate,
  DEFAULT: colors.slate[950],
  foreground: colors.slate[100],
}

As you can see, we spread the slate color palette into the dark object, which means that the dark color will be the slate.950 color.

If you were to use another color such as zinc, you would need to update the colors object to:

dark: {
  ...colors.zinc,
  DEFAULT: colors.zinc[950],
  foreground: colors.zinc[100],
}

Icons

While ShadCN UI uses lucide as their icons library, Makerkit has historically used heroicons. We have configured ShadCN UI to use heroicons instead of lucide in all Makerkit projects, but for new components, you will need to use lucide instead if you don't want to make changes. As such, please install lucide as a dependency in your project.