arquivo Theme global em NextJs

Olá, seja muito bem vindo(a), após desenvolver a barra de pesquisa funcional no projeto: https://programacao-descomplicada.blogspot.com/2022/12/construindo-componente-de-pesquisa-em.html a minha próxima etapa vai ser construir um botão de modo escuro/claro para o site. 

Primeiro, eu preciso ir até o arquivo _app.js e importar o ThemeProvider do styled-components, além de englobar todo o código com ele no lugar da tag vazia existente anteriormente. Eu precisei passar um theme no qual criei uma constante chamada themeActive antes do return.

Dentro das chaves dessa constante theme eu passei todas as cores do :root que estavam no global para poder trabalhar melhor quando for preparar o modo noturno da aplicação, sendo que coloquei elas dentro de outro parênteses para o modo light, no final ficou da seguinte forma.

const theme = {
light: {
 lightBlue1: "#628FD9",
 darkBlue1: "#26539B",
 lightBlue2: "#EBF1FA",

}
 };

Fiz uma mudança em um dos componentes no qual passei dentro da estilização com styled-componentes o seguinte código para testar o funcionamento do theme:

background: ${({theme}) => theme.light.lightBlue1 || "var(--cor-1)"};

Eu decidi deixar as cores no :root também para caso o theme não funcione o site usar as cores que estão lá. Após isso modifiquei todos os lugares dos componentes que tinham as variáveis do :root. O único local que não teve as cores modificadas foi o componente Header, pois ele estava com o styled-jsx, sendo que irei modificar ele para styled-components e padronizar tudo.

Além das cores experimentei o mesmo com a fonte principal do projeto criando outra parte apenas para estilização principal, no fim obtive o seguinte:

const theme = {
mainStyles: {
 mainSource: "Montserrat",
},
light: {
 lightBlue1: "#628FD9",
 darkBlue1: "#26539B",
 lightBlue2: "#EBF1FA",
 white: "#fff",
}
 };

Vou ficar por aqui, espero que você continue organizando suas cores agora, irei pesquisar e escolher as cores para o modo escuro para poder prosseguir na construção do modo dark do e-commerce. Um abraço e até a próxima.

Blog: https://programacao-descomplicada.blogspot.com/2022/12/arquivo-theme-global-em-nextjs.html