fluig_rag_docs/Plataforma%20%20Documenta%C3%A7%C3%A3o%20t%C3%A9cnica/Desenvolvimento%20sobre%20a%20plataforma/Desenvolvimento%20de%20P%C3%A1ginasWidgets%20%28WCM%29/Desenvolvendo%20widgets%20compat%C3%ADveis%20com%20modo%20escuro.md

---
title: Desenvolvendo widgets compatíveis com modo escuro
source: https://tdn.totvs.com/pages/viewpage.action?pageId=965446583
path: \Plataforma  Documentação técnica\Desenvolvimento sobre a plataforma\Desenvolvimento de PáginasWidgets (WCM)\Desenvolvendo widgets compatíveis com modo escuro.md
---

- [Visão geral](#Desenvolvendowidgetscompatíveiscommodoescuro-Visãogeral)
  - [Como o modo escuro funciona internamente](#Desenvolvendowidgetscompatíveiscommodoescuro-Comoomodoescurofuncionainternamente)
  - [Boas práticas](#Desenvolvendowidgetscompatíveiscommodoescuro-Boaspráticas)
  - [O que já funciona automaticamente](#Desenvolvendowidgetscompatíveiscommodoescuro-Oquejáfuncionaautomaticamente)
  - [Como adaptar estilos da widget para o modo escuro](#Desenvolvendowidgetscompatíveiscommodoescuro-Comoadaptarestilosdawidgetparaomodoescuro)
    - [1. Revisão do CSS Customizado](#Desenvolvendowidgetscompatíveiscommodoescuro-1.RevisãodoCSSCustomizado)
    - [Exemplo de substituição:](#Desenvolvendowidgetscompatíveiscommodoescuro-Exemplodesubstituição:)
    - [2. Onde encontrar as variáveis CSS](#Desenvolvendowidgetscompatíveiscommodoescuro-2.OndeencontrarasvariáveisCSS)
  - [Atenção com plugins de terceiros](#Desenvolvendowidgetscompatíveiscommodoescuro-Atençãocompluginsdeterceiros)
  - [Exemplo de formatação customizada compatível](#Desenvolvendowidgetscompatíveiscommodoescuro-Exemplodeformataçãocustomizadacompatível)
  - [Exemplo de estilo específico para modo claro ou escuro](#Desenvolvendowidgetscompatíveiscommodoescuro-Exemplodeestiloespecíficoparamodoclaroouescuro)
  - [Dúvidas ou suporte](#Desenvolvendowidgetscompatíveiscommodoescuro-Dúvidasousuporte)

# 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:**

```
/* 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`.

Informação:

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://<SEU\_DOMINIO>/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 de estilo específico para modo claro ou escuro

---

Caso precise definir estilos específicos para o modo claro e para o modo escuro, siga como no exemplo abaixo:

**Exemplo de formatação específica para modo claro ou escuro**

```
/* Definições de variáveis para o modo light */
:root {
  --my-custom-color: #0000ff; // azul
}

/* Definições de variáveis para o modo dark */
html.theme-dark {
  --my-custom-color: #ff0000; // vermelho
}

/* uso aplicando a variável em algum elemento */
.my-widget .my-custom-button {
  color: var(--my-custom-color); // se for modo claro será azul, se for modo escuro será vermelho
}
```

## Dúvidas ou suporte

---

Em caso de dúvidas, procure o time responsável pelo Fluig ou abra um chamado pela central de suporte.