Menu

Colin Devroe

Reverse Engineer. Blogger.

Like? Subscribe.

On YouTube? Check out my channel.

Supporting OS-level Dark Mode preference using only CSS

My blog’s theme is based on Davis by Anders Norén. I’ve been using it for a while, making small tweaks here and there for my images index and other things.

It has a dark theme built-in that I can toggle on and off. But it is an either/or type of thing. I can either have the dark theme on all the time or not.

Since updating to Android 10 I’ve been trying Dark Mode to see if I prefer it. So far it is a bit of a mess, because so many apps simply do not support it yet. Even Google’s own built-in Android apps have yet to fully embrace the OS-level preference. But I’m sure this will change with time.

For my personal blog I’ve long thought about adding a toggle or switch somewhere to allow someone to turn its dark theme on or off themselves. But, for whatever reason I just put it off so long that I never did it. But now, just after Android 10’s release on Pixel phones and on the cusp of iOS 13 being released, both major mobile OSes will soon have an OS-level preference for Dark Mode. I thought this would be a good time to support that preference.

It turns out that many of the latest browser versions have a media query, or CSS’s version of an IF statement, that will allow you to add support for it rather easily.

@media(prefers-color-scheme: dark) {
    /* Do Dark Mode things here */
}

Since Davis already had a .dark-mode body class I was able to take all of those selectors and move them into this media query. This way, if someone toggles that preference at the OS-level, they will automatically get my site’s dark theme. If they toggle it back the other way, my site will adjust. Simple.

I do not think I’m going to go through the trouble of adding a manual switch for viewers. That will end up being a legacy way of handling this in due time. I think people will either turn Dark Mode on or not and if they do they’ll get their preferred version. Even Windows 10 and macOS have these preferences now.

If you’re a Dark Mode person, I hope you like it.

Side note: Anders is spearheading the next official WordPress theme in its next release. If you look at his other themes you’ll see why.

React is an ecosystem

Jonathan Snook, on his learning curve when joining a new organization that uses React:

When people talk about learning React, I think that React, in and of itself, is relatively easy to understand. At least, I felt it was. I have components. I have JSX. I hit some hiccups with required keys or making sure I was wrapping child elements properly. But overall, I felt like I grasped it well enough.

Throw in everything else at the same time, though, and things get confusing because it’s hard at first to recognize what belongs to what. “Oh, this is Redux. That is React. That other thing is lodash. Got it.”

Most of the time React is merely a piece of an app’s overall puzzle. There are so many other pieces that make up the entire thing it can be an overwhelming experience.

I’m not new to building apps. In fact, the vast majority of my life I’ve been building apps. But learning React this year has been one of the more haphazard experiences of my career. It is not straightforward.

It isn’t that I think React itself is poorly made or documented. In fact, out of the box you can spin up a simple Hello World React app about as quickly as any other technology. But, as my boy Snook points out, it never ends there. Any somewhat mature app built on React has many, many other parts to learn.

He points most of them out in his blog post but I’ll reiterate here some of the things I personally see that could be overwhelming to people jumping in…

  • Build routines
  • Servers
  • State managers
  • Component hierarchies
  • JavaScript specifications
  • Myriad JavaScript packages (such as design libraries)
  • JavaScript style guides (naming and positioning of things)
  • CSS pre-processors (like SASS)

Any one or all of these things could potentially be new to a web developer coming into React. And, equally so, an app developer.

The only way to avoid being overwhelmed would be to take one bit at a time. Understand that what you’re looking at isn’t a single thing but a collection of many new things and that each of them will become natural to you over time. If your team is large enough, perhaps there are pieces you won’t need to worry too much about. But if not, you’re essentially diving into the “full stack” and will eventually become familiar with that entire thing.

I will say, lastly, that it has been very fun. React sort of combines the things I like about building apps with, say, Swift (typing, “stricter” rules, reusable bits) and the things I like about building things for the web (HTML, CSS, app runs on literally everything).

Rebuilding Slack.com

Mina Markham:

In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes.

She goes on to show tons of details on their latest redesign. There are several bits I found interesting such as their attention to accessibility, how they handle fall backs for IE11, and how they made responsive illustrations.

/via Brad Frost.