テーマの切り替え
ライトモードとダークモードをどう切り替えるか
既定では OS の設定に従います。prefers-color-scheme を見ているので、
何も書かなくてもライトモードとダークモードが切り替わります。
固定したいとき
<html> に data-theme を付けます。
<html data-theme="dark">付けなければ OS に従い、付ければその値で固定されます。
next-themes と組み合わせるとき
そのままで動きます。 next-themes は既定で <html> に data-theme を付けるので、
このシステムが見ている属性と一致します。
attribute="class" に変えている場合だけ注意が要ります。class="dark" は
切り替わるのに色が変わりません。 そのときは両方を出してください。
<ThemeProvider attribute={['class', 'data-theme']}>next-themes は Next.js 専用ではありません。 peerDependencies は React と React DOM だけなので、Vite など他の React 環境でも使えます（README の例は Next.js で書かれています）。
面ごとの深さ
data-theme は明暗を決めるだけです。同じテーマの中の深さは
data-sg-surface で宣言します。
<body data-sg-surface="page">
<article data-sg-surface="surface">…</article>
</body>深い面では、文字色や境界色が自動で1段深い値を指します。 背景だけを塗る方法は用意していません——塗れてしまうと前景が浅いまま残り、 読みにくい組み合わせができてもエラーになりません。