Best theming for treestyletab extension in Firefox Dev Edition + Photon theme #justtryit

treestyletabStyle.css

/* Show title of unread tabs with red and italic font */
/*
.tab.unread .label {
  color: red !important;
  font-style: italic !important;
}
*/
.tab {
height: 25px;
padding-left: 0;
}
/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
  content: "🕶";
}
*/

/* Show internal tab id in the debug mode */
:root.debug .tab:not(.faviconized)::after {
  content: attr(data-tab-id);
  opacity: 0.5;
}

/* theme */

:root,
:root[color-scheme="system-color"] {
  --in-content-page-background: #2A2A2E /* rgb(42, 42, 46) */;
  --in-content-page-color: rgb(249, 249, 250);
  --in-content-text-color: var(--in-content-page-color);
  --in-content-deemphasized-text: var(--grey-40);
  --in-content-box-background: #202023;
  --in-content-box-background-hover: /* rgba(249,249,250,0.15) */ rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));
  --in-content-box-background-active: rgba(249,249,250,0.2);
  --in-content-box-background-odd: rgba(249,249,250,0.05);
  --in-content-box-info-background: rgba(249,249,250,0.15);

  --in-content-border-color: rgba(249,249,250,0.2);
  --in-content-border-color-mixed: rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));
  --in-content-border-hover: rgba(249,249,250,0.3);
  --in-content-border-hover-mixed: rgb(calc((42 * 0.7) + (249 * 0.3)), calc((42 * 0.7) + (249 * 0.3)), calc((46 * 0.7) + (250 * 0.3)));
  --in-content-box-border-color: rgba(249,249,250,0.2);
  --in-content-box-border-color-mixed: rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));

  --in-content-button-background: rgba(249,249,250,0.1);
  --in-content-button-background-mixed: rgb(calc((42 * 0.9) + (249 * 0.1)), calc((42 * 0.9) + (249 * 0.1)), calc((46 * 0.9) + (250 * 0.1)));
  --in-content-button-background-hover: rgba(249,249,250,0.15);
  --in-content-button-background-hover-mixed: rgb(calc((42 * 0.85) + (249 * 0.15)), calc((42 * 0.85) + (249 * 0.15)), calc((46 * 0.85) + (250 * 0.15)));
  --in-content-button-background-active: rgba(249,249,250,0.2);
  --in-content-button-background-active-mixed: rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));

  --tab-highlighter: var(--dark-tab-line);
  --tab-highlighted-highlight: white;
  --tabbar-bg: var(--dark-frame);

  --tab-like-surface: var(--toolbar-non-lwt-bgcolor);
  --tab-surface-regular: var(--tab-like-surface);
  --tab-text-regular: var(--toolbar-non-lwt-textcolor);
  --tab-text-inverted: var(--toolbar-non-lwt-bgcolor);
  --tab-text-active: var(--tab-text-regular);
  --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor);
  --tab-border: var(--in-content-box-border-color-mixed);
  --tab-surface-hover: var(--in-content-box-background-hover);
  --tab-surface-active: var(--in-content-button-background-mixed);
  --tab-surface-active-hover: var(--in-content-button-background-active-mixed);
  --tab-dropmarker: var(--toolbar-non-lwt-textcolor);

  --tab-highlighter-inactive: var(--grey-10-a20);
}

/* Firefox applies dark colors to scrollbars in its in-content UI, when a
   Dark theme is applied by the platform. To imitate such appearance we need
   to specify dark colors manually. See also:
   https://github.com/piroor/treestyletab/issues/2373 */
#tabbar {
  scrollbar-color: var(--in-content-button-background-active-mixed) var(--in-content-box-background);
}

:root[color-scheme="system-color"] #background::after {
  content: none;
}

:root,
#background {
  background-image: none;
}