Lovelace 主题美化与个性化调整
主题系统概述
Home Assistant 的主题系统让你可以整体改变界面的配色、字体、圆角、间距等视觉元素。主题有两种:
- 内置主题:Home Assistant 自带的 Dark / Light
- 第三方主题:通过 HACS 从社区安装
安装第三方主题
- 打开 HACS
- 切换到 Frontend
- 点击 Explore & download → 筛选类别选 Theme
- 浏览并下载你喜欢的主题
- 刷新前端
必装主题推荐
| 主题 | 风格 | 特点 |
|---|---|---|
| Midnight | 深蓝黑 | 深邃暗色调,适合夜间 |
| iOS-like | iOS 风格 | 模仿 Apple Home 的圆角 + 毛玻璃效果 |
| Slate | 灰色系 | 中性灰,不抢卡片风头 |
| Nord | 北极蓝 | 低饱和冷色调,护眼 |
| Darkest | 纯黑 OLED | 适合 OLED 屏幕显示 |
启用主题
Settings → System → General → Theme → 选择主题
每个用户可以有自己偏好的主题(在个人配置里改),也可以设置全局默认主题。
用 card-mod 做精细调整
如果现有主题不够看,可以安装 card-mod(HACS Frontend → 搜索 card-mod)对单个卡片做 CSS 定制:
改卡片背景色
type: entities
title: 客厅灯
entities:
- light.living_room
card_mod:
style: |
ha-card {
background-color: #1a1a2e;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
改卡片文字颜色
type: sensor
entity: sensor.temperature
card_mod:
style: |
ha-card {
color: #ff6b6b;
}
.value {
font-size: 3em;
font-weight: bold;
}
全局样式注入
card-mod 还可以在 Lovelace 顶部的 Raw Configuration Editor 里注入全局 CSS:
card_mod:
style:
ha-card: |
{
border-radius: 20px !important;
border: 1px solid rgba(255,255,255,0.1);
}
图标集
Home Assistant 默认用 Material Design Icons (MDI)。可以换:
- Xiaomi Miot Icons(HACS 可装):小米风格图标集
- Hass-Icons:更丰富的图标集合
- 直接在卡片里换图标:
icon: mdi:star-four-points
字体更换
Home Assistant 前端字体默认是系统字体。要换:
- 下载字体文件(
.woff2格式),放到config/www/fonts/ - 在 Lovelace YAML 或 card-mod 里定义:
card_mod:
style:
ha-card: |
@font-face {
font-family: 'MyFont';
src: url('/local/fonts/myfont.woff2');
}
ha-card {
font-family: 'MyFont', sans-serif;
}
注意事项
- 主题和 card-mod 会增加前端加载时间(每个主题 +0.5~2MB 体积),移动端流量小的话谨慎使用
- Home Assistant 升级大版本后,某些主题可能暂时不兼容——有报错先看看是不是主题的问题
- 深色主题下截图效果特别好,但浅色主题白天看更舒服。可以考虑白天浅色、夜间深色,自动化切换