Dark Mode Suddenly Broke Yesterday

[nitro1261]

I installed Caprine a week ago when FB Messenger permanently discontinued support for OSX Mojave and I can't upgrade due to certain software I use that doesn't work on Catalina & Up.

It's been working fine on Dark Mode, then all of a sudden yesterday all the conversation content windows switched to having a white background and all the text blended into the white so I can't read anything.

Switching it to Light Mode and back to Dark Mode fixes it until you switch Conversations, then it breaks again.

Light Mode works fine.

OSX Mojave 10.14.6 Caprine 2.59.1

It was so sudden that I assume Facebook changed something on their end.

[FlaminSarge]

On the Mac version, I added this to the :root section of custom.css for the white bubble issue:

    --chat-incoming-message-bubble-background-color: #3a3e50 !important;

[nitro1261]

On the Mac version, I added this to the :root section of custom.css for the white bubble issue:

  --chat-incoming-message-bubble-background-color: #3a3e50 !important;

Thanks! So, that wasn't the right code to fix it... But, it did fix a problem that came up after I did find the fix lol. After I fixed the colors, it for some reason made the incoming chat bubbles white even though there was no code inserted to affect that.

This is what I'm using now.. It breaks my Light Theme, but I don't use Light theme so I guess that's OK. My OCD is frustrated that my software doesn't work properly even though the functionality I need works lol.

:root, .__fb-light-mode, .__fb-dark-mode {

    /* Incoming Message Bubble Background */
    --chat-incoming-message-bubble-background-color: #303030 !important;

    /* Chat Window Background Color */
    --messenger-card-background: #242527 !important;

    /* Other Persons Text Color */
    --primary-text: #e8e9eb !important;

}

If I change the first line to:

:root, .__fb-dark-mode {

then the code no longer works. I'm not familiar enough with CSS nor Caprine to understand why. i've tried removing commas and stuff too. If someone has a fix I'll implement it. Hopefully the above code helps someone :-)

Thanks!

[luziczek]

If I change the first line to:

:root, .__fb-dark-mode {

then the code no longer works. I'm not familiar enough with CSS nor Caprine to understand why. i've tried removing commas and stuff too. If someone has a fix I'll implement it. Hopefully the above code helps someone :-)

Thanks!

If you're using system settings for enabling dark mode then you can wrap it in a media query:

@media (prefers-color-scheme: dark) {
  :root, .__fb-light-mode, .__fb-dark-mode {
    /* Incoming Message Bubble Background */
    --chat-incoming-message-bubble-background-color: #303030 !important;

    /* Chat Window Background Color */
    --messenger-card-background: #242527 !important;

    /* Other Persons Text Color */
    --primary-text: #e8e9eb !important;
  }
}

It's working now only when dark mode is enabled in the system.

[nitro1261]

This fix is now broken. It just makes the background of the message windows a uniform white instead of having patches of black and white. But no longer keeps the background nicely black. Does FB go out of their way to make my life miserable? lol. I don't want to upgrade OSX to use new Messenger, and they keep making my Caprine ugly.

[luziczek]

Here you have the updated code. It now seems working even in light mode as well but requires app reload.

@media (prefers-color-scheme: dark) {
  :root, .__fb-light-mode, .__fb-dark-mode {
    --chat-incoming-message-bubble-background-color: #303030 !important;
    --messenger-card-background: #242527 !important;
    --primary-text: #e8e9eb !important;
    --background-deemphasized: #242527 !important;
    --messenger-card-background: #242527 !important;
    --mwp-message-row-background: #242527 !important;
    --hero-banner-background: #242527 !important;
  }
}

BTW do notifications work for you @nitro1261?

[nitro1261]

Here you have the updated code. It now seems working even in light mode as well but requires app reload.

That did the trick! Thanks so much @luziczek !

BTW do notifications work for you @nitro1261?

Those seem to be broken. I hear the sound but no popup. Is there a fix for that too?

[luziczek]

I have a problem with notifications for few days now as well. I have no idea how to fix that, I'm just some random guy 😂

[miranda]

I can't figure out how to fix dark mode. I tried the above code in custom.css in ~/.config/Caprine (which was empty) but nothing changed. Is there a different custom.css file somewhere, or is it supposed to go somewhere else? Please help... my eyes are bleeding.

[FlaminSarge]

~/.config/Caprine

On OSX Sonoma 14.3 my path was ~/Library/Application Support/Caprine/custom.css

[miranda]

~/.config/Caprine

On OSX Sonoma 14.3 my path was ~/Library/Application Support/Caprine/custom.css

Well I'm on Linux but I'm assuming ~/.config/Caprine/custom.css is the equivalent file. However putting that code in there doesn't change anything for me..

I guess I'm just not going to use this program until it's fixed. I will never understand why anyone would want their OS to be like staring into headlights.

[eartzh]

Well I'm on Linux but I'm assuming ~/.config/Caprine/custom.css is the equivalent file. However putting that code in there doesn't change anything for me..

I guess I'm just not going to use this program until it's fixed. I will never understand why anyone would want their OS to be like staring into headlights.

If you're using Arch linux, there's a recent update that upgraded the version of electron from 24 to 26, which breaks the dark mode. Reverting to the previous version works for me.

[miranda]

This fixed itself for me after the last Arch Linux electron update: electron26 (26.6.9-1 -> 26.6.10-1)