teispace/next-themesを使用するときの注意点
techおさらい
以前の記事で紹介した@teispace/next-themes
next-themesとの違いは、React19の<script>の扱いに対応しているかどうか
next-themes
- React19以前の仕様に準拠 React19以降の開発ではConsole Errorが発生する。
storage="local"がデフォルト。初期設定でCookieを使用しない。
@teispace/next-themes
- React19の仕様に準拠 React19以降の開発でもConsole Errorが発生しない。
storage="hybrid"がデフォルト。初期設定でCookieを使用する。attribute="data-theme"がデフォルト(New!!)
attribute="data-theme"
これは<ThemeProvider>のthemeを指定するための属性を指定するオプションです。
従来のnext-themesの場合、attribute="class"がデフォルトでした。
しかし、teispace/next-themesを使用する場合、attribute="data-theme"がデフォルトとなります。
そのため、Tailwind CSSを利用している場合、themeの指定方法に違いが発生します。
結果的に、ダークテーマが無効化されてしまうこともあります。
data-themeとは？
HTML5よりdata-*でカスタム属性を追加することができるようになりました。
<html data-theme="dark"></html>
<div data-user-id="123"></div>
<button data-loading="true"></button>
[data-theme="dark"]{...}
[data-loading="true"]{...}
document.documentElement.dataset.theme; // デフォルト:"dark"
document.documentElement.dataset.theme = "light";
htmlの属性追加が可能になりました。
記述方法 : attribute="class"の場合
<ThemeProvider
...
attribute="class"
@custom-variant dark (&:is(.dark *));
記述方法 : attribute="data-theme"の場合
<ThemeProvider
...
attribute="data-theme"
@custom-variant dark (&:is([data-theme="dark"] *));
最後に
ご利用の際はご注意を〜〜 ﾉｼ