卡片样式

Dreame 吸尘器卡片原生支持 Home Assistant 的默认主题。所有内部组件、菜单和布局会自动适应当前的 Home Assistant 主题。它可以动态继承 浅色 和 深色 模式的颜色，在标准情况下无需自定义样式。

创建自定义 Home Assistant 主题以调整美观涉及覆盖如下列出的外部 CSS 属性。

地图样式

这些设置仅影响卡片的 UI 组件。自定义吸尘器地图本身的内部颜色，例如房间、路径和墙壁，请在 覆盖颜色 部分处理。

该卡片还使用以 --dvc- 为前缀的内部设置。不建议直接覆盖内部设置，因为它们在未来更新中可能会发生变化。请针对下面列出的外部 Home Assistant 主题设置进行调整。

card-mod

card-mod 插件在此卡上已被明确 禁用且不受支持 以确保稳定性。必须使用自定义 Home Assistant 主题来覆盖此页面提供的 CSS 属性。

如果通过主题无法实现特定的视觉更改，可以通过 问题报告 页面提交功能请求，说明所需更改及其原因。

背景和边框

这些设置控制卡片的主要结构外观。

变量	描述
--ha-card-background	定义卡片的主要背景颜色。
--secondary-background-color	用于次要表面、叠加背景和浮动菜单。
--view-background	仪表板的基础背景颜色。当卡片处于 panel 或 picture 模式时使用此颜色以实现无缝融合。
--ha-card-border-radius	定义卡片外角的圆角程度。
--ha-card-border-width	卡片边框线的宽度。
--ha-card-border-color	卡片边框的颜色。
--divider-color	内部列表分隔线和隔板的颜色。
--ha-card-box-shadow	应用于主卡片容器的盒阴影。
--ha-card-backdrop-filter	允许在卡片背景上添加背景滤镜，例如 blur。

文字与排版

这些设置决定了整个用户界面中使用的文本颜色。

变量	描述
--primary-text-color	用于主要标题、状态文本和数值的主要文本颜色。
--secondary-text-color	用于次要文本、详细状态和不活跃标签的颜色。
--disabled-text-color	用于当前不可用或已禁用文本的颜色。
--text-primary-color	位于主色按钮上的文本颜色。

图标与强调色

这些设置管理交互元素、活动状态和图标的配色。

变量	描述
--primary-color	用于活动元素、按钮、加载动画和选定标签的主要强调色。
--light-primary-color	主要颜色的浅色版本，用于悬停状态或活动按钮背景。
--accent-color	用于界面中特定高亮的替代强调色。
--mdc-theme-on-primary	置于主色背景上的文本或图标颜色。
--paper-item-icon-color	状态和菜单图标的默认颜色。
--paper-item-icon-active-color	当相应状态处于激活时应用于图标的颜色。

状态与语义颜色

根据吸尘器的状态和活动通知，卡片会动态更改颜色。

变量	描述
--success-color	用于成功操作或积极状态，例如电量已充满。
--info-color	用于信息元素和标准提醒。
--warning-color	用于警告提醒、低电量状态或小问题。
--error-color	用于严重故障、错误和无法通过的地图对象。
--state-unavailable-color	指示吸尘器当前不可用或离线的颜色。

交互元素

专门针对按钮、滚动条和输入框等 UI 组件的主题设置。

变量	描述
--mdc-theme-surface	浮动菜单、下拉菜单和弹出卡片的表面颜色。
--mdc-button-raised-box-shadow	应用于浮起按钮的阴影以增加深度感。
--input-hover-line-color	悬停在特定输入框时下划线的颜色。
--input-dropdown-icon-color	下拉菜单中插入符号/箭头图标的颜色。
--scrollbar-thumb-color	用于遥控器摇杆和滚动条滑块的颜色。
--rgb-primary-color	主色的RGB逗号分隔版本，用于应用透明度。
--rgb-primary-text-color	主文本颜色的RGB逗号分隔版本，用于应用透明度。