diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts
index c2f824e1f..d44252af5 100644
--- a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts
+++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { Action } from "../../utils/form/custom/ha-selector-mushroom-action";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
@@ -53,9 +54,7 @@ const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaForm
 ]);
 
 @customElement(ALARM_CONTROl_PANEL_CARD_EDITOR_NAME)
-export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: AlarmControlPanelCardConfig;
 
     connectedCallback() {
@@ -112,6 +111,6 @@ export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
index 68aaddbe9..f19c4ce97 100644
--- a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
+++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -7,18 +7,20 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
+import { isAvailable } from "../../ha/data/entity";
 import "../../shared/badge-icon";
+import "../../shared/button";
+import "../../shared/button-group";
 import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
-import "../../shared/button";
-import "../../shared/button-group";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -39,7 +41,6 @@ import {
     isDisarmed,
     shouldPulse,
 } from "./utils";
-import { isAvailable } from "../../ha/data/entity";
 
 registerCustomCard({
     type: ALARM_CONTROl_PANEL_CARD_NAME,
@@ -62,7 +63,7 @@ const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"];
  */
 
 @customElement(ALARM_CONTROl_PANEL_CARD_NAME)
-export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
+export class AlarmControlPanelCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./alarm-control-panel-card-editor");
         return document.createElement(ALARM_CONTROl_PANEL_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -80,8 +81,6 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: AlarmControlPanelCardConfig;
 
     @query("#alarmCode") private _input?: HaTextField;
@@ -285,8 +284,8 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
     }
 
     static get styles(): CSSResultGroup {
-        // Default colors are RGB values of HASS --label-badge-*
         return [
+            super.styles,
             cardStyle,
             css`
                 ha-card {
diff --git a/src/cards/chips-card/chips-card-chips-editor.ts b/src/cards/chips-card/chips-card-chips-editor.ts
index 16d4f5e5e..7dda47a43 100644
--- a/src/cards/chips-card/chips-card-chips-editor.ts
+++ b/src/cards/chips-card/chips-card-chips-editor.ts
@@ -9,6 +9,7 @@ import { CHIP_LIST, LovelaceChipConfig } from "../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { sortableStyles } from "../../utils/sortable-styles";
 import "../../shared/form/mushroom-select";
+import { MushroomBaseElement } from "../../utils/base-element";
 
 let Sortable;
 
@@ -21,9 +22,7 @@ declare global {
 }
 
 @customElement("mushroom-chips-card-chips-editor")
-export class ChipsCardEditorChips extends LitElement {
-    @property({ attribute: false }) protected hass?: HomeAssistant;
-
+export class ChipsCardEditorChips extends MushroomBaseElement {
     @property({ attribute: false }) protected chips?: LovelaceChipConfig[];
 
     @property() protected label?: string;
@@ -268,6 +267,7 @@ export class ChipsCardEditorChips extends LitElement {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             sortableStyles,
             css`
                 .chip {
diff --git a/src/cards/chips-card/chips-card-editor.ts b/src/cards/chips-card/chips-card-editor.ts
index 8c1eda150..b04c823a3 100644
--- a/src/cards/chips-card/chips-card-editor.ts
+++ b/src/cards/chips-card/chips-card-editor.ts
@@ -1,6 +1,6 @@
-import { fireEvent, HASSDomEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, HASSDomEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import {
     any,
     array,
@@ -17,6 +17,7 @@ import {
 import setupCustomlocalize from "../../localize";
 import "../../shared/editor/alignment-picker";
 import { actionConfigStruct } from "../../utils/action-struct";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { baseLovelaceCardConfig } from "../../utils/editor-styles";
 import { loadHaComponents } from "../../utils/loader";
 import { LovelaceChipConfig } from "../../utils/lovelace/chip/types";
@@ -143,9 +144,7 @@ const cardConfigStruct = assign(
 );
 
 @customElement(CHIPS_CARD_EDITOR_NAME)
-export class ChipsCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class ChipsCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: ChipsCardConfig;
 
     @state() private _subElementEditorConfig?: SubElementEditorConfig;
diff --git a/src/cards/chips-card/chips-card.ts b/src/cards/chips-card/chips-card.ts
index be55863dd..e2fdaf460 100644
--- a/src/cards/chips-card/chips-card.ts
+++ b/src/cards/chips-card/chips-card.ts
@@ -5,16 +5,17 @@ import {
     LovelaceCardConfig,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { registerCustomCard } from "../../utils/custom-cards";
-import { CHIPS_CARD_EDITOR_NAME, CHIPS_CARD_NAME } from "./const";
 import "../../shared/chip";
-import { EntityChip } from "./chips";
-import "./chips";
-import { LovelaceChip, LovelaceChipConfig } from "../../utils/lovelace/chip/types";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
+import { registerCustomCard } from "../../utils/custom-cards";
 import { createChipElement } from "../../utils/lovelace/chip/chip-element";
+import { LovelaceChipConfig } from "../../utils/lovelace/chip/types";
+import "./chips";
+import { EntityChip } from "./chips";
+import { CHIPS_CARD_EDITOR_NAME, CHIPS_CARD_NAME } from "./const";
 
 export interface ChipsCardConfig extends LovelaceCardConfig {
     chips: LovelaceChipConfig[];
@@ -28,7 +29,7 @@ registerCustomCard({
 });
 
 @customElement(CHIPS_CARD_NAME)
-export class ChipsCard extends LitElement implements LovelaceCard {
+export class ChipsCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./chips-card-editor");
         return document.createElement(CHIPS_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -44,15 +45,6 @@ export class ChipsCard extends LitElement implements LovelaceCard {
 
     @state() private _config?: ChipsCardConfig;
 
-    private _hass?: HomeAssistant;
-
-    set hass(hass: HomeAssistant) {
-        this._hass = hass;
-        this.shadowRoot?.querySelectorAll("div > *").forEach((element: unknown) => {
-            (element as LovelaceChip).hass = hass;
-        });
-    }
-
     getCardSize(): number | Promise<number> {
         return 1;
     }
@@ -62,7 +54,7 @@ export class ChipsCard extends LitElement implements LovelaceCard {
     }
 
     protected render(): TemplateResult {
-        if (!this._config || !this._hass) {
+        if (!this._config || !this.hass) {
             return html``;
         }
 
@@ -71,7 +63,7 @@ export class ChipsCard extends LitElement implements LovelaceCard {
             alignment = `align-${this._config.alignment}`;
         }
 
-        const rtl = computeRTL(this._hass);
+        const rtl = computeRTL(this.hass);
 
         return html`
             <div class="chip-container ${alignment}" ?rtl=${rtl}>
@@ -85,14 +77,15 @@ export class ChipsCard extends LitElement implements LovelaceCard {
         if (!element) {
             return html``;
         }
-        if (this._hass) {
-            element.hass = this._hass;
+        if (this.hass) {
+            element.hass = this.hass;
         }
         return html`${element}`;
     }
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 .chip-container {
diff --git a/src/cards/cover-card/cover-card-editor.ts b/src/cards/cover-card/cover-card-editor.ts
index 4421dc1e1..bf6b92aa8 100644
--- a/src/cards/cover-card/cover-card-editor.ts
+++ b/src/cards/cover-card/cover-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -44,9 +45,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(COVER_CARD_EDITOR_NAME)
-export class CoverCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class CoverCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: CoverCardConfig;
 
     connectedCallback() {
@@ -97,6 +96,6 @@ export class CoverCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
index 3e42f856c..c5d2e7739 100644
--- a/src/cards/cover-card/cover-card.ts
+++ b/src/cards/cover-card/cover-card.ts
@@ -8,8 +8,8 @@ import {
     LovelaceCardEditor,
 } from "custom-card-helpers";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
 import { CoverEntity } from "../../ha/data/cover";
 import { isActive, isAvailable } from "../../ha/data/entity";
@@ -19,6 +19,7 @@ import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -44,7 +45,7 @@ registerCustomCard({
 });
 
 @customElement(COVER_CARD_NAME)
-export class CoverCard extends LitElement implements LovelaceCard {
+export class CoverCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./cover-card-editor");
         return document.createElement(COVER_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -59,8 +60,6 @@ export class CoverCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: CoverCardConfig;
 
     @state() private _activeControl?: CoverCardControl;
@@ -242,6 +241,7 @@ export class CoverCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/entity-card/entity-card-editor.ts b/src/cards/entity-card/entity-card-editor.ts
index a932c285c..ccb1ca3c1 100644
--- a/src/cards/entity-card/entity-card-editor.ts
+++ b/src/cards/entity-card/entity-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -46,9 +47,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(ENTITY_CARD_EDITOR_NAME)
-export class EntityCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class EntityCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: EntityCardConfig;
 
     connectedCallback() {
@@ -96,6 +95,6 @@ export class EntityCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/entity-card/entity-card.ts b/src/cards/entity-card/entity-card.ts
index 4a2102a7a..e496a7020 100644
--- a/src/cards/entity-card/entity-card.ts
+++ b/src/cards/entity-card/entity-card.ts
@@ -7,8 +7,8 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
 import { isActive, isAvailable } from "../../ha/data/entity";
@@ -18,6 +18,7 @@ import "../../shared/shape-avatar";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { computeRgbColor } from "../../utils/colors";
 import { registerCustomCard } from "../../utils/custom-cards";
@@ -35,7 +36,7 @@ registerCustomCard({
 });
 
 @customElement(ENTITY_CARD_NAME)
-export class EntityCard extends LitElement implements LovelaceCard {
+export class EntityCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./entity-card-editor");
         return document.createElement(ENTITY_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -49,8 +50,6 @@ export class EntityCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: EntityCardConfig;
 
     getCardSize(): number | Promise<number> {
@@ -173,6 +172,7 @@ export class EntityCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/fan-card/fan-card-editor.ts b/src/cards/fan-card/fan-card-editor.ts
index 1a3b964ff..45b1be56a 100644
--- a/src/cards/fan-card/fan-card-editor.ts
+++ b/src/cards/fan-card/fan-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -47,9 +48,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(FAN_CARD_EDITOR_NAME)
-export class FanCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class FanCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: FanCardConfig;
 
     connectedCallback() {
@@ -100,6 +99,6 @@ export class FanCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/fan-card/fan-card.ts b/src/cards/fan-card/fan-card.ts
index 588b4c117..b33e8a992 100644
--- a/src/cards/fan-card/fan-card.ts
+++ b/src/cards/fan-card/fan-card.ts
@@ -7,7 +7,7 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -19,6 +19,7 @@ import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -37,7 +38,7 @@ registerCustomCard({
 });
 
 @customElement(FAN_CARD_NAME)
-export class FanCard extends LitElement implements LovelaceCard {
+export class FanCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./fan-card-editor");
         return document.createElement(FAN_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -206,6 +207,7 @@ export class FanCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/light-card/light-card-editor.ts b/src/cards/light-card/light-card-editor.ts
index e23407a5c..a3fc81b0e 100644
--- a/src/cards/light-card/light-card-editor.ts
+++ b/src/cards/light-card/light-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -51,9 +52,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(LIGHT_CARD_EDITOR_NAME)
-export class LightCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class LightCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: LightCardConfig;
 
     connectedCallback() {
@@ -104,6 +103,6 @@ export class LightCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/light-card/light-card.ts b/src/cards/light-card/light-card.ts
index 4ea5c3200..a9312df95 100644
--- a/src/cards/light-card/light-card.ts
+++ b/src/cards/light-card/light-card.ts
@@ -7,8 +7,7 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
@@ -20,6 +19,7 @@ import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -55,7 +55,7 @@ registerCustomCard({
 });
 
 @customElement(LIGHT_CARD_NAME)
-export class LightCard extends LitElement implements LovelaceCard {
+export class LightCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./light-card-editor");
         return document.createElement(LIGHT_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -294,6 +294,7 @@ export class LightCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/lock-card/lock-card-editor.ts b/src/cards/lock-card/lock-card-editor.ts
index 1564b10cf..2de616ff3 100644
--- a/src/cards/lock-card/lock-card-editor.ts
+++ b/src/cards/lock-card/lock-card-editor.ts
@@ -5,6 +5,7 @@ import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import { LOCK_ENTITY_DOMAINS } from "../../ha/data/lock";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -31,9 +32,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(LOCK_CARD_EDITOR_NAME)
-export class LockCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class LockCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: LockCardConfig;
 
     connectedCallback() {
@@ -81,6 +80,6 @@ export class LockCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/lock-card/lock-card.ts b/src/cards/lock-card/lock-card.ts
index 64dfc1153..ac7192b67 100644
--- a/src/cards/lock-card/lock-card.ts
+++ b/src/cards/lock-card/lock-card.ts
@@ -8,25 +8,25 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { isActive, isAvailable } from "../../ha/data/entity";
+import { isAvailable } from "../../ha/data/entity";
 import { LockEntity, LOCK_ENTITY_DOMAINS } from "../../ha/data/lock";
 import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
-import { computeRgbColor } from "../../utils/colors";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
 import { stateIcon } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { LOCK_CARD_EDITOR_NAME, LOCK_CARD_NAME } from "./const";
-import { LockCardConfig } from "./lock-card-config";
 import "./controls/lock-buttons-control";
+import { LockCardConfig } from "./lock-card-config";
 import { isActionPending, isLocked, isUnlocked } from "./utils";
 
 registerCustomCard({
@@ -36,7 +36,7 @@ registerCustomCard({
 });
 
 @customElement(LOCK_CARD_NAME)
-export class LockCard extends LitElement implements LovelaceCard {
+export class LockCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./lock-card-editor");
         return document.createElement(LOCK_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -51,8 +51,6 @@ export class LockCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: LockCardConfig;
 
     getCardSize(): number | Promise<number> {
@@ -165,6 +163,7 @@ export class LockCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/media-player-card/media-player-card-editor.ts b/src/cards/media-player-card/media-player-card-editor.ts
index 5b1dabfcd..bee27993d 100644
--- a/src/cards/media-player-card/media-player-card-editor.ts
+++ b/src/cards/media-player-card/media-player-card-editor.ts
@@ -16,6 +16,7 @@ import {
     MEDIA_LAYER_MEDIA_CONTROLS,
     MEDIA_PLAYER_VOLUME_CONTROLS,
 } from "./media-player-card-config";
+import { MushroomBaseElement } from "../../utils/base-element";
 
 export const MEDIA_FIELDS = [
     "use_media_info",
@@ -87,9 +88,7 @@ const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaForm
 ]);
 
 @customElement(MEDIA_PLAYER_CARD_EDITOR_NAME)
-export class MediaCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class MediaCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: MediaPlayerCardConfig;
 
     connectedCallback() {
@@ -142,6 +141,6 @@ export class MediaCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts
index 1dd5d8c57..53416ca11 100644
--- a/src/cards/media-player-card/media-player-card.ts
+++ b/src/cards/media-player-card/media-player-card.ts
@@ -31,6 +31,7 @@ import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-avatar";
 import "../../shared/shape-icon";
+import { MushroomBaseElement } from "../../utils/base-element";
 
 type MediaPlayerCardControl = "media_control" | "volume_control";
 
@@ -46,7 +47,7 @@ registerCustomCard({
 });
 
 @customElement(MEDIA_PLAYER_CARD_NAME)
-export class MediaPlayerCard extends LitElement implements LovelaceCard {
+export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./media-player-card-editor");
         return document.createElement(MEDIA_PLAYER_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -63,8 +64,6 @@ export class MediaPlayerCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: MediaPlayerCardConfig;
 
     @state() private _activeControl?: MediaPlayerCardControl;
@@ -249,6 +248,7 @@ export class MediaPlayerCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/person-card/person-card-editor.ts b/src/cards/person-card/person-card-editor.ts
index c6f633c7d..d93ad850b 100644
--- a/src/cards/person-card/person-card-editor.ts
+++ b/src/cards/person-card/person-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { Action } from "../../utils/form/custom/ha-selector-mushroom-action";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
@@ -41,9 +42,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(PERSON_CARD_EDITOR_NAME)
-export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: PersonCardConfig;
 
     connectedCallback() {
@@ -91,6 +90,6 @@ export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/person-card/person-card.ts b/src/cards/person-card/person-card.ts
index 07d2e8756..ee2261df6 100644
--- a/src/cards/person-card/person-card.ts
+++ b/src/cards/person-card/person-card.ts
@@ -8,14 +8,15 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { isActive, isAvailable } from "../../ha/data/entity";
 import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-avatar";
 import "../../shared/shape-icon";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -32,7 +33,7 @@ registerCustomCard({
 });
 
 @customElement(PERSON_CARD_NAME)
-export class PersonCard extends LitElement implements LovelaceCard {
+export class PersonCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./person-card-editor");
         return document.createElement(PERSON_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -47,8 +48,6 @@ export class PersonCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: PersonCardConfig;
 
     getCardSize(): number | Promise<number> {
@@ -168,6 +167,7 @@ export class PersonCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/template-card/template-card-editor.ts b/src/cards/template-card/template-card-editor.ts
index cd88f97fb..840817160 100644
--- a/src/cards/template-card/template-card-editor.ts
+++ b/src/cards/template-card/template-card-editor.ts
@@ -1,16 +1,17 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
+import { atLeastHaVersion } from "../../ha/util";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
 import { loadHaComponents } from "../../utils/loader";
 import { TEMPLATE_CARD_EDITOR_NAME } from "./const";
 import { TemplateCardConfig, templateCardConfigStruct } from "./template-card-config";
-import { atLeastHaVersion } from "../../ha/util";
-import memoizeOne from "memoize-one";
 
 export const TEMPLATE_FIELDS = ["content", "primary", "secondary", "multiline_secondary"];
 
@@ -54,9 +55,7 @@ const computeSchema = memoizeOne((version: string): HaFormSchema[] => [
 ]);
 
 @customElement(TEMPLATE_CARD_EDITOR_NAME)
-export class TemplateCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class TemplateCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: TemplateCardConfig;
 
     connectedCallback() {
@@ -107,6 +106,6 @@ export class TemplateCardEditor extends LitElement implements LovelaceCardEditor
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/template-card/template-card.ts b/src/cards/template-card/template-card.ts
index 8775c9f55..4283a55e6 100644
--- a/src/cards/template-card/template-card.ts
+++ b/src/cards/template-card/template-card.ts
@@ -8,12 +8,13 @@ import {
     LovelaceCardEditor,
 } from "custom-card-helpers";
 import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { computeRgbColor } from "../../utils/colors";
 import { registerCustomCard } from "../../utils/custom-cards";
@@ -33,7 +34,7 @@ const TEMPLATE_KEYS = ["icon", "icon_color", "primary", "secondary"] as const;
 type TemplateKey = typeof TEMPLATE_KEYS[number];
 
 @customElement(TEMPLATE_CARD_NAME)
-export class TemplateCard extends LitElement implements LovelaceCard {
+export class TemplateCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./template-card-editor");
         return document.createElement(TEMPLATE_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -48,8 +49,6 @@ export class TemplateCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: TemplateCardConfig;
 
     @state() private _templateResults: Partial<
@@ -259,6 +258,7 @@ export class TemplateCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/title-card/title-card-editor.ts b/src/cards/title-card/title-card-editor.ts
index 5d10caa90..41e3ed8e7 100644
--- a/src/cards/title-card/title-card-editor.ts
+++ b/src/cards/title-card/title-card-editor.ts
@@ -1,8 +1,9 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { HaFormSchema } from "../../utils/form/ha-form";
 import { loadHaComponents } from "../../utils/loader";
@@ -18,9 +19,7 @@ const SCHEMA: HaFormSchema[] = [
 ];
 
 @customElement(TITLE_CARD_EDITOR_NAME)
-export class TitleCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class TitleCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: TitleCardConfig;
 
     connectedCallback() {
@@ -63,6 +62,6 @@ export class TitleCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/title-card/title-card.ts b/src/cards/title-card/title-card.ts
index 39bfbf329..143ed1672 100644
--- a/src/cards/title-card/title-card.ts
+++ b/src/cards/title-card/title-card.ts
@@ -1,10 +1,11 @@
 import { HomeAssistant, LovelaceCard, LovelaceCardEditor } from "custom-card-helpers";
 import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { RenderTemplateResult, subscribeRenderTemplate } from "../../utils/ws-templates";
@@ -21,7 +22,7 @@ const TEMPLATE_KEYS = ["title", "subtitle"] as const;
 type TemplateKey = typeof TEMPLATE_KEYS[number];
 
 @customElement(TITLE_CARD_NAME)
-export class TitleCard extends LitElement implements LovelaceCard {
+export class TitleCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./title-card-editor");
         return document.createElement(TITLE_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -34,8 +35,6 @@ export class TitleCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: TitleCardConfig;
 
     @state() private _templateResults: Partial<
@@ -184,6 +183,7 @@ export class TitleCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 .header {
diff --git a/src/cards/update-card/update-card-editor.ts b/src/cards/update-card/update-card-editor.ts
index 3b97fa4b9..5aad67e87 100644
--- a/src/cards/update-card/update-card-editor.ts
+++ b/src/cards/update-card/update-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { Action } from "../../utils/form/custom/ha-selector-mushroom-action";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
@@ -44,9 +45,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(UPDATE_CARD_EDITOR_NAME)
-export class UpdateCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class UpdateCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: UpdateCardConfig;
 
     connectedCallback() {
@@ -97,6 +96,6 @@ export class UpdateCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/update-card/update-card.ts b/src/cards/update-card/update-card.ts
index 985ceb3df..f295c550b 100644
--- a/src/cards/update-card/update-card.ts
+++ b/src/cards/update-card/update-card.ts
@@ -7,9 +7,8 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
@@ -21,6 +20,7 @@ import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -38,7 +38,7 @@ registerCustomCard({
 });
 
 @customElement(UPDATE_CARD_NAME)
-export class UpdateCard extends LitElement implements LovelaceCard {
+export class UpdateCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./update-card-editor");
         return document.createElement(UPDATE_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -52,7 +52,6 @@ export class UpdateCard extends LitElement implements LovelaceCard {
             entity: updates[0],
         };
     }
-    @property({ attribute: false }) public hass!: HomeAssistant;
 
     @state() private _config?: UpdateCardConfig;
 
@@ -176,6 +175,7 @@ export class UpdateCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/cards/vacuum-card/vacuum-card-editor.ts b/src/cards/vacuum-card/vacuum-card-editor.ts
index f0d562f36..6e56423b0 100644
--- a/src/cards/vacuum-card/vacuum-card-editor.ts
+++ b/src/cards/vacuum-card/vacuum-card-editor.ts
@@ -1,16 +1,17 @@
-import { fireEvent, HomeAssistant, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
 import { stateIcon } from "../../utils/icons/state-icon";
 import { loadHaComponents } from "../../utils/loader";
 import { VACUUM_CARD_EDITOR_NAME, VACUUM_ENTITY_DOMAINS } from "./const";
-import { VACUUM_COMMANDS, VacuumCardConfig, vacuumCardConfigStruct } from "./vacuum-card-config";
+import { VacuumCardConfig, vacuumCardConfigStruct, VACUUM_COMMANDS } from "./vacuum-card-config";
 
 const VACUUM_FIELDS = ["commands"];
 
@@ -44,9 +45,7 @@ const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaForm
 ]);
 
 @customElement(VACUUM_CARD_EDITOR_NAME)
-export class VacuumCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class VacuumCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: VacuumCardConfig;
 
     connectedCallback() {
@@ -97,6 +96,6 @@ export class VacuumCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/vacuum-card/vacuum-card.ts b/src/cards/vacuum-card/vacuum-card.ts
index 9acbb8253..b87e71abf 100644
--- a/src/cards/vacuum-card/vacuum-card.ts
+++ b/src/cards/vacuum-card/vacuum-card.ts
@@ -17,6 +17,7 @@ import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -34,7 +35,7 @@ registerCustomCard({
 });
 
 @customElement(VACUUM_CARD_NAME)
-export class VacuumCard extends LitElement implements LovelaceCard {
+export class VacuumCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./vacuum-card-editor");
         return document.createElement(VACUUM_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -49,8 +50,6 @@ export class VacuumCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: VacuumCardConfig;
 
     getCardSize(): number | Promise<number> {
@@ -147,6 +146,7 @@ export class VacuumCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {
diff --git a/src/utils/base-element.ts b/src/utils/base-element.ts
index 3f40ffe0f..621dc5989 100644
--- a/src/utils/base-element.ts
+++ b/src/utils/base-element.ts
@@ -10,13 +10,21 @@ import "../shared/state-item";
 import { defaultColorCss, defaultDarkColorCss } from "./colors";
 import { themeVariables, themeColorCss } from "./theme";
 
+function computeDarkMode(hass?: HomeAssistant): boolean {
+    if (!hass) return false;
+    return (hass.themes as any).darkMode as boolean;
+}
 export class MushroomBaseElement extends LitElement {
-    @property({ attribute: false }) public hass?: HomeAssistant;
+    @property({ attribute: false }) public hass!: HomeAssistant;
 
     protected updated(changedProps: PropertyValues): void {
+        super.updated(changedProps);
         if (changedProps.has("hass") && this.hass) {
-            const darkMode = (this.hass.themes as any).darkMode as boolean;
-            this.toggleAttribute("dark-mode", darkMode);
+            const currentDarkMode = computeDarkMode(changedProps.get("hass"));
+            const newDarkMode = computeDarkMode(this.hass);
+            if (currentDarkMode !== newDarkMode) {
+                this.toggleAttribute("dark-mode", newDarkMode);
+            }
         }
     }
 
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index e34491cb8..c7f584728 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -2,7 +2,6 @@ import { css } from "lit";
 import * as Color from "color";
 
 export const COLORS = [
-    "disabled",
     "red",
     "pink",
     "purple",
@@ -24,6 +23,7 @@ export const COLORS = [
     "blue-grey",
     "black",
     "white",
+    "disabled",
 ];
 
 export function computeRgbColor(color: string): string {