Contexto do React para o estado do tema

Comece chamando createContext() com um valor padrão que corresponda ao formato do seu contexto: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). O valor padrão é usado somente quando um componente lê o contexto sem um provedor pai, o que ajuda a testar componentes isolados.

O componente ThemeProvider é um componente envolvente que contém toda a lógica do tema. Ele lê a preferência do sistema na montagem, gerencia o estado de theme, fornece uma função toggleTheme e envolve os componentes filhos com ThemeContext.Provider value={{ theme, toggleTheme }}. Posicione-o próximo ao topo da árvore de componentes.

Qualquer componente descendente pode acessar o tema chamando useContext(ThemeContext). Isso retorna o valor atual do contexto, incluindo theme e toggleTheme. O componente é renderizado novamente automaticamente quando o tema muda, mantendo tudo sempre sincronizado sem precisar repassar propriedades.

As variáveis CSS dependem de um atributo data-theme no elemento raiz. Em ThemeProvider, adicione um useEffect que seja executado sempre que theme mudar: document.documentElement.setAttribute('data-theme', theme). Isso conecta perfeitamente o estado do React à camada CSS.

Para preservar a escolha do usuário entre recarregamentos da página, grave-a em localStorage sempre que o tema mudar: localStorage.setItem('theme', theme). Você pode encapsular essa lógica em um gancho personalizado useLocalStorage que retorna um par semelhante a um estado e persiste cada atualização automaticamente.

Ao inicializar o estado do tema, leia primeiro de localStorage: localStorage.getItem('theme'). Se não existir um valor armazenado, use como alternativa a preferência do sistema por meio de window.matchMedia('(prefers-color-scheme: dark)').matches. Essa inicialização é executada apenas uma vez na montagem.

A prioridade correta, da maior para a menor, é: a preferência do usuário armazenada em localStorage, depois a preferência do sistema operacional e, por fim, um padrão definido no código, geralmente claro. Essa ordem garante que o usuário sempre tenha o controle final, ao mesmo tempo que respeita a configuração do sistema operacional caso ele ainda não tenha feito uma escolha no aplicativo.

Chamar diretamente useContext(ThemeContext) em cada componente expõe detalhes de implementação. Em vez disso, exporte um gancho useTheme: function useTheme() { return useContext(ThemeContext); }. Agora os componentes importam useTheme e o chamam sem conhecer o contexto subjacente.

A função toggleTheme alterna entre light e dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Exponha-a pelo contexto para que qualquer botão em qualquer ponto da árvore possa acioná-la. O estado fica em um único lugar; a lógica de alternância é compartilhada em todos os lugares.

O objeto de valor do contexto é recriado a cada renderização de ThemeProvider. Envolva-o em useMemo para evitar renderizações novamente desnecessárias de todos os consumidores do contexto: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Essa é uma otimização de desempenho comum para provedores de contexto.

Nos testes, envolva as renderizações em um utilitário personalizado renderWithTheme que use ThemeProvider como componente envolvente. Você também pode criar um contexto simulado simples para testes isolados: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Isso permite testar componentes em um estado de tema específico.

Qual é a ordem correta de prioridade para inicializar o tema do aplicativo, da maior para a menor prioridade?

Crie um ThemeContext e um ThemeProvider que gerencie o estado do tema, sincronize-o com localStorage e defina data-theme no documento. Use um gancho de conveniência useTheme para um consumo organizado. A ordem de prioridade é: preferência armazenada, depois preferência do sistema e, por fim, o padrão.