Caprine: Dark mode suddenly stopped working.

[MattCharb]

Vibrancy appears to be not working either. Every other app works fine.. Darkmode is default setting for my OS... Not sure what happened. Tried also reverting to previous versions with no avail. Switching from Darkmode to Follow System Settings doesn't work. Neither does toggling system dark mode/light mode.

Screen

[chaniatwang]

Block unseen indicator not work too.

[meszarosdezso]

Duplicate of #1439
Looks like Caprine features stopped working after the latest messenger.com update. We just have to be patient for now.

[dusansimic]

Thanks for the detailed screenshots @MattCharb 😁. I'd like to ask you to help me out with something. Could you open a web browser and see if the same UI changes are present on the Messenger.com website. If they are, would you be so kind to copy the page source, paste it into a file, and upload it here send it to me so I could look over it and start working on fixing these issues? Keep in mind that this would also display for me everything that you can see on the website at that moment (including messages).

If you'd like to do it, you can open Page Source View with right click anywhere and clicking the "View Page Source" menu option. Just copy everything and pase it into a file. Thanks in advance for this!

Edit:
The reason for asking for this is that I haven't yet received the UI update so I can't do anything without the UI.

[BloodRaven0]

@dusansimic Wouldn't that be a horrible idea? Besides private messages, it would also contain the session ID that would allow people to hijack his account and write to his contacts. There has to be a better way to do this. Can't you manually opt into the new UI? It's strange they are rolling it out to random people over time, the reasoning behind facebook decisions always eluded me.

[dusansimic]

@BloodRaven0 actually it won't contain the session id since it's stored in the Local Storage and Cookies, not the HTML itself. What it will contain are the messages which have been loaded. There won't be any more information than it's shared already in the pictures in the original post. However, that's absolutely up to the person who will or will not share the page source. However I think it would be better to send it to me directly instead of uploading it here.

I've warned what will be visible to me.

Keep in mind that this would also display for me everything that you can see on the website at that moment (including messages).

Facebook and most other platforms roll-out new UI or features randomly to test them, that's not new to us. Personally I don't know any better way to get my hands on the new UI to fix the issues except waiting for the UI to release for me or some other contributor which we have no idea when (and if) could happen.

[CvX]

@dusansimic @BloodRaven0 I recommend using this snippet I've made a while back exactly for this purpose: https://gist.github.com/CvX/acad4654a1bb27e184741156c57b0ea0
It should scrub all personally identifiable information.

[BloodRaven0]

@CvX oooh nice, how can I use that? Sorry I'm not a coder, this might be a really dumb question, but do bear with me :D

[CvX]

That's a good question! 🙂 The instructions are:

1. Open Dev Tools (in Google Chrome, Caprine, or any browser really)
   The shortcut should be command+option+i on Mac or control+shift+i on other platforms
2. Go to the Console tab
3. Paste the snippet and press return (it shows the scrubbed document and copies it to clipboard)
4. Create a gist with the copied content and paste the link to it here in a comment

The output, when saved to a file and opened in a browser, will look something like this:

[BloodRaven0]

@CvX @dusansimic Ehh, I'm not sure if I did this correctly, but I did follow your steps:
https://gist.github.com/BloodRaven0/3a33592671a8c7681e877737f9c486d9
I just put waaaaay too many smileyfaces, I think useful information was lost, aswell as personally-idnetifiable... Let me know if this is useful for anything :D

[CvX]

No, it's good! You can remove the gist now. Turns out facebook managed to cram personal stuff (e.g. names) in even more places, I'll have to revise my script…

[CvX]

(I've updated the snippet)

Anyway, the Messenger update doesn't look good for Caprine… For example, the current conversation link has these classes:

oajrlxb2 gs1a9yip g5ia77u1 mtkw9kbi tlpljxtp qensuy8j ppp5ayq2 goun2846 ccm00jje s44p3ltw
mk2mc5f4 rt8b4zig n8ej3o3l agehan2d sk4xxmp2 rq0escxv nhd2j8a9 a8c37x1j mg4g778l btwxx1t3
pfnyh3mw p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x tgvbjcpo hpfvmrgz jb3vyjys rz4wbd8a
qt6c0cv9 a8nywdso l9j0dhe7 i1ao9s8h esuyzwwr f1sip0of du4w35lb lzcic4wl abiwlrkh p8dawk7l
ue3kfks5 pw54ja7n uo3d90p7 l82x9zwi

Each one changes exactly one CSS property. So it's no longer possible to identify elements by their classes.

[dusansimic]

Each one changes exactly one CSS property. So it's no longer possible to identify elements by their classes.

I think it will be possible, we'll just have to start from scratch for every single feature Caprine has 😕.

From the page source @BloodRaven0 provided I think all messages have .g5ia77u1.jwdofwj8.pby63qed class attribute and some divs also have role attributes which seems like we could make it work.

[BloodRaven0]

Hmm, strange thing. Even though the UI on my main PC is updated and I can't revert it to the old style, the UI on my laptop is still the old one, both in Caprine and in my browser. So it's not account-bound, but system-bound somehow.

[MattCharb]

Well, Caprine 2.51.1 is now back in Dark Mode - it toggles back and forth and also follows with system settings. The "hide names and avatars" feature also works again, as well as vibrancy settings. None of these worked before. Soo... What'd y'all do?

[Syndamia]

Even though the UI on my main PC is updated and I can't revert it to the old style, the UI on my laptop is still the old one, both in Caprine and in my browser. So it's not account-bound, but system-bound somehow.

Isn't it a cookie thing? I remember when YouTube went to their new layout, if you had an old cookie, or modified the existing one, you could get the old style back (at least for a while, I think they patched it).

None of these worked before. Soo... What'd y'all do?

Are you sure you are seeing the new layout? For me (before I updated to 2.51.1) messenger on Caprine magically reverted to the way it was before.

Probably the easiest way to tell is when you are hovering over a conversation, do you get some sort of a rectangle with rounded corners (like on the second conversation in the screenshot)?

Also, here I mentioned that custom CSS (that you insert with JavaScript) didn't really work anymore, well, for some reason, now it works on the new layout.

[Sov3rain]

Hi there. Reporting the same issue here. None of the customization options seems to work anymore (rezise text, dark mode, etc).

I'm on Windows 10 1909, Caprine 2.51.2, and it seems like Messenger got an update today that broke everything.

[Artivain]

Same problem here, Windows 10 latest version and caprine 2.21.2.

New UI, and dark mode is broken, and also the messenger menu reappeared :

In previous version it was hidden and settings were available in the caprine settings.

[1nikolas]

Hey everyone. Why are you trying to fix custom dark mode instead of using facebook's official one? 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), use that and boom dark mode. This should be easy to implument

EDIT: I think I should open a new issue

[Syndamia]

I mean, this issue is mostly about dark mode on Caprine, but the bigger issue is that Messenger changed their layout, which renders most of Caprine's features broken.

[StoyanDimitrov]

It is broken because Messenger is now using the https://www.facebook.com/messages frontend. So I copied the dark theme definitions from the Facebook and added them to the custom CSS file of the application. Note the .dark-mode prefix to :root. It is not perfect but I can bare the issues for now. Grab yourself the stylesheet below.

Edit: Well, they are switching between the two frontends so it is a hit and miss...

.dark-mode:root {

  --fds-active-icon: #000;

  --fds-attachment-footer-background: #000;

  --fds-black: #000;

  --fds-black-alpha-05: #0000000d;

  --fds-black-alpha-10: #0000001a;

  --fds-black-alpha-15: #00000026;

  --fds-black-alpha-20: #0003;

  --fds-black-alpha-30: #0000004d;

  --fds-black-alpha-40: #0006;

  --fds-black-alpha-50: #00000080;

  --fds-black-alpha-60: #0009;

  --fds-black-alpha-80: #000c;

  --fds-blue-05: #000;

  --fds-blue-30: #000;

  --fds-blue-40: #000;

  --fds-blue-60: #000;

  --fds-blue-70: #000;

  --fds-blue-80: #000;

  --fds-blue-95: #000;

  --fds-blue-badge: #000;

  --fds-blue-link: #000;

  --fds-button-icon: #000;

  --fds-button-text: #000;

  --fds-comment-background: #000;

  --fds-dark-mode-gray-35: #000;

  --fds-dark-mode-gray-50: #000;

  --fds-dark-mode-gray-70: #000;

  --fds-dark-mode-gray-80: #000;

  --fds-dark-mode-gray-90: #000;

  --fds-dark-mode-gray-100: #000;

  --fds-dark-ui-card-border: #000;

  --fds-dark-ui-cards: #000;

  --fds-dark-ui-disabled-icon: #000;

  --fds-dark-ui-divider: #000;

  --fds-dark-ui-medium-text: #000;

  --fds-dark-ui-nav-bar: #000;

  --fds-dark-ui-primary-icon: #000;

  --fds-dark-ui-primary-text: #000;

  --fds-dark-ui-secondary-icon: #000;

  --fds-dark-ui-secondary-text: #000;

  --fds-dark-ui-tab-bar: #000;

  --fds-dark-ui-wash: #000;

  --fds-data-mango: #000;

  --fds-disabled-icon: #000;

  --fds-disabled-text: #000;

  --fds-divider-on-wash: #000;

  --fds-divider-on-white: #000;

  --fds-fast: 200ms;

  --fds-fb-blue-70: #000;

  --fds-fb-blue-75: #000;

  --fds-gray-00: #000;

  --fds-gray-05: #000;

  --fds-gray-10: #000;

  --fds-gray-20: #000;

  --fds-gray-25: #000;

  --fds-gray-30: #000;

  --fds-gray-45: #000;

  --fds-gray-70: #000;

  --fds-gray-80: #000;

  --fds-gray-90: #000;

  --fds-gray-100: #000;

  --fds-green-30: #000;

  --fds-green-55: #000;

  --fds-green-60: #000;

  --fds-green-70: #000;

  --fds-highlight: #000;

  --fds-highlight-cell-background: #000;

  --fds-list-cell-pressed: #000;

  --fds-mobile-wash: #000;

  --fds-nav-bar-background: #000;

  --fds-negative: #000;

  --fds-notification-badge: #000;

  --fds-placeholder-text: #000;

  --fds-positive: #000;

  --fds-primary-button-pressed: #000;

  --fds-primary-icon: #fff;

  --fds-primary-text: #fff;

  --fds-red-55: #000;

  --fds-secondary-button-pressed: #000;

  --fds-secondary-icon: #000;

  --fds-secondary-text: #000;

  --fds-slow: 400ms;

  --fds-soft: cubic-bezier(.08,.52,.52,1);

  --fds-spectrum-aluminum: #000;

  --fds-spectrum-aluminum-dark-1: #000;

  --fds-spectrum-aluminum-dark-2: #000;

  --fds-spectrum-aluminum-dark-3: #000;

  --fds-spectrum-aluminum-tint-15: #000;

  --fds-spectrum-aluminum-tint-30: #000;

  --fds-spectrum-aluminum-tint-50: #000;

  --fds-spectrum-aluminum-tint-70: #000;

  --fds-spectrum-aluminum-tint-90: #000;

  --fds-spectrum-blue-gray: #000;

  --fds-spectrum-blue-gray-dark-1: #000;

  --fds-spectrum-blue-gray-dark-2: #000;

  --fds-spectrum-blue-gray-dark-3: #000;

  --fds-spectrum-blue-gray-tint-15: #000;

  --fds-spectrum-blue-gray-tint-30: #000;

  --fds-spectrum-blue-gray-tint-50: #000;

  --fds-spectrum-blue-gray-tint-70: #000;

  --fds-spectrum-blue-gray-tint-90: #000;

  --fds-spectrum-cherry: #000;

  --fds-spectrum-cherry-dark-1: #000;

  --fds-spectrum-cherry-dark-2: #000;

  --fds-spectrum-cherry-dark-3: #000;

  --fds-spectrum-cherry-tint-15: #000;

  --fds-spectrum-cherry-tint-30: #000;

  --fds-spectrum-cherry-tint-50: #000;

  --fds-spectrum-cherry-tint-70: #000;

  --fds-spectrum-cherry-tint-90: #000;

  --fds-spectrum-grape: #000;

  --fds-spectrum-grape-dark-1: #000;

  --fds-spectrum-grape-dark-2: #000;

  --fds-spectrum-grape-dark-3: #000;

  --fds-spectrum-grape-tint-15: #000;

  --fds-spectrum-grape-tint-30: #000;

  --fds-spectrum-grape-tint-50: #000;

  --fds-spectrum-grape-tint-70: #000;

  --fds-spectrum-grape-tint-90: #000;

  --fds-spectrum-lemon: #000;

  --fds-spectrum-lemon-dark-1: #000;

  --fds-spectrum-lemon-dark-2: #000;

  --fds-spectrum-lemon-dark-3: #000;

  --fds-spectrum-lemon-tint-15: #000;

  --fds-spectrum-lemon-tint-30: #000;

  --fds-spectrum-lemon-tint-50: #000;

  --fds-spectrum-lemon-tint-70: #000;

  --fds-spectrum-lemon-tint-90: #000;

  --fds-spectrum-lime: #000;

  --fds-spectrum-lime-dark-1: #000;

  --fds-spectrum-lime-dark-2: #000;

  --fds-spectrum-lime-dark-3: #000;

  --fds-spectrum-lime-tint-15: #000;

  --fds-spectrum-lime-tint-30: #000;

  --fds-spectrum-lime-tint-50: #000;

  --fds-spectrum-lime-tint-70: #000;

  --fds-spectrum-lime-tint-90: #000;

  --fds-spectrum-orange: #000;

  --fds-spectrum-orange-dark-1: #000;

  --fds-spectrum-orange-dark-2: #000;

  --fds-spectrum-orange-dark-3: #000;

  --fds-spectrum-orange-tint-15: #000;

  --fds-spectrum-orange-tint-30: #000;

  --fds-spectrum-orange-tint-50: #000;

  --fds-spectrum-orange-tint-70: #000;

  --fds-spectrum-orange-tint-90: #000;

  --fds-spectrum-pink: #000;

  --fds-spectrum-pink-dark-1: #000;

  --fds-spectrum-pink-dark-2: #000;

  --fds-spectrum-pink-dark-3: #000;

  --fds-spectrum-pink-tint-15: #000;

  --fds-spectrum-pink-tint-30: #000;

  --fds-spectrum-pink-tint-50: #000;

  --fds-spectrum-pink-tint-70: #000;

  --fds-spectrum-pink-tint-90: #000;

  --fds-spectrum-seafoam: #000;

  --fds-spectrum-seafoam-dark-1: #000;

  --fds-spectrum-seafoam-dark-2: #000;

  --fds-spectrum-seafoam-dark-3: #000;

  --fds-spectrum-seafoam-tint-15: #000;

  --fds-spectrum-seafoam-tint-30: #000;

  --fds-spectrum-seafoam-tint-50: #000;

  --fds-spectrum-seafoam-tint-70: #000;

  --fds-spectrum-seafoam-tint-90: #000;

  --fds-spectrum-skin-1: #000;

  --fds-spectrum-skin-1-dark-1: #000;

  --fds-spectrum-skin-1-dark-2: #000;

  --fds-spectrum-skin-1-dark-3: #000;

  --fds-spectrum-skin-1-tint-15: #000;

  --fds-spectrum-skin-1-tint-30: #000;

  --fds-spectrum-skin-1-tint-50: #000;

  --fds-spectrum-skin-1-tint-70: #000;

  --fds-spectrum-skin-1-tint-90: #000;

  --fds-spectrum-skin-2: #000;

  --fds-spectrum-skin-2-dark-1: #000;

  --fds-spectrum-skin-2-dark-2: #000;

  --fds-spectrum-skin-2-dark-3: #000;

  --fds-spectrum-skin-2-tint-15: #000;

  --fds-spectrum-skin-2-tint-30: #000;

  --fds-spectrum-skin-2-tint-50: #000;

  --fds-spectrum-skin-2-tint-70: #000;

  --fds-spectrum-skin-2-tint-90: #000;

  --fds-spectrum-skin-3: #000;

  --fds-spectrum-skin-3-dark-1: #000;

  --fds-spectrum-skin-3-dark-2: #000;

  --fds-spectrum-skin-3-dark-3: #000;

  --fds-spectrum-skin-3-tint-15: #000;

  --fds-spectrum-skin-3-tint-30: #000;

  --fds-spectrum-skin-3-tint-50: #000;

  --fds-spectrum-skin-3-tint-70: #000;

  --fds-spectrum-skin-3-tint-90: #000;

  --fds-spectrum-skin-4: #000;

  --fds-spectrum-skin-4-dark-1: #000;

  --fds-spectrum-skin-4-dark-2: #000;

  --fds-spectrum-skin-4-dark-3: #000;

  --fds-spectrum-skin-4-tint-15: #000;

  --fds-spectrum-skin-4-tint-30: #000;

  --fds-spectrum-skin-4-tint-50: #000;

  --fds-spectrum-skin-4-tint-70: #000;

  --fds-spectrum-skin-4-tint-90: #000;

  --fds-spectrum-skin-5: #000;

  --fds-spectrum-skin-5-dark-1: #000;

  --fds-spectrum-skin-5-dark-2: #000;

  --fds-spectrum-skin-5-dark-3: #000;

  --fds-spectrum-skin-5-tint-15: #000;

  --fds-spectrum-skin-5-tint-30: #000;

  --fds-spectrum-skin-5-tint-50: #000;

  --fds-spectrum-skin-5-tint-70: #000;

  --fds-spectrum-skin-5-tint-90: #000;

  --fds-spectrum-slate: #000;

  --fds-spectrum-slate-dark-1: #000;

  --fds-spectrum-slate-dark-2: #000;

  --fds-spectrum-slate-dark-3: #000;

  --fds-spectrum-slate-tint-15: #000;

  --fds-spectrum-slate-tint-30: #000;

  --fds-spectrum-slate-tint-50: #000;

  --fds-spectrum-slate-tint-70: #000;

  --fds-spectrum-slate-tint-90: #000;

  --fds-spectrum-teal: #000;

  --fds-spectrum-teal-dark-1: #000;

  --fds-spectrum-teal-dark-2: #000;

  --fds-spectrum-teal-dark-3: #000;

  --fds-spectrum-teal-tint-15: #000;

  --fds-spectrum-teal-tint-30: #000;

  --fds-spectrum-teal-tint-50: #000;

  --fds-spectrum-teal-tint-70: #000;

  --fds-spectrum-teal-tint-90: #000;

  --fds-spectrum-tomato: #000;

  --fds-spectrum-tomato-dark-1: #000;

  --fds-spectrum-tomato-dark-2: #000;

  --fds-spectrum-tomato-dark-3: #000;

  --fds-spectrum-tomato-tint-15: #000;

  --fds-spectrum-tomato-tint-30: #000;

  --fds-spectrum-tomato-tint-50: #000;

  --fds-spectrum-tomato-tint-70: #000;

  --fds-spectrum-tomato-tint-90: #000;

  --fds-strong: cubic-bezier(.12,.8,.32,1);

  --fds-tertiary-icon: #000;

  --fds-white: #000;

  --fds-white-alpha-05: #ffffff0d;

  --fds-white-alpha-10: #ffffff1a;

  --fds-white-alpha-15: #ffffff26;

  --fds-white-alpha-20: #fff3;

  --fds-white-alpha-30: #ffffff4d;

  --fds-white-alpha-40: #fff6;

  --fds-white-alpha-50: #ffffff80;

  --fds-white-alpha-60: #fff9;

  --fds-white-alpha-80: #fffc;

  --fds-white-text: #000;

  --fds-www-wash: #000;

  --fds-yellow-20: #000;

  --header-height: 56px;

  --fds-animation-enter-exit-in: cubic-bezier(0.14, 1, 0.34, 1);

  --fds-animation-enter-exit-out: cubic-bezier(0.45, 0.1, 0.2, 1);

  --fds-animation-swap-shuffle-in: cubic-bezier(0.14, 1, 0.34, 1);

  --fds-animation-swap-shuffle-out: cubic-bezier(0.45, 0.1, 0.2, 1);

  --fds-animation-move-in: cubic-bezier(0.17, 0.17, 0, 1);

  --fds-animation-move-out: cubic-bezier(0.17, 0.17, 0, 1);

  --fds-animation-expand-collapse-in: cubic-bezier(0.17, 0.17, 0, 1);

  --fds-animation-expand-collapse-out: cubic-bezier(0.17, 0.17, 0, 1);

  --fds-animation-passive-move-in: cubic-bezier(0.5, 0, 0.1, 1);

  --fds-animation-passive-move-out: cubic-bezier(0.5, 0, 0.1, 1);

  --fds-animation-quick-move-in: cubic-bezier(0.1, 0.9, 0.2, 1);

  --fds-animation-quick-move-out: cubic-bezier(0.1, 0.9, 0.2, 1);

  --fds-animation-fade-in: cubic-bezier(0, 0, 1, 1);

  --fds-animation-fade-out: cubic-bezier(0, 0, 1, 1);

  --fds-duration-extra-extra-short-in: 100ms;

  --fds-duration-extra-extra-short-out: 100ms;

  --fds-duration-extra-short-in: 200ms;

  --fds-duration-extra-short-out: 150ms;

  --fds-duration-short-in: 280ms;

  --fds-duration-short-out: 200ms;

  --fds-duration-medium-in: 400ms;

  --fds-duration-medium-out: 350ms;

  --fds-duration-long-in: 500ms;

  --fds-duration-long-out: 350ms;

  --fds-duration-extra-long-in: 1000ms;

  --fds-duration-extra-long-out: 1000ms;

  --fds-duration-none: 0ms;

  --accent: #2e89ff;

  --always-white: #fff;

  --always-black: #000;

  --always-dark-gradient: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));

  --always-dark-overlay: #0006;

  --always-light-overlay: #fff6;

  --always-gray-40: #65676B;

  --always-gray-75: #BCC0C4;

  --always-gray-95: #F0F2F5;

  --attachment-footer-background: #ffffff1a;

  --base-blue: #1877F2;

  --base-cherry: #F3425F;

  --base-grape: #9360F7;

  --base-lemon: #F7B928;

  --base-lime: #45BD62;

  --base-pink: #FF66BF;

  --base-seafoam: #54C7EC;

  --base-teal: #2ABBA7;

  --base-tomato: #FB724B;

  --blue-link: #4599FF;

  --card-background: #242526;

  --card-background-flat: #323436;

  --comment-background: #3A3B3C;

  --comment-footer-background: #4E4F50;

  --dataviz-primary-1: #30c8b4;

  --disabled-button-background: #fff3;

  --disabled-icon: #ffffff4d;

  --disabled-text: #ffffff4d;

  --divider: #3E4042;

  --event-date: #F3425F;

  --filter-accent: invert(40%) sepia(52%) saturate(200%) saturate(200%) saturate(200%) saturate(189%) hue-rotate(191deg) brightness(103%) contrast(102%);

  --filter-always-white: invert(100%);

  --filter-disabled-icon: invert(100%) opacity(30%);

  --filter-placeholder-icon: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);

  --filter-primary-icon: invert(100%);

  --filter-secondary-icon: invert(62%) sepia(98%) saturate(12%) hue-rotate(175deg) brightness(90%) contrast(96%);

  --filter-warning-icon: invert(77%) sepia(29%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(128%) hue-rotate(359deg) brightness(102%) contrast(107%);

  --filter-blue-link-icon: invert(73%) sepia(29%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(103.25%) hue-rotate(189deg) brightness(101%) contrast(101%);

  --filter-positive: invert(37%) sepia(61%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(115%) hue-rotate(91deg) brightness(97%) contrast(105%);

  --filter-negative: invert(25%) sepia(33%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(110%) hue-rotate(345deg) brightness(132%) contrast(96%);

  --font-family-apple: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;

  --font-family-default: Helvetica, Arial, sans-serif;

  --font-family-segoe: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;

  --glimmer-spinner-icon: #fff;

  --hero-banner-background: #E85D07;

  --hosted-view-selected-state: #2d88ff1a;

  --highlight-bg: #1877f24f;

  --hover-overlay: #ffffff1a;

  --media-hover: #44495026;

  --media-inner-border: #ffffff0d;

  --media-outer-border: #33363A;

  --media-pressed: #44495059;

  --messenger-card-background: #242526;

  --messenger-reply-background: #18191A;

  --overlay-alpha-80: #0b0b0bcc;

  --overlay-on-media: #0009;

  --nav-bar-background: #242526;

  --nav-bar-background-gradient: linear-gradient(to top, #242526, rgba(36,37,38,.9), rgba(36,37,38,.7), rgba(36,37,38,.4), rgba(36,37,38,0));

  --nav-bar-background-gradient-wash: linear-gradient(to top, #18191A, rgba(24,25,26,.9), rgba(24,25,26,.7), rgba(24,25,26,.4), rgba(24,25,26,0));

  --negative: #f0284a;

  --negative-background: hsl(350, 87%, 55%, 20%);

  --new-notification-background: #E7F3FF;

  --non-media-pressed: #44495026;

  --non-media-pressed-on-dark: #ffffff4d;

  --notification-badge: #F02849;

  --placeholder-icon: #8A8D91;

  --placeholder-text: #8A8D91;

  --placeholder-text-on-media: #ffffff80;

  --popover-background: #3E4042;

  --positive: #31A24C;

  --positive-background: #1F3520;

  --press-overlay: #ffffff1a;

  --primary-button-background: #2D88FF;

  --primary-button-background-experiment: #2374E1;

  --primary-button-pressed: #77A7FF;

  --primary-button-text: #FFF;

  --primary-deemphasized-button-background: #2d88ff33;

  --primary-deemphasized-button-pressed: #1877f233;

  --primary-deemphasized-button-pressed-overlay: #196eff26;

  --primary-deemphasized-button-text: #2D88FF;

  --primary-icon: #E4E6EB;

  --primary-text: #E4E6EB;

  --primary-text-on-media: #fff;

  --progress-ring-neutral-background: #fff3;

  --progress-ring-neutral-foreground: #fff;

  --progress-ring-on-media-background: #fff3;

  --progress-ring-on-media-foreground: #FFF;

  --progress-ring-blue-background: #2d88ff33;

  --progress-ring-blue-foreground: #2e89ff;

  --progress-ring-disabled-background: #7a7d8233;

  --progress-ring-disabled-foreground: #7A7D82;

  --scroll-thumb: #ffffff4d;

  --secondary-button-background: #ffffff1a;

  --secondary-button-background-floating: #4B4C4F;

  --secondary-button-background-on-dark: #fff6;

  --secondary-button-pressed: #0000000d;

  --secondary-button-text: #E4E6EB;

  --secondary-icon: #B0B3B8;

  --secondary-text: #B0B3B8;

  --secondary-text-on-media: #ffffffe6;

  --section-header-text: #BCC0C4;

  --shadow-1: #0000001a;

  --shadow-2: #0003;

  --shadow-5: #00000080;

  --shadow-8: #000c;

  --shadow-inset: #ffffff0d;

  --surface-background: #242526;

  --text-highlight: #1877f273;

  --toggle-active-background: #2d88ff;

  --toggle-active-icon: #FFF;

  --toggle-active-text: #FFF;

  --toggle-button-active-background: #E6F2FF;

  --wash: #3E4042;

  --web-wash: #18191A;

  --warning: #f2a918;

  --dataviz-primary-2: #86daff;

  --dataviz-primary-3: #5faaff;

  --dataviz-secondary-1: #814de7;

  --dataviz-secondary-2: #a87cff;

  --dataviz-secondary-3: #db1a8b;

  --dataviz-supplementary-1: #ff7a69;

  --dataviz-supplementary-2: #f1a817;

  --dataviz-supplementary-3: #31a24c;

  --dataviz-supplementary-4: #e4e6eb;

}

[kringlefant]

So.....! I'm fairly new to Linux and have been using Linux mint for close to two years now. I'm currently on 19.3. I spent a lot of time and effort to find a desktop messenger app that simply worked and had dark mode. Found Caprine. It worked well. Only problem I had was that the icon was blank. THIS MORNING - I started it up and dark mode was missing. Functionality was broken in several ways. I spent hours fiddling around with Caprine and other apps like Messenger for desktop and Franz.

Logged in to Facebook (which I had deactivated), changed theme to dark mode there. Uninstalled Caprine and re-installed it. I don't know exactly what I did - but - now it works perfectly - just as it used to - but now even the icon is displaying. It better stay that way.

Could it be as simple as setting Facebook theme to dark? I don't know. I uninstalled, rebooted and reinstalled different messenger apps several times but now like magic it works. Fingers crossed.

[ViBE-HU]

I'm on Ubuntu 20.04. I'm using the snap build. Also experiencing the same. Maybe Facebook updated something and that's why some features are broken. I also experiencing serious lag and very slow response most of the time. The input laggy too.

[dexter93]

It is broken because Messenger is now using the https://www.facebook.com/messages frontend. So I copied the dark theme definitions from the Facebook and added them to the custom CSS file of the application. Note the .dark-mode prefix to :root. It is not perfect but I can bare the issues for now. Grab yourself the stylesheet below.

Edit: Well, they are switching between the two frontends so it is a hit and miss...

Pretty much this, but in a pull request. https://github.com/sindresorhus/caprine/pull/1468

I tried making the scrollbars a bit more eye friendly, but I can't figure out how to sort the main chat one. Atm it's way nicer to use than the web version

edit: scrollbars sorted. no more eyesore

[kringlefant]

...aaaand today it's broken again. :(

[matthewstrasiotto]

(I've updated the snippet)

Anyway, the Messenger update doesn't look good for Caprine… For example, the current conversation link has these classes:

oajrlxb2 gs1a9yip g5ia77u1 mtkw9kbi tlpljxtp qensuy8j ppp5ayq2 goun2846 ccm00jje s44p3ltw
mk2mc5f4 rt8b4zig n8ej3o3l agehan2d sk4xxmp2 rq0escxv nhd2j8a9 a8c37x1j mg4g778l btwxx1t3
pfnyh3mw p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x tgvbjcpo hpfvmrgz jb3vyjys rz4wbd8a
qt6c0cv9 a8nywdso l9j0dhe7 i1ao9s8h esuyzwwr f1sip0of du4w35lb lzcic4wl abiwlrkh p8dawk7l
ue3kfks5 pw54ja7n uo3d90p7 l82x9zwi

Each one changes exactly one CSS property. So it's no longer possible to identify elements by their classes.

Ew, I hate trying to work with frontend assets that have been minified or packed down (or intentionally obfuscated), like why do me this way?

[incace]

The random class names for every element is extremely annoying. Is this just to combat custom styles, or is there another purpose of doing it this way?

Adding to what @StoyanDimitrov posted above, this hides the "appnow" banner as well as lightens the icons that were black:

.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.g5gj957u.rj1gh0hx.buofh1pr.hpfvmrgz.i1fnvgqd.bp9cbjyn.owycx6da.btwxx1t3.dflh9lhu.scb9dxdr.sj5x9vvc.cxgpxx05.sn0e7ne5.f6rbj1fe.l3ldwz01 {
    display: none;
}

svg.a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 {
    fill: #E4E6EB;
}

[matthewstrasiotto]

Is this just to combat custom styles, or is there another purpose of doing it this way?

Probably minified bootstrap for reduced bandwidth?

[kringlefant]

https://www.msn.com/en-us/news/technology/facebook-disabled-some-messenger-features-in-europe-heres-an-incomplete-list/ar-BB1c0Ozl