GitHunt
QN

QNetITQ/WaveFox

Firefox CSS Theme/Style for manual customization

csscss-stylecss-themefirefoxfirefox-cssfirefox-customizationfirefox-esrfirefox-linuxfirefox-macfirefox-stylefirefox-themefirefox-tweaksfirefox-userchromefirefox-userchrome-stylefirefox-userchromecssfirefox-userchromecss-stylefirefox-windowsuserchromeuserchromecss

WaveFox

WaveFox_Preview

visitor badge

Installation

Download Firefox / Download WaveFox / WaveFox Nightly

WaveFox v1.8.148
  • Minimum Requirements
    • Firefox 148
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

Optional

Tab Shapes

Shape 5

изображение

  • WaveFox.Tabs.Shape > 5
Shape 6

изображение

  • WaveFox.Tabs.Shape > 6
Shape 7

изображение

  • WaveFox.Tabs.Shape > 7
Shape 8

изображение

  • WaveFox.Tabs.Shape > 8
Shape 9

изображение

  • WaveFox.Tabs.Shape > 9
Shape 10

изображение

  • WaveFox.Tabs.Shape > 10
Shape 11

изображение

  • WaveFox.Tabs.Shape > 11
Shape 12

изображение

  • WaveFox.Tabs.Shape > 12

Windows 10 Transparency (Horizontal and Vertical tabs)

Install DWMBlurGlass. Configure to your liking and activate the keys below. Works only with the system theme.
изображение

  • WaveFox.Windows10.Transparency.Enabled and browser.tabs.inTitlebar > 1

Linux Transparency (Horizontal and Vertical tabs)

Requires Linux with transparency support. Works only with the system theme.

Снимок5

  • WaveFox.Linux.Transparency.Enabled and browser.tabs.inTitlebar > 1

Toolbar Transparency

Works only with the system theme.
изображение

  • WaveFox.Toolbar.Transparency > 1 or 2 or 3 or 4 and browser.tabs.inTitlebar > 1

Toolbar Roundings (Horizontal and Vertical tabs)

Ability to control the rounding of browser bar elements.
изображение

  • WaveFox.Toolbar.Roundings > 1 or 2

Tab Bar Shadows

Works only with System / Light / Dark theme.
изображение

Shadows (Light Theme)
  • WaveFox.LightTheme.Tabs.Shadows > 1 or 2 or 3 or 4
Shadows (Dark Theme)
  • WaveFox.DarkTheme.Tabs.Shadows > 1 or 2 or 3 or 4

Tab Separators

изображение

  • WaveFox.Tabs.Separators > 1 or 2 or 3 or 4

Background For Inactive Tabs

изображение

  • WaveFox.Tabs.Background.Inactive.Enabled

Icons (firefox-csshacks / Lepton) / (Horizontal and Vertical tabs)

This is third-party code. I will update this code according to the original source.

изображение

  • svg.context-properties.content.enabled (Required key)
  • WaveFox.Icons > 1 or 2 (Required key)

The keys below are relevant only for the second option.

  • userChrome.icon.panel_full or userChrome.icon.panel_photon
  • userChrome.icon.library
  • userChrome.icon.panel
  • userChrome.icon.menu
  • userChrome.icon.context_menu
  • userChrome.icon.global_menu
  • userChrome.icon.global_menubar
  • userChrome.icon.1-25px_stroke
  • userChrome.icon.account_image_to_right
  • userChrome.icon.account_label_to_right
  • userChrome.icon.menu.full
  • userChrome.icon.global_menu.mac

Drag Space

изображение

  • WaveFox.DragSpace.Tabs > 1 or 2 or 3
  • WaveFox.DragSpace.TabBarLeftSide.Disabled
  • WaveFox.DragSpace.TabBarRightSide.Disabled

Selected Tab Indicator

изображение

  • WaveFox.Tabs.SelectedTabIndicator.Enabled

Tabs Below URL (Floating Tabs Only)

Снимок

  • WaveFox.TabsBelowURL.Enabled and browser.tabs.inTitlebar > 0

One Line (Floating Tabs Only)

Снимок

  • WaveFox.OneLine > 1 or 2

Floating Web Page (Horizontal tabs)

изображение

  • WaveFox.WebPage.Floating.Enabled

Transparent Web Page (Experimentally) (Horizontal and Vertical tabs)

Works only with system theme. Requires transparency support from the operating system. The quality of this option depends heavily on the specific website.
изображение

  • WaveFox.WebPage.Transparency > 1 or 2 and browser.tabs.allow_transparent_browser (1 - New tab page only / 2 - All browser windows and all websites)
    • WaveFox.WebPage.Background.Saturation > 1 or 2 or 3

Toolbar Autohide (Vertical tabs)

изображение
  • WaveFox.VerticalTabs.Toolbar.Autohide.Enabled

Experimental

Disables the ability to pin tabs by dragging. Some users find this feature annoying.

  • WaveFox.Experimental.Tabs.Pin_By_Dragging.Disabled
WaveFox v1.8.140 ESR
  • Minimum Requirements
    • Firefox 140 ESR
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

Optional

Tab Shapes

Shape 1

изображение

  • WaveFox.Tabs.Shape > 1
Shape 2

изображение

  • WaveFox.Tabs.Shape > 2
Shape 3

изображение

  • WaveFox.Tabs.Shape > 3
Shape 4

изображение

  • WaveFox.Tabs.Shape > 4
Shape 5

изображение

  • WaveFox.Tabs.Shape > 5
Shape 6

изображение

  • WaveFox.Tabs.Shape > 6
Shape 7

изображение

  • WaveFox.Tabs.Shape > 7
Shape 8

изображение

  • WaveFox.Tabs.Shape > 8
Shape 9

изображение

  • WaveFox.Tabs.Shape > 9
Shape 10

изображение

  • WaveFox.Tabs.Shape > 10
Shape 11

изображение

  • WaveFox.Tabs.Shape > 11
Shape 12

изображение

  • WaveFox.Tabs.Shape > 12

Windows 10 Transparency (Horizontal and Vertical tabs)

Install DWMBlurGlass. Configure to your liking and activate the keys below. Works only with the system theme.
изображение

  • WaveFox.Windows10.Transparency.Enabled and browser.tabs.inTitlebar > 1

Linux Transparency (Horizontal and Vertical tabs)

Requires Linux with transparency support. Works only with the system theme.

Снимок5

  • WaveFox.Linux.Transparency.Enabled and browser.tabs.inTitlebar > 1

Toolbar Transparency

Works only with the system theme.
изображение

  • WaveFox.Toolbar.Transparency > 1 or 2 or 3 or 4 and browser.tabs.inTitlebar > 1

Tab Bar Shadows

Works only with System / Light / Dark theme.
изображение

Shadows (Light Theme)
  • WaveFox.LightTheme.Tabs.Shadows > 1 or 2 or 3 or 4
Shadows (Dark Theme)
  • WaveFox.DarkTheme.Tabs.Shadows > 1 or 2 or 3 or 4

Tab Separators

изображение

  • WaveFox.Tabs.Separators > 1 or 2 or 3 or 4

Background For Inactive Tabs

изображение

  • WaveFox.Tabs.Background.Inactive.Enabled

Icons (firefox-csshacks / Lepton) / (Horizontal and Vertical tabs)

This is third-party code. I will update this code according to the original source.

изображение

  • svg.context-properties.content.enabled (Required key)
  • WaveFox.Icons > 1 or 2 (Required key)

The keys below are relevant only for the second option.

  • userChrome.icon.panel_full or userChrome.icon.panel_photon
  • userChrome.icon.library
  • userChrome.icon.panel
  • userChrome.icon.menu
  • userChrome.icon.context_menu
  • userChrome.icon.global_menu
  • userChrome.icon.global_menubar
  • userChrome.icon.1-25px_stroke
  • userChrome.icon.account_image_to_right
  • userChrome.icon.account_label_to_right
  • userChrome.icon.menu.full
  • userChrome.icon.global_menu.mac

Drag Space

изображение

  • WaveFox.DragSpace.Tabs > 1 or 2 or 3
  • WaveFox.DragSpace.TabBarLeftSide.Disabled
  • WaveFox.DragSpace.TabBarRightSide.Disabled

Selected Tab Indicator

изображение

  • WaveFox.Tabs.SelectedTabIndicator.Enabled

Tabs Below URL

Снимок

  • WaveFox.TabsBelowURL.Enabled and browser.tabs.inTitlebar > 0

One Line

Снимок

  • WaveFox.OneLine > 1 or 2

Floating Web Page (Horizontal and Vertical tabs)

изображение

  • WaveFox.WebPage.Floating.Enabled

Transparent Web Page (Experimentally) (Horizontal and Vertical tabs)

Works only with system theme. Requires transparency support from the operating system. The quality of this option depends heavily on the specific website.
изображение

  • WaveFox.WebPage.Transparency > 1 or 2 and browser.tabs.allow_transparent_browser (1 - New tab page only / 2 - All browser windows and all websites)
    • WaveFox.WebPage.Background.Saturation > 1 or 2 or 3
WaveFox v1.6.128 ESR
  • Minimum Requirements
    • Firefox 128 ESR
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

  • Specify the desired shape of the tabs

    Tabs (Option 1)

    1

    • userChrome.Tabs.Option1.Enabled
    Tabs (Option 2)

    2

    • userChrome.Tabs.Option2.Enabled
    Tabs (Option 3)

    3

    • userChrome.Tabs.Option3.Enabled
    Tabs (Option 4)

    4

    • userChrome.Tabs.Option4.Enabled
    Tabs (Option 5)

    5

    • userChrome.Tabs.Option5.Enabled
    Tabs (Option 6)

    9

    • userChrome.Tabs.Option6.Enabled
    Tabs (Option 7)

    10

    • userChrome.Tabs.Option7.Enabled
    Tabs (Option 8)

    11

    • userChrome.Tabs.Option8.Enabled
    Tabs (Option 9)

    12

    • userChrome.Tabs.Option9.Enabled
    Tabs (Option 10)

    14

    • userChrome.Tabs.Option10.Enabled
    Tabs (Option 11)

    15

    • userChrome.Tabs.Option11.Enabled
    Tabs (Option 12)

    16

    • userChrome.Tabs.Option12.Enabled
    Tabs (Option 13)

    изображение

    • userChrome.Tabs.Option13.Enabled

Optional

Adding third-party styles

Go to the chrome folder and paste the desired styles inside the third_party_custom_styles.css file. Please note that this file has maximum execution priority. It will overwrite all styles, regardless of selector specificity. I make no guarantees of compatibility and will not resolve any style conflicts you may encounter.

  • userChrome.Style.ThirdParty.Enabled

Functionality that will not be part of the style will be published in the discussions section as requests from users.

Linux Transparency

Requires Linux with transparency support. Works only with the system theme.

Снимок5

  • userChrome.Linux.Transparency.Low.Enabled
  • userChrome.Linux.Transparency.Medium.Enabled
  • userChrome.Linux.Transparency.High.Enabled
  • userChrome.Linux.Transparency.VeryHigh.Enabled
  • browser.tabs.inTitlebar > 1 (Required key)

Toolbar Transparency

Works only with the system theme.
изображение

  • userChrome.Toolbar.Transparency.Low.Enabled
  • userChrome.Toolbar.Transparency.Medium.Enabled
  • userChrome.Toolbar.Transparency.High.Enabled
  • userChrome.Toolbar.Transparency.VeryHigh.Enabled

Tab Bar Borders and Shadows

Incompatible with AMO themes.
изображение

Borders (Light Theme)
  • userChrome.LightTheme.Tabs.Borders.Saturation.Low.Enabled
  • userChrome.LightTheme.Tabs.Borders.Saturation.Medium.Enabled
  • userChrome.LightTheme.Tabs.Borders.Saturation.High.Enabled
  • userChrome.LightTheme.Tabs.Borders.Saturation.VeryHigh.Enabled
Borders (Dark Theme)
  • userChrome.DarkTheme.Tabs.Borders.Saturation.Low.Enabled
  • userChrome.DarkTheme.Tabs.Borders.Saturation.Medium.Enabled
  • userChrome.DarkTheme.Tabs.Borders.Saturation.High.Enabled
  • userChrome.DarkTheme.Tabs.Borders.Saturation.VeryHigh.Enabled
Shadows (Light Theme)
  • userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled
Shadows (Dark Theme)
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled

Tab Separators

изображение

  • userChrome.TabSeparators.Saturation.Low.Enabled
  • userChrome.TabSeparators.Saturation.Medium.Enabled

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

Compact Normal Touch
изображение изображение изображение
  • userChrome.Menu.Size.Compact.Enabled
  • userChrome.Menu.Size.Normal.Enabled
  • userChrome.Menu.Size.Touch.Enabled

Icons

Regular Filled
изображение изображение
  • userChrome.Menu.Icons.Regular.Enabled
  • userChrome.Menu.Icons.Filled.Enabled

Lepton Icons

Icons from Lepton.css are now available. Please note that this is third-party code. I am not its author and do not support it. I will not solve any problems associated with these icons. They were added at the request of some users and work "As is". I will update this code according to the original source.

  • svg.context-properties.content.enabled
  • userChrome.Menu.Icons.LeptonIcons.Enabled
    • userChrome.icon.panel_full or userChrome.icon.panel_photon
    • userChrome.icon.library
    • userChrome.icon.panel
    • userChrome.icon.menu
    • userChrome.icon.context_menu
    • userChrome.icon.global_menu
    • userChrome.icon.global_menubar
    • userChrome.icon.1-25px_stroke
    • userChrome.icon.account_image_to_right
    • userChrome.icon.account_label_to_right
    • userChrome.icon.menu.full
    • userChrome.icon.global_menu.mac

Drag Space

изображение

  • userChrome.DragSpace.Left.Disabled
  • userChrome.DragSpace.Right.Disabled
  • userChrome.DragSpace.Top.Windowed.Enabled
  • userChrome.DragSpace.Top.Maximized.Enabled
  • userChrome.DragSpace.Top.Fullscreen.Enabled

Pinned Tabs Width

Снимок

  • userChrome.Tabs.Pinned.Width.LowOffset.Enabled
  • userChrome.Tabs.Pinned.Width.HighOffset.Enabled

Selected Tab Indicator

изображение

  • userChrome.Tabs.SelectedTabIndicator.Enabled

Tabs On Bottom

Снимок

  • userChrome.Tabs.TabsOnBottom.Enabled
  • browser.tabs.inTitlebar (Required key. Set the value to 0)

One Line

Снимок

  • userChrome.OneLine.TabBarFirst.Enabled
  • userChrome.OneLine.NavBarFirst.Enabled
WaveFox v1.6.115.0.3 ESR
  • Minimum Requirements
    • Firefox 115 ESR
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the keys below

    • toolkit.legacyUserProfileCustomizations.stylesheets
    • layout.css.has-selector.enabled
    • svg.context-properties.content.enabled

  • Specify the desired shape of the tabs

    Tabs (Option 1)

    1

    • userChrome.Tabs.Option1.Enabled
    Tabs (Option 2)

    2

    • userChrome.Tabs.Option2.Enabled
    Tabs (Option 3)

    3

    • userChrome.Tabs.Option3.Enabled
    Tabs (Option 4)

    4

    • userChrome.Tabs.Option4.Enabled
    Tabs (Option 5)

    5

    • userChrome.Tabs.Option5.Enabled
    Tabs (Option 6)

    9

    • userChrome.Tabs.Option6.Enabled
    Tabs (Option 7)

    10

    • userChrome.Tabs.Option7.Enabled
    Tabs (Option 8)

    11

    • userChrome.Tabs.Option8.Enabled
    Tabs (Option 9)

    12

    • userChrome.Tabs.Option9.Enabled
    Tabs (Option 10)

    14

    • userChrome.Tabs.Option10.Enabled
    Tabs (Option 11)

    15

    • userChrome.Tabs.Option11.Enabled
    Tabs (Option 12)

    16

    • userChrome.Tabs.Option12.Enabled

Optional

Windows System Effects

Works with modern versions of Windows 11 / Windows 10. System effects must be supported on the operating system side. Otherwise, you need third-party software, such as Mica For Everyone. You also need to disable the accent color in the operating system settings, if it was enabled. Works only with the system theme.
изображение

Download and install Mica For Everyone from here.

  • userChrome.Windows.SystemEffects.Enabled

Toolbar Transparency

Works only with the system theme.
изображение

  • userChrome.Toolbar.Transparency.Low.Enabled
  • userChrome.Toolbar.Transparency.Medium.Enabled
  • userChrome.Toolbar.Transparency.High.Enabled
  • userChrome.Toolbar.Transparency.VeryHigh.Enabled

Linux Transparency

Requires Linux with transparency support. Works only with the system theme.

изображение

  • userChrome.Linux.Transparency.Enabled
  • gfx.webrender.all (Required key)

Tab Frame

The tab frame consists of type, color and saturation. Not compatible with themes that use a translucent toolbar.
изображение

Light Theme
Type
  • userChrome.LightTheme.TabFrameType.Border.Enabled
  • userChrome.LightTheme.TabFrameType.Shadow.Enabled
Color
  • userChrome.LightTheme.TabFrameColor.Auto.Enabled
  • userChrome.LightTheme.TabFrameColor.White.Enabled
  • userChrome.LightTheme.TabFrameColor.Black.Enabled
Saturation
  • userChrome.LightTheme.TabFrameSaturation.Low.Enabled
  • userChrome.LightTheme.TabFrameSaturation.Medium.Enabled
  • userChrome.LightTheme.TabFrameSaturation.High.Enabled
  • userChrome.LightTheme.TabFrameSaturation.VeryHigh.Enabled
Dark Theme
Type
  • userChrome.DarkTheme.TabFrameType.Border.Enabled
  • userChrome.DarkTheme.TabFrameType.Shadow.Enabled
Color
  • userChrome.DarkTheme.TabFrameColor.Auto.Enabled
  • userChrome.DarkTheme.TabFrameColor.White.Enabled
  • userChrome.DarkTheme.TabFrameColor.Black.Enabled
Saturation
  • userChrome.DarkTheme.TabFrameSaturation.Low.Enabled
  • userChrome.DarkTheme.TabFrameSaturation.Medium.Enabled
  • userChrome.DarkTheme.TabFrameSaturation.High.Enabled
  • userChrome.DarkTheme.TabFrameSaturation.VeryHigh.Enabled

Tab Separators

изображение

  • userChrome.TabSeparatorsLowSaturation-Enabled
  • userChrome.TabSeparatorsMediumSaturation-Enabled

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

Compact Normal Touch
изображение изображение изображение
  • userChrome.CompactContextMenu-Enabled
  • userChrome.NormalContextMenu-Enabled
  • userChrome.TouchContextMenu-Enabled

Icons

Regular Filled
изображение изображение
  • userChrome.RegularMenuIcons-Enabled
  • userChrome.FilledMenuIcons-Enabled

Drag Space

изображение

  • userChrome.DragSpace.Left.Disabled
  • userChrome.DragSpace.Right.Disabled
  • userChrome.DragSpace.Top.Windowed.Enabled
  • userChrome.DragSpace.Top.Maximized.Enabled
  • userChrome.DragSpace.Top.Fullscreen.Enabled

Pinned Tabs Width

Снимок

  • userChrome.PinnedTabsWidthLowIncrease-Enabled
  • userChrome.PinnedTabsWidthHighIncrease-Enabled

Selected Tab Indicator

изображение

  • userChrome.Tabs.SelectedTabIndicator.Enabled

One Line

Снимок

  • userChrome.OneLine.TabBarFirst.Enabled
  • userChrome.OneLine.NavBarFirst.Enabled
  • browser.tabs.inTitlebar (Enable this key if there are problems with window control buttons. Set the value to 0)

Low values are more suitable for high resolution monitors.

  • userChrome.OneLine.NavBarWidth.Low.Enabled
  • userChrome.OneLine.NavBarWidth.Medium.Enabled
  • userChrome.OneLine.NavBarWidth.High.Enabled

Tabs On Bottom

изображение

  • userChrome.TabsOnBottom-Enabled
  • browser.tabs.inTitlebar (Required key. Set the value to 0)

FAQ

How to find/open user profile folder?

Profile

How to create custom keys?

Bool1
Num1

How to enable blur on Linux?
How to add third-party styles to WaveFox v1.x.130+?

Open userChrome.css and paste your code under the appropriate comment. Your code has the highest priority by default.

If you do not find the desired key, then your browser version does not support it.
How to enable Accent Color on Windows 11 / Windows 10?
  • browser.theme.windows.accent-color-in-tabs.enabled
How to enable Mica / Acrylic / MicaAlt on Windows 11?
  • widget.windows.mica
    • widget.windows.mica.toplevel-backdrop > 0 or 1 or 2 or 3 (Auto / Mica / Acrylic / MicaAlt)
  • widget.windows.mica.popups > 0 or 1 or 2 (Disabled / Enabled / Auto)
How to enable Tinting / Vibrancy on MacOS?
  • browser.theme.native-theme
  • widget.macos.titlebar-blend-mode.behind-window
  • widget.macos.sidebar-blend-mode.behind-window

Languages

CSS100.0%

Contributors

QNDESABOGL
MIT License
Created June 3, 2021
Updated March 9, 2026
QNetITQ/WaveFox | GitHunt