my user chrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

/* ---- SETTINGS (fully quit Firefox to apply changes) ---- */
html|html {
  --a: .35;          /* toolbar, tabs, address bar opacity */
  --content: .45;    /* page area tint */
  --solid: .6;       /* focused address bar + findbar */
  --t: 20 20 26;     /* tint colour (also update the sidebar hover at the bottom) */

  --f: rgb(var(--t) / calc(var(--a) + .22));

  /* Clear the theme's opaque frame */
  --lwt-accent-color: transparent !important;
  --lwt-accent-color-inactive: transparent !important;
  --toolbox-background-color-inactive: transparent !important;
  --chrome-content-separator-color: transparent !important;
  --tab-background-color-selected: var(--f) !important;
  --tab-background-color-hover: rgb(var(--t) / calc(var(--a) + .1)) !important;
}

/* ---- Window and page containers ---- */
html|html,
html|body,
#browser,
#appcontent,
#tabbrowser-tabbox,
#tabbrowser-tabpanels,
browser {
  background: transparent !important;
}

/* ---- Toolbar band ---- */
#navigator-toolbox {
  background-color: rgb(var(--t) / var(--a)) !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#titlebar,
#toolbar-menubar,
#TabsToolbar,
#tabbrowser-tabs,
#nav-bar,
#PersonalToolbar {
  appearance: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ---- Text readability ---- */
#TabsToolbar,
#nav-bar,
#PersonalToolbar,
#sidebar-container {
  text-shadow: 0 1px 2px rgb(0 0 0 / .85) !important;
}

#urlbar,
#searchbar {
  text-shadow: none !important;
}

/* ---- Address bar, findbar, tabs ---- */
#urlbar-background {
  background-color: var(--f) !important;
  border-color: rgb(255 255 255 / .1) !important;
}

#urlbar[focused="true"] > #urlbar-background,
#urlbar[open] > #urlbar-background,
.browserContainer > findbar {
  background-color: rgb(var(--t) / var(--solid)) !important;
  background-image: none !important;
}

#tabbrowser-tabs .tabbrowser-tab[selected] .tab-background {
  background-color: var(--f) !important;
  background-image: none !important;
}

/* ---- Page area tint ---- */
.browserContainer {
  background-color: rgb(var(--t) / var(--content)) !important;
}

/* ---- Sidebar ---- */
#sidebar-container,
#sidebar-box,
html|sidebar-main {
  appearance: none !important;
  background: transparent !important;
  --sidebar-background-color: transparent !important;
}

/* Hover colour must be a literal: keep in step with --t and --solid by hand */
html|sidebar-main:hover {
  background: rgb(20 20 26 / .6) !important;
}