テーマ設定 - shadcn-solid

ドキュメント

テーマ設定

CSS変数、またはお好みのCSSフレームワークを使用してテーマを設定します。

テーマ設定には、CSS変数を使用するか、お好みのCSSフレームワークのユーティリティクラスを使用するかを選択できます。

ユーティリティクラス

<div class="bg-zinc-950 dark:bg-white" />

ユーティリティクラスでテーマ設定を行うには、components.jsonファイル内のtailwind.cssVariablesをfalseに設定します。

components.json

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/app.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

またはunoを使用します。

components.json

{
  "style": "default",
  "uno": {
    "config": "uno.config.ts",
    "css": "app/app.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

CSS変数

<div class="bg-background text-foreground" />

CSS変数でテーマ設定を行うには、components.jsonファイル内のtailwind.cssVariablesをtrueに設定します。

components.json

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

またはunoを使用します。

components.json

{
  "style": "default",
  "uno": {
    "config": "uno.config.ts",
    "css": "app/app.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

命名規則

色にはbackgroundとforegroundというシンプルな命名規則を使用しています。background変数はコンポーネントの背景色に、foreground変数はテキスト色に使用されます。

変数がコンポーネントの背景色に使用される場合、backgroundの接尾辞は省略されます。

以下のCSS変数が与えられたとします。

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

次のコンポーネントのbackground色はhsl(var(--primary))になり、foreground色はhsl(var(--primary-foreground))になります。

<div class="bg-primary text-primary-foreground">Hello</div>

CSS変数は、色空間関数なしで定義する必要があります。 詳しくはTailwind CSSのドキュメントを参照してください。

変数の一覧

以下はカスタマイズ可能な変数の一覧です。

<body />などのデフォルトの背景色

--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

<TabsList />、<Skeleton />、<Switch />などの控えめな背景

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

<Card />の背景色

--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

<DropdownMenu />、<HoverCard />、<Popover />などのポップオーバーの背景色

--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;

デフォルトの境界線の色

--border: 214.3 31.8% 91.4%;

<TextField />、<Select />、<Textarea />などの入力欄の境界線の色

--input: 214.3 31.8% 91.4%;

<Button />のプライマリカラー

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

<Button />のセカンダリカラー

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

<DropdownMenuItem>や<SelectItem>などのホバーエフェクトのようなアクセントに使用

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

<Button variant=

--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;

フォーカスリングに使用

--ring: 215 20.2% 65.1%;

カード、入力欄、ボタンの角丸の半径

--radius: 0.5rem;

新しい色の追加

新しい色を追加するには、CSSファイルとtailwind.config.jsファイルの両方に追加する必要があります。

app/app.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))"
      }
    }
  }
};

またはunoを使用します。

uno.config.ts

export default defineConfig({
  theme: {
    colors: {
      warning: "hsl(var(--warning))",
      "warning-foreground": "hsl(var(--warning-foreground))"
    }
  }
});

これで、コンポーネント内でwarningユーティリティクラスを使用できるようになります。

<div class="bg-warning text-warning-foreground" />

他のカラーフォーマット

テーマ設定にはHSLカラーの使用を推奨しますが、お好みであれば他のカラーフォーマットも使用できます。

rgb、rgba、またはhslカラーの使用に関する詳細は、Tailwind CSSのドキュメントを参照してください。

components.json ダークモード