It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks.
One very new trick is the ability to use SVG as a favicon. It’s something that most modern browsers support, with more support on the way.… Read article “SVG, Favicons, and All the Fun Things We Can Do With Them”
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 “A Dark Mode Toggle with React and ThemeProvider”
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 “A Quick Look at the First Public Working Draft for Color Adjust Module 1”
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 article “Night Mode with Mix Blend Mode: Difference”I 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 “Dark Mode in CSS”