ha-mushroom-cards

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Works with HACS Mushroom cards, card-mod, and Home Assistant YAML configurations.

兼容HACS Mushroom卡片、card-mod和Home Assistant YAML配置。

Home Assistant Mushroom Cards

Home Assistant Mushroom卡片

Build minimalist, mobile-first Home Assistant dashboards using the Mushroom cards design system.

使用Mushroom卡片设计系统构建极简、移动优先的Home Assistant仪表盘。

Overview

概述

Installation: HACS → Frontend → Search "Mushroom"

安装步骤： HACS → 前端 → 搜索「Mushroom」

When to Use This Skill

适用场景

Use this skill when you need to:

Build minimalist, mobile-first Home Assistant dashboards with modern design
Create compact status indicators with chips cards for quick information
Use template cards with Jinja2 for dynamic content and conditional styling
Style entity controls with card-mod for custom CSS and animations
Implement full UI editor support without writing YAML
Display specialized entity types (light, climate, media player, person) with optimized controls

Do NOT use when:

You need complex multi-entity cards (use entities card instead)
Building data-heavy dashboards with graphs and charts (use visualization cards)
You prefer traditional Home Assistant card styling (use native cards)

在以下场景中使用本技能：

构建具有现代设计风格的极简、移动优先Home Assistant仪表盘
使用芯片卡片创建紧凑的状态指示器，快速展示信息
结合Jinja2使用模板卡片实现动态内容和条件样式
使用card-mod为实体控件设置自定义CSS和动画
无需编写YAML，通过UI编辑器完成全部配置
针对特殊实体类型（灯光、气候、媒体播放器、人员）显示优化后的控件

以下场景不适用：

需要复杂多实体卡片时（请使用实体卡片）
构建包含图表的数据密集型仪表盘时（请使用可视化卡片）
偏好Home Assistant原生卡片样式时（请使用原生卡片）

Usage

使用步骤

Follow these steps to create Mushroom card dashboards:

Install Mushroom via HACS (Frontend category)
Select card type based on entity (entity, light, climate, chips)
Configure card using UI editor or YAML
Add styling with card-mod for custom CSS (optional)
Test on mobile for responsive design verification

Mushroom is a complete design system for Home Assistant featuring:

13+ specialized card types for entities, controls, and status display
Minimalist Material Design aesthetic
Full UI editor support (no YAML required)
Mobile-first responsive design
Card-mod integration for advanced styling

按照以下步骤创建Mushroom卡片仪表盘：

安装Mushroom：通过HACS（前端分类）安装
选择卡片类型：根据实体类型选择（实体、灯光、气候、芯片等）
配置卡片：使用UI编辑器或YAML进行配置
添加样式：可选，使用card-mod实现自定义CSS
移动端测试：验证响应式设计效果

Mushroom是一套完整的Home Assistant设计系统，具备以下特性：

13种以上针对实体、控件和状态显示的专用卡片类型
极简Material Design美学
完整UI编辑器支持（无需编写YAML）
移动优先的响应式设计
集成card-mod支持高级样式定制

Card Selection Guide

卡片选择指南

Card Type	Purpose	Best For
`mushroom-entity-card`	General entity display	Sensors, switches, any entity
`mushroom-light-card`	Light control	Brightness, color picker
`mushroom-climate-card`	HVAC control	Temperature, mode, fan
`mushroom-cover-card`	Blinds/garage	Position, tilt control
`mushroom-fan-card`	Fan control	Speed, oscillation
`mushroom-lock-card`	Lock control	Lock/unlock with confirmation
`mushroom-media-player-card`	Media control	Playback, volume, source
`mushroom-person-card`	Person tracking	Location, picture
`mushroom-chips-card`	Compact status indicators	Quick status/actions
`mushroom-template-card`	Custom templating	Jinja2 templates, dynamic content
`mushroom-title-card`	Section headers	View organization

卡片类型	用途	适用场景
`mushroom-entity-card`	通用实体展示	传感器、开关、任意实体
`mushroom-light-card`	灯光控制	亮度调节、颜色选择
`mushroom-climate-card`	暖通空调控制	温度、模式、风扇调节
`mushroom-cover-card`	窗帘/车库门控制	位置、倾斜角度控制
`mushroom-fan-card`	风扇控制	风速、摇摆模式调节
`mushroom-lock-card`	门锁控制	带确认的锁定/解锁操作
`mushroom-media-player-card`	媒体控制	播放、音量、源选择
`mushroom-person-card`	人员追踪	位置、头像展示
`mushroom-chips-card`	紧凑状态指示器	快速查看状态/执行操作
`mushroom-template-card`	自定义模板	Jinja2模板、动态内容
`mushroom-title-card`	分区标题	界面组织管理

Quick Start

快速开始

Entity Card

实体卡片

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature_living_room
name: Living Room
icon: mdi:thermometer
icon_color: red
tap_action:
  action: more-info

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature_living_room
name: Living Room
icon: mdi:thermometer
icon_color: red
tap_action:
  action: more-info

Light Card

灯光卡片

yaml

type: custom:mushroom-light-card
entity: light.bedroom
name: Bedroom Light
show_brightness_control: true
show_color_control: true
use_light_color: true

yaml

type: custom:mushroom-light-card
entity: light.bedroom
name: Bedroom Light
show_brightness_control: true
show_color_control: true
use_light_color: true

Climate Card

气候卡片

yaml

type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
collapsible_controls: true
hvac_modes:
  - heat_cool
  - cool
  - heat
  - 'off'

yaml

type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
collapsible_controls: true
hvac_modes:
  - heat_cool
  - cool
  - heat
  - 'off'

Core Cards

核心卡片

1. Entity Card (General Purpose)

1. 实体卡片（通用型）

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
name: Temperature
icon: mdi:thermometer
icon_color: red
secondary_info: last-changed
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: /lovelace/climate

Icon Colors: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, white, black, disabled

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
name: Temperature
icon: mdi:thermometer
icon_color: red
secondary_info: last-changed
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: /lovelace/climate

图标颜色选项：red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, white, black, disabled

2. Light Card

2. 灯光卡片

yaml

type: custom:mushroom-light-card
entity: light.living_room
name: Living Room
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
use_light_color: true
collapsible_controls: true
tap_action:
  action: toggle

yaml

type: custom:mushroom-light-card
entity: light.living_room
name: Living Room
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
use_light_color: true
collapsible_controls: true
tap_action:
  action: toggle

3. Climate Card

3. 气候卡片

yaml

type: custom:mushroom-climate-card
entity: climate.snorlug
name: Snorlug AC
show_temperature_control: true
hvac_modes:
  - cool
  - heat
  - heat_cool
  - fan_only
  - dry
  - 'off'
collapsible_controls: true

yaml

type: custom:mushroom-climate-card
entity: climate.snorlug
name: Snorlug AC
show_temperature_control: true
hvac_modes:
  - cool
  - heat
  - heat_cool
  - fan_only
  - dry
  - 'off'
collapsible_controls: true

4. Cover Card (Blinds/Garage)

4. 遮阳篷卡片（窗帘/车库门）

yaml

type: custom:mushroom-cover-card
entity: cover.garage_door
name: Garage Door
show_position_control: true
show_tilt_position_control: false

yaml

type: custom:mushroom-cover-card
entity: cover.garage_door
name: Garage Door
show_position_control: true
show_tilt_position_control: false

5. Fan Card

5. 风扇卡片

yaml

type: custom:mushroom-fan-card
entity: fan.bedroom
name: Bedroom Fan
show_percentage_control: true
show_oscillate_control: true
collapsible_controls: true

yaml

type: custom:mushroom-fan-card
entity: fan.bedroom
name: Bedroom Fan
show_percentage_control: true
show_oscillate_control: true
collapsible_controls: true

6. Lock Card

6. 门锁卡片

yaml

type: custom:mushroom-lock-card
entity: lock.front_door
name: Front Door

yaml

type: custom:mushroom-lock-card
entity: lock.front_door
name: Front Door

7. Media Player Card

7. 媒体播放器卡片

yaml

type: custom:mushroom-media-player-card
entity: media_player.living_room_tv
name: Living Room TV
use_media_info: true
show_volume_level: true
collapsible_controls: true
media_controls:
  - play_pause_stop
  - previous
  - next
volume_controls:
  - volume_mute
  - volume_set

yaml

type: custom:mushroom-media-player-card
entity: media_player.living_room_tv
name: Living Room TV
use_media_info: true
show_volume_level: true
collapsible_controls: true
media_controls:
  - play_pause_stop
  - previous
  - next
volume_controls:
  - volume_mute
  - volume_set

8. Person Card

8. 人员卡片

yaml

type: custom:mushroom-person-card
entity: person.john
name: John
use_entity_picture: true
icon: mdi:account

yaml

type: custom:mushroom-person-card
entity: person.john
name: John
use_entity_picture: true
icon: mdi:account

Chips Card (Status Indicators)

芯片卡片（状态指示器）

The chips card displays compact status indicators and quick actions.

芯片卡片用于显示紧凑的状态指示器和快速操作按钮。

Basic Chips

基础芯片

yaml

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.temperature
    icon_color: red
  - type: weather
    entity: weather.home
    show_conditions: true
  - type: action
    icon: mdi:lightbulb
    tap_action:
      action: perform-action
      perform_action: light.turn_off
      data:
        entity_id: all

yaml

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.temperature
    icon_color: red
  - type: weather
    entity: weather.home
    show_conditions: true
  - type: action
    icon: mdi:lightbulb
    tap_action:
      action: perform-action
      perform_action: light.turn_off
      data:
        entity_id: all

Chip Types

芯片类型

Entity Chip:

yaml

- type: entity
  entity: sensor.temperature
  icon: mdi:thermometer
  icon_color: red
  content_info: state

Weather Chip:

yaml

- type: weather
  entity: weather.home
  show_conditions: true
  show_temperature: true

Action Chip:

yaml

- type: action
  icon: mdi:home
  icon_color: blue
  tap_action:
    action: navigate
    navigation_path: /lovelace/home

Menu Chip:

yaml

- type: menu

Back Chip:

yaml

- type: back

Light Chip:

yaml

- type: light
  entity: light.bedroom
  use_light_color: true
  content_info: state

Template Chip:

yaml

- type: template
  icon: mdi:lightbulb
  content: "{{ states('sensor.lights_on') }} lights"
  icon_color: >-
    {% if states('sensor.lights_on') | int > 0 %}
      orange
    {% else %}
      grey
    {% endif %}
  tap_action:
    action: navigate
    navigation_path: /lovelace/lights

实体芯片：

yaml

- type: entity
  entity: sensor.temperature
  icon: mdi:thermometer
  icon_color: red
  content_info: state

天气芯片：

yaml

- type: weather
  entity: weather.home
  show_conditions: true
  show_temperature: true

操作芯片：

yaml

- type: action
  icon: mdi:home
  icon_color: blue
  tap_action:
    action: navigate
    navigation_path: /lovelace/home

菜单芯片：

yaml

- type: menu

返回芯片：

yaml

- type: back

灯光芯片：

yaml

- type: light
  entity: light.bedroom
  use_light_color: true
  content_info: state

模板芯片：

yaml

- type: template
  icon: mdi:lightbulb
  content: "{{ states('sensor.lights_on') }} lights"
  icon_color: >-
    {% if states('sensor.lights_on') | int > 0 %}
      orange
    {% else %}
      grey
    {% endif %}
  tap_action:
    action: navigate
    navigation_path: /lovelace/lights

Template Card (Advanced)

模板卡片（高级）

Template cards use Jinja2 for dynamic content.

yaml

type: custom:mushroom-template-card
primary: "{{ states('sensor.temperature') }}°C"
secondary: "Feels like {{ state_attr('weather.home', 'temperature') }}°C"
icon: mdi:thermometer
icon_color: >-
  {% set temp = states('sensor.temperature') | float %}
  {% if temp < 18 %}
    blue
  {% elif temp < 25 %}
    green
  {% else %}
    red
  {% endif %}
badge_icon: >-
  {% if is_state('binary_sensor.window_open', 'on') %}
    mdi:window-open
  {% endif %}
badge_color: orange
tap_action:
  action: more-info
  entity: sensor.temperature

模板卡片使用Jinja2实现动态内容。

yaml

type: custom:mushroom-template-card
primary: "{{ states('sensor.temperature') }}°C"
secondary: "Feels like {{ state_attr('weather.home', 'temperature') }}°C"
icon: mdi:thermometer
icon_color: >-
  {% set temp = states('sensor.temperature') | float %}
  {% if temp < 18 %}
    blue
  {% elif temp < 25 %}
    green
  {% else %}
    red
  {% endif %}
badge_icon: >-
  {% if is_state('binary_sensor.window_open', 'on') %}
    mdi:window-open
  {% endif %}
badge_color: orange
tap_action:
  action: more-info
  entity: sensor.temperature

Template Examples

模板示例

Lights On Counter:

yaml

type: custom:mushroom-template-card
primary: "{{ states('sensor.lights_on') }} Lights On"
secondary: >-
  {% if states('sensor.lights_on') | int == 0 %}
    All lights off
  {% else %}
    {{ states('sensor.lights_on') }} active
  {% endif %}
icon: mdi:lightbulb
icon_color: >-
  {% if states('sensor.lights_on') | int > 0 %}
    amber
  {% else %}
    grey
  {% endif %}

Battery Status:

yaml

type: custom:mushroom-template-card
primary: "{{ state_attr('sensor.phone_battery', 'friendly_name') }}"
secondary: "{{ states('sensor.phone_battery') }}%"
icon: >-
  {% set battery = states('sensor.phone_battery') | int %}
  {% if battery > 80 %}
    mdi:battery
  {% elif battery > 50 %}
    mdi:battery-60
  {% elif battery > 20 %}
    mdi:battery-30
  {% else %}
    mdi:battery-alert
  {% endif %}
icon_color: >-
  {% set battery = states('sensor.phone_battery') | int %}
  {% if battery < 20 %}
    red
  {% elif battery < 50 %}
    orange
  {% else %}
    green
  {% endif %}

开灯数量统计：

yaml

type: custom:mushroom-template-card
primary: "{{ states('sensor.lights_on') }} Lights On"
secondary: >-
  {% if states('sensor.lights_on') | int == 0 %}
    All lights off
  {% else %}
    {{ states('sensor.lights_on') }} active
  {% endif %}
icon: mdi:lightbulb
icon_color: >-
  {% if states('sensor.lights_on') | int > 0 %}
    amber
  {% else %}
    grey
  {% endif %}

电池状态：

yaml

type: custom:mushroom-template-card
primary: "{{ state_attr('sensor.phone_battery', 'friendly_name') }}"
secondary: "{{ states('sensor.phone_battery') }}%"
icon: >-
  {% set battery = states('sensor.phone_battery') | int %}
  {% if battery > 80 %}
    mdi:battery
  {% elif battery > 50 %}
    mdi:battery-60
  {% elif battery > 20 %}
    mdi:battery-30
  {% else %}
    mdi:battery-alert
  {% endif %}
icon_color: >-
  {% set battery = states('sensor.phone_battery') | int %}
  {% if battery < 20 %}
    red
  {% elif battery < 50 %}
    orange
  {% else %}
    green
  {% endif %}

Title Card (Section Headers)

标题卡片（分区标题）

yaml

type: custom:mushroom-title-card
title: Climate Control
subtitle: Temperature and AC settings
alignment: left

yaml

type: custom:mushroom-title-card
title: Climate Control
subtitle: Temperature and AC settings
alignment: left

Card-Mod Styling

card-mod样式定制

Installation: HACS → Frontend → Search "card-mod"

Card-mod injects custom CSS into Mushroom cards for advanced styling.

安装步骤：HACS → 前端 → 搜索「card-mod」

card-mod可将自定义CSS注入Mushroom卡片，实现高级样式定制。

Transparent Background

透明背景

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
    }

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
    }

Large Icon

大图标

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    mushroom-shape-icon {
      --icon-size: 80px;
    }

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    mushroom-shape-icon {
      --icon-size: 80px;
    }

Custom Font Sizes

自定义字体大小

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 24px;
      --card-secondary-font-size: 16px;
    }

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 24px;
      --card-secondary-font-size: 16px;
    }

Conditional Styling

条件样式

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    :host {
      {% if states('sensor.temperature') | float > 25 %}
        --card-mod-icon-color: red;
      {% elif states('sensor.temperature') | float < 18 %}
        --card-mod-icon-color: blue;
      {% else %}
        --card-mod-icon-color: green;
      {% endif %}
    }

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style: |
    :host {
      {% if states('sensor.temperature') | float > 25 %}
        --card-mod-icon-color: red;
      {% elif states('sensor.temperature') | float < 18 %}
        --card-mod-icon-color: blue;
      {% else %}
        --card-mod-icon-color: green;
      {% endif %}
    }

Grid Spanning

网格跨列

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style:
    .: |
      :host {
        grid-column: span 2;  # Take 2 columns
        grid-row: span 1;     # Take 1 row
      }

yaml

type: custom:mushroom-entity-card
entity: sensor.temperature
card_mod:
  style:
    .: |
      :host {
        grid-column: span 2;  # 占据2列
        grid-row: span 1;     # 占据1行
      }

Animated Cards

动画卡片

yaml

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:lightbulb
    content: "{{ states('sensor.lights_on') }}"
card_mod:
  style: |
    ha-card {
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

See

examples/examples.md

for real-world dashboard examples (climate control, status chips, irrigation) and

references/reference.md

for best practices and troubleshooting.

yaml

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:lightbulb
    content: "{{ states('sensor.lights_on') }}"
card_mod:
  style: |
    ha-card {
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

更多真实场景仪表盘示例（气候控制、状态芯片、灌溉系统）请查看

examples/examples.md

，最佳实践和故障排除请查看

references/reference.md

。

ha-mushroom-cards

Original

Translation

Home Assistant Mushroom Cards

Home Assistant Mushroom卡片

Overview

概述

When to Use This Skill

适用场景

Usage

使用步骤

Card Selection Guide

卡片选择指南

Quick Start

快速开始

Entity Card

实体卡片

Light Card

灯光卡片

Climate Card

气候卡片

Core Cards

核心卡片

1. Entity Card (General Purpose)

1. 实体卡片（通用型）

2. Light Card

2. 灯光卡片

3. Climate Card

3. 气候卡片

4. Cover Card (Blinds/Garage)

4. 遮阳篷卡片（窗帘/车库门）

5. Fan Card

5. 风扇卡片

6. Lock Card

6. 门锁卡片

7. Media Player Card

7. 媒体播放器卡片

8. Person Card

8. 人员卡片

Chips Card (Status Indicators)

芯片卡片（状态指示器）

Basic Chips

基础芯片

Chip Types

芯片类型

Template Card (Advanced)

模板卡片（高级）

Template Examples

模板示例

Title Card (Section Headers)

标题卡片（分区标题）

Card-Mod Styling

card-mod样式定制

Transparent Background

透明背景

Large Icon

大图标

Custom Font Sizes

自定义字体大小

Conditional Styling

条件样式

Grid Spanning

网格跨列

Animated Cards

动画卡片

Official Documentation

官方文档