テーマのカスタマイズ

個々のデザイントークンについては以下のデザインシステムのドキュメントも参照してください。

概要

Camome のデザイントークン（色・フォント・ラディアス）などはすべて CSS Custom Properties で管理されているため、ブランドごとの見た目のカスタマイズが簡単に行えます。

Camome はダークテーマもはじめからサポートしています。

デフォルトテーマ

デフォルトのテーマファイルは @camome/system/theme.css または @camome/system.theme.min.css からインポートできます。カスタマイズする必要がない場合はこれを直接使用してください。

設定ファイル

テーマを変更したい場合はプロジェクトルートに camome.config.js ファイルを作成して、以下のように設定します:

camome.config.js

import { defineConfig } from "@camome/system";

export default defineConfig({
  themes: {
    light: {
      color: {
        primary: {
          0: "#faf5ff",
          1: "#f3e8ff",
          2: "#e9d5ff",
          3: "#d8b4fe",
          4: "#c084fc",
          5: "#a855f7",
          6: "#9333ea",
          7: "#7e22ce",
          8: "#6b21a8",
          9: "#581c87",
        },
      },
      Switch: {
        bgOn: (get) => get("color.success.emphasis"),
        bgOff: (get) => get("color.danger.emphasis"),
        fontOff: (get) => get("color.font.onEmphasis"),
      },
    },
  },
});

この例ではプライマリーカラーを紫に変更しているため、ボタンやチェックボックスなど、全てのコンポーネントにカスタムのアクセントカラーが一括で適用されます。

Switch プロパティはコンポーネントレベルのテーマの一例です。多くのコンポーネントは color.<color-scheme>.<variant>... などの汎用トークンを使用しているため逐一設定する必要はありませんが、複雑なコンポーネントは独自のトークンを持っています。

例えば <Button colorScheme="danger" variant="solid" /> であれば color.danger.solid.bg などが使用され、これは <Tag colorScheme="danger" variant="solid" /> などとも共有されています。現在はこれらをコンポーネントごとに個別に変更することはできません（主にグローバルCSSのサイズを小さくするため）。

テーマ内のトークンを参照する

上記の Switch の例のように、テーマ内の他のトークンを参照したい場合は get(path: string) を第 1 引数に取るコールバック関数を渡します。

camome.config.js

import { alpha } from "./color-utils";

/** @type { import("@camome/system").Config;} */
export default {
  themes: {
    light: {
      color: {
        primary: {
          subtle: (get) => alpha(get("color.primary.5"), 0.5),
        },
      },
    },
  },
};

この例では、 color.primary.5 の色を半透明にした値が color.primary.subtle に適用されます。仮に color.primary.subtle が別のトークンを参照していたとしても、 get 関数は実際の値に解決するまで再帰的に実行されます。

2つのトークンが循環参照しないように注意してください。

デフォルトテーマの一部のトークンはこのような参照を行っているため、カラーシェード（color.primary.5 など）を変更するだけで他の値へ「カスケード」します。

Camome CLI

Camome CLI を使うことで設定ファイルの定義を適用したカスタムテーマを生成できます。

npx camome theme

以下のオプションを指定できます:

--output: CSS の生成先のパス（デフォルトは theme.css）
--config: 設定ファイルのパス（デフォルトは camome.config.js）

--watch モードやバンドラーとの統合などは検討中です。現状はテーマ変更の度にコマンドを実行してください。

コンポーネントのオーバーライド

Camome のtheme.css の先頭では以下のように CSS Cascade Layersの優先順位を宣言しています。

@layer cmm.reset, cmm.theme, cmm.base, cmm.components;

この記述のおかげで、 theme.css より後に宣言された CSS のスタイルは(上記のレイヤー内でない限り)詳細度に関係なく優先されます。cmm.custom のようなレイヤーを作ってもいいですが、必須ではありません。

globals.css

/* Buttonのスタイルをオーバーライド
   (@layerの外側は内側より優先される) */
.Button {
  border-radius: 999px;
}

/* オプショナル */
@layer cmm.custom {...}

ダークテーマ

Camome は light と dark テーマに対応しており、 <html> タグの data-theme 属性で指定することができます。

index.html

<!DOCTYPE html>
<html data-theme="<light または dark>">
  <!-- コンテンツ -->
</html>

theme.css 内では以下のように定義されています:

theme.css

@layer cmm.theme {
  :root[data-theme="light"] {
    --cmm-color-primary-font: var(--cmm-color-primary-7);
    --cmm-color-primary-emphasis: var(--cmm-color-primary-6);
    {...}
  }
}

アプリケーション内の CSS で各テーマごとにスタイリングする必要がある場合は次のように書きます:

:root[data-theme="dark"] .your-class {
  /* Your styles for dark theme... */
}

light と dark はそれぞれ独立してカスタマイズできます。設定ファイルの項目を参照してください。

フォント

デフォルトテーマでは OS のシステムフォントが指定されていますが、このドキュメントのデモでは Inter を使用しています（ラテン文字のみ）。フォントの変更はタイポグラフィーを参照してください。