card-mod使用分享(2025-10-06更新)

hungheo

主要分为 标签的路径查找 和  全局主题配置
一、路径查找：
1、复制JS路径
F12选择要查找的标签，然后右键“复制JS路径”

游客，如果您要查看本帖隐藏内容请回复

2、JS路径转card-mod路径
     这个网页可以将JS路径直接转换成card-mod的路径：https://matt8707.github.io/card-mod-helper/
2.1、路径有#shadowRoot的情况
     插件作者说明了：标签中的#shadowRoot替换成了$符号,所以转换成了下图：

游客，如果您要查看本帖隐藏内容请回复

看网页结构，知道tile card的结构是从hui-tile-card开始的，遇到的所有$都要逐级加进去，最后，指向class="slider-track-background"的div标签，这个就是要修改的

编写card-mod

游客，如果您要查看本帖隐藏内容请回复

这样整个路径就搞定了！

这里只是简单的修改下背景颜色
效果如下图：

游客，如果您要查看本帖隐藏内容请回复

2.2、路径没有#shadowRoot的情况
这里相对简单些，用 > 符号连接上下div标签就可以，如果遇到不是div标签的用 # 符号连接

游客，如果您要查看本帖隐藏内容请回复

这简单修改下ha-card标签下，clas=“container”的div标签的属性

游客，如果您要查看本帖隐藏内容请回复

ps:
    关于修改CSS属性，具体可以问AI或者百度，也可以参照这篇帖子：https://bbs.hassbian.com/thread-24285-1-1.html


分享一个browser-mod card的card-mod这设置：
2025-10-06更新
browser-mod card更新到2.6.1了，很多设置都变了
新版本有独立的style设置，具体参考https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md
10.1版本的ha需要用card_mod修改

card_mod:
      style:
        ha-dialog $: |
          @media (max-width: 450px), (max-height: 500px) {
            .mdc-dialog .mdc-dialog__surface {
                min-height: 10%;
            }
          }

复制代码

以下是10.1以下版本的HA的设置

card_mod:
  style:
    .: |
      :host {
        --ha-card-border-width: 0; 
      }
      .div:focus {
        outline: none; 
      }
      ha-dialog > div.content > div.container {
        background: none !important; /*取消弹出窗口内容的背景，*/
      }
      ha-dialog {
        --vertical-align-dialog: center !important;  /*窗口 居中*/
      }
      @media (max-width: 450px), (max-height: 500px) {
        ha-dialog {
          --mdc-dialog-min-height: none !important;  /*手机界面 窗口 居中*/
        }
      }
    ha-dialog$: |
      .mdc-dialog__scrim{
          backdrop-filter: blur(20px) !important; /*背景模糊*/
        }
      div.mdc-dialog__surface { 
        background: none !important;  /*取消弹出窗口标题、下部按钮的背景，*/
      }

复制代码

前后效果对比：

        

hungheo

二、全局主题配置
接着上面分享的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界面：

     

daxiong828

学习一下

taioner

这个学习了啊

cjp496641673

谢谢分享，感谢楼主！

mmmmmmm714

学习一下,看哪个好用

zmg

先收藏，再实践！

longze650

学习学习！

longze650

谢谢分享，感谢楼主！

DDDear

大佬你好，请问tile card的name和状态可以修改颜色吗？可以的话，能否帮忙给个示例代码