auscompgeek/fb-messenger-dark

:speech_balloon: Dark Facebook Messenger theme

fb-messenger-dark's Issues

New Sticker Icon Miscolored

Still rocking this absolutely awesome style 😄
Facebook has changed the "sticker" icon, and this time apparently they made it all-black in their sprite sheet instead of gray. Screenshot

I have temporarily fixed it with this line:

._30yy._4rv6._39bk { -webkit-filter: invert(100%); opacity: .55; }

Messenger header text is dark

The "Messenger" header in the top corner's color is not being changed to white. This seems to be because it is an h1 which is not covered by this userstyle. Adding h1 to the rule with the other headers fixes the issue:

h1, h2, h3, h4, h5, h6
{
    color: #eee;
}

Here is a screenshot showing the problem I am talking about:

Find a better way to select the message request and clear search icons

Remove background color for emoji-only messages

Facebook Messenger finally updated how emoji-only messages appear on the web app.

Just like on the Messenger mobile app, emoji-only messages should not be in chat bubbles.

White borders around messages

Hey, seems FB just pushed an update that makes some changes to the chat bubbles, a fix for the white borders just to add border color for own and other messages:

/* message */
._29_7 ._hh7, ._29_7._-5k ._hh7 {
	background-color: #2d2d30;
    border-color:#414141;
}
/* own message */
._o46._nd_ ._hh7 {
	background-color: #004488;
    border-color:#000000;
}

The color for the border for each message could be changed, the own one is pure black, while the other one is dark gray, but slightly lighter than the background. I am not sure how it was before, but I think it looks nice!

Top bar lost it's shade of gray

Great theme, great updates as always!

One thing has been bugging me a bit lately, I think Facebook changed some class names or something, because the theme kind of broke a bit.

The top bar used to be lighter, framing the chat content nicely, but now it has the same background as the chat content, leaving only the right panel with the lighter color.

How the screenshot in the README looks, and how the theme looked until ~1 mo ago:

How the theme currently looks on messenger.com:

Hopefully easily fixed!

Ubuntu 12.04 LTS: Text-enter box remains white

See attached image.

Error started happening after the most recent (Jan 26th) update

Styling broken for replies

Describe the bug:
Messenger recently introduced message replies. The styling is a little broken for them.

Steps to reproduce:

1. View a message reply (particularly a reply that is only emojis, so not in a bubble)
2. It won't look good

Screenshots:

Additional context:
I was able to make it look pretty good by adding the following styles:

/* replies */
._4k7a {
  color: rgba(255, 255, 255, .5) !important;
}

._3058._s1-._6e6n {
  border-color: transparent !important;
  background-color: #2d2d30 !important;
}

._pyf {
  background-color: rgba(255, 255, 255, .3) !important;
}

Call log icons are inverted

The small missed call log icons are inverted by the invert filter brightness hack. Oops.

Does not work after Facebook's December rewrite

Well, at least it just plain wholesale doesn't work, rather than half applying.

Highlight selected users in searchbar

Desc: In searchbar pressing button up/down to select users, they should be highlighted. Otherwise one can not see who is selected.

Reproduce: Click in searchbar top left, click kb buttons up/down.

Fix:

._1k1p {
    background-color: rgba(255, 255, 255, .4) !important;
}

White background behind "composing" bubble

It's that time of the year again when Facebook arbitrarily changes class names and styling to break this otherwise impeccable theme 🤓

The background behind the three-dots-in-a-bubble has turned white since a few weeks.

I've been using this hotfix which seems to work well:

._4gd0 {
  background: transparent !important;
}

Add syntax highlighting themes for code bubbles

Messenger.com's Prism.js theme is pretty terrrible with the dark background we're using…

Bar below chat box

I dont know how to use git properly

you need to add this code to the css

._4_j4 .chatAttachmentShelf {
border-top: none;
}

I'd love to be a contributor, just don't know how to add stuff.