Closed9
shadcn/uiのcolorを@radix-ui/colorsを使ってカスタマイズする
hajimism
shadcn/uiは色もカスタマイズしやすいようにCSS変数によってコントロールしている。CSS変数自体を切り替えることによってダークモードにも半自動的に対応している（dark:とかやる必要がない）。
もともとイケてるThemeなのは間違いないけれど、育てていくうちに色を変えたくなるに違いない。
@radix-ui/colorsの豊富なパレットを利用して、どんなテーマでも対応できるようにする。
hajimismこのプラグインが便利。
plugins: [require("windy-radix-palette")],しておくだけで、Tailwindで@radix-ui/colorsが全部使える。CSS変数も使える。
hajimismただ、せっかくshadcnが貼っておいてくれた text-primaryなどをいちいち text-green-10などに張り替えるのはイケてない。なのでCSS変数の中身を書き換える。
hajimism例えばこんな感じ。プラグイン側でダークモードをやってくれているので、.darkを書く必要すらない。
hajimism各色こんな感じ、yellow-backgroundは色をわかりやすくするために恣意的に貼ってる。
hajimismdestructiveに関しては張り替える必要がなさそうなのでそのままにしている。別に --red10とかしても良いと思う
hajimismこれで、shadcn/uiのclassNamesをそのまま利用しつつ、色だけいじることができる。
escape hatchで局所的に text-green-8とかすることもできる。
このスクラップは2023/06/11にクローズされました