[Dúvida] Dark Mode - Como planejar?

Olá Ricardo, como vai?

A criação de um tema Dark Mode é uma tarefa que envolve tanto design quanto desenvolvimento, e suas dúvidas são bastante pertinentes.

1 - É possível montar um tema dark apenas com a escala de cinza? Isso é recomendado?

Sim, é possível. No entanto, isso pode resultar em uma experiência visual monótona. O uso de cores neutras (como azuis, verdes ou tons terrosos) em conjunto com o cinza pode trazer mais profundidade e contraste ao design, melhorando a legibilidade e a estética.

2 - Qual é uma boa prática para esse processo?

Uma boa prática é definir uma paleta de cores que inclua:

• Cores primárias e secundárias: Para elementos como botões, links e destaques.
• Cores neutras: Para fundos, textos e bordas.
• Cores de estado: Para feedbacks como hover, active, erro e sucesso.

No caso do Dark Mode, as cores devem ser invertidas ou ajustadas para garantir contraste e legibilidade. Por exemplo, textos escuros no Light Mode devem ser claros no Dark Mode.

3 - Eu realmente preciso de todas essas escalas de cores? Qual a diferença entre "neutra" e "cinza"?

As escalas de cores neutras incluem tons que não são puramente cinza, mas que têm uma leve tendência para outras cores (como azul ou verde). Isso ajuda a evitar a fadiga visual e adiciona um toque de personalidade ao design. Já a escala de cinza é mais uniforme e pode ser usada para elementos que precisam de neutralidade absoluta.

4 - Como "converter" o tema Light para o Dark?

A conversão envolve ajustar as cores para garantir contraste e legibilidade. Por exemplo:

• Fundos claros no Light Mode devem ser escuros no Dark Mode.
• Textos escuros no Light Mode devem ser claros no Dark Mode.
• Cores primárias podem ser mantidas, mas com tonalidades mais suaves para evitar brilho excessivo.

5 - Devo montar o componente pensando no modo Dark e no Light?

A decisão de planejar os modos Dark e Light desde o início depende do contexto do projeto. Se o Dark Mode for um requisito ou um diferencial importante, é recomendável pensar nos dois temas desde o começo.

Eu fiz esse exemplo no Codepen, demonstrando um básico da alternância entre os temas, acho que pode te ajudar a visualizar melhor. Não se preocupe se não tiver familiaridade com o código em si.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Olá Mike, boa tarde. Tudo bem? Muito obrigado pelo esclarecimento.

Consegui compreender a dinâmica da mudança das cores, mas ainda não compreendi, muito bem, como eu faria esse processo pensando no Figma. Quando eu gero a paleta de cores, eu tenho as variáveis das cores geradas na minha collection. Porém, a criação dos estados são utilizando as variáveis das cores que eu já criei?

Então, seu entendi corretamente, eu tenho uma cor #0298F5 que é a minha primária. Aí, eu gero um token dessa cor, um token da cor de hover #0060AA, por exemplo? Poderia me dar um exemplo de como isso fica no Figma?

Se eu tenho uma escala de cinza, utilizando o plugin indicado pelo professor no curso, como eu faria para gerar uma escala de tons "neutros" diferente da escala de cinza que eu já gerei? Pois eu fiz alguns testes e o resultado é sempre muito próximo.

Outra dúvida que eu fiquei é sobre as escalas de cores de estado: Elas precisam ser a mesma escala para o Light e o Dark mode ou são escalas distintas?

Oi, Ricardo.

Sim, você pode utilizar variáveis para organizar as cores, incluindo estados como hover, active, etc. No seu exemplo, se a cor primária é #0298F5, você pode criar um token para essa cor e outros tokens derivados para diferentes estados, como:

• Primary / Default → #0298F5
• Primary / Hover → #0060AA
• Primary / Pressed → #004E88

Sobre a escala de cinza e tons neutros, você pode utilizar plugins como o "Color Generator" para criar escalas de cores neutras ou alterar manualmente o matiz e a saturação para criar nuances mais quentes (com um leve toque amarelado) ou frias (tendendo para o azul).

Em relação às escalas de cores de estado, elas podem ser as mesmas para Light e Dark Mode, mas é comum ajustar as tonalidades para garantir contraste e legibilidade em cada tema. Por exemplo, uma cor de erro pode ser um vermelho mais vibrante no Light Mode e um vermelho mais escuro no Dark Mode. A ideia é manter a consistência do significado (erro, sucesso, etc.), mas ajustar as cores para se adequarem ao contexto visual.

Espero ter ajudado!

Abraços :)