ウェブサイトにダークモードを追加するブロックです。
- ライトモード
- ダークモード
- OS側のシステムに準拠
上記 3 つのパターンで切り替えができます。
基本的にサイトエディターのヘッダーやフッターなど、全ページで共通して読み込む箇所に設置してください。
「ウェブサイトの白背景が眩しくて目に負担がかかる」という人もいます。ウェブサイトのアクセシビリティへの取り組みの一環として、導入をおすすめします。
サンプル
カラー変更もできます
ダークモード ブロックには、ダークモードにした場合のカラーを変更する機能があります。
変更できるカラー
- Base
- Contrast
- Primary
- Secondary
- Tertiary
上記は Hakoniwa テーマ内の theme.json ファイルで定義されているカラーです。
特に何も設定しなくてもブロックを設置するだけでダークモード時のデフォルトのカラーが設定されていますので、機能します。
また「ダークモードはいいんだけど、黒背景で白文字は極端すぎて見づらい」なんてこともあると思います。デフォルトのカラーはその辺も考慮していますが、お好みでカラーを調整することもできます。