メインコンテンツまでスキップ

テーマレベル

テーマは 3 つの独立したレベルから構築されます。この分割を理解することが、テーマが動作に触れずにアプリケーション全体の見た目を変えられる理由です。

レベル 1: デザイントークン​

トークンは --st- プレフィックス付きのセマンティック CSS カスタムプロパティです。色、タイポグラフィ、間隔、角丸、境界線、影、z-index レイヤー、モーション、コントロールサイズ、スクロールバー、チャットキャンバスをカバーします。

コンポーネントはトークンのみを参照します — 色、フォント、間隔の値をハードコードすることは決してありません。テーママニフェストでトークンをオーバーライドすると、それを使用するすべてのコンポーネントが再スタイリングされます:

{
  "tokens": {
    "dark": {
      "color-accent": "#ff00aa",
      "font-ui": "'Atkinson Hyperlegible', system-ui, sans-serif"
    }
  }
}

トークンは継承チェーンを通じて解決されます: モードの組み込みデフォルト、次に親テーマ、次にテーマ自体です。ダークモードは、ダークのオーバーライドがない場合、テーマのライトトークンにフォールバックします。完全なコントラクトはデザイントークン を参照してください。

レベル 2: コンポーネントスキン​

コンポーネントスキンは、安定したフックを通じて組み込みコンポーネントを再スタイリングする CSS です。ホストは data-component、data-part、data-role、data-state 属性を公開し、テーマは生成された CSS モジュールのクラス名ではなく、これらの属性をスタイリングします:

@layer theme {
  [data-component='button'][data-variant='primary'] {
    background: var(--st-color-accent);
  }
}

スキンは固定順序のカスケードレイヤーで適用され、ユーザーオーバーライドレイヤーが最後です。テーマ CSS での !important は、アクセシビリティ設定レイヤーを除き禁止されています。レイヤー順序とフックリファレンスはコンポーネントスキン を参照してください。

レベル 3: シェルレイアウト​

シェルレイアウトはメイン領域の構成です: ナビゲーションレール、管理パネル、チャットワークスペースです。宣言型で、JavaScript ではなく theme.json で表現されます:

{
  "shellLayout": {
    "navigationRail": {
      "main": [
        "menu-toggle",
        "chats",
        "characters",
        "personas",
        "lorebooks",
        "backgrounds",
        "ai-settings",
        "plugins"
      ],
      "bottom": ["settings"]
    }
  }
}

有効なレール項目は chats、characters、personas、lorebooks、backgrounds、ai-settings、plugins、settings と、オプションの menu-toggle です。main グループは上から流れ、bottom は下端にピン留めされます。省略した項目は標準順序で追加し直されるため、テーマが誤って設定を隠してユーザーを復旧からロックアウトすることはありません。

他のインターフェースの模倣​

レベルが互いに素であるため、テーマはまったく異なるインターフェースパラダイムを模倣できます:

  • コンソール風テーマはトークンとスキンを変更し、レール、パネル、ボタンをゲーム UI のように見せます。
  • ビジュアルノベル風テーマはチャットビューポート、メッセージ、キャラクターヘッダーを再スタイリングし、チャットロジックはそのまま保たれます。
  • モバイルアプリ風テーマは宣言型シェルレイアウトでレールとパネルを並べ替えます。

これらはいずれもチャットロジック、データ、プラグイン動作に触れる必要がありません — だからこそテーマサーフェスは丸ごと置き換えられるのです。v1 が提供しない唯一のものは、シェル領域の自由形式の再配置です。スロットはスタイリングされ埋められるもので、移動されるものではありません。範囲についてはシェルコントラクト を参照してください。