概要

目次

今回はダークモード実装に必要なプラグインnext-themeを導入します。

以下導入後の様子です。ダークモードにはなっていますが切り替えはできません。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

next-themesとgithubのドキュメント部分を参考にします。

1.Providerコンポーネントを作成する
2.layoutにProviderコンポーネントを使います。

3.Provider コンポーネントに設定を加えます。

コード部分

package.json

package.json

{
  "name": "imcbclone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.5",
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "next": "13.3.1",
+    "next-themes": "^0.2.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.8.0",
    "tailwindcss": "3.3.2"
  }
}

Provider

Provider.jsx

"use client"
import { ThemeProvider } from 'next-themes'
import React from 'react'

export default function Providers({children}) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
        {children}
    </ThemeProvider>
  )
}

layout

layout.jsx

import './globals.css'
import Header from '@/components/Header'
+import Providers from './Providers'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
+        <Providers>
          {/* Header */}
          <Header />

          {/* Navbar */}

          {/* SearchBox */}

          {children}
+        </Providers>
      </body>
    </html>
  );
}

参考

next theme

基本的な設定

ThemeProviderの設定

TailWind時の設定

その他

Udemy

githubコミット分