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 😁

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.

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