Estilo dos Cartões

O Cartão Dreame Vacuum cumpre nativamente o tema padrão do Home Assistant. Todos os componentes internos, menus e layouts adaptam-se automaticamente ao tema ativo do Home Assistant. Herdando de forma fluida tanto as cores do Modo Claro como do Modo Escuro de forma dinâmica, tornando desnecessária a personalização de estilos em condições padrão.

Criar um tema personalizado do Home Assistant para ajustar o aspeto envolve substituir as propriedades CSS externas listadas abaixo.

Estilização do Mapa

Estas definições afetam apenas os componentes da interface do cartão. Personalizar as cores internas do próprio mapa do aspirador, como divisões, caminhos e paredes, é feito na secção Substituir Cores.

O cartão também utiliza definições internas com o prefixo --dvc-. Substituir diretamente definições internas não é recomendado, pois o seu comportamento muda em atualizações futuras. Em vez disso, direcione as definições externas do tema 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. Os temas personalizados do Home Assistant devem ser usados para substituir as propriedades CSS fornecidas nesta página.

Se uma alteração visual específica não puder ser realizada através de temas, um pedido de funcionalidade explicando as alterações desejadas e a razão por trás delas pode ser submetido através da página Relatório de Problemas.

Fundos e Bordas

Estas definiçõ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 isto quando está em modo panel ou picture para se integrar perfeitamente.
--ha-card-border-radius	Define a arredondamento dos cantos exteriores 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 internos da lista.
--ha-card-box-shadow	A sombra (box-shadow) 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

Estas definições determinam as cores de texto utilizadas na interface de utilizador.

Variável	Descrição
--primary-text-color	A cor principal do texto utilizada para títulos primários, texto de estado e valores.
--secondary-text-color	Utilizada para texto secundário, estados detalhados e etiquetas de separadores inativos.
--disabled-text-color	Cor utilizada para texto que está atualmente indisponível ou desativado.
--text-primary-color	A cor do texto colocado diretamente em botões com cor primária.

Ícones & Acentos

Estas definições gerem a coloração de elementos interativos, estados ativos e ícones.

Variável	Descrição
--primary-color	A cor de acento primária para elementos ativos, botões, animações de carregamento e separadores selecionados.
--light-primary-color	Uma versão mais clara da cor primária, utilizada para estados de passagem do rato ou fundos de botões ativos.
--accent-color	Cor de acento alternativa utilizada para destaques específicos na interface de utilizador.
--mdc-theme-on-primary	Cor do texto ou ícones colocados sobre um fundo de cor primária.
--paper-item-icon-color	A cor por defeito para ícones de estado e de menu.
--paper-item-icon-active-color	A cor aplicada aos ícones quando o seu estado correspondente está ativo.

Cores de Estado e Semânticas

O cartão altera dinamicamente de cor 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 fraca 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 direcionadas especificamente a componentes da interface do utilizador 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, dropdowns e cartões pop-up.
--mdc-button-raised-box-shadow	A sombra aplicada aos botões elevados para lhes conferir profundidade.
--input-hover-line-color	Cor do sublinhado ao passar o cursor sobre campos de entrada específicos.
--input-dropdown-icon-color	Cor dos ícones de caret/seta dentro dos menus dropdown.
--scrollbar-thumb-color	Cor usada para o botão (thumb) do joystick do controlo remoto e das 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.