DarkMode usando Provider no NextJs
Olá, seja muito bem vindo(a), anteriormente nós trabalhamos na configuração do themeProvider no nosso projeto, para poder manipular o tema do site de uma melhor forma: https://programacao-descomplicada.blogspot.com/2022/12/arquivo-theme-global-em-nextjs.html. Isso vai ser importante na hora de resolver a mudança de todo o site para o modo claro/escuro.
Inicialmente eu precisei organizar os nomes das cores para poder criar uma base e ficar mais fácil a modificação do tema. Além disso eu passei no padrão no arquivo _app.js o tema light diretamente no componente ThemeProvider e ainda separei o thema em um arquivo próprio para caso eu aumente muito ele com outras variáveis como fontes e mais cores, entre outros.
Mudando light passado por parâmetro para o ThemeProvider no _app.js vemos a mudança de tema antes de criar o botão, e não está legal ainda, nesse momento eu vou nos componentes atuais do projeto e vou organizando as cores no tema para obter um resultado melhor neste caso.
Durante o processo de organização, reparei que alguns lugares poderiam ficar com a mesma cor independente do modo claro ou escuro, para esses locais eu optei por utilizar o :root do Global, como forma de não criar repetições no arquivo de tema. Após resolver as cores seguimos para o componente do botão de claro/escuro.
A pasta com o componente do botão foi colocada dentro do Header, como esse botão faz parte do cabeçalho e será visto só nele, é uma parte pertencente a esse todo, assim como a barra de pesquisa no qual mudarei para dentro dele também posteriormente.
O código HTML e CSS se encontra no meu repositório para você acessar: https://github.com/fransilva0/projeto-e-commerce-nextjs, após o botão está pronto voltamos no _app.js, nele vou criar outro provider englobando tudo para tratar apenas da mudança do thema do site, o ColorModeProvider, dai eu volto para a pasta do componente do botão e crio um arquivo ColorMode.js.
Nesse arquivo eu criei uma função que cria o contexto, como o próprio nome diz (ColorModeContext), ao redor da aplicação para a mudança entre dark e light mode. Ele vai receber o mode atual, um setMode e um ToggleMode, todos vazios. Voltando no _app.js eu separei em três funções no qual a função _App seria a exportada por padrão.
A primeira função, o ProviderWrapper, retorna o componente ColorModeProvider passando como mode inicial o dark. A segunda função pega o contexto do ColorModeContext e passa essa informação para o ThemeProvider, sendo que se o context mudar de dark para light quando o usuário clicar no botão.
Voltando para o ColorMode.js, usei o useState passando o initialMode como padrão, dentro da função ColorModeProvider. Nessa função eu passei uma function toggleMode que envia para o setMode, o contrário do mode atual.
No fim eu passei todas as informações dentro da função ColorModeContext no retorno, colo valor na tag do componente. Com o botão funcionando e o modo dark certinho na página inicial do projeto, eu fico por aqui por agora, deixo um abraço e até a próxima.
Blog: https://programacao-descomplicada.blogspot.com/2022/12/darkmode-usando-provider-no-nextjs.html
