Skip to Content
比較の観点ダークモード対応

ダークモード

ダークモードは、nextra-theme-docs に依存パッケージとして同梱されている next-themes パッケージによって実現されている。本プロジェクト側で別途追加する 必要はなかった。ナビバー/フッタには、ライト・ダーク・システムの3モードに対応 したテーマ切替トグルが表示され、訪問者は明示的に切り替えるか、OSの設定に 委ねるかを選べる。

ルートレイアウトで <Layout> コンポーネントに themeSwitch(ダーク/ライト/ システム各選択肢の)ラベルを渡す以外、追加のアプリケーションコードは必要 なかった。テーマの永続化・<html> 要素へのクラス切り替え・システム設定の 検出は、いずれも next-themes と Docs テーマが内部で処理する。

Last updated on