IMDb克隆第5部分　建立标头　模板5 添加darkMode 3/5　实现React-icon　以切换到暗黑模式

1 年 ago

雅, 悟

1 minute

内容简介

我們將新增功能，允許切換至夜間模式。以下的GIF動畫展示了切換過程。

开发环境

操作系统：Windows10
集成开发环境：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时的处理流程

代码部分

深色模式开关

"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")}/>}
    </>
  )
}

请参考

下一个主题

其他

优达学城

提交到 GitHub 的代码变更。