Estilo do Cartão

O Cartão Dreame Vacuum é compatível nativamente com o tema padrão do Home Assistant. Todos os componentes internos, menus e layouts se adaptam automaticamente ao tema ativo do Home Assistant. Ele herda perfeitamente as cores dos modos Claro e Escuro de forma dinâmica, tornando a personalização de estilo desnecessária em condições padrão.

Criar um tema personalizado do Home Assistant para customizar a estética envolve sobrescrever as propriedades de CSS externas listadas abaixo.

Estilo do Mapa

Essas configurações afetam apenas os componentes de interface do cartão. Customizar as cores internas do próprio mapa do aspirador, como cômodos, caminhos e paredes, é feito na seção Sobrescrever Cores.

O cartão também utiliza configurações internas com o prefixo --dvc-. Sobrescrever configurações internas diretamente não é recomendado, pois seu comportamento pode mudar em atualizações futuras. Foque nas configurações de tema externas do Home Assistant listadas abaixo.

card-mod

O plugin card-mod está explicitamente desativado e não suportado neste cartão para garantir a estabilidade. Temas personalizados do Home Assistant devem ser usados para sobrescrever as propriedades CSS fornecidas nesta página.

Se uma mudança visual específica não puder ser alcançada através de temas, uma solicitação de recurso explicando as mudanças desejadas e a justificativa pode ser enviada pela página Relatório de Problemas.

Fundos e Bordas

Essas configurações controlam a aparência estrutural principal do cartão.

Variável	Descrição
--ha-card-background	Define a cor de fundo principal do cartão.
--secondary-background-color	Usado para superfícies secundárias, fundos de sobreposição e menus flutuantes.
--view-background	A cor de fundo base do painel. O cartão usa isso quando em modo panel ou picture para se integrar perfeitamente.
--ha-card-border-radius	Define a arredondamento dos cantos externos do cartão.
--ha-card-border-width	Largura da linha da borda do cartão.
--ha-card-border-color	Cor da borda do cartão.
--divider-color	Cor dos divisores e separadores de listas internas.
--ha-card-box-shadow	A sombra da caixa aplicada ao contêiner principal do cartão.
--ha-card-backdrop-filter	Permite adicionar filtros de fundo, como blur, ao fundo do cartão.

Texto & Tipografia

Essas configurações determinam as cores de texto usadas em toda a interface do usuário.

Variável	Descrição
--primary-text-color	A cor principal do texto usada para títulos primários, textos de estado e valores.
--secondary-text-color	Usada para texto secundário, status detalhados e rótulos de abas inativas.
--disabled-text-color	Cor usada para texto que está atualmente indisponível ou desativado.
--text-primary-color	A cor do texto que fica diretamente sobre botões com cor primária.

Ícones & Acentos

Essas configurações gerenciam a coloração de elementos interativos, estados ativos e ícones.

Variável	Descrição
--primary-color	A cor de destaque primária para elementos ativos, botões, animações de carregamento e abas selecionadas.
--light-primary-color	Uma versão mais clara da cor primária, usada para estados de hover ou fundos de botões ativos.
--accent-color	Cor de destaque alternativa usada para realces específicos na interface do usuário.
--mdc-theme-on-primary	Cor do texto ou ícones colocados sobre um fundo com cor primária.
--paper-item-icon-color	A cor padrão para ícones de estado e de menu.
--paper-item-icon-active-color	A cor aplicada aos ícones quando seu estado correspondente está ativo.

Cores de Status e Semânticas

O cartão muda de cor dinamicamente com base no estado do aspirador e nas notificações ativas.

Variável	Descrição
--success-color	Usado para operações bem-sucedidas ou estados positivos, como estar totalmente carregado.
--info-color	Usado para elementos informativos e alertas padrão.
--warning-color	Usado para alertas de aviso, estados de bateria baixa ou problemas menores.
--error-color	Usado para falhas críticas, erros e objetos do mapa intransponíveis.
--state-unavailable-color	A cor que indica que o aspirador está atualmente indisponível ou offline.

Elementos Interativos

Configurações de tema especificamente voltadas para componentes de interface, como botões, barras de rolagem e campos de entrada.

Variável	Descrição
--mdc-theme-surface	A cor de superfície para menus flutuantes, menus suspensos e cartões pop-up.
--mdc-button-raised-box-shadow	A sombra aplicada a botões elevados para dar profundidade.
--input-hover-line-color	Cor do sublinhado ao passar o mouse sobre campos de entrada específicos.
--input-dropdown-icon-color	Cor dos ícones de cursor/seta dentro de menus suspensos.
--scrollbar-thumb-color	Cor usada para o botão do joystick do controle remoto e barras de rolagem.
--rgb-primary-color	Versão RGB separada por vírgulas da cor primária, usada para aplicar transparência alfa.
--rgb-primary-text-color	Versão RGB separada por vírgulas da cor do texto primário, usada para aplicar transparência alfa.