https://github.com/datguypiko/Firefox-Mod-Blur
Firefox CSS Theme - For dark theme lovers / More compact / Modular / Blur
https://github.com/datguypiko/Firefox-Mod-Blur
blur css firefox firefox-linux firefox-mod-blur firefox-modification firefox-style firefox-template firefox-theme firefox-windows firefoxcss modification theme userchrome userchromecss windows10 windows11
Last synced: 19 days ago
JSON representation
Firefox CSS Theme - For dark theme lovers / More compact / Modular / Blur
- Host: GitHub
- URL: https://github.com/datguypiko/Firefox-Mod-Blur
- Owner: datguypiko
- Created: 2020-02-29T14:04:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-21T19:38:32.000Z (24 days ago)
- Last Synced: 2025-03-22T22:09:59.450Z (23 days ago)
- Topics: blur, css, firefox, firefox-linux, firefox-mod-blur, firefox-modification, firefox-style, firefox-template, firefox-theme, firefox-windows, firefoxcss, modification, theme, userchrome, userchromecss, windows10, windows11
- Language: CSS
- Homepage:
- Size: 29.8 MB
- Stars: 1,462
- Watchers: 16
- Forks: 66
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-useful-projects - <img src="https://icon.horse/icon/github.com" height="20px" align="center"/>/datguypiko/Firefox-Mod-Blur - Firefox theme (Customizations / Other)
- awesome-useful-projects - <img src="https://icon.horse/icon/github.com" height="20px" align="center"/>/datguypiko/Firefox-Mod-Blur - Firefox theme (Jump To / Customizations)
- awesome-linux-ricing - Mod-Blur
README
Firefox Mod Blur - Modular
:wrench: 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 https://github.com/datguypiko/Firefox-Mod-Blur/issues/129
## 
macOS style buttons
## Light and Dark theme support
## Updated context menu design
## Clean compact search with hidden buttons
## Show if pinned on hover
## More compact and responsive homepage
## Wallpaper style themes
style_1-wallpaper-edition.css
style_2-wallpaper-edition.css
style_3-wallpaper-edition.css
Select and add extra styles and functions
Min-max-close buttons style :gear:
Select one min-max-close_buttons.css
Left side MacOS style
Right side MacOS style
Right side OS
Left side OS
Theme default
Bookmarks bar modifications :gear:
popout_bookmarks_bar_on_hover.css
remove_folder_icons_from_bookmarks.css
bookmarks_bar_same_color_as_toolbar.css
transparent_bookmarks_bar.css
Search bar modifications :gear:
no_search_engines_in_url_bar.css
Privacy mods :gear:
privacy_blur_email_in_main_menu.css
privacy_blur_email_in_sync_menu.css
privacy_blur_tabs_content.css
privacy_change_email_text.css
Extension menu changes :gear:
Style 1 - cleaner_extensions_menu.css
Style 2 - cleaner_extensions_menu.css
Icon changes :gear:
firefox_view_icon_change.css
white_github_icon_in_bookmarks.css
ublock-icon-change.css
Active tab has static width :gear:
selected_tabs_static_width.css
Colored sound playing tab :gear:
colored_soundplaying_tab.css
Hide List all tabs button :gear:
hide_list-all-tabs_button.css [Shows when tabs overflow]
Restore icons in main menu :gear:
icons_in_main_menu.css (source)
Remove title text from homepage shortcuts :gear:
remove_homepage_shortcut_title_text.css
Circular homepage shortcuts :gear:
circular_homepage_shortcuts.css
Spill style theme :hammer:
spill-style-part1-file.css and spill-style-part2-file.css
Acrylic MicaForEveryone :hammer:
acrylic_micaforeveryone.css
###### and [more](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS)..
:wrench: 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](https://github.com/datguypiko/Firefox-Mod-Blur/releases/latest).
> ##### 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 *):
>
> :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `userChrome.css *`
>
> :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `userContent.css *`
>
> :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `ASSETS *` `/`
>
> :open_file_folder: `...` `/` `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)
> 
> 2. Theme (changes toolbar and browser text colors, also sets text colors to new tab page).
> 
>
> I use firefox integrated Flexible space for spacing:
>
> 
>
:wrench: 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
:wrench: 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](https://github.com/MicaForEveryone/MicaForEveryone/releases).
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.
:shield: Last Updates
`v2.7.4` - `22/12/2023` - Tested on Firefox v121.0
- Fix Linux context menu buttons (recent).
- 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).
- Change/fix background color of active search link (recent).
- 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](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Search%20Bar%20Mods/Search%20box%20-%20dots%20show%20only%20on%20hover).
- 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
- Made Back and Forward icons a bit smaller to be more inline with other buttons.
- New extra mod added - [align search text to the left side](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Search%20text%20aligned%20left%20side) `searchbox_text_align_left.css`.
- New extra mod added - [tabs take full bar width](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Full%20Width%20Tabs) `tabs_take_full_bar_width.css`.
`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](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Tabs%20Separator) `Tabs Separator`. Can be used with transparent tabs background mod.
- MicaForEveryone no longer works with Firefox v117 and above. [Read for more information](https://github.com/datguypiko/Firefox-Mod-Blur#wrench-micaforeveryone-installation).
- Color changes to Customize Toolbar window:
`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](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Tabs%20-%20selected%20tabs%20static%20width) `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).
- Added new modification file `transparent_tabs_bg_color.css`.
- Added new modification file `reversed_tabs_bg_color.css`.
- Added new modification file `selected_tabs_static_width.css`.
- 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
`v2.6.2` `06/08/2023`
- Show security button in URL box correctly when website isn't secure.
- Sidebar background color change.
- Fix space between pinned tabs and non-pinned tabs for Firefox 116.x
- Add support for extra mod file "[pinned_tabs_no_bg_color.css](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Pinned%20Tabs%20Have%20no%20background%20color)". 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](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Icon%20mods).
- 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.
### 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.
- Bottom left URL status panel color and border radius changes.
- Decreased pinned tabs Padding.
- Added new mod to remove background color from pinned tabs.
- 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.
`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](https://github.com/datguypiko/Firefox-Mod-Blur/tree/master/EXTRA%20MODS/Min-max-close%20window%20buttons) 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".
:page_facing_up: Other
> Old version files backup: https://github.com/datguypiko/Firefox-old-files-backup
:page_facing_up: Sources
> Source for Backdrop filter: [`https://www.reddit.com/r/FirefoxCSS/comments/ddi4dc/testing_the_backdropfilter_in_the_url_dropdown/`](https://www.reddit.com/r/FirefoxCSS/comments/ddi4dc/testing_the_backdropfilter_in_the_url_dropdown/)
> icons_in_main_menu.css (source)