diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts index 5a7b0d1fd5..a284818fd4 100644 --- a/src/components/chips/ha-assist-chip.ts +++ b/src/components/chips/ha-assist-chip.ts @@ -45,8 +45,8 @@ export class HaAssistChip extends MdAssistChip { margin-inline-start: var(--_icon-label-space); } ::before { - background: var(--ha-assist-chip-container-color); - opacity: var(--ha-assist-chip-container-opacity); + background: var(--ha-assist-chip-container-color, transparent); + opacity: var(--ha-assist-chip-container-opacity, 1); } :where(.active)::before { background: var(--ha-assist-chip-active-container-color); diff --git a/src/components/ha-outlined-text-field.ts b/src/components/ha-outlined-text-field.ts index 3118c85049..02ed120d6e 100644 --- a/src/components/ha-outlined-text-field.ts +++ b/src/components/ha-outlined-text-field.ts @@ -27,6 +27,10 @@ export class HaOutlinedTextField extends MdOutlinedTextField { --md-outlined-field-focus-outline-width: 1px; --mdc-icon-size: var(--md-input-chip-icon-size, 18px); } + md-outlined-field { + background: var(--ha-outlined-text-field-container-color, transparent); + opacity: var(--ha-outlined-text-field-container-opacity, 1); + } .input { font-family: Roboto, sans-serif; } diff --git a/src/components/search-input-outlined.ts b/src/components/search-input-outlined.ts index 5e40df35c9..f0ce00c673 100644 --- a/src/components/search-input-outlined.ts +++ b/src/components/search-input-outlined.ts @@ -97,6 +97,7 @@ class SearchInputOutlined extends LitElement { ha-outlined-text-field { display: block; width: 100%; + --ha-outlined-text-field-container-color: var(--card-background-color); } ha-svg-icon, ha-icon-button { diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 9c053db1d6..e5cf082d3c 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -743,7 +743,7 @@ export class HaTabsSubpageDataTable extends LitElement { padding: 8px 12px; box-sizing: border-box; font-size: 14px; - --ha-assist-chip-container-color: var(--primary-background-color); + --ha-assist-chip-container-color: var(--card-background-color); } .selection-controls { @@ -770,6 +770,7 @@ export class HaTabsSubpageDataTable extends LitElement { ha-assist-chip { --ha-assist-chip-container-shape: 10px; + --ha-assist-chip-container-color: var(--card-background-color); } .select-mode-chip {