Histórico da Página
| Índice |
|---|
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.
| Informações | ||
|---|---|---|
|
...
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.
...
Quando o modo escuro está ativo, os componentes e estilos que utilizam variáveis CSS (como var(--fs-color-neutral-light-00)) automaticamente herdam os valores definidos dentro de html.theme-dark.
| Informações | ||
|---|---|---|
| ||
Isso permite alternar entre temas sem precisar alterar nenhuma estrutura de código na widget — basta usar as variáveis CSS corretamente. |
Boas práticas
...
✔ Priorize sempre o uso dos componentes e estilos do Style Guide Fluig.
✔ Evite o uso de cores fixas ou hardcoded no CSS.
✔ Teste a widget tanto no tema claro quanto no modo escuro antes de publicar.
✔ Consulte periodicamente o Style Guide para novas variáveis e atualizações.
O que já funciona automaticamente
...
Componentes padrão do Style Guide Fluig:
Todos os componentes visuais do Style Guide já estão preparados para o modo escuro. Se sua widget utiliza apenas esses componentes, nenhuma ação é necessária.Ativação automática:
O modo escuro da widget acompanha automaticamente o tema selecionado pelo usuário no Fluig. Não é necessário alterar código para detectar ou ativar o tema.
Como adaptar estilos da widget para o modo escuro
...
1. Revisão do CSS Customizado
...
| 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
...
Se a widget utiliza bibliotecas ou plugins visuais de terceiros, é necessário:
Verificar se o plugin suporta tema escuro nativamente.
Caso não suporte, sobrescrever os estilos do plugin utilizando as variáveis CSS do Fluig.
Exemplo de formatação customizada compatível
...
HTML:
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<div class="my-widget">
<div class="custom-container">
<h1 class="custom-title">Minha Widget</h1>
</div>
</div> |
...
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
.my-widget .custom-container {
background-color: var(--fs-color-brand-01-base);
padding: 16px;
}
.my-widget .custom-title {
color: var(--fs-color-neutral-light-00);
font-size: 24px;
} |
Exemplo com @media (prefers-color-scheme
...
...
Caso precise definir estilos específicos para cada modo, utilize @media (prefers-color-scheme: <mode>) como no exemplo abaixo:
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
@media (prefers-color-scheme: light) {
.my-widget .my-custon-button {
background-color: var(--fs-color-neutral-light-00);
color: var(--fs-color-neutral-dark-70);
}
}
@media (prefers-color-scheme: dark) {
.my-widget .my-custon-button {
background-color: var(--fs-color-neutral-light-05);
color: var(--fs-color-neutral-dark-80);
}
} |
Dúvidas ou suporte
...
Em caso de dúvidas, procure o time responsável pelo Fluig ou abra um chamado pela central de suporte.
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas