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.
Top comments (0)