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.

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

Darkmode inverts the colors of emoji #28

Open
person-al opened this issue Jun 23, 2021 · 3 comments · May be fixed by #69
Open

Darkmode inverts the colors of emoji #28

person-al opened this issue Jun 23, 2021 · 3 comments · May be fixed by #69
Labels
bug Something isn't working

Comments

@person-al
Copy link

I love this theme! Thank you so much for putting it together. I noticed a hilarious issue today: the dark mode theme inverts the colors of any emoji in the post text. Is there a way around this?

@riggraz
Copy link
Owner

riggraz commented Jul 15, 2021

Hi 👋🏻 unfortunately the dark mode is implemented by inverting all colors on the page with a filter. There is an exception: the color is inverted again for images, in order to leave them unaffected.

However there's no way I can think of to select only emojis in CSS and invert their color again just like for images.

The only solution I can think of is declaring a rule like this in CSS:

.emoji { filter: invert(1); }

and then encapsulate every emoji you type in your post with the "emoji" class. Painful but it should work.

Let me know if you come up with a solution though 😁

@riggraz riggraz added the bug Something isn't working label Jul 15, 2021
@person-al
Copy link
Author

This solution probably doesn't align with your goals, but my solution was removing the dark mode implementation in the css and instead using water.css's styling to deal with the dark/light mode stuff.

So I added:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"/>
in default.html

Benefits:

  • minimal code work
  • fixes the emoji problem
  • presumably a designer did this, so I don't have to worry about prettiness/accessibility/etc

Downsides:

  • I have a dependency on another library, etc.

@salochara
Copy link

Hey!

I did the solution you mentioned (@riggraz ) and it definitely worked for me.
Just leaving an example here for other people that might want to solve this (and not adding a dependency)

In my menu.yml file
entries: - title: "Yoga Certified Instructor (200hrs) <span class='emoji'>🧘</span>"

In the no-style-please.scss file,
.emoji { filter: invert(1); }

Thank you! @riggraz
Love the theme

unbeatable-101 added a commit to unbeatable-101/no-style-please that referenced this issue Jan 1, 2024
Actually reinverts it after being inverted, but that's beside the point

Fixes riggraz#28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants