A cor é indiscutivelmente o segundo aspecto mais crítico do seu aplicativo, depois da funcionalidade. O esquema de cores certo ajuda você a definir o clima para seu aplicativo e mostra aos usuários como interagir com ele.
Em muitos casos, permitir que seus usuários escolham o esquema de cores de sua preferência e alternem entre os temas pode ser um ponto de venda. Mas você não quer sobrecarregar seu usuário com uma infinidade de temas para escolher. Na maioria das vezes, temas claros e escuros são tudo que você precisa para criar uma bela IU.
Neste tutorial, mostraremos como implementar com eficiência o modo escuro e o tema de um aplicativo Next.js usando o s tyled- c omponents e a biblioteca useDarkMode Gancho.
Abordaremos o seguinte:
- O que é o modo escuro?
- O que são componentes estilizados?
- Temas com componentes estilizados
- Temas com o
useDarkModeHook - Usando
useDarkModee CSS
O que é o modo escuro?
O modo escuro é o esquema de cores de qualquer interface que exibe texto claro e elementos da interface em um fundo escuro, o que torna a tela um pouco mais fácil de ver em telefones celulares, tablets e computadores. O modo escuro reduz a luz emitida pela tela, mantendo as relações mínimas de contraste de cor necessárias para facilitar a leitura.
O modo claro, que exibe texto mais escuro sobre um fundo claro, é o esquema de cores muito mais comum.
Os benefícios de usar o modo escuro incluem:
- Economia de energia
- Menos esforço para os olhos
- Parece legal
O que são componentes estilizados?
componentes estilizados é um Biblioteca CSS-in-JS que melhora drasticamente o desenvolvedor experiência para o desenvolvedor de front-end moderno, proporcionando uma experiência de usuário quase perfeita. Além de dar aos desenvolvedores a capacidade de escrever CSS com escopo de componente, os componentes estilizados vêm com uma série de outros benefícios, incluindo:
- Prefixo automático do fornecedor
- Nomes de classes exclusivos para cada componente estilizado
- Manutenção de estilos mais fácil-os desenvolvedores podem excluir ou modificar estilos sem afetar outros componentes
Temas com componentes estilizados
Comece configurando um aplicativo Next.js usando create-next-app e depois instalando o pacote de componentes estilizados.
npm i componentes estilizados
Para usar s tyled- c omponentes em um aplicativo Next.js, vá no arquivo _app.js , importe o componente ThemeProvider e envolva o aplicativo com o ThemeProvider .
ThemeProvider aceita um objeto de tema como um adereço e, em seguida, expõe novamente esse objeto dinamicamente para qualquer componente estilizado mais profundo em sua árvore de componentes.
importar {ThemeProvider} de"componentes estilizados"
A seguir, crie um arquivo ThemeConfig.js .
import {createGlobalStyle} de"styled-components" export const lightTheme={ corpo:'#FFF', texto:'# 363537', toggleBorder:'#FFF', fundo:'# 363537',
} export const darkTheme={ corpo:'# 363537', texto:'#FAFAFA', toggleBorder:'# 6B8096', fundo:'# 999',
} export const GlobalStyles=createGlobalStyle` corpo { fundo: $ {({theme})=> theme.body}; cor: $ {({theme})=> theme.text}; família da fonte: Tahoma, Helvetica, Arial, Roboto, sans-serif; transição: tudo linear de 0,50; }
`
Aqui, definimos lightTheme , darkTheme e GlobalStyles . Precisamos deles para definir o tema do aplicativo mais tarde. Em lightTheme , definimos estilos de modo de luz. Em darkTheme , definimos os estilos de modo escuro.
Também importamos createGlobalStyle de componentes estilizados. Este método gera um componente React, que, quando adicionado à árvore de componentes, injeta estilos globais no documento.
Em GlobalStyles , definimos os estilos para o corpo do aplicativo. Queremos que a cor de fundo e a cor do texto mudem conforme mudamos do modo claro para o modo escuro.
Pegamos o contexto do tema atualmente ativo, seja lightTheme ou darkTheme , do ThemeProvider , e usamos os estilos desse tema para determinar a cor de fundo e a cor do texto do aplicativo. Dessa forma, o tema do aplicativo muda dinamicamente conforme mudamos do modo claro para o modo escuro.
Agora que configuramos os temas claro e escuro para o aplicativo, precisamos implementar a funcionalidade de alternância para alternar entre os modos claro e escuro.
Para fazer isso, crie um estado de tema no arquivo _app.js e configure uma função toggleTheme :
const [theme, setTheme]=useState ("light") const toggleTheme=()=> { theme=='light'? setTheme ('dark'): setTheme ('light')
}
Passamos o estado do tema para o ThemeProvider e, dependendo do estado, alternamos entre lightTheme e darkTheme .
toggleTheme é a função responsável por verificar o estado do tema de claro a escuro . Em seguida, passamos a função toggleTheme em um botão:
import {useState} de"react"
importar {ThemeProvider} de"componentes estilizados"; const [theme, setTheme]=useState ("light") const toggleTheme=()=> { theme=='light'? setTheme ('dark'): setTheme ('light')
} Retorna (
)
Até agora, definimos lightTheme , darkTheme , GlobalStyles e a funcionalidade de alternância para o aplicativo. Agora, vamos reunir tudo no arquivo _app.js :
import {useState} de"react"
importar {ThemeProvider} de"componentes estilizados";
import {lightTheme, darkTheme, GlobalStyles} de"../themeConfig" function MyApp ({Component, pageProps}) { const [theme, setTheme]=useState ("light") const toggleTheme=()=> { theme=='light'? setTheme ('dark'): setTheme ('light') } Retorna (
Com isso, configuramos com sucesso os temas de nosso aplicativo Next.js usando componentes estilizados.
Temas com o useDarkMode Hook
O gancho useDarkMode é uma alternativa de estilo útil que pode ser explorada para fins de definição de temas. Quando usado em combinação com componentes estilizados, torna os aplicativos de temas fáceis e divertidos.
Com o gancho useDarkMode , não precisamos definir um estado de theme ou criar uma função toggleTheme que muda de claro para escuro modo. useDarkMode cuida disso para nós.
Para começar a usar o gancho useDarkMode , primeiro instale-o:
npm eu uso o modo escuro
A seguir, crie uma nova instância do Gancho e comece a usá-lo. Eu fiz isso no meu arquivo _app.js :
const darkmode=useDarkMode (true)
O objeto darkmode que criamos possui várias propriedades. O que precisamos é sua propriedade value . Este é um booleano que verifica se o modo escuro está ativo.
const theme=darkmode.value? darkTheme: lightTheme Retorna (
)
Com base no valor de darkmode , alternamos entre lightTheme e darkTheme e passamos o tema ativo para a constante theme . Passamos este tema ativo para a proposta do ThemeProvider theme .
Para configurar os botões para alternar entre o modo claro e escuro, o objeto darkmode vem com enable () , disable () , e toggle () funcionalidade fora da caixa.
Com isso, definimos o tema de nosso aplicativo combinando componentes estilizados com useDarkMode .
Next.js renderiza páginas no servidor. Embora isso tenha seus benefícios, também vem com uma desvantagem: o SSR não conhece as preferências específicas do cliente, como prefere-color-scheme . Isso significa que quando a página carrega no servidor, o tema correto não é selecionado inicialmente. Isso causa uma “oscilação” entre os temas claros e escuros.
Para corrigir isso, configuramos um estado isMounted e o definimos como false .
const [isMounted, setIsMounted]=useState (falso) useEffect (()=> { setIsMounted (verdadeiro)
}, []) Retorna (
)
Usamos o useEffect para determinar quando o aplicativo foi montado e exibi-lo apenas quando isMounted for verdadeiro. Desta forma, removeu a breve oscilação.
Vamos juntar tudo:
import {useState, useEffect} de"react"
import useDarkMode de"use-dark-mode"
importar {ThemeProvider} de"componentes estilizados";
import {lightTheme, darkTheme, GlobalStyles} de"../themeConfig" function MyApp ({Component, pageProps}) { const [isMounted, setIsMounted]=useState (falso) const darkmode=useDarkMode (true) const theme=darkmode.value? darkTheme: lightTheme useEffect (()=> { setIsMounted (verdadeiro) }, []) Retorna ( )
} exportar MyApp padrão
Usando useDarkMode e CSS
Dependendo das necessidades e requisitos de seu projeto, você pode não precisar usar uma biblioteca CSS-in-JS como componentes estilizados apenas para criar um tema para seu aplicativo. Você pode alternativamente tema seus aplicativos com useDarkMode usando CSS.
Para usar CSS para criar um tema para seu aplicativo com useDarkMode , crie classes body.light-mode e body.dark-mode em seu arquivo globals.css . Essas são classes especiais reconhecidas por useDarkMode .
body.dark-mode { cor: #fff; plano de fundo: # 363537; //estilos de modo escuro
} body.light-mode { cor: # 363537; fundo: #fafafa; //estilos de modo de luz
}
Copie os estilos que você definiu em lightTheme e darkTheme para essas classes. É tão rápido e simples quanto isso.
Conclusão
O gancho useDarkMode torna os aplicativos de temas mais fáceis e rápidos, seja ele usado em combinação com uma biblioteca CSS-in-JS, como componentes estilizados ou CSS.
Quando se trata de definir o tema de seus aplicativos Next.js, você tem muitas opções.
A postagem Temas em Next.js com componentes estilizados e useDarkMode apareceu primeiro no LogRocket Blog .
