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

изображение

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

изображение

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.

    obrazek

    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): image

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

    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: image 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?