Home Assistant 中文文档 下载 App

Lovelace 主题美化与个性化调整

主题系统概述

Home Assistant 的主题系统让你可以整体改变界面的配色、字体、圆角、间距等视觉元素。主题有两种:

  1. 内置主题:Home Assistant 自带的 Dark / Light
  2. 第三方主题:通过 HACS 从社区安装

安装第三方主题

  1. 打开 HACS
  2. 切换到 Frontend
  3. 点击 Explore & download → 筛选类别选 Theme
  4. 浏览并下载你喜欢的主题
  5. 刷新前端

必装主题推荐

主题风格特点
Midnight深蓝黑深邃暗色调,适合夜间
iOS-likeiOS 风格模仿 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)。可以换:

字体更换

Home Assistant 前端字体默认是系统字体。要换:

  1. 下载字体文件(.woff2 格式),放到 config/www/fonts/
  2. 在 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;
      }

注意事项