Theming
Discover how to apply the ShadCN UI theme to your Makerkit project.
Makerkit's theming is defined in two places:
- the
global.css
file - 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.