Add safe mode theme and alert dialog

src/state/disconnect-toast-mixin.ts

@@ -12,6 +12,7 @@ import { domainToName } from "../data/integration";
 import { Constructor } from "../types";
 import { showToast } from "../util/toast";
 import { HassBaseEl } from "./hass-base-mixin";
+import { navigate } from "../common/navigate";
 
 export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
   class extends superClass {
@@ -28,40 +29,62 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
     updated(changedProperties) {
       super.updated(changedProperties);
       const oldHass = changedProperties.get("hass");
-      if (
+      if (!changedProperties.has("hass") || !this.hass!.config) {
-        !changedProperties.has("hass") ||
-        !this.hass!.config ||
-        oldHass?.config?.state === this.hass!.config.state
-      ) {
         return;
       }
-      if (this.hass!.config.state === STATE_NOT_RUNNING) {
+      if (oldHass?.config?.state !== this.hass!.config.state) {
-        showToast(this, {
+        if (this.hass!.config.state === STATE_NOT_RUNNING) {
-          message:
+          showToast(this, {
-            this.hass!.localize("ui.notification_toast.starting") ||
+            message:
-            "Home Assistant is starting, not everything will be available until it is finished.",
+              this.hass!.localize("ui.notification_toast.starting") ||
-          duration: 0,
+              "Home Assistant is starting, not everything will be available until it is finished.",
-          dismissable: false,
+            duration: 0,
-          action: {
+            dismissable: false,
-            text:
+            action: {
-              this.hass!.localize("ui.notification_toast.dismiss") || "Dismiss",
+              text:
-            action: () => {
+                this.hass!.localize("ui.notification_toast.dismiss") ||
-              this._unsubscribeBootstrapIntegrations();
+                "Dismiss",
+              action: () => {
+                this._unsubscribeBootstrapIntegrations();
+              },
             },
-          },
+          });
-        });
+          this._subscribeBootstrapIntegrations();
-        this._subscribeBootstrapIntegrations();
+        } else if (
-      } else if (
+          oldHass?.config &&
-        oldHass?.config &&
+          oldHass.config.state === STATE_NOT_RUNNING &&
-        oldHass.config.state === STATE_NOT_RUNNING &&
+          (this.hass!.config.state === STATE_STARTING ||
-        (this.hass!.config.state === STATE_STARTING ||
+            this.hass!.config.state === STATE_RUNNING)
-          this.hass!.config.state === STATE_RUNNING)
+        ) {
+          this._unsubscribeBootstrapIntegrations();
+          showToast(this, {
+            message: this.hass!.localize("ui.notification_toast.started"),
+            duration: 5000,
+          });
+        }
+      }
+      if (
+        this.hass!.config.safe_mode &&
+        oldHass?.config?.safe_mode !== this.hass!.config.safe_mode
       ) {
-        this._unsubscribeBootstrapIntegrations();
+        import("../dialogs/generic/show-dialog-box").then(
-        showToast(this, {
+          ({ showAlertDialog }) => {
-          message: this.hass!.localize("ui.notification_toast.started"),
+            showAlertDialog(this, {
-          duration: 5000,
+              title:
-        });
+                this.hass!.localize("ui.dialogs.safe_mode.title") ||
+                "Safe mode",
+              text:
+                this.hass!.localize("ui.dialogs.safe_mode.text") ||
+                "Home Assistant is running in safe mode, custom integrations and modules are not available. Restart Home Assistant to exit safe mode.",
+            });
+          }
+        );
+      }
+      if (
+        this.hass!.config.recovery_mode &&
+        oldHass?.config?.recovery_mode !== this.hass!.config.recovery_mode
+      ) {
+        navigate("/");
       }
     }
 

src/state/themes-mixin.ts

@@ -71,7 +71,18 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       }
 
       let themeSettings: Partial<HomeAssistant["selectedTheme"]> =
-        this.hass.selectedTheme;
+        this.hass.config.recovery_mode || this.hass.config.safe_mode
+          ? {
+              ...this.hass.selectedTheme,
+              theme: "default",
+              primaryColor: this.hass.config.recovery_mode
+                ? "#db4437"
+                : "#e48629",
+              accentColor: this.hass.config.recovery_mode
+                ? "#ffca28"
+                : "#db4437",
+            }
+          : this.hass.selectedTheme;
 
       const themeName =
         themeSettings?.theme ||
@@ -90,7 +101,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         darkMode = false;
       }
 
-      themeSettings = { ...this.hass.selectedTheme, dark: darkMode };
+      themeSettings = { ...themeSettings, dark: darkMode };
       this._updateHass({
         themes: { ...this.hass.themes!, theme: themeName },
       });

src/translations/en.json

@@ -786,6 +786,10 @@
       }
     },
     "dialogs": {
+      "safe_mode": {
+        "title": "Safe mode",
+        "text": "Home Assistant is running in safe mode, custom integrations and frontend modules are not available. Restart Home Assistant to exit safe mode."
+      },
       "quick-bar": {
         "commands": {
           "reload": {
@@ -1236,9 +1240,9 @@
         },
         "restart-safe-mode": {
           "title": "Restart Home Assistant in safe mode",
-          "description": "Restart Home Assistant without loading any custom integrations and modules.",
+          "description": "Restart Home Assistant without loading any custom integrations and frontend modules.",
           "confirm_title": "Restart Home Assistant in safe mode?",
-          "confirm_description": "This will restart Home Assistant without loading any custom integrations and modules.",
+          "confirm_description": "This will restart Home Assistant without loading any custom integrations and frontend modules.",
           "confirm_action": "Restart",
           "failed": "Failed to restart Home Assistant"
         }