More than 1 year has passed since last update.

imdb clone Part4　 5 Add a darkMode 2/5　next-themesを追加

Last updated at 2023-05-09Posted at 2023-05-09

概要

今回はダークモード実装に必要なプラグイン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

{
  "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コミット分

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

imdb clone Part4 5 Add a darkMode 2/5 next-themesを追加

概要