Updating the Shadcn theme in your Makerkit Application | Next.js Supabase SaaS Kit

Makerkit uses Shadcn UI and it defines the theme according to its guidelines.

You can find the default theme inside the application at apps/web/styles/shadcn-ui.css.

If you want to override the default style, either define your own colors or pick a theme from the Shadcn Themes page, and copy/paste the theme into this file.

One difference with the Shadcn UI theme (Tailwind CSS v3 as of this writing), is that you need to convert the CSS variables to using the hsl function.

For example, the default theme has the following CSS variable:

--color-primary: 229 231 239;

To convert it to the hsl function, you need to convert the values to HSL and then convert them to hex.

--color-primary: hsl(229 23% 15%);

You can use any AI tool for quickly converting the Shadcn UI CSS theme to the hsl function.