ThemeToggle

ライトモードとダークモードを切り替えるための専用コンポーネントです。

Dependencies

このコンポーネントは以下の内部コンポーネントに依存しています。事前にプロジェクトへ追加してください。

Usage

実際のサイト上でアイコン付きのトグルとして表示され、操作するとHTMLの data-theme 属性と localStorage が自動的に更新されます。

Tip

通常、このコンポーネントは記事内ではなく、Layout.astro の中で Header コンポーネントの slot="actions" に配置して、サイト全体で共通利用します。

← トップへ戻る