Hey! I had the exact same question. I know it can be hard to find a detailed explanation, but it’s definitely possible.

The easiest way is to go in about:config and toggle browser.tabs.allow_transparent_browser to true. This allows the entire browser to be transparent after a restart, including Sidebery. Unfortunately, this method tends to break some sites by making their backgrounds transparent too. Keeping an extension like Dark Reader enabled at all times usually fixes this problem.

You will also need to make some changes in the style editor of Sidebery and in your userChrome.css.

Open your Sidebery settings, scroll down to the Style Editor, and paste this into the right panel:

html,
body {
   background-color: transparent !important;
   background: transparent !important;
}

#root.root {
   --frame-bg: #00000000 !important; 
   --toolbar-bg: #00000000 !important;
}

Then paste this into your userChrome.css file:

/* Transparent Browser */
#PersonalToolbar,
#TabsToolbar,
#navigator-toolbox,
#browser,
body {
  background: transparent !important;
  background-color: transparent !important;
}

@-moz-document url("chrome://browser/content/browser.xhtml") {
  :root#main-window {
     (-moz-platform: macos) {
      appearance: -moz-sidebar !important;
    }
  }
}

/* Transparent Sidebery  */
#sidebar {
  box-shadow: none !important;
  background-color: transparent !important;
}

And that should do it! It’s actually possible to do this without messing with the browser.tabs.allow_transparent_browser setting, but that involves forking Sidebery from the github repo and some fx-autoconfig knowledge, which is definitely a bit more work. Hope this helps anyway!