Emoji color inverts when dark mode is enabled

[Taewan-P]

Describe the bug A clear and concise description of what the bug is.

When you have emoji in your article (e.g. 😄🤔🤯), turning on the dark mode will invert the emoji colors

To Reproduce Steps to reproduce the behavior:

1. Add an emoji in your article
2. Click the dark mode toggle button to enable dark mode

Expected behavior A clear and concise description of what you expected to happen.

Emoji shouldn't be color inverted.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Any operating system would occur
• Browser [e.g. chrome, safari] Same
• Version [e.g. 22] *

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

This is occurred because markdown translation to html codes will make all the text in paragraph tag inside your article. The paragraph text colors are changed by dark mode toggle. The logic of the toggle is just doing invert using css.

[Taewan-P]

I think dark theme should not be made with css invert.

[zwbetz-gh]

Hey there.

Will have to investigate how to target emojis with CSS selectors, if it's possible.

[Taewan-P]

I fixed this issue by changing the dark theme logic in my blog.

  <style id="darkTheme">
    .intro-and-nav,
    .main-and-footer {
      background-color: #1c313a;
      color: #fefefe;
    }

    img[src$=".svg"] {
      filter: invert(100%);
      background-color: unset;
    }

    [for="themer"], 
    .pattern [aria-current] {
      background-color: #fefefe !important;
      color: #1c313a !important;
    }

    #menu-button {
      background-color: #fefefe;
      color: #1c313a;
    }

    p code {
      background-color: rgba(228, 224, 220, 0.1) !important;
    }

    * {
      background-color: inherit
    }

  </style>

Doesn't look so clean, but you can manually set your dark theme color.

[zwbetz-gh]

Hey @Taewan-P,

After doing more investigation, I do not plan to address this issue.

Glad to hear you've found a solution for your usage of the theme though.