我期待着实现这个博客中列出的结果，但与Next 13的新appDir. Flicker-free Dark Theme Toggle
刷新时我的暗模式 Flink 。
//pages/_ app已不存在。如何更改以匹配新布局. tsx？< themeProvider > to match the new layout.tsx?
我的文件列在下面。谢谢你的任何知识。
快速设置
npx create-next-app@latest -D tailwindcss my-app接下来的13个设置文档
https://beta.nextjs.org/docs/upgrade-guide//应用程序/布局. tsx
import Darkmode from './darkmode'
export default function RootLayout({
children,
}:{
children: React.ReactNode;
}) {
return (
<html lang="en">
<head></head>
<body>
<button className='h-8 w-8 p-1 bg-blue-300 dark:bg-red-600 rounded-full'>
<Darkmode/>
</button>
{children}
</body>
</html>
)
}//应用程序/暗模式. tsx
'use client'
import{useEffect, useState}from'react';
function Darkmode() {
const[darkMode,setDarkMode]=useState(false);
useEffect(()=>{
if(localStorage.theme==='dark'||(!('theme'in localStorage)&&window.matchMedia('(prefers-color-scheme:dark)').matches)){
document.documentElement.classList.add('dark')
localStorage.theme='dark'
setDarkMode(!darkMode)
}else{
document.documentElement.classList.remove('dark')
localStorage.theme='light';
}
},[])
const changeTheme=()=>{
localStorage.theme=darkMode?'light':'dark'
setDarkMode(!darkMode)
if(darkMode){
document.documentElement.classList.remove("dark");
}else{
document.documentElement.classList.add("dark");
}
};
return (
<div className='h-6 w-6' onClick={changeTheme}/>Dark</div>
);
}
export default Darkmode;
1条答案
按热度按时间gupuwyp21#
vercel的Lee在他的博客中用tailwind做了一个很酷的例子，我推荐这个模式，因为它更容易维护。
你可以在你的tailwind配置中设置一个暗模式主题，然后使用Nextjs ThemeProvider组件来修改它。下面是来自Lee和tailwind文档的代码。祝你好运。