Giter Club home page Giter Club logo

messenger-dark-theme's Introduction

messenger-dark-theme (DEPRECATED)

This extension is no longer necessary as facebook rolled out a native dark theme for messenger.com in mid 2024. Follow these instructions to enable it.

I left this up for three months to give people time to switch, but I've since unpublished it from the chrome and edge stores.

Enabling the native dark theme

You can enable the native dark theme via the preferences in the bottom left menu.

Enabling native dark theme

Previous README

A simple dark theme for Facebook Messenger.

Get it from the Chrome Web Store or the Edge Web Store.

Messenger Dark Theme example

messenger-dark-theme's People

Contributors

jerry1100 avatar dreamtigers avatar

Stargazers

Simeon avatar Dalibor Hon avatar Patrick Han avatar Andras Schenkerik avatar Sabit Azad avatar Feriman avatar  avatar Kala avatar Balazs Saros avatar John Barounis avatar  avatar Michael You avatar Christian Gamborg-Nilsen avatar Miłosz Maculewicz avatar Bruno Breña Ramírez avatar Loc Quan avatar Jakub Suchenek avatar Nathan Doyle avatar Roman Kupchak avatar Front Olilang avatar Ahmed Aziz Abbassi avatar Filip Hodun avatar Yukai Huang avatar Jakub Čábera avatar Matthew Brown avatar  avatar  avatar Gergely Kocsis avatar  avatar Nguyen Van Hiep avatar Reid Manares avatar Andrés Romero avatar echo r"0xX4H" | rev avatar Artur Mostowski avatar Zdrowy Gosciu avatar z0xx avatar

Watchers

John Barounis avatar James Cloos avatar Jakub Čábera avatar  avatar  avatar DAPTheDeveloper avatar  avatar

messenger-dark-theme's Issues

Follow System Dark Mode Settings

It would be nice if the plugin followed the system dark mode settings so when your system is in light mode messenger would be in light mode and if your system is in dark mode then messenger would be in dark mode. (You could do this with media queries.)

Display issue - black text on grey bubbles

As described before, there was probably an update or something today that broke the extension and now the colors are wrong. Looking forward to the fix. Thanks for making this extension, I have been using it as long as I can remember and it has been a godsend for years.

Example:
image

Error installing via MS edge store

When you try and install the package via the Microsoft edge store it returns an error sayin "Package is invalid. Details: "Couldn't load icon icons/icon16.png specified in icons."

Extension suddenly doesn't work

I've been using the extension for a long time, and oh boy, my eyes had a great time. Yesterday, my Messenger suddenly reloaded, and the extension was deactivated. Gone are the days my eyes are pleased. I tried restarting the system, removing and redownloading the extension. Nothing worked. I'm on Microsoft Edge Desktop.

Suddenly Not Working

Good day!

The plugin suddenly stopped working. Can I get some assistance?

Thanks!
image

Selected and hovered contacts not noticeable

When a chat is selected or hovered their background color is almost the same as the general background color. So I can't see which chat is selected.
image

When I click on a chat for a moment (of clicking) there is a different color)
image

That color should be also when a chat is selected and hovered or even 3 different (but noticeable) colors for every state.

Some icons have broken

It seems that, recently, Facebook made some changes that stopped the selectors from applying to every icon properly. Some of them are no longer changed to white:

Make Sidebar Text Less White

The text in the sidebar is really white. In the windows desktop client if the message has already been seen then the text turns a lighter grey (something like #CCC) which makes it easier to look at.

Recipient text is white on white in Edge

Using Edge with v1.7, changes at the Meta end have made the recipient text turn white on a white text block. It is unreadable. Sender text is fine. Used to work perfectly.

Non-reply sent messages in themed chats have the standard blue color instead of theme color

I have a chat that has an orange theme. In the mobile app, the sent messages are themed in an orange gradient (gets lighter as it moves upward).

In messenger.com with your extension, the non-reply sent messages get a standard blue color while the reply-style sent messages get the orange theme. The Like symbol also gets the orange theme.

image image

Expectation: all sent messages follow the theme.

Message Area is color white

Similar to before, messenger probably updated again resulting to the extension not working properly and leaving the chat area background color white.

The area in question is this:
image

The class in question:
image

The variable came from here:
image

Call buttons changed to white

Call buttons that are above the chat for making voice and video calls changed to white. They should be blue like the 3 dots button.
image

Without the dark style they are blue.
image

Could you fix that it would be blue?

Thumbs-up sign emoji color changed to white

The thumbs-up sign emoji that can be quickly inserted to the chat with a button changes it's color to white.
image
This is how it looks without the add-on:
image
Could you fix that its color wouldn't be changed?

Official "Dark Mode" has arrived!

I noticed that messenger.com has a new look (though I don't really like it because they added so much dead space around each of the panels, and there's also a dead scrollbar on the right edge).

And I looked in the Preferences pane and noticed this:

image

I disabled the extension, and the official Dark Mode works well. I guess I may not need this extension anymore, although if you'd write another one to fix the dead space and dead scrollbar, I'd be all over it.

Please keep this repo and extension though, as I don't know if everyone has this update already or not. Could be a limited beta or something.

White background of incoming chat bubbles

image
This started like a few days ago, and no matter what theme the chat has.

I'm using Edge, so maybe that's why this bug occurs, but I have been using this extension for a long time and it's the first time seeing this.

Adding options of other shades of darkness? 😎

Hi, your extension compared to the other dark mode extension called Charcoal seems better at a quick comparison glance, especially, how the buttons (f.e. reply, react) are visible, and the scroll bars are also dark, among other quality of life stuff. Simply, yours is the better extension.

But Charcoal is darker, it's closer to the OLED full black - I believe it's called something like this. I don't know anything about development, I'm just a casual user, but would you be able to add darker shades of blacks we could choose from? I prefer a darker shade of gray, or even almost fully black compared to your lighter gray.

Messenger update killed readability

They updated something on messenger tonight, and the incoming chat's colors can no longer be read. It's a white background bubble with a very light grey looking text. The only way to read it with the dark theme on is to highlight it.

white text boxes

i can't read the messages because text boxes are white after i added this extension. This only applies to the replies of the person im talking to.

Scrollbars stay white (Chrome v120 + Win11 & MacOS)

The scrollbars look like this on both Win11 and MacOS:
messenger

The system and browser themes are also set to dark on both systems.
I also checked other websites with built-in dark mode and the scrollbars are dark everywhere, but here.
I added this line to :root and it seems to fix the issue:
:root { color-scheme: dark; }

code

messenger_fixed

Can you please fix this?
Thanks in advance!

White message background

Hello. The plugin is currently not working properly. Shows a white background in messages from friends. Is it possible to fix it? I love this extension and would love to continue using it. Thank you very much! :)
white_messages

Background of menus and settings

Hello,
is there a chance that you'll also change the color of background of setting list (and other list - conversation settings and profile menu - the one after you click on your profile pic) to darker one, like everywhere else?
image

A Few Missed Icons

Hello,

It looks like there are a few places where the extension isn't colouring the Messenger icons correctly. These include:

  1. The show (and hide) additional actions button.

image

  1. The hole inside the Change Theme preview icon.

image

  1. The Create new room button in the Chat panel.

image

safari support

Just want you to know that the extension in its current form works perfectly in Safari. Just ran the following command on src folder

xcrun safari-web-extension-converter

And then ran on Safari. Unfortunately distribution of Safari Web Extensions requires a developer license

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.