Next.js Discord

Discord Forum

Shadcn themes not working for charts

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
TonkineseOP
I've tried changing themes and all of the UI elements to show up with that color, but the charts remain monochromatic.
How do i config the charts to change color as well? (im using tailwind v4 btw)

https://ui.shadcn.com/charts

3 Replies

TonkineseOP
oh wait, apparently there's a theme tab

it's for tailwind v3 though, what about for v4?
Check if you have this variables in your globals.css (ignore the color assigned to them, doesn’t matter):
  --chart-1: oklch(0.7 0.09 201.867);
  --chart-2: oklch(0.779 0.08 4.133);
  --chart-3: oklch(0.67 0.099 356.976);
  --chart-4: oklch(0.441 0.07 217.085);
  --chart-5: oklch(0.271 0.009 255.578);
If you don’t have these variables, then chart colors will pick up the default colors. Make sure you have these and modify the colors accordingly.

You can use a tool like to test the colors and have it give you all Shadcn variables setup:
https://themux.vercel.app/shadcn-themes or https://tweakcn.com/editor/theme