IDX Theme, Mushroom Card, font: Barlow Condensed
25.05버전 ui 변경사항
theme:
ha-font-family-body: 'Barlow Condensed'
ha-font-family-heading: 'Barlow Condensed'
ha-font-family-code: 'Barlow Condensed'
ha-font-family-longform: 'Barlow Condensed'
ha-card-header-font-family: 'Barlow Condensed'
state-icon-color: rgb(211, 211, 211) #기본 아이콘 색깔
state-active-color: rgb(254, 193, 53) #기본 활성화 상태 색깔
state-binary_sensor-active-color: rgb(254, 193, 53) #바이너리센서 활성화 색깔
state-switch-active-color: rgb(254, 193, 53) #스위치 활성화 색깔
**테마마다 다르게 설정돼 있어 dashboard에 추가하는 게 편한 설정
picture elements card:
card_mod:
style: |
:host {
--ha-card-border-width: 0px; /* 카드 외곽선 라인 on/off(두께 설정) */
--divider-color: rgba(255, 255, 255, 0); /* 아이콘 포커스 효과 제거(투명하게) */
도메인 기반 색상 변수:
state-light-active-color
state-switch-active-color
state-fan-active-color
state-cover-active-color
state-vacuum-active-color
state-media_player-active-color
state-alarm_control_panel-armed-color
state-person-home-color
state-person-not_home-color
state-alarm_control_panel-armed-color 알람 패널이 활성화(armed)된 상태의 색상
state-binary_sensor-active-color binary_sensor가 활성화된 상태의 색상
state-cover-active-color cover (커튼, 블라인드 등) 작동 중 상태 색상
state-fan-active-color 팬이 켜져 있을 때 색상
state-light-active-color 조명이 켜졌을 때 색상
state-lock-locked-color 자물쇠가 잠긴 상태의 색상
state-lock-unlocked-color 자물쇠가 열린 상태의 색상
state-person-home-color 사람이 집에 있을 때 색상
state-person-not_home-color 사람이 집에 없을 때 색상
state-sensor-battery-low-color 센서 배터리 부족 상태 색상
state-sensor-battery-high-color 센서 배터리 충전 상태 색상
state-switch-active-color 스위치가 켜졌을 때 색상
state-vacuum-active-color 진공청소기가 작동 중일 때 색상
state-media_player-active-color 미디어 플레이어가 재생 중일 때 색상
변경점:
--code-font-family → --ha-font-family-code
--paper-font-title_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-headline_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-display1_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-subhead_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-body1_-_-webkit-font-smoothing → --ha-font-smoothing
--paper-font-display1_-_font-family → --ha-font-family-body
--paper-font-display1_-_font-size → --ha-font-size-4xl
--paper-font-display1_-_font-weight → --ha-font-weight-normal
--paper-font-display1_-_line-height → --ha-line-height-condensed
--paper-font-headline_-_font-family → --ha-font-family-body
--paper-font-headline_-_font-size → --ha-font-size-2xl
--paper-font-headline_-_font-weight → --ha-font-weight-normal
--paper-font-headline_-_line-height → --ha-line-height-condensed
--paper-font-title_-_font-family → --ha-font-family-body
--paper-font-title_-_font-size → --ha-font-size-xl
--paper-font-title_-_font-weight → --ha-font-weight-medium
--paper-font-title_-_line-height → --ha-line-height-normal
--paper-font-subhead_-_font-family → --ha-font-family-body
--paper-font-subhead_-_font-size → --ha-font-size-l
--paper-font-subhead_-_font-weight → --ha-font-weight-normal
--paper-font-subhead_-_line-height → --ha-line-height-normal
--paper-font-body1_-_font-family → --ha-font-family-body
--paper-font-body1_-_font-size → --ha-font-size-m
--paper-font-body1_-_font-weight → --ha-font-weight-normal
--paper-font-body1_-_line-height → --ha-line-height-normal
--paper-item-icon-color → --state-icon-color