探索卡片魔力: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