A way to enable a compact header in Home Assistant without changing your current theme

compact-header-enabler.js

class CompactHeaderEnabler {
	enableCompactHeader(compactHeaderTheme = "compact-header"){
		let root = document.querySelector("html");
		root.style.setProperty("--card-mod-theme", compactHeaderTheme);
		setTimeout(() => {
			let theme = JSON.parse(localStorage.getItem("selectedTheme") || "{}");
			this.fireEvent("settheme",theme, document.querySelector("home-assistant"));
		},100);
	}
	
	fireEvent(ev, detail, entity) {
  		ev = new Event(ev, {
    		bubbles: true,
    		cancelable: false,
    		composed: true,
  		});
  		ev.detail = detail || {};
  		entity.dispatchEvent(ev);
	}
}

const header = new CompactHeaderEnabler();

header.enableCompactHeader();

compact-header.yaml

compact-header:
  card-mod-theme: compact-header
  card-mod-root-yaml: |
    ha-app-layout$: |
        /* This corrects top padding for the view. */
        #contentContainer {
          padding-top: 48px !important;
        }

    paper-tabs$: |
        /* This hides tab scroll arrows, remove next 3 lines if you want them. */
        paper-icon-button {
          display: none;
        }
        /* This makes it so arrows are only displayed when needed. */
        .not-visible {
          display: none;
        }
    .: |
      /* This shifts the unused portion of the header up. */
      app-toolbar:not([class="edit-mode"]) {
        margin-top: -64px;
        z-index: 1;
      }
      /* This shifts the menu button back down. */
      app-toolbar:not([class="edit-mode"]) ha-button-menu {
        margin-top: 110px
      }
      /* This shifts the voice button back down. */
      app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
        /* Uncomment line below to hide voice button. */
        /* display: none; */
        margin-top: 110px
      }
      /* This shifts the options button back down. */
      app-toolbar:not([class="edit-mode"]) ha-menu-button {
        /* Uncomment line below to hide options button. */
        /* display: none; */
        margin-top: 110px
      }
      /* This hides the menu button when sidebar is open. */
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      /* This adds room for the menu button when sidebar is open. */
      :host-context(home-assistant-main[expanded]) paper-tabs {
        margin-left: 60px !important;
      }
      /* This leaves space for the buttons on the right of the tabs bar.
         Change 112px to 56px if you don't use voice icon. */
      paper-tabs {
          margin-right: 112px !important;
      }
      /* This corrects the sizing of the view. */
      #view {
        min-height: calc(100vh - 48px) !important;
      }