ダークモード

対応状況: 標準。 このサイトでは VitePress の appearance を有効にし、ヘッダーの 外観 コントロールからライト／ダークテーマを切り替えられます。初期状態は利用者の設定を考慮します。

コンテンツ側の注意

本文に明るい背景色を直接指定するとダークモードで読みにくくなります。VitePress の CSS 変数やテーマの色を使い、両方の外観でコード、図、画像を確認してください。

Mermaid はこのサイトのプラグイン設定に従ってテーマを選びます。図の可読性も外観を切り替えて確認しますが、ダークモードの有無と Mermaid プラグインの有無は別の機能です。

プロジェクトの .vitepress/theme/custom.css は --vp-c-brand-1 などのテーマ変数を使ってデモ用のクラスを装飾し、既定テーマが外観の切替と両方のパレットを提供します。

カスタム配色の例は カスタマイズ にあります。