Caprine: Use official Messenger dark mode

Created on 8 Dec 2020  路  10Comments  路  Source: sindresorhus/caprine

Facebook actually has an official dark mode for Messenger. Take a look https://www.facebook.com/messages/ go there with dark mode on facebook.com. Then there is an iframe with a token (if you want to hide the facebook bar) and that iframe is messenger.com in dark mode. This even has stickers and gifs in dark mode and should be easy to implement

Most helpful comment

messenger.com at the moment is basically facebook.com/messages
While there is no button to trigger the dark mode you can easily do that by adding class "__fb-dark-mode" to the html
image

All 10 comments

Thanks for pointing that out however Messenger is rolling out a major UI redesign which will break (and is already breaking) almost all of Caprine features. This is currently a priority for us, including fixing the current way we handle dark mode. We will look into this option in the future but in my opinion, we should wait for Messenger.com to get native dark mode instead of hacking around facebook.com/messages.

Waiting might be in vain, messenger.com does not have dark mode for quite a lot of time now, compared to facebook.com/messages. Hopefully messenger.com will also get the facelift, yet I doubt that.
As an interesting fact, I asked some facebook employees how is their messenger.com looking, they do get the blueish dark mode as default.

messenger.com at the moment is basically facebook.com/messages
While there is no button to trigger the dark mode you can easily do that by adding class "__fb-dark-mode" to the html
image

as a workaround based on @dexter93 answer, trigger dev tools with F12 and add __fb-dark-mode the class to the html

If there would be a way to execute JS on startup this would apply this class automatically:
document.querySelector('html').classList.add('__fb-dark-mode')

@dexter93 thanks for that awesome info. That seems to work on new design only since I have the old design of messenger and it doesn't work. I'd like to ask @CvX about this. If this actually works on the new design, we could ditch our dark mode altogether and just add patches that we'd like to the both dark mode and light mode. Of corse, we'll keep custom CSS feature there.

@dexter93 thanks for that awesome info. That seems to work on new design only since I have the old design of messenger and it doesn't work. I'd like to ask @CvX about this. If this actually works on the new design, we could ditch our dark mode altogether and just add patches that we'd like to the both dark mode and light mode. Of corse, we'll keep custom CSS feature there.

no probs. I got tired of eye bleeding white so I took a look deeper

you can pull my current dark mode enabled commits here and try it out
https://github.com/sindresorhus/caprine/issues/1452#issuecomment-742886261

@dusansimic commented on 2020. dec. 8. 12:10 CET:

Thanks for pointing that out however Messenger is rolling out a major UI redesign which will break (and is already breaking) almost all of Caprine features. This is currently a priority for us, including fixing the current way we handle dark mode. We will look into this option in the future but in my opinion, we should wait for Messenger.com to get native dark mode instead of hacking around facebook.com/messages.

Seems like that's already is happening. And dark mode is broken already.

FYI, I currently have a dark mode enabled messenger.com.

Is the features breaking problem including notifications in Caprine not working?

The fix is merged into master so dark mode will work on next Caprine update.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kingmustard picture kingmustard  路  3Comments

sindresorhus picture sindresorhus  路  4Comments

PanagiotisGts picture PanagiotisGts  路  4Comments

Vexorify picture Vexorify  路  3Comments

linuxlite picture linuxlite  路  4Comments