Flexible theme for manual customization.

By null
Last update: Jan 9, 2023
Comments: 11

WaveFox

Minimum Requirements

Firefox 99 / ESR 91.8.0
Windows
MacOS (Firefox) / MacOS 11 (ESR)
Linux

Installation

Download the chrome folder and put it in your user profile folder. For convenience, use about:profiles
Go to about:config and activate the keys below
- toolkit.legacyUserProfileCustomizations.stylesheets
- svg.context-properties.content.enabled
- layout.css.color-mix.enabled
Specify the desired shape of the tabs. Create and activate one of the keys below
- Style.Proton
- Style.Photon
- Style.WaveFox
- Style.Chrome
- Style.Edge
- Style.Australis
- Style.Chrome-Old
Create and activate other keys. This step is optional

How to create keys?

You need to restart your browser for the changes to take effect

Style	Light	Dark
WaveFox
Proton
Photon
Chrome
Edge
Chrome (Legacy)
Australis

Optional

Windows 11 Mica / Acrylic

Download and install MicaForEveryone from the link below.

https://github.com/minusium/MicaForEveryone/releases

Once installed, create and activate the key below. For transparency to work correctly, turn off the accent color in Windows 11 personalization and select the system theme in Firefox.

Mica

Acrylic

Mica / Acrylic

Style.Win11-Mica-Acrylic

Toolbar Transparency

It is possible to make the toolbar translucent. This can be useful if you want to extend the use of system effects like Windows 7 Aero / Windows 11 Mika / MacOS Vibrancy. Works only with the system theme.

Toolbar Transparency

Style.Toolbar-Transparency-Low
Style.Toolbar-Transparency-Medium
Style.Toolbar-Transparency-High

Colorways

Mozilla keeps deleting these custom themes. I don't know why, but it doesn't matter. Now it is possible to use built-in themes. They will not be deleted. Use with light/dark themes. On the system does not work.

Blue

Navy Blue

Colorways

Light:

Style.Colorways-Light-Gray
Style.Colorways-Mint
Style.Colorways-Blue-Green
Style.Colorways-Blue
Style.Colorways-Light-Pink
Style.Colorways-Pink
Style.Colorways-Yellow
Style.Colorways-Orange

Dark:

Style.Colorways-Dark-Grey
Style.Colorways-Gray-Blue
Style.Colorways-Navy-Blue
Style.Colorways-Purple
Style.Colorways-Red
Style.Colorways-Green

Additional Container Indicator

Possibility to activate an additional indicator for better visibility.

Additional Indicator

Style.Additional-Container-Indicator

Shadows

There are two shadows available for use. Each shadow is completely independent. In most situations, one shadow is enough, but there are situations where a second shadow can be useful. Shadows are formed from a combination of blur and saturation.

Low Blur + Very High Saturation

Very High Blur + Low Saturation

A combination of shadows from the screenshots above

Main Shadow

Blur:

Style.Main-Shadow-Blur-Low
Style.Main-Shadow-Blur-Medium
Style.Main-Shadow-Blur-High
Style.Main-Shadow-Blur-Very-High

Saturation:

Style.Main-Shadow-Saturation-Low
Style.Main-Shadow-Saturation-Medium
Style.Main-Shadow-Saturation-High
Style.Main-Shadow-Saturation-Very-High

Additional Shadow

Blur:

Style.Additional-Shadow-Blur-Low
Style.Additional-Shadow-Blur-Medium
Style.Additional-Shadow-Blur-High
Style.Additional-Shadow-Blur-Very-High

Saturation:

Style.Additional-Shadow-Saturation-Low
Style.Additional-Shadow-Saturation-Medium
Style.Additional-Shadow-Saturation-High
Style.Additional-Shadow-Saturation-Very-High

Separators

It is possible to set the saturation of tab separators.

Low Saturation

Very High Saturation

Separators

Style.Separators-Saturation-Low
Style.Separators-Saturation-Normal
Style.Separators-Saturation-High
Style.Separators-Saturation-Very-High
Style.Pinned-Tab-Separators-Disabled

Density

By default, context menus follow the selected interface density, but it is possible to set a fixed size.

Compact	Normal	Touch

Density

Style.Context-Menus-Compact
Style.Context-Menus-Normal
Style.Context-Menus-Touch

Icons

There are two types of fluent style icons from Microsoft.

Regular	Filled

Icons

Style.Menu-Icons-Regular
Style.Menu-Icons-Filled

Drag Space

Ability to control the drag space.

No Drag Space

Drag Space Above Tabs

Drag Space

Style.Left-Drag-Space-Disabled
Style.Right-Drag-Space-Disabled

Windowed Mode

Style.Drag-Space-Above-Tabs-Windowed-Mode-Low
Style.Drag-Space-Above-Tabs-Windowed-Mode-Medium
Style.Drag-Space-Above-Tabs-Windowed-Mode-High
Style.Drag-Space-Above-Tabs-Windowed-Mode-Very-High

Maximized Mode

Style.Drag-Space-Above-Tabs-Maximized-Mode-Low
Style.Drag-Space-Above-Tabs-Maximized-Mode-Medium
Style.Drag-Space-Above-Tabs-Maximized-Mode-High
Style.Drag-Space-Above-Tabs-Maximized-Mode-Very-High

Fullscreen Mode

Style.Drag-Space-Above-Tabs-Fullscreen-Mode-Low
Style.Drag-Space-Above-Tabs-Fullscreen-Mode-Medium
Style.Drag-Space-Above-Tabs-Fullscreen-Mode-High
Style.Drag-Space-Above-Tabs-Fullscreen-Mode-Very-High

Pinned Tabs Width

Ability to control the width of pinned tabs.

No Offset

Very High

Style.Pinned-Tabs-Width-Offset-Low
Style.Pinned-Tabs-Width-Offset-Medium
Style.Pinned-Tabs-Width-Offset-High
Style.Pinned-Tabs-Width-Offset-Very-High

Github

https://github.com/QNetITQ/WaveFox

Comments(11)

1

Old container indicator

The new indicator is pretty cool and well made, but in my work I use containers alot and the old indicator kind of worked better for me.

Any chance for a switch so one can choose which to use?
2

popup blocker message error.

Hello there, I'm using WaveFox on Firefox 104 x64 with the following commands enabled: userChrome.AdditionalContainerIndicator-Enabled userChrome.CompactContextMenu-Enabled userChrome.OneLine-Enabled userChrome.ProtonTabs-Enabled userChrome.ResponsiveBookmarksBar-Enabled userChrome.SelectedTabHighlight-Enabled When I go to a site and click on a link that opens a popup page, a popup blocker message appears on the screen top right, and it causes a layout “bug” on the Firefox top bar. Sorry, I don't have a screenshot, but I'm sure you can reproduce the error. Thanks in advance.
3

Tab Indicator visibility.

Hi.. I can’t make the Tab Indicator visible.. The description says:

Use the option to offset the width of pinned tabs. A very high offset is recommended.

What option do you mean? Any help? Thanks in advance.
4

Strange behaviour when tabs exceed the window width

Hi, I have a lot (like 594) tabs in one window and the restyled tabs look strange, check the screenshot please. The tab on the very left is active, the rightmost one is hovered.

When I open a new window with only a couple of tabs, everything seems OK. Could you please check, if you can reproduce this issue?

Thanks for your great effort anyway! 😊
5

Support dark inactive titlebar color
I am using the following code to change the color of titlebar when the window in inactive:
```
:root[tabsintitlebar]:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode]):is(:-moz-window-inactive) .titlebar-color
{
    background-color: #404040 !important;
    color: -moz-accent-color-foreground;
}
```
In the old version (not exactly sure how older than current, but from before all tweaks were moved to about:config), it looked like this without me needing to change much else (Firefox 98):

In the current version and on Firefox 99 it looks like this:

Any idea how I can make it like it was before, with the latest version?
6

Accent color (Win11)

Sorry if I'm missing something obvious but in the latest version (I was quite a few versions behind before) I can't seem to make my accent color work. My titlebar area is just the stock grey. Do I need to set something somewhere?
7

"Extending" the new tab button

First of all, thank you very much for all your work, on WaveFox, it is an amazing CSS for Firefox, and a breath of fresh air from their current design policies.

I wanted to ask you if there was a way to "extend" the New Tab button, so that also the concavity of the slope of the easternmost Australis tab were to trigger the opening of a new tab — or, in other words, reduce the dead space between the "close tab" and "new tab" buttons in the Australis theme.
Thank you in advance for looking into this!!
8

How to remove Photon tabs top gap

First, thanks for proving this public service. I love the look of the photon tabs, if I could remove the gap between the active tab rectangle and the top of the window it would look perfect in i3.
9

All white theme?

Hello, I remember a long while back, your theme supported my ability to have a white-on-white color theme. Basically it was all white. However, I have since removed the version that allowed me to do that. Will you please recommend changes to the latest release that I can make to my personal copy so that I can have an all-white theme again? Thanks in advance!

Edit: By all-white, I mean keeping the shadows and borders of the tabs, while at the same time all-white. Currently I can make it all-white, but all borders and shadows go away if I do.
10

Request: Firefox containers tabs background color

Hi,

I've always wished for container tabs to be more friendly when it comes to figuring out. Right now, there only goes a subtle highlight behind the tabs. I'm wondering if it's possible for you to color the tab with containers' color.
11

Wrong tab background when switching with CTRL+TAB

I've noticed when switching tabs with CTRL+TAB, sometimes the tab that is switched to seems to flicker for a very, very brief moment. It does however look kind of odd, so I recorded it and freeze framed. It looks like this: So seemingly, it's both the previous (right) and "switched to" tab (left) that gets the wrong background for a split second.

Reckon anything can be done about it?

Flexible theme for manual customization.

WaveFox

Minimum Requirements

Installation

How to create keys?

You need to restart your browser for the changes to take effect

Optional

Windows 11 Mica / Acrylic

Mica

Acrylic

Mica / Acrylic

Toolbar Transparency

Toolbar Transparency

Toolbar Transparency

Colorways

Blue

Navy Blue

Colorways

Additional Container Indicator

Additional Indicator

Additional Indicator

Shadows

Low Blur + Very High Saturation

Very High Blur + Low Saturation

A combination of shadows from the screenshots above

Main Shadow

Additional Shadow

Separators

Low Saturation

Very High Saturation

Separators

Density

Density

Icons

Icons

Drag Space

No Drag Space

Drag Space Above Tabs

Drag Space

Windowed Mode

Maximized Mode

Fullscreen Mode

Pinned Tabs Width

Github

Comments(11)

Old container indicator

popup blocker message error.

Tab Indicator visibility.

Strange behaviour when tabs exceed the window width

Support dark inactive titlebar color

Accent color (Win11)

"Extending" the new tab button

How to remove Photon tabs top gap

All white theme?

Request: Firefox containers tabs background color

Wrong tab background when switching with CTRL+TAB

Popular Tag

Related