Implement custom theme colors in Next.js, Tailwind, and shadcn-ui
Answered
Atlantic herring posted this in #help-forum
Atlantic herringOP
I want to implement custom theme colors, and I’d like these colors to be applied to both existing and future shadcn-ui components.
What’s the best practice for doing this?
Example new custom colors:
Light mode:
primary color: #000000
secondary color: #D7D7D7
background color: #FFFFFF
accent color: #0096FF
Dark mode:
primary color: #FFFFFF
secondary color: #3E3F41
background color: #1A1B1E
accent color: #0096FF
What’s the best practice for doing this?
Example new custom colors:
Light mode:
primary color: #000000
secondary color: #D7D7D7
background color: #FFFFFF
accent color: #0096FF
Dark mode:
primary color: #FFFFFF
secondary color: #3E3F41
background color: #1A1B1E
accent color: #0096FF
Answered by sergiy.eth
check the
globals.css file where all the variables are defined for the theme. then check tailwind.config.ts/js and make sure they are implemented in there. Shadcn uses hsl so should convert the hex values to hsl using https://htmlcolors.com/hex-to-hsl and you're good to go!1 Reply
check the
globals.css file where all the variables are defined for the theme. then check tailwind.config.ts/js and make sure they are implemented in there. Shadcn uses hsl so should convert the hex values to hsl using https://htmlcolors.com/hex-to-hsl and you're good to go!Answer