Pular para o conteúdo
Doug Smart Home
Painéis e cartões

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.

Por Douglas Baptista10 nov 2026 8 min de leitura 4 leituras
Miniatura do vídeo: Tema futurista para o Home Assistant: instalar, personalizar e usar os cartões (grátis) Prefere ver? Assista ao vídeo

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

    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:

    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:

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_.
  3. Dentro de views:, cole a Home de exemplo.
  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:

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:

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:

- 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)

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:

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:

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:

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

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:

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:

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:

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

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

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

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

Este artigo te ajudou?

0 comentários

Carregando comentários…

Também respondo os comentários no YouTube.

Escolhidos para você

Veja também

Miniatura do vídeo: Cards Incríveis no Home Assistant: Stack-in-Card, Mushroom & Card-Mod15:11Vídeo
Painéis e cartões

Cards Incríveis no Home Assistant: Stack-in-Card, Mushroom & Card-Mod

Personalize sua interface do Home Assistant com Mushroom Template Card e Mushroom Chips! 🚀

2,5 mil
Miniatura do vídeo: Sua casa em 3D no Home Assistant: NeonPlan 3D do zero (grátis)11:09Vídeo
Painéis e cartões

Sua casa em 3D no Home Assistant: NeonPlan 3D do zero (grátis)

⚠️ 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.…

1,3 mil
Miniatura do vídeo: O jogo do seu time no Home Assistant: horário, onde passa e aviso antes da bola rolar11:33Vídeo
Painéis e cartões

O jogo do seu time no Home Assistant: horário, onde passa e aviso antes da bola rolar

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

2,1 mil 1

Canal no YouTube

Toda semana, uma automação nova funcionando de verdade.

Passo a passo em português, sem enrolação, testado aqui em casa.

Inscrever-se