카드 스타일링

드리미(Dreame) 진공청소기 카드(Dreame Vacuum Card)는 기본적으로 Home Assistant의 기본 테마를 준수합니다. 모든 내부 구성 요소, 메뉴 및 레이아웃은 활성화된 Home Assistant 테마에 자동으로 적응합니다. 기본적으로 라이트(Light) 및 다크(Dark) 모드 색상을 동적으로 상속하므로 일반적인 조건에서는 맞춤 스타일링이 필요하지 않습니다.

미적 요소를 맞춤 설정하려면 아래에 나열된 외부 CSS 속성을 재정의하여 Home Assistant 사용자 지정 테마를 만들어야 합니다.

지도 스타일링

이러한 설정은 카드 UI 구성 요소에만 영향을 줍니다. 방, 경로, 벽 등 청소기 지도 자체의 내부 색상을 맞춤 설정하는 것은 색상 재정의 섹션에서 처리됩니다.

이 카드는 또한 --dvc-로 접두사가 붙은 내부 설정을 사용합니다. 내부 설정을 직접 재정의하는 것은 권장되지 않으며, 미래 업데이트에서 동작이 변경될 수 있습니다. 대신 아래에 나열된 외부 Home Assistant 테마 설정을 목표로 하세요.

card-mod

card-mod 플러그인은 안정성을 보장하기 위해 이 카드에서 명시적으로 비활성화되어 있으며 지원되지 않습니다. 사용자 지정 Home Assistant 테마를 사용하여 이 페이지에서 제공되는 CSS 속성을 재정의해야 합니다.

특정 시각적 변경을 테마를 통해 달성할 수 없는 경우, 원하는 변경 사항과 그 이유를 설명하는 기능 요청을 문제 보고 페이지를 통해 제출할 수 있습니다.

배경 및 테두리

이러한 설정은 카드의 주요 구조적 외관을 제어합니다.

변수	설명
--ha-card-background	카드의 기본 배경색을 정의합니다.
--secondary-background-color	보조 표면, 오버레이 배경 및 플로팅 메뉴에 사용됩니다.
--view-background	대시보드의 기본 배경색입니다. 카드가 panel 또는 picture 모드일 때 이를 사용하여 자연스럽게 혼합됩니다.
--ha-card-border-radius	카드 외부 모서리의 둥글기를 정의합니다.
--ha-card-border-width	카드 테두리 선의 두께입니다.
--ha-card-border-color	카드 테두리 색상입니다.
--divider-color	내부 목록 구분선 및 분리선의 색상입니다.
--ha-card-box-shadow	주요 카드 컨테이너에 적용되는 박스 그림자입니다.
--ha-card-backdrop-filter	카드 배경에 blur과 같은 배경 필터를 추가할 수 있습니다.

텍스트 및 타이포그래피

이러한 설정은 사용자 인터페이스 전체에서 사용되는 텍스트 색상을 결정합니다.

변수	설명
--primary-text-color	주요 제목, 상태 텍스트 및 값에 사용되는 주요 텍스트 색상입니다.
--secondary-text-color	보조 텍스트, 상세 상태 및 비활성 탭 레이블에 사용됩니다.
--disabled-text-color	현재 사용할 수 없거나 비활성화된 텍스트에 사용되는 색상입니다.
--text-primary-color	기본 색상 버튼 위에 직접 놓이는 텍스트의 색상입니다.

아이콘 및 강조 색상

이러한 설정은 상호작용 요소, 활성 상태 및 아이콘의 색상을 관리합니다.

변수	설명
--primary-color	활성 요소, 버튼, 로더 애니메이션 및 선택된 탭에 사용되는 주요 강조 색상입니다.
--light-primary-color	호버 상태나 활성 버튼 배경에 사용되는 주요 색상의 밝은 버전입니다.
--accent-color	UI에서 특정 강조에 사용되는 대체 강조 색상입니다.
--mdc-theme-on-primary	기본 색상 배경 위에 놓인 텍스트나 아이콘의 색상입니다.
--paper-item-icon-color	상태 및 메뉴 아이콘의 기본 색상입니다.
--paper-item-icon-active-color	아이콘에 해당 상태가 활성화될 때 적용되는 색상입니다.

상태 및 의미 색상

카드 색상은 진공 청소기의 상태와 활성 알림에 따라 동적으로 변경됩니다.

변수	설명
--success-color	완전히 충전된 상태와 같은 성공적인 작업 또는 긍정적인 상태에 사용됩니다.
--info-color	정보 요소 및 일반 알림에 사용됩니다.
--warning-color	경고 알림, 낮은 배터리 상태 또는 사소한 문제에 사용됩니다.
--error-color	치명적인 오류, 오류 및 통과할 수 없는 지도 객체에 사용됩니다.
--state-unavailable-color	진공 청소기가 현재 사용 불가 또는 오프라인 상태임을 나타내는 색상입니다.

인터랙티브 요소

버튼, 스크롤바, 입력 필드와 같은 UI 구성 요소를 대상으로 한 테마 설정입니다.

변수	설명
--mdc-theme-surface	플로팅 메뉴, 드롭다운 및 팝업 카드의 표면 색상입니다.
--mdc-button-raised-box-shadow	버튼에 깊이를 부여하기 위해 적용되는 그림자입니다.
--input-hover-line-color	특정 입력 필드 위에 마우스를 올릴 때 표시되는 밑줄 색상입니다.
--input-dropdown-icon-color	드롭다운 메뉴 내의 캐럿/화살표 아이콘 색상입니다.
--scrollbar-thumb-color	리모컨 조이스틱 및 스크롤바의 손잡이에 사용되는 색상입니다.
--rgb-primary-color	기본 색상의 RGB 콤마로 구분된 버전으로, 알파 투명도를 적용하는 데 사용됩니다.
--rgb-primary-text-color	기본 텍스트 색상의 RGB 콤마로 구분된 버전으로, 알파 투명도를 적용하는 데 사용됩니다.