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.

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:

/* 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
}

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.

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

Caso sua widget tenha estilos próprios definidos via CSS, é necessário substituir cores fixas por variáveis CSS disponibilizadas pela plataforma.

Exemplo de substituição:

Antes:

.custom-style {
  background-color: #ffffff;
  color: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Depois (compatível com modo escuro):

.custom-field {
  background-color: var(--fs-color-neutral-light-00);
  color: var(--fs-color-neutral-dark-90);
  box-shadow: var(--fs-shadow-sm);
}

2. Onde encontrar as variáveis CSS

Todas as variáveis disponíveis estão documentadas no Fluig Style Guide, na seção: CSS > Themes - https://style.fluig.com/style-guide/css.html#themes

Ali você encontra a lista completa de variáveis para cores, sombras, bordas, backgrounds e outros aspectos visuais.

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

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:

<div class="my-widget">
  <div class="custom-container">
    <h1 class="custom-title">Minha Widget</h1>
  </div>
</div>

CSS:

.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:

@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.