Fixing This Issue (Light/Dark Theme Backgrounds)

[megh-bari]

A lot of people have mentioned in GitHub issues that they want both light and dark mode support for backgrounds.

Here’s how you can do it:

Instead of using my fixed color scheme, you can append your shadcn/tweakcn theme variables like this (see example below).
Rather than hardcoding colors, use CSS custom properties (variables) so that your background automatically adapts to your theme and stays consistent.

---

Handling Heavy Colors in Gradients

You can use var(--primary) directly, but that will give you the exact raw color, which can sometimes look too intense.

Instead, you can use CSS oklch() color manipulation:

background: radial-gradient(
  ellipse 80% 60% at 50% 0%, 
  oklch(from var(--primary) calc(l - 0.1) c h / 0.20), 
  transparent 70%
);

This approach lets you:

• Adjust lightness dynamically with calc(l - 0.1)
• Preserve chroma and hue (c h)
• Control opacity with / 0.20

This makes the gradient adapt nicely to your theme without being overpowering.

---

Final Thoughts

Use whichever method works best for your project it’s not too complex once you try it.
And honestly, with AI tools available, you can easily generate the same approach for vanilla CSS too.

Thanks for reading! Hope this clears things up.
Feel free to share how you implemented it in your project would love to see it.

---

Example Demo:

---

[adibxr]

Awesome!