Dark Mode no TabNews (beta) · filipedeschamps

O ermesonsampaio está implementando a feature Dark Mode no TabNews e que pode ser testada pelas URLs abaixo:

Essas URLs são do ambiente de Homologação do TabNews. As contas entre o ambiente de Homologação e Produção não são compartilhadas, então caso queira testar alternar entre os temas Light ou Dark, você precisará criar uma nova conta. Outro detalhe é que o ambiente de Homologação é bastante devagar (mas isso não tem nada a ver com a feature que está sendo implementada).

Alternando entre o tema Dark e Light

Caso você tenha acesso ao repositório do TabNews, estamos discutindo os detalhes dessa implementação nesse Pull Request liderado pelo Ermeson. Caso não tenha acesso, leia isso para receber o convite. Há várias decisões técnicas e detalhes de UX que precisamos bater o martelo sobre como resolver 🤝

Respondendo ao @filipedeschamps aqui

Consertar o flash of unstyled content que está fazendo piscar o fundo.

Um dos problemas é que o getStaticProps está retornando o resolvedServerColorMode como 'day' (dá pra fazer retornar night, mas só vai inverter o problema) e então o ThemeProvider com preventSSRMismatch=true define o resolvedColorMode com o mesmo valor ('day') para não dar o erro "Prop className did not match. Server: x Client: y".

Só depois disso o ThemeProvider seta resolvedColorMode com o valor correto, no caso, o lido do lcoalStorage ou o padrão do sistema. Por isso está sempre piscando o tema light antes de renderizar o dark quando carrega a versão estática do servidor.

Sem o preventSSRMismatch=true temos o problema "Prop className did not...".

Fazendo o resolvedServerColorMode retornar 'night' vai dar o mesmo problema só que invertido. Vai piscar escuro antes de renderizar o tema light.

Talvez a solução para a piscada seja adaptar o que é feito aqui:
A scintillating exploration of color themes in Gatsby

Adaptando para o Next, acredito que ficaríamos com o _document.public.js mais ou menos assim:

// pages/_document.public.js
import Document, { Head, Html, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { getInitColorSchemeScript } from 'styles/getInitColorSchemeScript.js';

export default class MyDocument extends Document {

  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
  render() {
    return (
      <Html>
        <Head />
        <body>
          {getInitColorSchemeScript()}
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

A implementação do getInitColorSchemeScript eu deixo como desafio para quem quiser contribuir para o projeto 😅🚀

Inspirações para o arquivo _document.public.js e para complementar a solução:
chakra-ui-flashless
mui/experimental-api/css-variables