Home Assistant 界面美化:用 lovelace-soft-ui 做出更顺眼的控制面板
Home Assistant 默认界面能用,但谈不上好看。控件密、层次平、颜色也比较硬,日常开灯关灯还行,真要当成家里的控制中心,视觉上总差点意思。lovelace-soft-ui 解决的就是这类问题:它不改 Home Assistant 的底层逻辑,主要靠 YAML 配置和卡片样式,把界面往更柔和、更统一的方向推。
它解决的到底是什么
最直观的变化,是卡片从'功能块'变成了更像设计过的组件:阴影更轻,圆角更统一,颜色过渡也没那么生硬。对智能家居来说,这种改动不算花哨,反而挺实用。控制按钮一眼能找得到,界面也不会因为元素太杂而显得乱。
安装前先准备什么
开始之前,先确认 Home Assistant 里已经装了 card-mod。这一步绕不开,因为后面的样式定制基本都要靠它撑起来。一般通过 HACS 安装最省事,没必要手工折腾太多。
获取项目配置
先把项目仓库拉下来:
git clone <项目仓库地址>
仓库里的 cards 目录放的是现成的卡片模板,像按钮、标题这些常见组件都能找到。实际用的时候,我更倾向于先拿现成模板改,而不是从零写样式;这样省时间,也更容易看清楚每个参数到底在控制什么。
两种用法,思路不一样
lovelace-soft-ui 主要有两条路:
- 全局样式:改主题 YAML,让整套卡片风格统一起来
- 局部样式:在单个卡片里加
style,只改某一块的外观
如果你只是想让整个家居面板看起来一致,全局样式更省心。要是某个场景卡片,比如客厅灯光或者影院模式,需要单独突出,局部样式就更灵活。
比如 cards/button/button_description.yaml 里的配置,就适合拿来做带图标和说明文字的按钮卡片。常改的几个参数是 background、border-radius 和 box-shadow,这几个调顺了,卡片的质感就会明显好很多。
适合落地的几个场景
家居控制中心
把卧室灯、空调、窗帘放到同一个页面里,用分组卡片把功能分开。这样一来,夜里起床不用翻来翻去找按钮,常用操作也不会挤在一起。界面干净,比堆一排原生控件舒服得多。
家庭影院模式
影院场景很适合做成独立卡片,把灯光、音响、投影集中到一起。状态变化一出来,设备开没开、场景有没有切换成功,基本不用猜。
这个方案真正好用的地方
lovelace-soft-ui 的一个优点是响应式表现还算稳,手机、平板、电脑上看,布局不会差得太离谱。它不是那种靠复杂动画撑场面的方案,更多是把信息层级和视觉重心理顺。
另一个值得保留的点是状态反馈。按钮按下去的阴影变化、设备开启后的颜色提示,这些细节不抢戏,但会让交互更像'真的在操作一个设备',而不是盯着一堆静态方块。
容易踩的坑
别把界面做得太满。动画、颜色、阴影都能加,但加多了就开始互相打架,最后看起来不像美化,倒像装饰过头。
也别为了好看牺牲常用功能。Home Assistant 的面板本质上还是工具,按钮够不够大、信息够不够直接,往往比风格统一更重要。视觉可以收一点,操作路径最好别绕。
想再往前走一步
如果想定制出自己的风格,可以先从主题文件里的 primary-color 和 accent-color 下手。主色和强调色一变,整个界面的气质就会跟着变。比如偏深一点的蓝色配白字,科技感会更强,但前提是别把对比度压得太低。
卡片组合也值得试试。标题卡片下面接按钮组,是最常见也最稳的做法。它不算炫,但信息层次清楚,后面扩展起来也方便。
lovelace-soft-ui 不是那种装上就能让界面自动变高级的工具,真正好看的部分还是得自己调。不过它把基础骨架搭得比较顺,至少让 Home Assistant 的控制面板从'能用'往'愿意打开'这一步迈过去了。

