DEV Community

with Pyaar
with Pyaar

Posted on • Updated on

Darkmode.js Emoji Rendering Fix

As of recent web designers and developers have been implementing a dark/light mode toggle feature on their websites. I decided to try it out by adding a widget via Darkmode.js.

Ways to Implement:

  • via JSDelivr CDN.
  • using NPM.
  • Enable/disable Darkmode programatically.

I used the CDN and the following object to render the widget.
After saving, I ran into an issue with the label not rendering the emoji.

My document:

Alt Text

Alternate document:

Alt Text

I tried a few things like viewing my document in different browsers, editing the options, adding a positive value for the z-index and hardcoding the emoji within the document, etc.

I then decided to try the ::after pseudo element.

Fix:

.darkmode-toggle::after {
content: "🌓";
}
Enter fullscreen mode Exit fullscreen mode

My Updated Document:

Alt Text

That fixed the issue.

There are probably other fixes out there, this was mine. Here is the issues page.

Top comments (0)