テーマ設定の変更方法

[h-yabi2]

• テーマ設定には、CSS変数を使用するか、Tailwind CSSユーティリティクラスを使用するかを選択できる

参考URL

• Theming
• shadcn/ui theme generator

[h-yabi2]

設定方法

shadcn/ui theme generator でカラーテーマを作成

• shadcn/ui theme generatorより、カラー設定を行い、Copy または Share し、以下の箇所に貼り付ける↓

app/globals.css

:root {
  --background: 0 52.17% 81.96%;
  --foreground: 304.92 35.26% 66.08%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --primary: 220 4.92% 23.92%;
  --primary-foreground: 210 40% 98%;
  --secondary: 52.17 100% 81.96%;
  --secondary-foreground: 222.3 100% 76.08%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --input: 214.3 31.8% 91.4%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --border: 214.3 31.8% 91.4%;
  --destructive: 0 100% 50%;
  --destructive-foreground: 210 40% 98%;
  --ring: 215 20.2% 65.1%;
  --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }

表示確認

• 上記のように設定することでデフォルトの設定が上書きされて、例えば bg-secondary は以下のようなカラーになる

[h-yabi2]

ユーティリティ・クラス設定方法

app/globals.css

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

表示確認

• 例： <ButtonBase className="bg-warning text-warning-foreground" />