H 原水工房
Docs / tech

ダークモードを実装

2025-01-24 2025-07-08 |
#Sitecore

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

前提条件

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

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

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

  • next-themes のパッケージをインストールする
npm install next-themes
  • ThemeProvider を src/pages/_app.tsx に追加します。以下ではコードは一部抜粋しています。
src/pages/_app.tsx 
import { GoogleTagManager } from '@next/third-parties/google';
import Bootstrap from 'src/Bootstrap';
import { ThemeProvider } from 'next-themes';

function App({ Component, pageProps }: AppProps<SitecorePageProps>): JSX.Element {
const { dictionary, ...rest } = pageProps;

 return (
     <>
     <Bootstrap {...pageProps} />
     <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER || ''} />
     <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
       <ThemeProvider>
         <Component {...rest} />
       </ThemeProvider>
     </I18nProvider>
     </>
 );
}
  • tailwind.config.js に Darkmode に関する設定を追加します。
tailwind.config.js 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [],

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

<html lang="en" data-theme="light" style="color-scheme: light;">
  ...
</html>

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

<html lang="en" data-theme="dark" style="color-scheme: dark;">
  ...
</html>

切り替えボタンの実装

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

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

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

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

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

  • 今回は、以下のパスを作成してコンポーネントを作成していきます。
- sitecore
  - layout
    - Renderings
      - Feature
        - **Tailwind/**
  • 右クリックをして、コンポーネントウィザードを立ち上げます

  • 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 に変更します。

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

コンポーネントのファイルを作成

作成をしたコンポーネントが利用するコードをプロジェクトに追加する必要があります。ここでは JSS のコマンドを実行してファイルを作成します。

jss scaffold ThemeSwitcher

上記のコマンドを実行すると、 src/components/ThemeSwitcher.tsx のファイルが作成され、コードは以下のようになります。

src/components/ThemeSwitcher.tsx 
import React from 'react';
import { ComponentParams, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';

interface ThemeSwitcherProps {
  rendering: ComponentRendering & { params: ComponentParams };
  params: ComponentParams;
}

export const Default = (props: ThemeSwitcherProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <p>ThemeSwitcher Component</p>
      </div>
    </div>
  );
};

コンポーネントを配置する

コンポーネントのレンダリングアイテム、およびコードの準備ができました。まず Pages で利用できるようにするために、対象となるサイトで利用できる Rendering に追加します。今回は、Navigation に対して追加しました。

Page Builder を立ち上げて、コンポーネント一覧に表示されているのを確認します。

実際に配置すると、サンプルのコードで用意されているコンポーネント名が表示されているのを確認できます。

コンポーネントのコードを書き換える

現在のコンポーネントのコードに対して、モードを切り替えるためのコードに変更をします。このコンポーネントは Sitecore からのデータを利用せずに動作させる形とするため、以下のように標準的なダークモードに関するコードに変更をします。

src/components/ThemeSwitcher.tsx 
import { useTheme } from 'next-themes';
import React, { useEffect } from 'react';

export const Default = (): JSX.Element => {
  const { theme, setTheme } = useTheme();

  useEffect(() => {}, [theme]);

  return (
    <div>
      <button onClick={() => setTheme('light')} disabled={theme === 'light'}>
        Light
      </button>
      <span> - </span>
      <button onClick={() => setTheme('dark')} disabled={theme === 'dark'}>
        Dark
      </button>
      <span> - </span>
      <button onClick={() => setTheme('system')} disabled={theme === 'system'}>
        System
      </button>
    </div>
  );
};

コードを書き換えた後、新たにページで表示を確認すると、以下のようにモードが切り替わるようになりました。

ダークモードとライトモードの切り替えができるようになりました。

まとめ

今回は標準的なダークモードの実装に関して紹介をしています。このコンポーネントの作り方としては、Sitecore のデータソースを利用しない、シンプルなコンポーネントとなるため、一般的な Next.js の実装と同様に設定できることを確認することができました。

← Sitecore 一覧に戻る 技術メモ全体を見る →