Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark Mode text stuck as black #1672

Closed
raza453 opened this issue Jul 28, 2021 · 11 comments · Fixed by #1683
Closed

Dark Mode text stuck as black #1672

raza453 opened this issue Jul 28, 2021 · 11 comments · Fixed by #1683

Comments

@raza453
Copy link

raza453 commented Jul 28, 2021

image

Not sure why this is happening, on Windows 10. All text's sent to me are in black while using dark mode.
@tobywrites
Copy link

tobywrites commented Aug 6, 2021 •
edited
Loading

Also happening on Macbook air Big Sur. Any tips on how to change back to white text?

@karelo911
Copy link

Same issue both on my mac and windows laptops

@strazto
Copy link

strazto commented Aug 9, 2021

yeah this started happening for me, idk if anything else has broken.
IIRC this usually happens when messenger.com's markup / CSS changes so the caprine selectors break.

Sometimes features like disabled read receipts etc also break

@strazto
Copy link

strazto commented Aug 9, 2021

Until devs fix it, I'll try writing some custom CSS for it - Looks like the message elements have a class of
n3t5jt4f , and "your" messages have a class of qsbzbi57, whilst "theirs" have pbevjfx6

image

@strazto
Copy link

strazto commented Aug 9, 2021 •
edited
Loading

@tobywrites @karelo911 @raza453

Here - put this in your custom styles:

html.dark-mode .n3t5jt4f.pbevjfx6 {
	color:  white;
        /* Or you can use 
        color: var(--base-ninety);
        */
}

Edit them like this

image

Save the css file & reload caprine with Ctrl/Command + R

@karelo911
Copy link

@tobywrites @karelo911 @raza453

Here - put this in your custom styles:

html.dark-mode .n3t5jt4f.pbevjfx6 {
	color:  white;
        /* Or you can use 
        color: var(--base-ninety);
        */
}

Edit them like this

image

Save the css file & reload caprine with Ctrl/Command + R

Works perfectly. Thank you very much for this workaround!

@mquevill
Copy link
Collaborator

mquevill commented Aug 9, 2021

The classes that @matthewstrasiotto identified are not present in my Messenger interface, so perhaps they are rolling out yet another new interface? On Windows and Linux, I have not been able to replicate the black text or even query those classes. The slow rollout of new interfaces with no way to specify which one you get makes development difficult.

Could you show us what the classes of the main HTML element and the body are? Shown below is what I see when I open Developers Tools:

<html id="facebook" class="_9dls" lang="en" dir="ltr">
  <head>...</head>
  <body class="_6s5d _71pn _-kb vsc-initialized">
    ...

The text color is not explicitly set when dark mode is activated. Simply adding a __fb-dark-mode class to the main body should toggle most elements to Messenger's preset dark mode settings. There are a few elements that Caprine has to clean up since it's not quite a fully functioning setting in Messenger.

In the current "new" interface, the text sent by you is colored with --always-white, while the text received by you is colored with --primary-text. If the dark mode changes the primary-text variable, maybe we can add this color to the CSS applied by Caprine for these new classes?

@tobywrites
Copy link

tobywrites commented Aug 10, 2021 •
edited
Loading

@tobywrites @karelo911 @raza453

Here - put this in your custom styles:

html.dark-mode .n3t5jt4f.pbevjfx6 {
	color:  white;
        /* Or you can use 
        color: var(--base-ninety);
        */
}

Edit them like this

image

Save the css file & reload caprine with Ctrl/Command + R

Worked perfectly, thank you very much!

For mac users, the css file is locating in ~/Library/Application Support/Caprine

@avidianity
Copy link

I have the same issue in Manjaro.

@dusansimic
Copy link
Collaborator

@mquevill, from some other issue (#1588) I've found out that Facebook is still updating the old design which means that the css for old design might not work as expected. I'm not sure weather this is the old or new design but we should keep in mind that there has been some bugs with Facebooks __fb-dark-mode class (I don't have any evidence at hand but I've experienced some text color related issues in the past).

A good idea would be to change the default contents of custom.css file which is set in click() function for Custom Styles menu option depending on weather it's new design or old.

The thing that still confuses me is how this issue is present on some new designs (if we take that as a fact) and not on others if we expect that Facebook is not rolling out two new designs. A good idea would be to create a menu option (similar to About Caprine option) which would show a window with information related to website design useful to developers (whether it's new or old design, locale, weather some specific classes exist, dark/light mode css from fabebook...), it might help us understand what are users having displayed as a website and weather it's a bug in Caprine or the website. It would also make it easier for developers to gather such information by just telling users to click on that option and paste the information in an issue or pastebin rather than teaching them how to open dev tools since that's what we've been doing in the past.

@dusansimic
Copy link
Collaborator

It seems like the issue is with the div element wrapping the text message. It contains a class __fb-light-mode whose --primary-text is #050505.

image

That turns the text color in the message box black even if dark mode is enabled globally.

I've managed to fix it by adding the following css to custom.css file:

.__fb-dark-mode .__fb-light-mode {
	--primary-text: #e4e6eb;
}

It sets the --primary-text value to one from dark mode only if there is an element with class __fb-dark-mode that contains and element with class __fb-light-mode which is our case. I'll make a quick pr to add this workaround since it seems to be a problem on Facebooks side until it's fixed.

@dusansimic dusansimic mentioned this issue Aug 12, 2021
Merged
@K0-RR K0-RR mentioned this issue Aug 18, 2021
Closed
@mquevill mquevill mentioned this issue Sep 9, 2021
Closed
@dusansimic dusansimic mentioned this issue Oct 7, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix received messages color in dark mode dusansimic/caprine
7 participants
@dusansimic @mquevill @strazto @karelo911 @avidianity @tobywrites @raza453