diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index 8b67a54c41..978a979776 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -57,6 +57,10 @@ class HaMarkdown extends LitElement { background-color: var(--markdown-code-background-color, none); border-radius: 3px; } + ha-markdown-element svg { + background-color: var(--markdown-svg-background-color, none); + color: var(--markdown-svg-color, none); + } ha-markdown-element code { font-size: 85%; padding: 0.2em 0.4em; diff --git a/src/html/index.html.template b/src/html/index.html.template index 8f20524cd0..0225c9b3ab 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -46,6 +46,14 @@ html { background-color: var(--primary-background-color); } + @media (prefers-color-scheme: dark) { + #ha-init-skeleton::before { + background-color: #1c1c1c; + } + html { + background-color: #111111; + } + } diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 3e98b1bea0..0da8b57a45 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -60,6 +60,7 @@ class HaInitPage extends LitElement { } p { max-width: 350px; + color: var(--text-primary-color); } `; } diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index 63a3cfe573..d88b075a10 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -453,6 +453,9 @@ export class HaIntegrationCard extends LitElement { cursor: pointer; min-height: 35px; } + mwc-list-item ha-svg-icon { + color: var(--secondary-text-color); + } .back-btn { position: absolute; background: rgba(var(--rgb-card-background-color), 0.6); diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js index cbcb6cecd4..0da5f41804 100644 --- a/src/panels/profile/ha-mfa-module-setup-flow.js +++ b/src/panels/profile/ha-mfa-module-setup-flow.js @@ -30,9 +30,9 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) { h2 { white-space: normal; } - ha-markdown img:first-child:last-child, - ha-markdown svg:first-child:last-child { - background-color: white; + ha-markdown { + --markdown-svg-background-color: white; + --markdown-svg-color: black; display: block; margin: 0 auto; } diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 9389b40986..c270d0a2f3 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -65,6 +65,7 @@ export const derivedStyles = { "mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)", "mdc-radio-disabled-color": "var(--disabled-text-color)", "mdc-tab-text-label-color-default": "var(--primary-text-color)", + "mdc-button-disabled-ink-color": "var(--disabled-text-color)", }; export const haStyle = css`