Spectral Web Services
Dark mode and comments fix incoming!
If your theme has a dark mode toggle switch and comments, you probably want to read this
I've noticed a lot of really nice themes with dark mode toggles, letting visitors pick whether they'd like the site content in light or dark mode. 👉Here's how to add a dark mode toggle, if your theme doesn't already have one.
The comments app takes an argument for light, dark, or auto modes. So in your theme, you can put {{comments mode="light"}} (or "auto" or "dark") and make the comments iframe match the page around it. The mode="auto" setting causes the comments app to inspect the color of the parent container and determine whether to serve comments in light or dark mode.
The problem was, when someone flipped that pretty dark mode toggle, the comments app didn't update until the page was reloaded. It looked wrong (white box on black page) at best, and unreadable (black text on black background) at worst.
I grumbled about it. I filed an issue over on GitHub. Finally I fixed it.
The situation was complicated by two things:
1) The comments app lives in an iframe, so styles applied outside don't show up inside.
2) I was pretty sure that a MutationObserver was the way to deal with it, but while observers can detect new classes or styles being added to a specific element, they don't detect upstream changes that propagate to the element (like 'dark' being added to the body tag or a variable's value being changed).
So, what I ended up with isn't perfect – it was a tradeoff between good performance and "just works automagically", and I chose performance. Here's how to trigger the re-render that will cause the comments app to redetect what color it should be.
- Identify the parent element of #ghost-comments-root
- Make sure the comments helper is using mode=auto (or mode isn't set)
- Adjust the eventListener for your toggle click to either change a style on the parent of #ghost-comments-root, or to add/remove a class to the parent of ghost-comments-root. Either of these triggers a recalculation of which color scheme is appropriate.
Hope that gets your themes looking great, even for toggle-clicking visitors.
Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!
ghost update. Click that button below, then scroll down to where the comments should be. Yuck, huh? P.P.S. If you're reading this as email, you'll have to come on over to the site to admire it.
