One of the problems with adding “Dark Mode” to your website are those glaring white boxes. You know it when you see it, those pieces of content that simply weren’t designed for low-light conditions. While text and pictures can easily be adjusted, what about interactive content? That’s a little more complex, which is why “Dark Mode” is the topic of this week’s free Tumult Hype template.
I realize the problem when I restored the “dark” CSS settings on this website. Dark mode looks great, but the imperfections can really stand out. The “Timing” template is an excellent example. In dark mode, the white box beams likes a flashlight in the night. So, I fixed it…
Toggle between “Light” and “Dark” modes to see the effect. (If you’re not using Dark Mode, you won’t see anything special. Fortunately, most modern web browsers now support Dark Mode.) The delay is intentional. While the appearance can be changed as soon as the project is loaded, the one-second transition shows animation. This exhibits how Hype can be used to animate mode switches. Dark mode doesn’t have to be just about colors. Different timelines can be loaded when the “color scheme” changes from light-to-dark or dark-to-light. That means you can display specific graphics, or run specific JavaScript code, based on the user’s color scheme setting.
See the “Dark Mode” chapter in A Book About Hype for more details. You can also download the Dark Mode Template to see how it works.
One of the biggest challenges of working on the new edition of the Hype book is Dark Mode. It’s not about technical difficulty. Rather, it’s about how I miss it. Since A Book About Hype is to be printed — in black and white — I’ve been trying to keep the pictures light. That means running the Hype app in “Light” mode instead of “Dark” mode. Too much black ink in one spot can lead to smudging. I’m looking forward to putting my Mac back into Dark Mode as soon as this project is done. That’s why I think this week’s template is important. Dark Mode can improve readability. People appreciate fine design. Fortunately, it’s not too difficult to add “Dark Mode” support to a Hype project.