A Firefox theme. Alpenglow-inspired. Tree Style Tabs compatible.
Tree Style Tabs is an extension for having a vertical tree of tabs in your sidebar. This theme is comptible with it but you must revert Tree Style Tabs' CSS to Firefox native for this theme's styling to work. Instructions are here but in short:
- Right click TST button in toolbar
- Click "Manage Extension"
- Click "Options"
- Go to the "Extra style rules for contents provided by Tree Style Tab and in the text area put:
:root {
--tab-surface-regular: var(--theme-colors-tab,
var(--theme-colors-frame_inactive));
--tab-surface-active: var(--theme-colors-tab_selected,
var(--theme-colors-toolbar,
var(--browser-bg-for-header-image,
var(--tab-like-surface))));
--tab-surface-active-hover: var(--theme-colors-tab_selected,
var(--theme-colors-toolbar,
var(--browser-bg-for-header-image,
var(--tab-like-surface))));
--tab-surface-hover: rgba(255,255,255,.1) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/browser/themes/shared/tabs.inc.css#590 */;
--tab-border: var(--theme-colors-tab_background_separator,
var(--theme-colors-tab_line,
var(--theme-colors-tab_background_text-30,
hsl(240,9%,32%) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/browser/themes/shared/tabs.inc.css#684 : --tab-text-regular * 0.3 opacity */)));
--tab-text-regular: var(--theme-colors-tab_background_text,
hsl(240,9%,98%) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/toolkit/themes/windows/global/tabbox.css#27 */);
--tab-text-active: var(--theme-colors-tab_text,
var(--theme-colors-toolbar_text,
-moz-DialogText /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/toolkit/themes/windows/global/tabbox.css#27 */));
--tabbar-bg: var(--theme-colors-frame,
hsl(235,33%,19%) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/browser/themes/windows/browser-aero.css#59 */);
}Sidebery is an extension for having a vertical tree of tabs in your sidebar.
To make this theme work well with Sidebery, go to Sidebery's settings, click "Styles editor", and enter this CSS:
#root.root {--nav-btn-margin: 2px;}
#root.root {--general-margin: 0px;}
#root.root {--general-border-radius: 0px;}
#root.root {--tabs-border-radius: 0px;}
#root.root {--tabs-height: 28px;}
#root.root {--tabs-pinned-width: 28px;}
#root.root {--tabs-pinned-height: 28px;}
#root.root {--tabs-margin: 0px;}
#root.root {--tabs-normal-bg: #271D4E;}
#root.root {--bookmarks-folder-font: 0.9375rem sans-serif;}
#root.root {--tabs-font: 0.75rem Inter, sans-serif;}