boa tarde professor, estou utilizando o next em minhas aplicações, como faço para utilizar o tema escuro? o document.documentElement.classList.toggle('dark') não esta funcionando
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
boa tarde professor, estou utilizando o next em minhas aplicações, como faço para utilizar o tema escuro? o document.documentElement.classList.toggle('dark') não esta funcionando
Oi Marcello, tudo bem?
Para utilizar o tema escuro em suas aplicações Next.js, você pode utilizar a biblioteca "next-themes". Com ela, você pode facilmente alternar entre os temas claro e escuro em sua aplicação.
Para começar, você precisa instalar a biblioteca em seu projeto. Você pode fazer isso executando o seguinte comando no terminal:
npm install next-themes
Após a instalação, você precisa envolver o componente raiz de sua aplicação com o componente "ThemeProvider" fornecido pela biblioteca. Por exemplo:
import { ThemeProvider } from 'next-themes'
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider defaultTheme="light">
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
Observe que o "defaultTheme" é definido como "light", indicando que o tema padrão é o claro. Você pode alterar isso para "dark" se quiser que o tema padrão seja o escuro.
Agora, para alternar entre os temas, você pode usar o hook "useTheme" fornecido pela biblioteca. Por exemplo:
import { useTheme } from 'next-themes'
function MyComponent() {
const { theme, setTheme } = useTheme()
return (
<div>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Alternar tema
</button>
</div>
)
}
Observe que o hook "useTheme" retorna um objeto com duas propriedades: "theme", que indica o tema atual, e "setTheme", que é uma função que você pode chamar para alternar entre os temas. É uma maneira de fazer.
Um abraço e bons estudos.