Skip to content

Latest commit

 

History

History
101 lines (59 loc) · 3.34 KB

README.md

File metadata and controls

101 lines (59 loc) · 3.34 KB

Advanced Tab Groups

CSS for Zen Browser's experimental Tab Groups using userChrome.css.

Advanced Tab Groups

⚠️ Notice

This feature requires manual setup until it becomes available in the Zen Mods store.
To use this CSS, you must configure Zen Browser's userChrome.css and enable certain preferences in about:config.

If you're unfamiliar with userChrome.css, please refer to this guide. If you encounter any issues, feel free to create an issue on this repository.

How to Use

  1. Enable browser.tabs.groups.enabled in about:config to activate Firefox's experimental Tab Groups feature (works in all versions of Zen Browser).
  2. Follow this guide to set up userChrome.css.
  3. Copy the CSS from this repository into your userChrome.css file.
  4. Add the configuration booleans listed below in about:config and adjust them to your liking.
  5. Enjoy your customized tab groups!

Configuration Options

Add these preferences to about:config to enable additional features:

  • tab.groups.add-arrow
  • tab.groups.background
  • tab.groups.borders
  • tab.groups.theme-folders
  • tab.groups.fill-folders
  • tab.groups.display-tab-range

What Does This Do?

This CSS improves the functionality and appearance of Zen Browser's experimental Tab Groups.

Features

1. Custom Background for Tab Groups

Apply a background that matches the tab group color for a cleaner and more cohesive look.

Group Background

2. Border Around Tab Groups

Add a subtle border to enhance the visual separation of tab groups (requires background to be enabled).

Group Background With Borders

3. Expandable Tab Groups with Arrows

Add an arrow icon to indicate whether a tab group folder is open or closed.

Add Arrows

4. Themed Folder Icons

Color folder icons based on the tab group color to visually differentiate groups.

Theme Icons

5. Folder Icon Fill

Customize the folder icon fill with your tab group color—or leave it empty, depending on your preference.

Fill Icons

5. Display Tab Range

Have a line sowing where the folder starts and stops

Tab Range

Suggestions

Have an idea for a feature? Start a discussion! I'm happy to explore any Zen CSS-related requests.

Credit

Special thanks to https://github.com/nieffka/bubble-clean-zen for the original CSS theme and inspiration!

Made For Zen Badge