本帖最后由 hungheo 于 2024-11-16 23:08 编辑
二、全局主题配置
接着上面分享的browser-mod的card-mod设置，这只是一个tile卡片的设置，如果有很多个browser-mod而且样式都是一样的，就可以在主题文件中配置好，全局生效
card-mod插件作者关于主题文件中的配置说明：https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#navigating-the-shadowdom
1、主题文件中的定义：
定义card-mod作用的主题名，theme命名要与主题名称相同,基本格式如下：
---
hungheo: #主题名称
card-mod-theme: hungheo #card mod 作用的主题名称
#这两个保持一致
2、应用card-mod全局变量，变量格式为"card-mod-<thing>-yaml:"
名称中间的thing替换成想修改的区域标签名称
常用的有 root、view、more-info、card、row、glance、badge等等
其中：
#card-mod-root-yaml 对应的网页标签是：
<hui-root class="undefined">...</hui-root>
#card-mod-view-yaml 对应的网页标签是：
<hui-view class="undefined">...</hui-view>
#card-mod-more-info-yaml 对应的网页标签是：
<ha-dialog class="undefined">...</ha-dialog>
#card-mod-card-yaml 对应的网页标签是：
<ha-card class="名称">...</ha-card>
3、根据自己需求修改下主题文件：
注意：1、如果加入了card-mod全局配置的，切换主题时，需要重载一下主题才能生效
2、全局设置会把ha自带的样式也修改掉
分享下我自己用的
---
hungheo:
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
ha-card-border-radius: "12px"
ha-dialog-border-radius: "0px" #弹出窗口 背景板倒角
mdc-select-fill-color: "rgba(255, 255, 255, 0.2)" #选择框背景色
dialog-backdrop-filter: blur(20px)
card-mod-theme: hungheo
card-mod-root: |
.header {
display: none;
}
#view {
padding: 0 !important;
height: 100vh !important;
}
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
card-mod-more-info-yaml: |
.: |
ha-dialog > div:focus {
outline: none;
}
ha-dialog {
--vertical-align-dialog: center !important;
}
ha-dialog > div.content > div.container {
background: none !important;
}
@media (max-width: 450px), (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-height: none !important;
}
}
ha-dialog$: |
div.mdc-dialog__surface {
background: none !important;
}
modes:
light:
custom-background-color: "#f5f4f1"
custom-card-background-color: "#fffefb"
custom-icon-color: "#3b3c3d"
#main
primary-background-color: "var(--custom-background-color)"
text-color: "#1d1c1c"
primary-text-color: "var(--text-color)"
text-primary-color: "var(--text-color)"
sidebar-text-color: "var(--text-color)"
#card
state-icon-color: "var(--custom-icon-color)"
state-inactive-color: "var(--custom-icon-color)"
state-active-color: "#71c4ef"
card-background-color: "var(--custom-card-background-color)"
ha-card-background: "var(--custom-card-background-color)"
#header
app-header-background-color: "var(--custom-background-color)"
#sidebar
sidebar-icon-color: "var(--custom-icon-color)"
sidebar-background-color: "var(--custom-background-color)"
dark:
ha-card-background: "rgba(255, 255, 255, 0.2)" #卡片背景色
mush-rgb-disabled: "255,255,255"
rgb-primary-text-color: "255,255,255"
效果：
浏览器界面：
手机APP界面：
| 
发表于 2024-11-16 21:29:06
