dark mode Archives | CSS-Tricks

Article May 29, 2019

A Quick Look at the First Public Working Draft for Color Adjust Module 1

Author

1 Comment

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

Link May 27, 2019

Night Mode with Mix Blend Mode: Difference

Shared by
Robin Rendle

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:

I remember first playing around with them in Photoshop years ago. Now that browsers are

… Read article

Our Notes / Read at dev.wgao19.cc

dark mode

Article November 14, 2018

Dark Mode in CSS

Author

Robin Rendle

6 Comments

Go to Comments

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 macOS media queries