imdb clone Part5 ヘッダー作成 テンプレート 5 Add a darkMode 3/5 React-icon実装 ダークモードに切り替えできるよう実装

概要

目次

今回はダークモードに切り替えができるように実装します。
以下gifアニメは切り替えているときの様子です。

開発環境

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"

実装のポイント

DarkModeからLightModeに切り替えるときの処理の流れ

コード部分

DarkModeSwitch

DarkModeSwitch.jsx

"use client";
import React from 'react'
import {MdLightMode} from "react-icons/md";
import {BsFillMoonFill} from "react-icons/bs"
import {useTheme} from "next-themes";


export default function DarkModeSwitch() {
    const{theme,setTheme} = useTheme();
    const currentTheme = theme;
    return (
    <>  
        { currentTheme === "dark" ? <MdLightMode onClick={() => setTheme("light")}/> :
        <BsFillMoonFill onClick={() => setTheme("dark")}/>}
    </>
  )
}

参考

next-themes

その他

Udemy

githubコミット分