shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け
ライト・ダークモード用のカラー変数を備えたshadcn/uiテーマを生成。CSSに貼り付けて一貫したUIを構築できます。
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
プレビュー
コンポーネントのプレビュー
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}ライト・ダークモード用のカラー変数を備えたshadcn/uiテーマを生成。CSSに貼り付けて一貫したUIを構築できます。
shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け は、その機能に関係する操作項目と結果だけを表示します。利用できる設定はツールと入力内容によって異なります。
対応形式
使い方
ステップ 1
shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け を開き、画面で求められる入力を用意する
ステップ 2
必要な結果に合わせて表示されている設定を調整する
ステップ 3
コピー、書き出し、再利用の前に表示結果を確認する
避けるべき一般的なエラー
- 画面に表示されていない形式や設定を対応済みとみなさないでください。
- ブランド、UI、制作ファイルで再利用する前に値を確認してください。
- テキストやUIに使う場合はコントラストも確認してください。
プロのヒント
- バリエーションを比較するときは元の値と結果を一緒に保存します。
- 推測で変換せず、ツールに実際に表示される形式を使います。
- モバイルやタブレットではテキストと操作項目の折り返しを許可します。
データの取り扱い
データの扱いは使用する機能によって異なります。サイトの同意、解析、アカウント機能は色の操作とは別に管理されます。
このツールでできること
ライト・ダークモード用のカラー変数を備えたshadcn/uiテーマを生成。CSSに貼り付けて一貫したUIを構築できます。 shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け はこの作業に集中し、画面にない機能を前提にしません。必要な結果を得るために表示されている操作項目を使い、別のツール、スタイルシート、デザインファイル、文書へ移す前に表示された値を確認してください。
適切な入力を準備する
shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け が求める入力から始めます。画面に応じて色、値、画像、設定などを用意します。このページで案内される形式は CSS, Tailwind, HSL, shadcn/ui です。画面に表示されない形式やオプションは、この機能で対応しているものとして扱わないでください。
結果を読み取り確認する
結果は実行した操作の文脈で確認します。元の値と比較し、計算に影響した設定を見直してください。重要なビジュアル用途ではコードだけに頼らず、実際に使用するインターフェース上でも結果を確認すると判断しやすくなります。
モバイルとタブレットで使う
shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け はサイトのレスポンシブレイアウトを使用します。狭い画面では見出し、説明、パンくず、操作項目が折り返され、長い翻訳が途中で切れないようにします。それでも、実際に使う端末と利用状況で最終結果を確認してください。
結果をプロジェクトで再利用する
結果を確認した後は、shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け に実際に表示される操作だけを使います。コピーや書き出しがある場合はその機能を利用し、設定を再現する可能性があるなら元の値も残します。UIで使う色は役割と必要なコントラストも記録すると管理しやすくなります。
関連ツール
ガイドとチュートリアル
詳細なガイドでツールの使い方を学びましょう。
よくある質問
詳細なガイドでツールの使い方を学びましょう。