ui
ui copied to clipboard
shadcn-ui
How to handle theme/color changes?
Using tailwind, there are a lot of mentions of different colors (i.e. bg-slate-900, bg-red-500 etc.). With 'slate' being the 'primary' color. Let's say my primary colors is a blue, how would I go about changing that? From my current understanding, I would have to go through every single file and change every single occurrence of slate, which is difficult, as slate may in some cases refer to a 'border' and not a primary color.
What would be the suggested way to deal with this issue?
My proposal is to define semantic colors in the Tailwind configuration. This will enable users to create their own set of semantic colors in their configuration, and when a user copies a component, the colors will automatically work. Additionally, I suggest supporting auto dark mode with the use of CSS variables, as mentioned in issue #52.
This is one of the things I'm still unsure about with regards to tailwind. Should one create semantic color names or not?
Just change the color slate at tailwind.config.js (Do not extend it, just override it) ezpz
Just change the color slate at tailwind.config.js (Do not extend it, just override it) ezpz
Yeah, I know how to do it, but I'm always struggling to decide wether to use names like 'blue-500' or create semantic classes, like 'primary-500'.
Or, just use vscode search and replace tool, replace all "slate" strings in the whole project with the word u want, is that simple :D
I would love to see some way to have more semantic colors (e.g. primary, secondary, tertiary, success, warning, error) instead of just primary, secondary and destructive. And then a way to create themes like https://www.skeleton.dev/docs/generator would be amazing.
Another one to look at for inspiration would be https://github.com/williamlmao/chimera-ui, which is a fork of this repo. Here's their theme generator https://www.chimera-ui.com/docs/theme
It isn't actually that hard to use the Skeleton UI design tokens to style components and that makes theming all components super easy.
@shadcn I wonder if you would be interested in adding this by default. Here's a discussion on how I did it: https://github.com/skeletonlabs/skeleton/discussions/1367#discussioncomment-5822302
@multiwebinc I'm looking into a theme generator. So many things to do right now... ;)
@multiwebinc could you push up what you've made to an example repo? I'm quite interested in using skeleton with shadcn, the theme support is much more powerful with Skeleton with all their pre-built utilities.
I created a tool to let you generate custom themes for shadcn/ui.
You can customize the template and use standard Tailwind colors and tokens like primary, secondary, accent, etc., then specify on the command line. The tool will automatically convert them to HSL format.
https://github.com/kiliman/shadcn-custom-theme
From my current understanding, I would have to go through every single file and change every single occurrence of slate, which is difficult, as slate may in some cases refer to a 'border' and not a primary color.
This was my impression too. I am 100% sure using shadcn-ui would allow me to save so much time, but it is really really hard to understand how theming works with tailwind utility classes.
I feel like the docs don't really help me to get started. For example I expected to simply set the baseColor to orange and then have my primary color be orange. But that wasn't the case, only gray colors were available. I went to the https://ui.shadcn.com/themes site and there I could easily change the gray primary color to an orange one.
If theming via tailwind utility classes is only an escape hatch and not really the shadcn-ui recommended way to do theming, can the docs please describe that better? I thought this was a preferences thing, but I am going to try the setup with css variables now.
EDIT: Tried it with css variables mode now, I can at least set the colors now. I also like the idea of being able to switch e.g. my primary color in one place. But I still think I am going to use the utility class style and then after installing a component simply add own variants / edit existing ones. Maybe this is simply the way it's meant to be used? Don't configure it but simply edit the final component?
@xdivby0 I tried the approach of making all colors available via baseColor but then you end up with a lot of your UI being for instance orange. So we start with a more neutral (gray) base and let you add colors on top of it.
Is there anything specific you're looking for? Can you create a separate issue we can hash it out together. Thank you.
This shadcn ui theme generator outputs dark / light mode custom properties that can be copied and pasted:
It will automatically generate all colours based on at-least a single colour input, then saturation and lightness can be altered to create even more variations.
