knutkirkhorn / dark-facebook-messenger-theme

🕶️ Cool dark red Facebook Messenger theme

🕶️ Cool dark red Facebook Messenger theme

Installation

Using the browser plugin Stylus

1. Get the Stylus plugin:
   • For Firefox
   • For Chrome
2. Click here to install the theme using Stylus.
3. Click Install style and go to https://www.messenger.com or https://facebook.com/messages to view the result️️

Alternative manual installation

1. Get the Stylus plugin:
   • For Firefox
   • For Chrome
2. Click the Stylus plugin image → Manage → Write new style
3. Enter a name for the style. E.g: Dark Facebook Messenger Theme
4. Copy this CSS into the textarea
5. Click Save and go to https://www.messenger.com or https://facebook.com/messages to view the result️️

Change favicons using Greasemonkey (Optional) (currently only for Firefox)

If you want to change the favicons of the websites as well as the css-style:

1. Get the Greasemonkey plugin
2. Click the Greasemonkey plugin image → New user script...
3. Copy this JavaScript code into the textarea
4. Click the save icon or press Control + S and go to https://www.messenger.com or https://facebook.com/messages to view the result️️

dark-facebook-messenger-theme's Issues

Fix CI

Respond to a message

Hi,

When I or someone else reacts to a earlier typed message, the box is white. Can you fix this?

Kind regards, Ferry Dekker

Logo

Consider adding a logo to the project.

New messenger theme breaks this theme

With the new messenger theme it seems that most of the theme stylings does not work.
This might be due to changes in CSS class names or other structure.

Stylish does now contain spyware

Problem

The owner of Stylish sold the plugin and the new owners added spyware code. Source.

Solution

Remove Stylish installation in readme and make a new way of using the style.

There are multiple new ways of handling the .css solutions to this problem. Some are:

1. Using a different plugin like Stylus. It is based on the same code as Stylish.
2. Make a standalone extension
3. Make a own different way of using custom .css-files for webpages.

Color images

Problem

There are images that are made for the default messenger theme that are blue.
Images:

• 
• 

Solution

Find a way to color these images.
A solution could be to create new images that are a new color and store the alternative colored images in this repo. Then one can override the css style to point to a new image.

Change favicon

Problem

The current favicon is blue and does not match the theme.

Solution

Create a script that can change the favicon dynamically on load. The favicon for both https://facebook.com and https://messenger.com should be changed, and to different icons.
The icon at https://messenger.com can be the one used in the repo logo.

Change favicon on Google Chrome

Find a solution for changing favicons (set up javscript to run on webpages) on Google Chrome

Direct link to add the css to the list

There is a way that only by clicking a link it appears a page to install the css on the stylus extension.

Don't know how it is made by it makes the job a lot easier.

Any chance for a JS variant?

Trying to use this lovely theme with Hamsket, which allows JS injection but not SCSS sadly.

Example image

Add example image of the theme in the readme

Fix searchbar coloring

Currently the searchbar for friends in "facebook.com" is getting a new color aswell. This is not intended.