diff --git a/gallery/src/demos/demo-ha-alert.ts b/gallery/src/demos/demo-ha-alert.ts
index 2e87b7beb7fb..91286a1045a0 100644
--- a/gallery/src/demos/demo-ha-alert.ts
+++ b/gallery/src/demos/demo-ha-alert.ts
@@ -1,8 +1,10 @@
-import "../../../src/components/ha-logo-svg";
-import { html, css, LitElement, TemplateResult } from "lit";
+import "@material/mwc-button/mwc-button";
+import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
import "../../../src/components/ha-alert";
import "../../../src/components/ha-card";
+import "../../../src/components/ha-logo-svg";
const alerts: {
title?: string;
@@ -130,29 +132,60 @@ const alerts: {
export class DemoHaAlert extends LitElement {
protected render(): TemplateResult {
return html`
-
-
- ${alerts.map(
- (alert) => html`
-
- ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
-
- `
- )}
-
-
+ ${["light", "dark"].map(
+ (mode) => html`
+
+
+
+ ${alerts.map(
+ (alert) => html`
+
+ ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
+
+ `
+ )}
+
+
+
+ `
+ )}
`;
}
+ firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ applyThemesOnElement(
+ this.shadowRoot!.querySelector(".dark"),
+ {
+ default_theme: "default",
+ default_dark_theme: "default",
+ themes: {},
+ darkMode: false,
+ },
+ "default",
+ { dark: true }
+ );
+ }
+
static get styles() {
return css`
+ :host {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ .dark,
+ .light {
+ display: block;
+ background-color: var(--primary-background-color);
+ padding: 0 50px;
+ }
ha-card {
- max-width: 600px;
margin: 24px auto;
}
ha-alert {
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index a1b5fa0a32be..90c31c3cc6fa 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -113,9 +113,9 @@ class HaAlert extends LitElement {
justify-content: space-between;
align-items: center;
width: 100%;
- z-index: 1;
}
.action {
+ z-index: 1;
width: min-content;
--mdc-theme-primary: var(--primary-text-color);
}