https://github.com/macx/facebook-focus-mode

Facebook enlarges icons, paddings and widths of elements on larger screens, which is theoretically good. Unfortunately, it also does it for secondary elements, what deflects. Until now! Welcome to Facebook Focus Mode for Desktop!
https://github.com/macx/facebook-focus-mode

facebook focus-mode stylus userstyles

Last synced: about 2 months ago
JSON representation

Facebook enlarges icons, paddings and widths of elements on larger screens, which is theoretically good. Unfortunately, it also does it for secondary elements, what deflects. Until now! Welcome to Facebook Focus Mode for Desktop!

• Host: GitHub
• URL: https://github.com/macx/facebook-focus-mode
• Owner: macx
• License: mit
• Created: 2022-01-17T08:03:45.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-17T10:55:28.000Z (over 4 years ago)
• Last Synced: 2025-12-28T08:18:52.016Z (6 months ago)
• Topics: facebook, focus-mode, stylus, userstyles
• Language: CSS
• Homepage:
• Size: 239 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Facebook Focus Mode

[![Install with Stylus](https://img.shields.io/badge/install%20with-stylus-2AFEFE)](https://raw.githubusercontent.com/macx/Facebook-Focus-Mode/main/facebook-focus-mode.user.css)

[![Version](https://img.shields.io/github/tag/macx/Facebook-Focus-Mode.svg?label=version)](https://github.com/macx/Facebook-Focus-Mode/tags)

Facebook enlarges icons, paddings and widths of elements on larger screens, which is theoretically good. Unfortunately, it also does it for secondary elements, what deflects. Until now! Welcome to Facebook Focus Mode for Desktop!

## Installation

1. Install the browser extension Stylus for [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne), [Firefox](https://addons.mozilla.org/en/firefox/addon/styl-us/), [Opera](https://addons.opera.com/en/extensions/details/stylus/) or Cascadea for [Safari](https://cascadea.app/) to apply this style.

2. Apply it here: [facebook-focus-mode.user.css](https://raw.githubusercontent.com/macx/Facebook-Focus-Mode/main/facebook-focus-mode.user.css).

## How does this work?

With a so-called user styles, you can override the styles from the origin page within your browser. You are a single click away, to apply the Focus Mode to your Facebook.

![Google Meets meeting preview](assets/images/fbfm-screen.webp 'In a meeting with the dark theme applied.')

## Features

### Navigation bar

- Decrease Facebook icon

- Remove icon background color

### Content Stage

- Increase width of Stories and Content

- Remove Rooms-Functionality (did you every used it?)

### Sidebars

- Decrease width of sidebars

- Sidebar fades out, fades in on hover

- Decrease Icon size and spacing

- Remove sponsored ad

- Hide Scrollbars

- Hide Search until hover

## Contribute

If you want to report a bug or you have a feature request instead, [fill an issue](https://github.com/macx/Facebook-Focus-Mode/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).