テーマ設定

作るもの

ユーザーが見た目全体を変えられるアプリ — 1 つのスタイルシートをリンクするところから始めて、保持される実行時のテーマ切り替えで終わります — 約 15 分で作ります。

始める前に

先に、お使いのスタックの フレームワークチュートリアル を先に済ませて、テーマを付ける小さな Lily フォームを用意してください。ここでの内容は 7 つのフレームワークすべてで動きます。コードサンプルは Svelte とプレーンな HTML で示します。

ステップ 1 — 既成のテーマをリンクする

themes/ ディレクトリには、45 の独立したスタイルシートが入っています。アプリの静的アセットにコピーして、どれか 1 つをリンクします:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

主なテーマ:

• 公共部門 — NHS England / Scotland / Wales(それぞれ患者向けと実務者向けのバリアント)、GOV.UK(united-kingdom-government-digital-service)、USWDS(united-states-web-design-system).
• ベンダー由来 — adobe-spectrum, mozilla-protocol.
• 汎用 — light, dark, nord, dracula, wireframe, corporate, synthwave、ほかにも多数あります。

ステップ 2 — 何でも上書きする

テーマのセレクターは次で囲まれています: :where(...)詳細度がゼロなので、自分で書いたルールが必ず勝ちます。単純明快です:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

ステップ 3 — theme-picker による実行時の切り替え

theme-picker ヘルパーは、アイコンボタンとリストボックスを備えたヘッドレスのコンポーネントで、テーマのライフサイクル全体を受け持ちます。管理された 1 つの <link> を差し替えて、選ばれたスタイルシートを読み込み(有効なテーマだけが取得されます)、ドキュメントに data-theme="{slug}" を設定し、必要に応じて次に保持します: localStorage。ここでは Svelte で示します。React、Vue、Angular、HTML、Nunjucks、Blazor のポートも契約ごとに同じ内容です:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

これで連携は完了です。キーボード操作は WAI-ARIA APG のリストボックスのパターンに従い、コントロール自体はヘッドレス(クラスフック .theme-picker)なので、有効なテーマがそのまま適用されます。

ステップ 4 — 自分の CSS でテーマに反応する

ヘルパーがドキュメントのルートに data-theme を設定するので、自分のスタイルをそれに応じて分岐できます:

[data-theme="dark"] .site-logo { filter: invert(1); }

サーバーレンダリングに関する注意

このヘルパーはすべての DOM 書き込みをフレームワークのマウント/エフェクトのライフサイクル内で行うので、設計上 SSR 対応です。最初の描画でのちらつきを避けるには、サーバー側で(たとえばクッキーから)最初のテーマの <link> と data-theme を描画してください。Svelte のヘルパーのリポジトリには実行できる SvelteKit のクッキーの例があり、ほかのカタログでもそれぞれのスタックに合わせた同じパターンを説明しています。

次のステップ

• 設定ヘルパー — 言語、テキストサイズ、共有、日付/時刻の入力にも同じパターンが使えます。
• テーマの投稿 — 各テーマは、クラスフックを対象にした 1 つの独立したスタイルシートです。次を参照してください: 貢献の手引き.

途中で疑問があれば、 ヘルプページ に答えがたくさんあります。もし手順がもっと分かりやすくできるなら、 お知らせください 。喜んでチュートリアルを改善します。