Author
Maks Akymenko
8 Comments
Join the Conversation
It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including YouTube and Twitter, have implemented it already, and we’re starting to see it trickle onto many other sites as well.
In this tutorial, we’re going to build a toggle that allows users to switch between light and dark modes, using a <ThemeProvider
wrapper from the styled-components library. We’ll create a useDarkMode
… Read article
We've been talking a lot about Dark Mode around here ever since Apple released it as a system setting in MacOS 10.14 and subsequently as part of Safari. It's interesting because of both what it opens up as as far as design opportunities as well as tailoring user experience based on actual user preferences.
This week, we got an Editor's Draft for the Color Adjust Module Level 1 specification and the First Public Working Draft of it. All of this … Read article
Dark mode designs are all the rage right now but here’s an interesting take: Wei Gao has built a night mode on her own site that uses mix-blend-mode: difference
to create an effect that looks like this:
Wei explains how she implemented this technique and the edge cases she encountered along the way. I especially love what she had to say about mix-blend-mode
functions here:
… Read articleI remember first playing around with them in Photoshop years ago. Now that browsers are
With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme
which lets us detect whether the user has dark mode enabled with a media query. Safari Technology Preview 71 also has supported-color-schemes
, which... well, I couldn't exactly tell you what that does.
The media query is like this:
@media (prefers-color-scheme: dark) {
}
It may not be supported everywhere just yet, but it's a great progressive enhancement, it's implemented … Read article