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:

Alternate document:

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: "🌓";
}

My Updated Document:

That fixed the issue.

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