Card Styling

The Dreame Vacuum Card natively complies with Home Assistant's default theme. All internal components, menus and layouts automatically adapt to the active Home Assistant theme. It seamlessly inherits both Light and Dark mode colors dynamically, making custom styling unnecessary under standard conditions.

Creating a custom Home Assistant theme to customize the aesthetic involves overriding the external CSS properties listed below.

Map Styling

These settings affect only the UI components of the card. Customizing the internal colors of the vacuum map itself, such as rooms, paths and walls, is handled in the Override Colors section.

The card also uses internal settings prefixed with --dvc-. Overriding internal settings directly is not recommended, as their behavior changes in future updates. Target the external Home Assistant theme settings listed below instead.

card-mod

The card-mod plugin is explicitly disabled and not supported on this card to ensure stability. Custom Home Assistant themes must be used to override the CSS properties provided on this page.

If a specific visual change cannot be achieved through themes, a feature request explaining the desired changes and the reasoning behind them can be submitted via the Issue Reporting page.

Backgrounds & Borders

These settings control the main structural appearance of the card.

Variable	Description
--ha-card-background	Defines the main background color of the card.
--secondary-background-color	Used for secondary surfaces, overlay backgrounds and floating menus.
--view-background	The dashboard's base background color. The card uses this when in panel or picture mode to blend seamlessly.
--ha-card-border-radius	Defines the roundness of the card's outer corners.
--ha-card-border-width	Width of the card's border line.
--ha-card-border-color	Color of the card border.
--divider-color	Color of internal list dividers and separators.
--ha-card-box-shadow	The box-shadow applied to the main card container.
--ha-card-backdrop-filter	Allows adding backdrop filters, such as blur, to the card background.

Text & Typography

These settings dictate the text colors used throughout the user interface.

Variable	Description
--primary-text-color	The main text color used for primary headings, state text and values.
--secondary-text-color	Used for secondary text, detailed statuses and inactive tab labels.
--disabled-text-color	Color used for text that is currently unavailable or disabled.
--text-primary-color	The color of text sitting directly on top of primary-colored buttons.

Icons & Accents

These settings manage the coloring of interactive elements, active states and icons.

Variable	Description
--primary-color	The primary accent color for active elements, buttons, loader animations and selected tabs.
--light-primary-color	A lighter version of the primary color, used for hover states or active button backgrounds.
--accent-color	Alternative accent color used for specific highlights in the UI.
--mdc-theme-on-primary	Color of text or icons placed on top of a primary colored background.
--paper-item-icon-color	The default color for state and menu icons.
--paper-item-icon-active-color	The color applied to icons when their corresponding state is active.

Status & Semantic Colors

The card dynamically changes color based on the vacuum's state and active notifications.

Variable	Description
--success-color	Used for successful operations or positive states, such as being fully charged.
--info-color	Used for informational elements and standard alerts.
--warning-color	Used for warning alerts, low battery states, or minor issues.
--error-color	Used for critical faults, errors and impassable map objects.
--state-unavailable-color	The color indicating the vacuum is currently unavailable or offline.

Interactive Elements

Theme settings specifically targeting UI components like buttons, scrollbars and inputs.

Variable	Description
--mdc-theme-surface	The surface color for floating menus, dropdowns and popup cards.
--mdc-button-raised-box-shadow	The shadow applied to raised buttons to give them depth.
--input-hover-line-color	Color of the underline when hovering over specific input fields.
--input-dropdown-icon-color	Color of the caret/arrow icons inside dropdown menus.
--scrollbar-thumb-color	Color used for the thumb of the remote control joystick and scrollbars.
--rgb-primary-color	RGB comma-separated version of the primary color, used to apply alpha transparency.
--rgb-primary-text-color	RGB comma-separated version of the primary text color, used to apply alpha transparency.