家計簿アプリを作る #31：ダークモード対応
家計簿アプリ作成シリーズの第31回です。flowbite-svelte の DarkMode コンポーネントを使ってダークモードの切り替え機能を実装します。
実装方針
flowbite-svelte の DarkMode コンポーネントは、html タグへの dark クラスの付け外しと localStorage への設定保存を自動で行います。追加の実装はほぼ不要です。
Step 1：DarkMode コンポーネントを配置する
<script>
import { DarkMode } from 'flowbite-svelte';
</script>
<DarkMode />
Step 2：app.css にダークモードの設定を追加する
Tailwind v4 ではダークモードのバリアントを明示的に定義する必要があります。
@custom-variant dark (&:where(.dark, .dark *));
html タグに class="dark" が付いたとき、その子孫要素に dark: プレフィックスのスタイルが適用されます。
画面全体の背景色を設定する
flowbite-svelte のコンポーネント（Table・Card など）は dark: スタイルを持っていますが、body 自体には設定がないため背景が白いままになります。app.css の @layer base に追加します。
@layer base {
body {
@apply dark:bg-gray-900;
}
}
ハマりポイント
app.html に class="dark" が固定で付いていた
<!-- ❌ dark が固定で付いていると DarkMode コンポーネントが動作しない -->
<html lang="en" class="dark">
<!-- ✅ 初期値は空にする -->
<html lang="en">
DarkMode コンポーネントが動的に dark クラスを付け外しするため、初期値として固定で付けてしまうと切り替えが効きません。
@custom-variant と @variant の重複
Tailwind v4 では @custom-variant が正しい書き方です。@variant と両方書くと重複するため、@custom-variant のみ残します。
/* ✅ これだけでOK */
@custom-variant dark (&:where(.dark, .dark *));
まとめ
| ポイント | 内容 |
|---|---|
| コンポーネント | DarkMode を配置するだけで切り替えボタンと localStorage 保存が自動化 |
| Tailwind v4 の設定 | @custom-variant dark でダークモードバリアントを定義 |
| 背景色 | body に dark:bg-gray-900 を追加して画面全体を暗くする |
| app.html | class="dark" を固定で付けない |