Dark Theme for Tree Style Tab

style.css

:root {
  --bg-color: #2e3440;
  --bg-color-nactive: #e8e8e8;
  --shadow-color: #404040;
  --shadow-color-inactive: #868686;
  --tab-surface-active-color: #94A1C0;
  --tab-surface-active-gradient: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x;
  --tab-surface-active-gradient-inactive: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x;
  --tab-text: #e5e9f0;
  --tab-text-inverted: #2e3440;
  --tab-text-active: #e5e9f0;
  --badge-bg-color: #d8dee9;
  --badge-color-inactive: #b5b5b5;
  --badge-bg-color-inactive: #d8dee9;
  --dropmarker-border-color: #577bf3;
  --dropmarker-bg-color: #d0def5;
  --throbber-color: white;
  --throbber-shadow-color: var(--dropmarker-border-color);
 
  --tab-highlighted-highlight: #eceff4;
  --tab-highlighted-glow: #5e81ac;
  --tab-highlighted-base: var(--bg-color);
 
  --faviconized-tab-size: 22px;
 
  --closebox-text-margin: 4px;
  --closebox-roundness: 100%;
 
  --closebox-height: calc(var(--tab-height) * 0.75);
  --closebox-width: var(--closebox-height);
  --closebox-cross-size: 0.75; 
}
 
.tab:not(.active) {
  --throbber-color: var(--dropmarker-border-color);
  --throbber-shadow-color: white;
}
 
/* Background colour for the tree sidebar */
:root,
#background {
  background: var(--bg-color);
}
 
/* Use the splitter to display the border of .tabs */
:root.left {
  border-right: 0px solid var(--shadow-color);
}
:root.right {
  border-left: 0px solid var(--shadow-color);
}
 
/* Style tabs themselves.  Get rid of most of the initial XUL styling */
.tab {
  border-top: 0px solid transparent;
  height: 20px;     /* height including border! */
  padding: 0px 0px 0px 0px;
  z-index: 0;
}
:root.left-scrollbar.overlay-scrollbar #tabbar.overflow .tab:not(.pinned) {
  padding-left: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
:root.right-scrollbar.overlay-scrollbar #tabbar.overflow .tab:not(.pinned) {
  padding-right: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
.tab.active {
  border-top: 0px solid var(--tab-surface-active-color);
  background: #4c566a;
}
.tab:hover {
  background: #3b4252;
}
 
/* pinned tabs styling */
.tab.faviconized {
  padding: 0px 3px 0px;
}
#tabbar {
  margin-top: 0px !important;
}
.faviconized {
  position: relative !important;
  left: initial !important;
  top: initial !important;
  float: left;
}
.tab:not(.faviconized) {
  clear: left;
}
 
/* Tab label */
.tab .label {
  font-weight: normal;
  font-size: 9pt;
  line-height: 1.4;
  color: var(--tab-text);
  text-align: start;
  text-shadow: none;
  margin-bottom: 0.1em;
  padding: 0px 0px 0px 0.3em;
}
.tab.active .label {
  font-weight: normal;
  font-size: 9pt;
  color: var(--tab-text-active);
}
 
/* the sign to expand a tree */
.tab.active .twisty {
  color: #eceff4;
}
.tab:not(.active) .twisty {
  color: #eceff4;
}
 
/* Make the tab counter look like the bubbles in Mail.app et.al. */
.counter::before,
.counter::after {
  display: none;
}
.counter {
  font-size: 85%;
  background-color: var(--badge-bg-color);
  border-radius: 10px;
  padding: 0.2em 0.4em 0.3em 0.4em;
  color: #2e3440;
  font-weight: normal;
  text-shadow: none;
}
.tab.active .counter {
  background-color: var(--tab-text-active);
  /* color: var(--badge-bg-color); */
  color: #3b4252;
}
 
/* Drag'n'drop styling */
 
/* Round orange rectangle around tabs that are dropping targets. */
.tab[data-drop-position="self"] {
  background: #4c566a;
  border: 2px solid #d08770; /* not OSX's colour but Firefox's */
  border-radius: 0.3em;
  padding: 0 1px 0 8px;
  outline: none !important;
}
 
/* White-blue-white separator for drop indicator. */
.tab[data-drop-position]:not([data-drop-position="self"])::before {
  background: transparent !important;
  max-height: 6px;
  min-height: 6px;
  border-image: url("dropmarker.png") 12 0 0 11 fill / 12px 0 0 11px;
  border-image-outset: 6px 0 0 0;
}
.tab:not(.faviconized)[data-drop-position="before"]::before {
  top: 6px;
}
 
/* changed from original SidebarStyleTab */
.after-tabs button {
  background: transparent;
  border: 0 none;
}
 
/* for rightside tab bar: "display:none" breaks the order of tab contents. */
:root
  .tab:not(:hover):not(.active)
  .closebox {
  display: -moz-box !important;
  visibility: collapse !important;
}
 
/* for Multiple Tab Handler */
.tab:not(:hover):not(.active)[multipletab-ready-to-close="true"] .closebox {
  visibility: visible;
}
 
/* closebox styling */
/* show tab close box on hover only */
.tab:not(:hover) .closebox {
  display: none;
}
 
/* Hide the closebox for not hovered tabs. */
.tab:not(.active):not(:hover) .closebox {
  display: none;
}
 
.closebox:active {
  opacity: 0.5;
}
 
.tab .closebox {
  background: #bf616a;
  opacity: 0.33;
}
 
.tab.active .closebox {
  background: #bf616a;
  opacity: 0.67;
}
 
.tab .closebox:hover::before,
.tab.active .closebox:hover::before {
  background: transparent;
}
 
.closebox::before,
.closebox {
  min-height: var(--closebox-height) !important;
  max-height: var(--closebox-height) !important;
  min-width: var(--closebox-width) !important;
  max-width: var(--closebox-width) !important;
   
  border-radius: calc(var(--closebox-roundness) / 2) !important;
  padding: 0px !important;
  margin: 0px !important;
}
 
.closebox {
  margin-left: var(--closebox-text-margin) !important;
  margin-top: calc(-1 * var(--closebox-height) / 2) !important;
  margin-bottom: calc(-1 * var(--closebox-height) / 2) !important;
}
 
.closebox::after {
  height: calc(var(--closebox-height) * var(--closebox-cross-size)) !important;
  width: calc(var(--closebox-width) * var(--closebox-cross-size)) !important;
 
  margin-top: calc(var(--closebox-height) * (1 - var(--closebox-cross-size)) / 2) !important;
  margin-left: calc(var(--closebox-width) * (1 - var(--closebox-cross-size)) / 2) !important;
}