avatar
Desenvolvedor Web MongoDB, ExpressJS, ReactJS, NodeJS.



07/11/2020 - Uma solução de DarkMode / LightMode em NextJS.


Hoje apliquei uma solução para alternar entre light e dark mode com o apoio do tutorial do NextJS para global styles.

Em resumo a solução aplica um useState num arquivo de layout para controlar a cor de texto, cor do background e texto do botão de alternar modo

Os estados serão usados em variáveis dentro de template strings no estilo (style jsx, default do NextJs)

Quase toda a implementação do alternador de modo fica dentro deste arquivo de layout.

//um estado para controlar o modo que está sendo usado: const [isLight, setIsLight]=useState(true) //estado definindo o modo inicial const [modo, setModo] = useState({ textcolor:"black", bgcolor: "white", buttonTxt: "Dark Mode" })

Handle dos estados

//O botão abaixo está aplicado como uma children de Nav. //Por enquanto, por questões de aparência decidi colocar junto dos botões de navegação. //Ele recebe o setstate de islight e troca seu valor alternando entre truie e false <Nav > <Button onClick={()=>setIsLight(!isLight)} > {modo.buttonTxt} </Button> </Nav>

Botão de chamada de toggleTheme

//O use effect usa setModo para atualizar o modo toda vez que isLight é alterado useEffect(() => { setModo({ textcolor: '$ {isLight ? "black" : "white"}', bgcolor: '$ {isLight ? "white" : "black"}', buttonTxt: '$ {isLight ? "Dark Mode" : "Light Mode"}' }) }, [isLight])

Por fim a aplicação dos estados no estilo:

// O style jsx é em template string atente que deve substituir as aspas simples por sinal de crase. // O símbolo do cifrão deve ficar colado ao {} <style jsx global>{ ' main{ color: $ {modo.textcolor}; background-color: $ {modo.bgcolor}; } body{ color: $ {modo.textcolor}; background-color: $ {modo.bgcolor}; '} </style>

Para conferir o resultado pode clicar no boão no canto acima à direita

resultado para dark mode

Light Mode:

light mode

Por hoje é só pessoal !

Este site usa cookies.Para ler a política de dados deste site clique aqui