ダークモードを実装

このドキュメントでは Next.js Starter Kit に対してダークモードの機能を実装する手順を紹介します。

前提条件

今回の実装に関して、以下の環境を前提として紹介をしていきます。

Next.js - Page Router 14.2.18
Sitecore JSS 22.3.1
Tailwind CSS 4.0.0

ダークモードを有効にする

next-themes のパッケージをインストールする

ThemeProvider を src/pages/_app.tsx に追加します。以下ではコードは一部抜粋しています。

src/pages/_app.tsx

tailwind.config.js に Darkmode に関する設定を追加します。

tailwind.config.js

上記の設定が完了したタイミングで、ページを参照すると以下のように PC のモードによって表示が変わる状況を確認することができます。例えば、ライトモードで利用している PC の画面では以下のようにライトモードで表示されており、HTML に data-theme に対してモードが記載されています。

html

ダークモードの際は以下のコードに切り替わっています。

html

切り替えボタンの実装

PC のモードに合わせてダークモードが有効になる形となりましたが、モードの切り替えボタンを追加して、ユーザーの好みで切り替えることができるようにするためには、モード切り替えのコンポーネントを追加してページに実装する形となります。

ThemeSwitcher レンダリングアイテムの追加

今回作成をするコンポーネントは、画面の表示を切り替えるだけとなるため、データソースを必要としないコンポーネントとして作成をしていきます。コンポーネントの作成に関しては別の記事で紹介していますので、まだ参照していない場合は一度ご覧ください。

カスタムコンポーネントの作成

ここでは Sitecore が提供する Next.js Starter Kit に対して、提供されているコンポーネント以外のカスタムコンポーネントを追加するための手順を紹介します。

以下の手順で、コンポーネントを追加する準備を進めていきます。

今回は、以下のパスを作成してコンポーネントを作成していきます。

右クリックをして、コンポーネントウィザードを立ち上げます

Component の名前として ThemeSwitcher を設定します。

Datasource タブを開いて、以下の２項目を設定します。
- Datasource: User current page
- Rendering template: Templates/Foundation/JavaScript Services/Json Rendering

作成されたレンダリングアイテムのアイコンを変更します。Configure - Icon を選択して、office/32x32/moon_half.png をアイコンとして指定します。
Home - Display name を選択して、表示名を Theme Switcher に変更します。

これでコンポーネントの準備ができました。