Como as extensões do Chrome mantêm as sobreposições sincronizadas com o modo claro e escuro?
YuzuLingo · 1 de nov. de 2026
As extensões do Chrome mantêm as sobreposições sincronizadas tratando as cores do tema como tokens ao vivo e notificando cada superfície injetada quando o modo claro ou escuro muda. As barras de ferramentas, pop-ups de dicionário, contornos de máscara e destaques de CSS são repintados no lugar, em vez de esperar por uma atualização da página.
Por que a interface do script de conteúdo é estranha para tematizar
As sobreposições vivem dentro de páginas que a extensão não possui. Os estilos podem estar em uma raiz sombra, uma barra de ferramentas flutuante ou um registro de destaques de CSS. Uma pintura única no momento da injeção congela a paleta errada se o aprendiz alternar o tema do navegador ou do site mais tarde.
Tokens centrais em vez de valores hexadecimais dispersos
Um único objeto de cor da interface do usuário contém acentos, superfícies, texto atenuado e preenchimentos suaves para o tema ativo. Aplicar um tema muta esses tokens uma vez. Os locais de chamada lêem do objeto no momento da pintura, para que nunca codifiquem um preto de modo claro obsoleto em um pop-up de modo escuro.
Repintura guiada por assinantes
Cada sobreposição de longa duração se registra para mudanças de tema. Ao ser notificada, a barra de ferramentas reaplica o chrome raiz, o pop-up do dicionário redesenha seu último cartão, o CSS de destaque ao passar o mouse se regenera e os chrome de OCR vazios ou carregando são atualizados. Os contornos de máscara se atualizam para que as bordas das regiões correspondam ao novo contraste.
Separe as cores do chrome dos textos de legendas
O chrome da interface do usuário deve seguir o modo claro e escuro. O texto de legenda reconhecido muitas vezes fica em uma máscara escura e precisa de uma tinta clara fixa para que os aprendizes possam lê-lo em qualquer tema. Vincular a cor do texto de OCR ao token do tema é um bug comum que faz novas regiões parecerem pretas sobre preto até que alguém substitua a cor manualmente.
O que “totalmente temático” significa na prática
Uma passagem completa inclui estados ativos de chips, preenchimentos suaves de acento, destaques de contexto de frase no pop-up e linhas de status como carregando reconhecimento. Se algum desses ainda precisar de uma atualização, a assinatura do tema perdeu essa superfície.
