Making Your Website Compatible with Dark Mode

After macOS released the massive 10.15.1 update, I decided to upgrade my development machine (running 10.14.6) this Saturday. After all, a development machine should always be on the edge of new and stable, right? 🤪

However, my phone had already been upgraded to the latest 13.2, and the most annoying thing was that iOS 13’s “Reminders” is somehow incompatible with Mojave. Apple’s decision was quite perplexing.

Their system versions update quickly, but they couldn’t ensure even basic backward compatibility for such an essential app. It’s almost as if they’re adopting the style of internet companies entirely! 🤷🏻‍♂️

What struck me most at the iOS UI level was the Automatic Dark Mode. While Mojave had Dark Mode, it didn’t switch automatically.

In my opinion, the Light Mode (light color theme) works best during the day, so switching to Dark Mode manually at night felt cumbersome. Why make users switch something that could be automated?

Night Shift, on the other hand, transitions naturally. Fortunately, Catalina finally introduced Automatic Dark Mode. However, I realized there were too few websites adapted to Dark Mode, creating a stark contrast between the system and webpages.

Of course, since Dark Mode is relatively new, it will take time for websites and apps to adapt. Even Apple’s official website hasn’t fully adapted yet. So, I decided to adapt my own blog.

Good things are worth pursuing, right? 🙆🏻‍♂️

First, I collected relevant technical information. There are already specifications for Dark Mode:

Link: Mozilla Developer Network - prefers-color-scheme

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.

Technically, it’s done using CSS media queries and the prefers-color-scheme feature, which the browser uses to calculate and render styles. You can even define other theme styles like light or grey.

:root {
  --background-color: #FFF;
}

@media (prefers-color-scheme: dark) {
  --background-color: #000;
}

.body {
  background-color: var(--background-color);
}

Regarding frontend development, it’s crucial to know the browser support for this feature:

Link: Can I use - prefers-color-scheme

According to Apple’s development guidelines, the iOS version of WeChat uses the Safari engine and should theoretically support it. However, reality proved otherwise. I don’t know what “optimizations” they made in between.

After understanding how it works, I realized that adaptation primarily involves handling CSS properties such as colors, contrast, and transparency. The webpage structure itself doesn’t change. So, the next step was to handle colors.

Without a designer, I had to research Dark Mode design guidelines and experiment on my own. Here are some resources I used:

• Apple Visual Design: Link
• Google Material Design: Link
• Color palettes shared by users: Link
• Insights from designers: Link

After several attempts, I finally settled on the color scheme. Color coordination is crucial; otherwise, you might end up with high contrast that strains the eyes or low contrast that makes reading difficult, both of which reduce readability.

A little advice: Don’t go for pure black backgrounds, as they can be too harsh. If it’s too dark, the text’s contrast will be too high, making it unsuitable for reading. You can take inspiration from Apple’s own app designs, like Safari:

The adaptation process was quite smooth, although it mainly involved color coordination and replacement. My blog is relatively simple, with a clean structure and well-separated styles, making the changes focused. Nowadays, most apps follow a modular and plugin-based approach. Adapting every module can be challenging, especially for apps like WeChat with numerous third-party services. The cost is evident, and I understand why adapting can be difficult, as it’s not just about changing colors; it must also consider the user experience to avoid creating a fragmented feel.

Moreover, adapting to Dark Mode doesn’t bring significant benefits, and the return on investment (ROI) is low. That’s one reason why companies may not be very enthusiastic about it. However, if a company has a reasonable structure, including but not limited to technical and departmental structures, design guidelines, and unified technology components, adapting can be done at a low cost with batch processing.

A good architecture is truly the cornerstone of project progress. As acceptance of Dark Mode grows, more adaptations will follow. Beautiful things are always worth celebrating! 🙆🏻‍♂️