Skip to content

Firefox CSS Theme - For dark theme lovers / More compact / Modular / Blur

Notifications You must be signed in to change notification settings

datguypiko/Firefox-Mod-Blur

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Firefox Mod Blur - Modular

Version Updated Date Created

Installation Guide Extra mods Download Latest

FirefoxCss

πŸ”§ Version 3.0 - Working on functionality overhaul. Responsive oneliner, toggling extra mods through about:config and other adjustments.(some time in the future, when I have time to finish it)

Preview v 3.0 #129

macOS style buttons

FirefoxCss

Light and Dark theme support

FirefoxCss

Updated context menu design

FirefoxCss

Clean compact search with hidden buttons

FirefoxCss

Show if pinned on hover

FirefoxCss

More compact and responsive homepage

FirefoxCss

Wallpaper style themes

style_1-wallpaper-edition.css

FirefoxCss

style_2-wallpaper-edition.css

FirefoxCss

style_3-wallpaper-edition.css

FirefoxCss


Select and add extra styles and functions

Min-max-close buttons style βš™οΈ
Select one min-max-close_buttons.css

Left side MacOS style

FirefoxCss

Right side MacOS style

FirefoxCss

Right side OS

FirefoxCss

Left side OS

FirefoxCss

Theme default

FirefoxCss

Bookmarks bar modifications βš™οΈ popout_bookmarks_bar_on_hover.css

FirefoxCss

remove_folder_icons_from_bookmarks.css

FirefoxCss

bookmarks_bar_same_color_as_toolbar.css

FirefoxCss

transparent_bookmarks_bar.css

FirefoxCss

Search bar modifications βš™οΈ no_search_engines_in_url_bar.css

FirefoxCss

Privacy mods βš™οΈ privacy_blur_email_in_main_menu.css

FirefoxCss

privacy_blur_email_in_sync_menu.css

FirefoxCss

privacy_blur_tabs_content.css

FirefoxCss

privacy_change_email_text.css

FirefoxCss

Extension menu changes βš™οΈ Style 1 - cleaner_extensions_menu.css

FirefoxCss

Style 2 - cleaner_extensions_menu.css

FirefoxCss

Icon changes βš™οΈ firefox_view_icon_change.css

FirefoxCss

white_github_icon_in_bookmarks.css

FirefoxCss

ublock-icon-change.css

FirefoxCss

Active tab has static width βš™οΈ selected_tabs_static_width.css

FirefoxCss

Colored sound playing tab βš™οΈ colored_soundplaying_tab.css

FirefoxCss

Hide List all tabs button βš™οΈ hide_list-all-tabs_button.css [Shows when tabs overflow]

FirefoxCss

Restore icons in main menu βš™οΈ icons_in_main_menu.css (source)

FirefoxCss

Remove title text from homepage shortcuts βš™οΈ

remove_homepage_shortcut_title_text.css

FirefoxCss

Circular homepage shortcuts βš™οΈ

circular_homepage_shortcuts.css

FirefoxCss

Spill style theme πŸ”¨

spill-style-part1-file.css and spill-style-part2-file.css

FirefoxCss

FirefoxCss

Acrylic MicaForEveryone πŸ”¨

acrylic_micaforeveryone.css

FirefoxCss

and more..

πŸ”§ Installation

Important

1. In about:config set toolkit.legacyUserProfileCustomizations.stylesheets to "True" for your custom themes to work.
2. Download latest or your preferred firefox version .zip file.
3. You can find your profile folder by writing about:support in URL bar and using Open folder in Profile folder section.
4. Put userChrome.css, userContent.css, ASSETS in chrome folder (create chrome folder inside your main profile folder if it doesnt exist).
5. Put any selected extra .css modification files (not folders) from EXTRA MODS to inside of your chrome folder.
6. File Structure (required files/folders marked with *):

πŸ“‚ ... / your profile / chrome / userChrome.css *

πŸ“‚ ... / your profile / chrome / userContent.css *

πŸ“‚ ... / your profile / chrome / ASSETS * /

πŸ“‚ ... / your profile / chrome / [extra modification file].css

Tip

How to Toggle between Light and Dark theme:
There are two settings to change in firefox (pictures below).
  • Setting both to auto makes it adapt to your operating system theme.
  • Setting Theme(2) to Light or Dark will force it no matter of Operating System colors.
  • Best to leave Website Appearance(1) settings set to auto and just Change to preferred Theme(2).
  1. Website appearance (changes new tab and websites colors) image
  2. Theme (changes toolbar and browser text colors, also sets text colors to new tab page). image
I use firefox integrated Flexible space for spacing:

image


πŸ”§ Easy Installation Script by Alan-Kuan

Download https://github.com/Alan-Kuan/Firefox-Mod-Blur

Installation Instructions https://github.com/Alan-Kuan/Firefox-Mod-Blur#page_with_curl-installer-script


πŸ”§ MicaForEveryone Installation

Warning

Coming soon again in firefox v133,v134 or v135. Will probably come with v3.0.
  1. Download the portable or installation file from github.com/MicaForEveryone.
  2. Install the extra files it asks you to install. And run the program.
  3. At the bottom left corner press Add Rule -> Add Process Rule, type firefox -> add.
  4. On the left panel select and open firefox section. Change Mica to Acrylic for better blur effect.
  5. Dont forget to download my css file acrylic_micaforeveryone.css from EXTRA THEMES and put it inside Chrome folder (and base files from Installation guide above).
  6. Remove and dont use any other min-max-close window button files.
  7. Expermental:warning: In MicaForEveryone settings firefox section enable Blur Behind so when the window is not active it will still be blurred.

πŸ›‘οΈ Last Updates

GitHub last commit GitHub issues

v2.7.4 - 22/12/2023 - Tested on Firefox v121.0

  • Fix Linux context menu buttons (recent). 292553441-2d194c5d-56ad-477e-9a1e-997dcf70f539
  • Context menu back and forward buttons now dimmed when not active (recent).

v2.7.3 - 22/12/2023 - Tested on Firefox v121.0

  • Fix min/max/close buttons for Firefox beta, nightly (recent).
  • Fix buttons size in context menu. Issue since Firefox v121 update (recent). image
  • Change/fix background color of active search link (recent). image
  • Updated "icons_in_main_menu.css" mod (Nov 2, 2023).
  • Remove/Fix border from "Spill Theme" mod (fixed on Nov 19, 2023).
  • Added support for "privacy_change_email_text.css" mod to work with Icons in main menu (Dec 4, 2023).

v2.7.2 - 24/10/2023 - Tested on Firefox v119.0

  • Fix Tabs Background color for Firefox v119.0 update.
  • New extra mod added - show_searchbar_dots_only_on_hover.css. preview
  • Search box Dots position fix when translation button is active.
  • Extra Mods folder restructure.

v2.7.1 - 07/09/2023 - Tested on Firefox v117.0

v2.7 30/08/2023 Tested on Firefox v117.0.0

  • Fix button icon colors for Firefox v117.x
  • Fix window control buttons positioning for Firefox v117.x
  • Added new extra modification file Tabs Separator. Can be used with transparent tabs background mod.

Screenshot 2023-08-30 014146

image

  • MicaForEveryone no longer works with Firefox v117 and above. Read for more information.
  • Color changes to Customize Toolbar window:

firefox_2F08gSeXJY

v2.6.6 19/08/2023 Tested on Firefox v116.0.3

  • Some minor changes to tabs. Disabled selected tab width increase in specific condition because of weird transition animation. Still works in overflow and normally when tabs aren't taking full toolbar.
  • Updated the static tab extra mod selected_tabs_static_width.css to work with latest changes.

v2.6.5 13/08/2023 Tested on Firefox v116.0.2

  • Context menu fixes for Linux white theme.
  • Fix context menu duplicated separators for Linux.

v2.6.4 07/08/2023 Tested on Firefox v116.0.1

  • Selected tabs increase width by default now (use static mod file to disable it). preview
  • Added new modification file transparent_tabs_bg_color.css. previezzw
  • Added new modification file reversed_tabs_bg_color.css. previesw
  • Added new modification file selected_tabs_static_width.css. preview
  • Shadow for tabs now showed correctly.
  • Change tab color for micaforeveryone theme.

Tested on Firefox v116.0.1

v2.6.3 07/08/2023

  • Fix context menu for firefox v116.x image

v2.6.2 06/08/2023

  • Show security button in URL box correctly when website isn't secure. image
  • Sidebar background color change.
  • Fix space between pinned tabs and non-pinned tabs for Firefox 116.x image
  • Add support for extra mod file "pinned_tabs_no_bg_color.css". No copy pasting code required anymore.
  • Keyboard navigation fixes when selecting shortcuts in new-tab/homepage.

Tested on Firefox v115.0.2

v2.6.1 28/07/2023

  • Change search bar border on Light Theme.
  • Fix New Tab (home) page colors for Light Wallpaper Style Theme.
  • Fix Breakout search from moving up when opened.

v2.6 27/07/2023

  • Added extra mod file to change menu icon to firefox logo. menu_icon_change_to_firefox.css.
  • Permission Notification icon in url bar now showed correctly and isnt hidden until you block or allow specified permissions.
  • Light theme support added. Read installation how to toggle between dark and light.
  • Added Light theme support to MicaForEveryone theme.
  • Search, Menu and Private window button icon changed. imageimageimage

Tested on Firefox v115.0.1

v2.5.1 13/07/2023

  • Fix Search Bar dots positioning on linux.
  • Changed design of dots specifically for linux.
  • Changed opening animation of url bar buttons.
  • Some code clean up and restructure.

Tested on Firefox v115.0.1

v2.5 11/07/2023

  • CTRL+F Search bar color changes. image

  • Bottom left URL status panel color and border radius changes. image

  • Decreased pinned tabs Padding.

  • Added new mod to remove background color from pinned tabs. image

  • Revamped URL search bar buttons behavior. -- All buttons are now hidden. -- Added dots for visual representation. Left on by default for touch screen devices, have no way to test it. -- Changed animations for how buttons close. -- Hidden on new tab/homepage. -- Almost all Permissions are hidden by default visually. Just Press on permissions button to show blocked and allowed ones. -- Now less space wasted and more compact with long links and when resizing window. -- Will add extra modification later that makes dots hidden until search bar is hovered. Screenshot 2023-07-11 224030

08/07/2023 - v2.4.3 Firefox v115.0.1

  • New firefox update broke extensions menu again. Fixed padding and size for both extra mod styles. Only need to replace the cleaner_extensions_menu.css file if you are using the extra modification.

06/06/2023 - v2.4.2 Firefox v114.0

  • New update changed extension menu. Fix icon positioning for style 2 "cleaner_extensions_menu.css" extra mod.

22/05/2023 - v2.4.1 Firefox v113.x

  • Linux tested on Fedora GNOME and Mint Cinnamon.
  • Fixes on linux for context menus.
  • Fixes on linux for control buttons. Still need to manually change distance depending on how many buttons there are --firefoxcss-control-buttons-margin on line 44 in userChrome.css
  • Linux fixes for Min-max-close window buttons extra mods. Still need to manually change distance depending on how many buttons there are --firefoxcss-control-buttons-margin on line 44 in userChrome.css.

09/05/2023 - v2.4 Firefox v113.x

  • Fixed positioning of elements after some "-moz" attributes no longer used by firefox from v113.x.
  • When moving with tab or arrows in search now shows hover background color correctly.
  • Changed default min-max-close window control buttons to be on the right side. Lowered padding between buttons. Fixed order in v113.x.
  • Fixed Window control buttons increasing height of tab bar when firefox window made smaller. Was only the problem with default buttons.
  • Added an option for window controls mods to have menu bottons on the right or on the left side.
  • Fix separator color in context menu.
  • "Cleaner extension menu" mod fixes. It automatically adjusts the width if number of extensions below the number of icons set in a row which default is 3.
  • Top toolbar more compact with height lowered by 4 pixels.
  • Other minor changes.

01/04/2023 - v2.3.2 Firefox v111.x

  • Fixed "clean extension menu" mod so there is no empty space anymore no matter of how many extensions you have set in a row. If you have less than the number set (default 3) the width will adjust automatically. Now the default file doesnt have the separator line anymore.

26/03/2023 - v2.3.1 Firefox v111.x

  • Fixed and Reworked extension menu to use grid instead of flexbox, no width change required anymore. Now change "--firefoxcss-number-of-extensions-in-a-row" value to wanted extensions icon count in a row.

25/03/2023 - v2.3 Firefox v111.x

  • When moving with tab or arrows in search now shows hover background color correctly.
  • Fix separator color in context menu for v111.x

20/01/2023 - v2.3 Added extensions menu modifications for firefox v109.0.0; Merged some code lines and renamed extensions for cleaner code.

14/12/2022 - v2.2.1 Fix url bar icon size for firefox v108.0.0

08/12/2022 - v2.2

  • Circular homepage shortcuts - extra mod.

  • Give more width to active tab - extra mod.

  • Autohide tab and bookmarks bars - extra mod.

  • Search bar no border - extra mod.

  • Search bar transparent background - extra mod.

  • Fix padding for homepage shortcuts in wallpaper theme using no text mod.

29/11/2022 - v2.1 Added wallpaper style themes with 3 choices. Fixed Tab closing glitch. Fixeed spilled theme wallpaper file wrong destination folder. Fixed micaForEveryone support for Firefox Nightly after new update. Changed colors of sound/audio button in tabs. Other few minor fixes.

26/11/2022 - v2.0 Reworked theme files, structure and added new things with more options.

20/07/2022 - Changed wallpaper on a blank loading screen to a solid dark color for the "userContent-WallpaperEdition".

19/07/2022 - Added new theme with background wallpaper and blur effect.

10/06/2022 - Fixed padding in fullscreen after recent version changes.

14/05/2022 - Fixed after an update broken popup menu background color for 100.x versions of firefox.

13/02/2022 - Added new optional file for default size scrollbar. The color stays dark. Works best with new Windows 11 scrollbar. Use "userContent-Windows11_DefaultSizeScrollbar.css" file and rename it to "userContent.css".

πŸ“„ Other

Old version files backup: https://github.com/datguypiko/Firefox-old-files-backup

πŸ“„ Sources

Source for Backdrop filter: https://www.reddit.com/r/FirefoxCSS/comments/ddi4dc/testing_the_backdropfilter_in_the_url_dropdown/

icons_in_main_menu.css (source)