search

ut-code / syllabus-next

4 stars 0 forks source link

Tailwind color config #21

Closed Axafy5479 closed 4 months ago

Axafy5479 commented 4 months ago

Material Designに則った色の定義を行いました

概要

現行のシ楽バスの色を参考にMaterial Color(primary secondary errorなど)を生成しました。 雰囲気として次の画像のような配色になります。 image

使い方

classNameにbg-primary text-error のように、tailwindの色部分に追加した色名を利用してください。追加した定義はtailwind.config.tsを参考にしてください。いつどの色を使うべきかはMaterial Designのドキュメントに記述がありますが、概要をtailwind.config.tsのコメントとしてまとめています。

ダークモード

厳密には色の定義はglobal.cssにあります。ここでライトモード/ダークモード双方の色を定め、現在のモードに合う色を選択しています。tailwind.config.tsではglobal.cssで選択された色を参照しているので、今回のPRで追加している色定義を利用している限り、ダークモード、ライトモード双方を意識してデザインする必要はなくなります。 (※今回のPRにテーマを切り替えるトグルの実装はありません)

demo

追加した色を利用してコンポーネントをデザインした例を/components/Sample/ColorTheme以下に入れています。 image

Yokomi422 commented 4 months ago

LGTM!

Axafy5479 commented 4 months ago

確認ありがとうございました！