# Tema Doug Futurista: passo a passo, cartões fx_ e como criar o seu

> Instale o tema Doug Futurista, ajuste cor, vidro e cantos, cole os 9 cartões fx_ no seu painel e aprenda a criar um cartão novo do zero com o button-card.

- Autor: Douglas Baptista
- Publicado em: 10 nov 2026 · atualizado em 10 nov 2026
- Assunto: Painéis e cartões
- Vídeo: https://dougsmarthome.com.br/videos/tema-futurista-para-o-home-assistant-instalar-personalizar-e-usar-os-cartoes-gra (YouTube: https://www.youtube.com/watch?v=AwpIzQoNmNs)
- Página: https://dougsmarthome.com.br/artigos/tema-doug-futurista-passo-a-passo-cartoes-fx

Este é o passo a passo escrito do vídeo do tema **Doug Futurista**: instalar o tema, deixar com a sua cara, colar os cartões `fx_` no seu painel e, no fim, **criar um cartão novo do zero** usando o mesmo molde. Tudo o que aparece aqui está no repositório [ha_tema_futurista](https://github.com/dougbaptista/ha_tema_futurista) e nos códigos prontos para copiar no fim da página.

## O que você precisa

| Item | Para quê | Obrigatório? |
|---|---|---|
| Tema **Doug Futurista** (Marketplace) | cores, vidro azul-marinho, menu e barra do topo | sim |
| **button-card** (Marketplace) | é a base de todos os cartões `fx_` | para os cartões |
| **layout-card** (Marketplace) | a grade da Home que se adapta ao celular | para a Home de exemplo |
| **card-mod** (Marketplace) | o desfoque de vidro atrás dos cartões | não |

No Home Assistant 2026.11 ou mais novo, tudo isso fica em **Configurações → Marketplace**. Em versões anteriores, o caminho é o mesmo pelo **HACS**.

## Etapa 1: instalar o tema

1. **Configurações → Marketplace**, procure **Doug Futurista** e instale.
2. Garanta que o `configuration.yaml` carrega a pasta de temas (o bloco completo, já com o card-mod, está no código [configuration.yaml do tema](/codigos/doug-futurista-configuration-yaml-tema-e-card-mod)):

   ```yaml
   frontend:
     themes: !include_dir_merge_named themes
   ```

3. Rode a ação `frontend.reload_themes` (ou reinicie o Home Assistant).

### Só para você ou para a casa toda

- **Só para você:** clique no seu nome, no canto de baixo do menu → **Tema** → **Doug Futurista**.
- **Para a casa toda:** em **Ferramentas de desenvolvedor → Ações**, rode:

  ```yaml
  action: frontend.set_theme
  data:
    name: Doug Futurista
  ```

  Rode de novo com `mode: dark` para valer também no modo escuro. Quem estiver com "Padrão do servidor" passa a ver o tema.

## Etapa 2: ajustar e personalizar

### Vidro fosco (card-mod)

O desfoque atrás dos cartões usa o card-mod. Para ele valer **no tema** (e não só dentro de um cartão), ele precisa ser carregado como módulo do frontend:

```yaml
frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js
```

Reinicie uma vez. Sem esse passo o tema funciona igual, só sem o desfoque.

### Cor de destaque, transparência, cantos e fundo

Tudo fica no arquivo do tema (`doug-futurista.yaml`):

| O que mudar | Onde | Dica |
|---|---|---|
| **Cor de destaque** | as duas linhas marcadas com `DESTAQUE` (`primary-color` e `accent-color`) | botões, abas, menu, interruptores, bordas e a grade do fundo seguem essas duas |
| **Transparência** | os `0.78` em `card-background-color` e `ha-card-background` | número menor = mais vidro |
| **Cantos** | `ha-card-border-radius` (`18px`) | menor = mais quadrado |
| **Imagem no fundo** | `lovelace-background` | `center / cover no-repeat url("/local/fundo.jpg") fixed`, com a imagem em `www/` |

Depois de cada mudança, `frontend.reload_themes`.

### Não perca suas mudanças

Atualizar o tema pelo Marketplace **substitui o arquivo original**. Para personalizar com segurança, salve uma cópia com outro nome em `themes/` (por exemplo `themes/minha-casa.yaml`), troque a primeira linha `Doug Futurista:` por `Minha Casa:` e recarregue os temas. O tema "Minha Casa" aparece na lista e nenhuma atualização mexe nele.

## Etapa 3: colar os cartões no seu painel

Os cartões do vídeo são **modelos** (templates) do button-card. Você cola os modelos uma vez no topo do painel e depois cada cartão só diz qual modelo usar e qual entidade mostrar.

1. Abra o painel → lápis de editar → **⋮ → Editor de configuração RAW**.
2. Bem no topo, antes de `views:`, escreva `button_card_templates:` e cole embaixo, **com 2 espaços de recuo**, o conteúdo dos [modelos fx_](/codigos/doug-futurista-modelos-fx-do-button-card).
3. Dentro de `views:`, cole a [Home de exemplo](/codigos/doug-futurista-home-de-exemplo-com-grid-layout).
4. Troque os `entity_id` de exemplo (`person.voce`, `light.sala_teto`, `sensor.dolar`...) pelos da sua casa.

O começo do RAW fica assim:

```yaml
button_card_templates:
  fx_pill:
    show_icon: true
    # ...resto dos modelos...
views:
  - title: Home
    path: home-futurista
    # ...
```

Se o seu painel é em modo YAML (arquivo), dá para deixar os modelos num arquivo separado:

```yaml
button_card_templates: !include doug-futurista-cards.yaml
```

Entidade que não existe **não quebra o cartão**: ele mostra "entidade não encontrada" e o `entity_id` que faltou, para você achar o erro rápido.

## Os 9 modelos fx_ e suas variáveis

| Modelo | O que mostra | `entity` | `variables` |
|---|---|---|---|
| `fx_pill` | pílula do topo (ícone + texto) | opcional | use `name` e `icon` normais do button-card |
| `fx_pessoa` | foto com anel verde em casa, estado, bateria e passos | `person.x` | `foto` (url), `bateria` (sensor %), `passos` (sensor) |
| `fx_cotacao` | valor em R$ com variação ▲▼ em % | sensor do valor | `titulo`, `icone`, `cor`, `anterior` (sensor do valor anterior), `decimais` |
| `fx_aspirador` | estado em português e botões play, pausa e base | `vacuum.x` | `bateria`, `area`, `tempo` (sensores) |
| `fx_ambiente` | linha de cômodo com contador de luzes acesas | não usa | `nome`, `icone`, `luzes` (lista de `entity_id`) |
| `fx_luz` | botão de luz ou plugue: toque liga, segurar abre detalhes | `light.x` ou `switch.x` | `nome`, `icone` (opcionais) |
| `fx_sensor` | porta, janela, movimento, pessoa ou campainha com "há quanto tempo" | `binary_sensor.x` | `tipo` (`porta`, `janela`, `movimento`, `pessoa`, `campainha`), `nome` |
| `fx_acesso` | botão grande de portão, porta, sirene ou visitas | `cover.x`, `lock.x`, `switch.x`... | `tipo` (`portao`, `porta`, `sirene`, `visitas`), `titulo` + a sua `tap_action` |
| `fx_pilula` | pílula pequena de um switch, laranja quando ligado | `switch.x` | `rotulo` |

Exemplo de uso de cada um:

```yaml
- type: custom:button-card
  template: fx_luz
  entity: light.sala_teto
  variables: {nome: Sala}

- type: custom:button-card
  template: fx_sensor
  entity: binary_sensor.porta_entrada
  variables: {tipo: porta, nome: Entrada}

- type: custom:button-card
  template: fx_cotacao
  entity: sensor.dolar
  variables: {titulo: Dólar, icone: mdi:currency-usd, cor: '#34e08a', anterior: sensor.dolar_ontem}

- type: custom:button-card
  template: fx_acesso
  entity: cover.portao
  variables: {tipo: portao, titulo: Portão}
  tap_action: {action: toggle}
```

## Etapa 4: por dentro de um modelo fx_

Todo modelo `fx_` tem as mesmas quatro partes. Entendendo isso, você lê qualquer um deles e cria o seu.

### 1. O vidro (styles.card)

```yaml
styles:
  card:
    - border-radius: 18px
    - background: linear-gradient(145deg, rgba(14,34,66,0.78), rgba(8,18,40,0.78))
    - border: 1px solid rgba(60,200,255,0.25)
    - box-shadow: 0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06)
    - backdrop-filter: blur(14px)
    - color: '#eaf4ff'
```

É sempre o mesmo bloco: fundo azul-marinho translúcido, borda ciano fina, sombra e desfoque. Copie esse bloco em todo cartão novo e ele já nasce com a cara do tema.

### 2. A grade (styles.grid)

O button-card monta o cartão numa grade CSS. Cada pedaço ganha um nome e você desenha a posição dele com `grid-template-areas`:

```yaml
styles:
  grid:
    - grid-template-areas: '"foto info"'   # uma linha, duas colunas
    - grid-template-columns: 76px 1fr       # foto fixa, info ocupa o resto
    - column-gap: 14px
    - align-items: center
```

Duas linhas? `'"topo botoes" "infos botoes"'`: o `botoes` repetido nas duas linhas ocupa a altura toda (é assim no `fx_aspirador`).

### 3. Os pedaços (custom_fields) em JavaScript

Cada nome da grade é um `custom_field`. O conteúdo vem de um trecho JavaScript entre `[[[ ]]]`, que devolve HTML:

```yaml
custom_fields:
  info: |
    [[[
      if (!entity) return 'entidade não encontrada';
      const em = entity.state === 'home';
      return `<div style="color:${em ? '#34e08a' : '#9fb0cc'}">${em ? 'Em casa' : 'Fora'}</div>`;
    ]]]
```

Dentro do `[[[ ]]]` você tem:

- `entity`: a entidade do cartão (estado em `entity.state`, atributos em `entity.attributes`);
- `states['sensor.x']`: qualquer outra entidade da casa;
- `variables.x`: as variáveis que o cartão passou;
- `<ha-icon icon="mdi:...">`: os ícones do Home Assistant dentro do HTML.

### 4. As variáveis (variables)

São os "parâmetros" do modelo. No modelo você define valores padrão; no cartão você passa só o que quer mudar:

```yaml
# no modelo
fx_cotacao:
  variables:
    decimais: 2

# no cartão
- type: custom:button-card
  template: fx_cotacao
  entity: sensor.gasolina
  variables: {titulo: Gasolina, icone: mdi:gas-station, cor: '#ffc83c', decimais: 3}
```

## Etapa 5: criando um cartão novo (fx_medidor)

Vamos montar um modelo que não existe no vídeo: um **medidor** com o valor do sensor e uma barra de progresso, que fica vermelha quando passa do limite. Serve para consumo de energia, caixa d'água, bateria, CPU do servidor, qualquer sensor numérico.

**Passo 1: desenhe a grade.** Duas linhas, uma coluna: `topo` (ícone, título e valor) e `barra`.

```yaml
grid:
  - grid-template-areas: '"topo" "barra"'
  - grid-template-columns: 1fr
  - row-gap: 10px
```

**Passo 2: defina as variáveis com valores padrão**, para o cartão funcionar mesmo que a pessoa não passe nada:

```yaml
variables:
  titulo: Medidor
  icone: mdi:gauge
  cor: '#3cc8ff'
  max: 100       # valor que enche a barra
  alerta: 80     # % em que a barra fica vermelha
  unidade: ''    # vazio = usa a unidade do sensor
  decimais: 1
```

**Passo 3: escreva o `topo`**, tratando a entidade que não existe e o sensor indisponível:

```javascript
if (!entity) return 'entidade não encontrada';
const v = parseFloat(entity.state);
const un = variables.unidade || entity.attributes.unit_of_measurement || '';
const txt = isNaN(v) ? 'indisponível' : v.toLocaleString('pt-BR') + ' ' + un;
```

**Passo 4: escreva a `barra`**, calculando a porcentagem e limitando entre 0 e 100:

```javascript
const p = Math.max(0, Math.min(100, v / variables.max * 100));
const cor = p >= variables.alerta ? '#ff5a6e' : variables.cor;
return `<div style="height:8px;border-radius:999px;background:rgba(255,255,255,0.08)">
  <div style="width:${p}%;height:100%;border-radius:999px;background:${cor}"></div></div>`;
```

**Passo 5: junte tudo com o bloco de vidro** e cole embaixo de `button_card_templates:`. O modelo completo, pronto para copiar, está em [Cartão fx_medidor](/codigos/cartao-fx-medidor-valor-com-barra-de-progresso). Para usar:

```yaml
- type: custom:button-card
  template: fx_medidor
  entity: sensor.consumo_agora
  variables:
    titulo: Consumo agora
    icone: mdi:flash
    cor: '#ffc83c'
    max: 5000
    alerta: 70
    decimais: 0
```

Esse é o caminho para qualquer cartão novo: **copie o vidro, desenhe a grade, liste as variáveis, escreva um `custom_field` por pedaço** e sempre trate `!entity` e `isNaN`.

## Layout: a grade da Home

A Home de exemplo usa o `custom:grid-layout` (do layout-card) com **áreas nomeadas**. Cada cartão diz em que área fica com `view_layout: {grid-area: ...}`:

```yaml
type: custom:grid-layout
layout:
  grid-template-columns: repeat(4, minmax(0, 1fr))
  grid-template-areas: |
    "hero hero hero hero"
    "pills pills pills pills"
    "p1 p2 asp amb"
    "cot cot luz amb"
    "seg seg luz amb"
  mediaquery:
    "(max-width: 620px)":
      grid-template-columns: minmax(0, 1fr)
      grid-template-areas: |
        "hero" "pills" "p1" "p2" "asp" "cot" "luz" "seg" "amb"
    "(max-width: 1100px)":
      grid-template-columns: repeat(2, minmax(0, 1fr))
```

Quer mudar a ordem? Mude só o desenho das áreas: os cartões não precisam sair do lugar no YAML.

## Armadilhas (e como resolver)

- **Mediaquery fora de ordem.** No layout-card vale a **primeira** que casar. Coloque a de tela menor (`620px`) antes da maior (`1100px`), senão o celular pega o layout de tablet.
- **`minmax(0, 1fr)` e não só `1fr`.** Com `1fr`, um texto comprido estica a coluna e quebra a grade inteira.
- **Modelo não encontrado.** `button_card_templates:` tem que estar no **topo** do RAW, no mesmo nível de `views:`, e os modelos com 2 espaços de recuo.
- **Aspas dentro do JavaScript.** Em YAML com aspas simples, uma aspa simples dentro do código vira `''` (duas). Prefira o bloco `|` com o `[[[ ]]]` em linhas separadas.
- **Cartão dentro de cartão que não atualiza.** Um button-card aninhado dentro de `custom_fields` às vezes não redesenha quando o estado muda. Se acontecer, deixe o botão como cartão próprio na grade.
- **Ícone que some em cartão baixo.** Em cartões de altura pequena, o `icon` do button-card pode ficar escondido. Coloque o `<ha-icon>` dentro do HTML do `name` ou do `custom_field`.
- **Tema não aparece.** Faltou `frontend.reload_themes` ou o `themes: !include_dir_merge_named themes` no `configuration.yaml`.
- **Sem vidro fosco.** O card-mod precisa do `extra_module_url` e de um reinício. Com o fundo de grade padrão o efeito é discreto; com uma imagem no fundo ele aparece mais.

## Códigos deste vídeo

- [Modelos fx_ do button-card (arquivo completo)](/codigos/doug-futurista-modelos-fx-do-button-card)
- [Home de exemplo com grid-layout](/codigos/doug-futurista-home-de-exemplo-com-grid-layout)
- [configuration.yaml do tema e do card-mod](/codigos/doug-futurista-configuration-yaml-tema-e-card-mod)
- [Cartão fx_medidor: valor com barra de progresso](/codigos/cartao-fx-medidor-valor-com-barra-de-progresso)

Ficou com dúvida em algum cartão ou quer que eu explique uma tela específica? Deixa nos comentários.


## Códigos deste artigo

- [Cartão fx_medidor: valor do sensor com barra de progresso](https://dougsmarthome.com.br/codigos/cartao-fx-medidor-valor-com-barra-de-progresso.md): Modelo novo do button-card no estilo Doug Futurista: valor de qualquer sensor com barra que fica vermelha no limite. Bom para consumo, caixa d'água e bateria.
- [Home de exemplo do tema Doug Futurista (grid-layout)](https://dougsmarthome.com.br/codigos/doug-futurista-home-de-exemplo-com-grid-layout.md): Uma Home completa com os cartões fx_: faixa com hora, pílulas, pessoas, aspirador, cotações, luzes, segurança e cômodos, em grade que se adapta ao celular.
- [Modelos fx_ do tema Doug Futurista (button-card)](https://dougsmarthome.com.br/codigos/doug-futurista-modelos-fx-do-button-card.md): Os 9 modelos de cartão do vídeo do tema Doug Futurista: pessoa, luz, sensor, acesso, cotação, aspirador, ambiente e pílulas, em vidro azul-marinho.
- [configuration.yaml do tema Doug Futurista e do card-mod](https://dougsmarthome.com.br/codigos/doug-futurista-configuration-yaml-tema-e-card-mod.md): O bloco frontend que carrega a pasta de temas e o card-mod como módulo, para o vidro fosco valer no tema todo, e a ação para aplicar o tema na casa.

## Veja também

- [Cards Incríveis no Home Assistant: Stack-in-Card, Mushroom & Card-Mod](https://dougsmarthome.com.br/videos/cards-incriveis-no-home-assistant-stack-in-card-mushroom-card-mod.md): Personalize sua interface do Home Assistant com Mushroom Template Card e Mushroom Chips! 🚀
- [Sua casa em 3D no Home Assistant: NeonPlan 3D do zero (grátis)](https://dougsmarthome.com.br/videos/sua-casa-em-3d-no-home-assistant-neonplan-3d-do-zero-gratis.md): ⚠️ AVISO IMPORTANTE: o Marketplace nativo chega na versão 2026.11 do Home Assistant, com lançamento estável previsto para 4 de novembro de 2026. Gravei este vídeo na versão beta.…
- [O jogo do seu time no Home Assistant: horário, onde passa e aviso antes da bola rolar](https://dougsmarthome.com.br/videos/o-jogo-do-seu-time-no-home-assistant-horario-onde-passa-e-aviso-antes-da-bola-ro.md): Que horas é o jogo do seu time? No meu Home Assistant está no painel: data, horário, adversário, estádio, campeonato e onde passa, para qualquer time da Série A e da Série B.…

---
Fonte: Doug Smart Home (https://dougsmarthome.com.br), por Douglas Baptista. Canal no YouTube: https://www.youtube.com/@dougsmarthome