テーマ設定

最終更新日: 7月 13, 2026

Frutjam の CSS のみのテーマシステムは、CSS 変数と単一のデータ属性を使用します。 JavaScript を使用せずに、明るいテーマ、暗いテーマ、カスタムテーマを切り替えます。 WCAG AA カラートークンが組み込まれており、Django、HTMX、Laravel、およびあらゆる Tailwind CSS v4 プロジェクトで動作します。

Frutjam には、Berry テーマシステム (OKLCH カラー値に基づいて構築された一連の名前付きテーマ) が付属しています。 data-theme 属性を使用して、アプリ全体にテーマを適用するか、特定のセクション内にテーマをネストします。 CSS のみ、JavaScript は不要、WCAG AA にアクセス可能 — Django、HTMX、Laravel、React、およびあらゆる Tailwind CSS v4 プロジェクトで動作します。

Snowberry

Darkberry

Blueberry

Strawberry

Grapeberry

Peachberry

内蔵テーマ

Frutjam には、すぐに使える 2 つの組み込みテーマが含まれています。

スノーベリー(光)

デフォルトのライトテーマ。 data-theme が設定されていない場合に自動的に適用されます。

<html data-theme="snowberry">
  <!-- or use the alias -->
</html>

<html data-theme="light">
  <!-- same as snowberry -->
</html>

ダークベリー(ダーク)

組み込みのダークテーマ。

<html data-theme="darkberry">
  <!-- or use the alias -->
</html>

<html data-theme="dark">
  <!-- same as darkberry -->
</html>

テーマの適用

data-theme を任意の HTML 要素に追加します。このテーマはすべての子供たちに伝わります。

<!-- Apply globally -->
<html data-theme="snowberry">
  <body>
    <!-- All components use snowberry theme -->
  </body>
</html>

ネストされたテーマ

テーマは入れ子にすることができます。子要素は、そのサブツリーの親テーマをオーバーライドします。

<html data-theme="snowberry">
  <section data-theme="darkberry">
    <!-- This section uses the dark theme -->
    <button class="btn btn-primary">Dark Button</button>
  </section>

  <!-- Back to light theme here -->
  <button class="btn btn-primary">Light Button</button>
</html>

ダークモードのバリアント

Tailwind の dark: プレフィックスを使用します。これは、data-theme="dark" と data-theme="darkberry" の両方でアクティブになります。

<p class="text-on-base dark:text-primary">
  Adapts to the active theme automatically.
</p>

カスタムテーマ

[data-theme] セレクター内で CSS 変数を定義して、独自のテーマを作成します。完全な変数リファレンスについては、設定ページを参照してください。

@layer theme {
  :is([data-theme="myberry"]) {
    --scheme-color: light;
    --border-radius: 0.5rem;
    --color-base: oklch(1 0 0);
    --color-primary: oklch(55% 0.22 142);
    --color-secondary: oklch(60% 0.18 280);
    --color-accent: oklch(70% 0.20 60);
  }
}

<html data-theme="myberry">
  <!-- Your custom theme is active -->
</html>

色
構成