Apply styles to already loaded ha-sidebar and hui-root. Fix #330

src/helpers/patch_function.ts

@@ -22,18 +22,19 @@ export const patch_object = (obj, patch) => {
   }
 };
 
-export const patch_prototype = async (cls, patch) => {
+export const patch_prototype = async (cls, patch, afterwards?) => {
   if (typeof cls === "string") {
     await customElements.whenDefined(cls);
     cls = customElements.get(cls);
   }
-
-  return patch_object(cls.prototype, patch);
+  const patched = patch_object(cls.prototype, patch);
+  afterwards?.();
+  return patched;
 };
 
 // Decorator for patching a custom-element
-export function patch_element(element) {
+export function patch_element(element, afterwards?) {
   return function patched(constructor) {
-    patch_prototype(element, constructor);
+    patch_prototype(element, constructor, afterwards);
   };
 }

src/patch/ha-sidebar.ts

@@ -1,5 +1,6 @@
 import { patch_element } from "../helpers/patch_function";
 import { ModdedElement, apply_card_mod } from "../helpers/apply_card_mod";
+import { selectTree } from "../helpers/selecttree";
 
 /*
 Patch ha-sidebar for theme styling
@@ -10,7 +11,16 @@ An earlier version of card-mod would also re-run firstUpdated of any existing el
 This shouldn't be necessary if card-mod is loaded as a module.
 */
 
-@patch_element("ha-sidebar")
+// ha-sidebar may have been used before the patch was applied
+const apply = () => {
+  selectTree(
+    document,
+    "home-assistant$home-assistant-main$ha-sidebar",
+    false
+  ).then((root) => root?.firstUpdated());
+};
+
+@patch_element("ha-sidebar", apply)
 class SidebarPatch extends ModdedElement {
   // @ts-ignore
   firstUpdated(_orig, ...args) {

src/patch/hui-root.ts

@@ -1,5 +1,6 @@
 import { patch_element } from "../helpers/patch_function";
 import { ModdedElement, apply_card_mod } from "../helpers/apply_card_mod";
+import { selectTree } from "../helpers/selecttree";
 
 /*
 Patch hui-root for theme styling
@@ -10,7 +11,16 @@ An earlier version of card-mod would also re-run firstUpdated of any existing el
 This shouldn't be necessary if card-mod is loaded as a module.
 */
 
-@patch_element("hui-root")
+// hui-root may have been used before the patch was applied
+const apply = () => {
+  selectTree(
+    document,
+    "home-assistant$home-assistant-main$partial-panel-resolver ha-panel-lovelace$hui-root",
+    false
+  ).then((root) => root?.firstUpdated());
+};
+
+@patch_element("hui-root", apply)
 class HuiRootPatch extends ModdedElement {
   firstUpdated(_orig, ...args) {
     _orig?.(...args);