探索卡片魔力：Home Assistant前端定制工具——card-mod 3

探索卡片魔力：Home Assistant前端定制工具——card-mod 3

lovelace-card-mod🔹 Add CSS styles to (almost) any lovelace card项目地址:https://gitcode.com/gh_mirrors/lo/lovelace-card-mod

在智能家居控制的舞台上，Home Assistant以其强大和灵活的特性赢得了众多用户的青睐。为了进一步提升用户体验，我们有这样一个神奇的开源项目——card-mod 3，它让你能够随心所欲地为Home Assistant前端应用自定义CSS样式。

安装及性能优化

要安装card-mod 3，你可以选择通过HACS（Home Assistant Community Store）进行集成，或者按照官方提供的安装指南手动操作。若想提升性能，将其作为前端模块安装也是一个不错的选择。只需在

configuration.yaml

文件中添加相应配置，然后重启Home Assistant，即可享受无缝且高效的定制体验。

快速上手

启动card-mod 3十分简单。打开你想修改的卡片，在GUI编辑器中点击“显示代码编辑器”按钮，将以下代码粘贴到底部：

card_mod:
  style: |
    ha-card {
      color: red;
    }

你会看到卡片的文字立刻变为红色，并出现一个画刷图标，标志着该卡片已启用card-mod代码，视觉编辑器将不会显示这部分自定义内容。

使用方法

样式化卡片

在卡片配置中添加

card_mod

属性并指定

style

，就像这样：

card_mod:
  style: <STYLES>

这里，

<STYLES>

可以是任何有效的CSS字符串，这些样式将会被注入到卡片的

ha-card

元素中。需要注意的是，card-mod仅适用于包含

ha-card

元素的卡片。

样式化实体、徽章和元素

在

entities

和

glance

卡片中，每个实体都可以有自己的选项。只需要在实体配置中增加

card_mod

字段，便能对它们进行单独的样式调整。对于这些情况，样式会被注入到阴影DOM内，可以直接访问最底层的

:host

元素。

改变图标

安装了card-mod后，

ha-icon

元素会响应CSS变量

--card-mod-icon

来设置其图标，以及根据

--card-mod-icon-color

设置图标的颜色（即使状态改变也有效），除非你也设置了

--card-mod-icon-dim

为

none

。

- entity: light.bed_light
  card_mod:
    style: |
      :host {
        --card-mod-icon: mdi:bed;
      }

模板与DOM导航

所有样式都支持Jinja2模板，这意味着你可以利用Home Assistant的后端处理模板。card-mod还提供了一些额外的变量供模板使用，例如卡片配置

config

、当前用户名称

user

、浏览器标识

browser

以及URL哈希

hash

。

针对阴影DOM的复杂性，card-mod提供了特殊的CSS查询方式。你可以在

style

属性中使用字典结构，键用于指定选择器，值则表示要注入的样式。美元符号 ($) 将被替换为

#shadow-root

进行选择。例如，改变markdown卡片中第三级标题的颜色和背景：

card_mod:
  style:
    ha-markdown$: |
      h3 {
        color: purple;
      }
    .: |
      ha-card {
        background: teal;
      }

项目特点

• 易用性强：无需深入HTML或CSS知识，通过简单的YAML配置即可实现前端界面个性化。
• 灵活性高：从整体布局到细节元素，无论是卡片还是实体，你都有权定制。
• 兼容广泛：支持大部分可查看的卡片类型，也可应用于实体和badge。
• 性能优化：作为前端模块安装，可显著提高应用效率。
• 模板支持：允许利用Jinja2模板动态生成样式，实现更智能的自定义。

如果你热爱探索，喜欢个性化的界面设计，那么card-mod 3无疑是你的得力助手。立即尝试，让你的Home Assistant焕发出独一无二的魅力吧！

lovelace-card-mod🔹 Add CSS styles to (almost) any lovelace card项目地址:https://gitcode.com/gh_mirrors/lo/lovelace-card-mod