lovelace card mod
Card-mod 3.4.3
允许您将 CSS 样式应用到 Home Assistant 前端的各种元素。
使用 HACS 安装或参阅本指南。
虽然 card-mod 可以作为 lovelace 资源安装，但如果将其作为前端模块安装，某些功能将大大受益。
为此，请将以下内容添加到您的configuration.yaml文件中并重新启动 Home Assistant：
frontend :
extra_module_url :
- /local/card-mod.js您需要根据安装card-mod.js位置调整该路径。如果您通过 HACS 安装，这可能是/hacsfiles/lovelace-card-mod/card-mod.js 。
即使添加extra_module_url后，HACS 自动添加的任何资源定义也可以保持原样。
card_mod :
style : |
ha-card {
color: red;
}当您键入时，您应该会看到卡片上的文本变成红色。
您还应该看到“显示视觉编辑器”按钮附近弹出一个小画笔图标。这表明该卡具有卡片模组代码，该代码不会在可视化编辑器中显示。
通过将以下内容添加到卡片配置中来设置卡片样式：
card_mod :
style : <STYLES>如果是最简单的形式， <STYLES>是一个 CSS 字符串，它将被注入到卡片的<ha-card>元素中。
注意：card-mod 仅适用于包含 ha-card 元素的卡片。这包括几乎所有可见的卡片，但不包括
conditional、entity_filter、vertical-stack、horizontal-stack、grid等。请注意，尽管这些卡通常包含其他卡，但卡模组可以在其中工作。
请参阅每个卡的手册，了解如何为所包含的卡指定参数。
可以设置样式的最底部元素是<ha-card> 。
提示：Home Assistant 主题使用 CSS 变量。这些都可以在 card-mod 中设置和使用 - 前面加上两个破折号：
card_mod : style : | ha-card { --ha-card-background: teal; color: var(--primary-color); }
在entities和glance卡中，每个实体都可以有选项。可以通过向实体配置添加card_mod参数来单独设置这些元素的样式。
对于这些情况，样式将被注入到 ShadowRoot 中，从而通过:host访问最底部的元素。
这也适用于查看picture-elements卡中的徽章和元素。
type : entities
entities :
- entity : light.bed_light
card_mod :
style : |
:host {
color: red;
}
- entity : light.ceiling_lights
card_mod :
style : |
:host {
color: green;
}
- entity : light.kitchen_lights
card_mod :
style : |
:host {
color: blue;
}安装了 card-mod 后， <ha-icon>元素（例如entities 、 glance和更多卡片使用）会将其图标设置为 CSS 变量--card-mod-icon （如果存在）中找到的值。
它还会将图标颜色设置为 CSS 变量--card-mod-icon-color （如果存在）中找到的值。这会忽略实体状态，但仍然会变暗，除非您也将--card-mod-icon-dim设置为none 。
- entity : light.bed_light
card_mod :
style : |
:host {
--card-mod-icon: mdi:bed;
}所有样式都可能包含 jinja2 模板，这些模板将由 Home Assistant 后端处理。
card-mod 还使以下变量可用于模板：
config - 卡、实体或徽章的完整配置 - （ config.entity可能特别令人感兴趣）user - 当前登录用户的名称browser - 浏览器的browser_id （如果您安装了 browser_mod）hash - 当前 URL 中#后面的内容（仅在第一次加载时考虑。它不会动态更新）Home Assistant 广泛使用了称为 Shadow DOM 的东西。这允许轻松重用组件（例如ha-card或ha-icon ），但在尝试将 CSS 样式应用于事物时会导致一些问题。
在浏览器元素检查器中浏览卡片时，您可能会遇到一行类似“ #shadow-root (open) ”的内容（具体内容取决于您的浏览器），并且注意到其中的元素不会继承来自外部的风格。
为了对影子根内的元素进行样式设置，您需要将style:字典而不是字符串。
对于每个字典条目，该键将用于通过修改后的querySelector()函数选择一个或多个元素。然后条目的值将被注入到这些元素中。
注意：修改后的
querySelector()函数将在选择器中用#shadow-root替换美元符号 ($)。
该过程是递归的，因此该值也可能是字典。 “ . ”键（句点）将选择当前元素。
让我们更改 Markdown 卡中所有第三级标题（ ### like this ）的颜色，并更改其背景。
如果我们在 chrome 的元素检查器中查看卡片，它看起来像这样：
<ha-card>元素是基础，从那里我们看到我们需要通过一个#shadow-root才能到达<h3> 。 #shadow-root位于<ha-markdown>元素内，因此我们的选择器将是：
ha-markdown$
它将找到第一个<ha-markdown>元素，然后找到其中的所有#shadow-root 。
要将背景添加到<ha-card> ，我们希望将样式直接应用于基本元素，该元素具有键
.
这给出了最终的样式：
card_mod :
style :
ha-markdown$ : |
h3 {
color: purple;
}
. : |
ha-card {
background: teal;
} 
注意：队列的选择器链将一次查找一个由空格或“
$”分隔的元素。
对于每个步骤，仅选择第一个匹配项。
但对于链的最终选择器（即在给定的字典键中），所有匹配的元素都将被选择。为了方便起见，以$结尾的链是一种特殊情况，选择所有元素的影子根。例如，以下命令将选择地图卡上第一个标记中的
div元素："ha-map $ ha-entity-marker $ div" : |但以下将选择地图卡上所有地图标记中的 div 元素（因为我们结束
ha-entity-marker $选择器上的第一个键，并在每个结果中开始新的搜索div）：" ha-map $ ha-entity-marker $ " : "div" : |
注 2：继上述注解之后；由于 Home Assistant 中使用了高水平的加载顺序优化，因此不能保证在 card-mod 查找
ha-entity-marker元素时存在它们。如果你再次打破链条：" ha-map $ " : " ha-entity-marker $ " : "div" : |那么card-mod将能够在稍后的时间重试从
ha-map $点查找，这可能会导致更稳定的结果。简而言之;如果事情似乎间歇性地进行 - 尝试将链条分成几个步骤。
DOM 导航在前几次可能很难正确，但您最终会掌握它的窍门。
为了帮助您，您可以使用浏览器的元素检查器来查看 card-mod 采取了哪些步骤。
<ha-card> ）。无论您是否指定样式，它都应该包含<card-mod>元素。<card-mod>元素。$0.card_mod_input并按 Enter 键。$0.card_mod_children并按 Enter 键。<card-mod>元素的集合。单击设置项的value:中的“card-mod”会将您带到检查器中的<card-mod>元素，您可以继续检查链的其余部分。$0.card_mod_parent查找链中任何<card-mod>元素的父元素。有关更多信息，您可以在遇到问题的卡的配置中使用以下内容。它可能会也可能不会帮助你。
card_mod :
debug : true<ha-card>元素设置卡片样式没有<ha-element>的卡片仍然可以使用提供的custom:mod-card卡进行样式设置。
这仅在极少数情况下是必要的，并且可能带来的问题多于其解决的问题。
您的卡很可能包含另一张卡，在这种情况下，您应该将样式应用到该卡。
足够的警告。
type : custom:mod-card
card :
type : vertical-stack # for example
...
card_mod :
style : |
ha-card {
...
} mod-card 将创建一个<ha-card>元素 - 删除背景和边框 - 并将您的卡片放入其中。
我的所有测试用例都可以在test/views目录中找到。
您可以通过转到test目录并运行以下命令在 docker 中进行演示：
docker-compose up
然后访问http://localhost:8125并使用用户名dev和密码dev登录。
或者您可以使用 vscode devcontainer 并运行任务“ Run hass ”。
有关如何开发卡片模组主题的说明，请参阅 README-themes.md。
要向自定义卡添加卡模组样式功能，请参阅 README-developers.md。
