diff --git a/src/dialogs/ha-more-info-dialog.js b/src/dialogs/ha-more-info-dialog.js index f09a944540..6f716ada0d 100644 --- a/src/dialogs/ha-more-info-dialog.js +++ b/src/dialogs/ha-more-info-dialog.js @@ -41,8 +41,8 @@ class HaMoreInfoDialog extends DialogMixin(PolymerElement) { /* overrule the ha-style-dialog max-height on small screens */ @media all and (max-width: 450px), all and (max-height: 500px) { more-info-controls { - --more-info-header-background: var(--primary-color); - --more-info-header-color: var(--text-primary-color); + --more-info-header-background: var(--app-header-background-color); + --more-info-header-color: var(--app-header-text-color, white); } :host { width: 100% !important; diff --git a/src/html/index.html.template b/src/html/index.html.template index befab71586..835dd96ae5 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -51,6 +51,9 @@ height: 112px; background-color: #THEMEC; } + html { + background-color: var(--primary-background-color, #fafafa); + } diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts index 055a33c0d6..0a58410316 100644 --- a/src/panels/config/entities/dialog-entity-editor.ts +++ b/src/panels/config/entities/dialog-entity-editor.ts @@ -264,8 +264,8 @@ export class DialogEntityEditor extends LitElement { /* overrule the ha-style-dialog max-height on small screens */ @media all and (max-width: 450px), all and (max-height: 500px) { app-toolbar { - background-color: var(--primary-color); - color: var(--text-primary-color); + background-color: var(--app-header-background-color); + color: var(--app-header-text-color, white); } ha-paper-dialog { height: 100%;