Histórico da Página
Visão Geral
O Fluig agora oferece suporte nativo ao modo escuro, proporcionando uma experiência visual mais confortável em ambientes com pouca luz.
Essa funcionalidade já está disponível nas widgets da plataforma e é habilitada automaticamente de acordo com o tema escolhido pelo usuário no Fluig.
Importante: Para que sua widget fique compatível com o modo escuro, é fundamental seguir as orientações abaixo, principalmente se a widget possui estilos customizados ou utiliza plugins de terceiros.
Como o modo escuro funciona internamente
O modo escuro é ativado automaticamente pela plataforma quando o usuário escolhe esse tema. Internamente, isso é feito adicionando a classe theme-dark na tag <html> do widget.
Com essa classe presente, o navegador passa a utilizar as variáveis CSS definidas dentro do seletor html.theme-dark { ... }, substituindo as definidas em :root.
Exemplo simplificado:
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
/* Variáveis do modo claro */
:root {
--fs-color-neutral-light-00: #ffffff; // cor branca no modo claro
--fs-color-brand-01-base: #0079b8; // não tem diferença entre modo claro e escuro
--fs-color-brand-01-lightest: #e3eefb; // cor de brand tom mais claro
}
/* Variáveis do modo escuro */
html.theme-dark {
--fs-color-neutral-light-00: #1c1c1c; // inverte para uma cor escura
--fs-color-brand-01-base: #0079b8; // não tem diferença entre modo claro e escuro
--fs-color-brand-01-lightest: #051f31; // inverte cor de bran tom mais escuro
} |
...
Caso seja necessário definir cores manualmente, siga estas diretrizes:
Direcionamentos Gerais
| Tipo de Cor | Variável CSS a Utilizar |
|---|---|
| Cor de texto "padrão" | var(--fs-color-neutral-dark-90) |
| Cor de texto "padrão" hover ou focus | var(--fs-color-neutral-dark-95) |
| Cor de fundo (geralmente branco) | var(--fs-color-neutral-light-00) |
| Cor de fundo cinza claro | var(--fs-color-neutral-light-05) ou var(--fs-color-neutral-light-10) |
| Cor de fundo cinza com destaque maior | var(--fs-color-neutral-light-20) |
| Cor de borda "padrão" | var(--fs-color-neutral-light-20) ou var(--fs-color-neutral-light-30) |
Atenção com plugins de terceiros
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas