コンテンツサイトのための実践的なダークモード実装

ダークモードは、ライトテーマにフィルターをかけるだけのものではありません。必要なのはトークンシステムです。

セマンティックな色を定義する

コンポーネント内にHEX値を直接書くのではなく、--color-surface や --color-foreground のような変数を使います。Tailwindはそれらのトークンをユーティリティにマッピングできるため、Astroコンポーネントをきれいに保てます。

読み込み時のちらつきを防ぐ

ドキュメントのhead内にインラインスクリプトを置くと、描画前に localStorage とシステム設定を読み取れます。Launchfolioはすぐに dark クラスを適用し、不自然なちらつきを避けます。

両テーマでコントラストを確認する

バッジ、ボーダー、控えめなテキストは、ライトテーマでは問題なく見えてもダークテーマでWCAGを満たさないことがあります。特にフォーカスリングとフォーム入力は確認しましょう。

購入者向けにドキュメント化する

プレミアムテーマでは、トークンがどこにあり、アクセントカラーをどう調整するかを説明する必要があります。スタイルガイドページはサポートを減らし、プロダクトとしての安心感を高めます。

よくできたダークモードは意識されません。雑に作られたダークモードは信頼を損ないます。