Estilo de tarjetas

La tarjeta Dreame Vacuum cumple de forma nativa con el tema predeterminado de Home Assistant. Todos los componentes internos, menús y diseños se adaptan automáticamente al tema activo de Home Assistant. Hereda de manera fluida los colores tanto del modo Claro como del Oscuro de manera dinámica, haciendo innecesario un diseño personalizado bajo condiciones estándar.

Crear un tema personalizado de Home Assistant para personalizar la estética implica sobrescribir las propiedades CSS externas que se enumeran a continuación.

Estilo del mapa

Estas configuraciones afectan únicamente a los componentes de la interfaz de la tarjeta. Personalizar los colores internos del propio mapa del aspirador, como habitaciones, caminos y paredes, se maneja en la sección Sobrescribir colores.

La tarjeta también utiliza ajustes internos con el prefijo --dvc-. No se recomienda sobrescribir directamente los ajustes internos, ya que su comportamiento puede cambiar en futuras actualizaciones. En su lugar, apunta a los ajustes del tema externo de Home Assistant que se enumeran a continuación.

card-mod

El complemento card-mod está explícitamente deshabilitado y no soportado en esta tarjeta para garantizar la estabilidad. Los temas personalizados de Home Assistant deben usarse para sobrescribir las propiedades CSS proporcionadas en esta página.

Si un cambio visual específico no se puede lograr a través de temas, se puede enviar una solicitud de función explicando los cambios deseados y la razón detrás de ellos a través de la página Reporte de problemas.

Fondos y Bordes

Estas configuraciones controlan la apariencia estructural principal de la tarjeta.

Variable	Descripción
--ha-card-background	Define el color de fondo principal de la tarjeta.
--secondary-background-color	Se usa para superficies secundarias, fondos de superposición y menús flotantes.
--view-background	El color de fondo base del tablero. La tarjeta lo usa cuando está en modo panel o picture para integrarse perfectamente.
--ha-card-border-radius	Define la redondez de las esquinas exteriores de la tarjeta.
--ha-card-border-width	Ancho de la línea del borde de la tarjeta.
--ha-card-border-color	Color del borde de la tarjeta.
--divider-color	Color de los divisores y separadores internos de la lista.
--ha-card-box-shadow	La sombra de caja aplicada al contenedor principal de la tarjeta.
--ha-card-backdrop-filter	Permite agregar filtros de fondo, como blur, al fondo de la tarjeta.

Texto y Tipografía

Estos ajustes determinan los colores de texto utilizados en toda la interfaz de usuario.

Variable	Descripción
--primary-text-color	El color principal del texto utilizado para los encabezados primarios, el texto de estado y los valores.
--secondary-text-color	Utilizado para texto secundario, estados detallados y etiquetas de pestañas inactivas.
--disabled-text-color	Color utilizado para texto que actualmente no está disponible o está deshabilitado.
--text-primary-color	El color del texto que se encuentra directamente sobre botones de color primario.

Íconos y Acentos

Estos ajustes gestionan la coloración de elementos interactivos, estados activos e íconos.

Variable	Descripción
--primary-color	El color de acento primario para elementos activos, botones, animaciones de carga y pestañas seleccionadas.
--light-primary-color	Una versión más clara del color primario, utilizada para estados de desplazamiento o fondos de botones activos.
--accent-color	Color de acento alternativo utilizado para resaltados específicos en la interfaz de usuario.
--mdc-theme-on-primary	Color de texto o íconos colocados sobre un fondo de color primario.
--paper-item-icon-color	El color predeterminado para íconos de estado y de menú.
--paper-item-icon-active-color	El color aplicado a los íconos cuando su estado correspondiente está activo.

Colores de Estado y Semánticos

La tarjeta cambia dinámicamente de color según el estado de la aspiradora y las notificaciones activas.

Variable	Descripción
--success-color	Se utiliza para operaciones exitosas o estados positivos, como estar completamente cargado.
--info-color	Se utiliza para elementos informativos y alertas estándar.
--warning-color	Se utiliza para alertas de advertencia, estados de batería baja o problemas menores.
--error-color	Se utiliza para fallos críticos, errores y objetos del mapa intransitables.
--state-unavailable-color	El color que indica que la aspiradora está actualmente no disponible o desconectada.

Elementos Interactivos

Configuraciones de tema que se dirigen específicamente a componentes de la interfaz de usuario como botones, barras de desplazamiento y campos de entrada.

Variable	Descripción
--mdc-theme-surface	El color de superficie para menús flotantes, desplegables y tarjetas emergentes.
--mdc-button-raised-box-shadow	La sombra aplicada a los botones elevados para darles profundidad.
--input-hover-line-color	Color del subrayado al pasar el cursor sobre campos de entrada específicos.
--input-dropdown-icon-color	Color de los iconos de caret/flecha dentro de los menús desplegables.
--scrollbar-thumb-color	Color utilizado para el thumb del joystick del control remoto y las barras de desplazamiento.
--rgb-primary-color	Versión de los colores primarios en RGB separados por comas, utilizada para aplicar transparencia alfa.
--rgb-primary-text-color	Versión de los colores de texto primario en RGB separados por comas, utilizada para aplicar transparencia alfa.