Dark Mode Support

Modern operating systems come with Dark Mode support. Readers have started to get used to support for dark mode on more and more web sites. Dark mode is not just visually important, it helps your website appear cohesive with the rest of the operating system, say if user is using Dark Mode on OS, and your website has white background, it appears quite loud and doesn’t look too great. But dark mode also assists in readability. I have found it pleasing to switch dark mode especially in night.

So all themes should consider supporting dark mode.

User Toggle Vs OS Toggle

In earlier days of dark mode, when very few sites supported it, when operating system did not support dark mode, every site had to rely on a toggle on the site itself to allow visitors to switch between dark and light modes.

Since then, since operating systems have started supporting dark mode, since CSS spec has standardized a way to discover dark mode user preference etc, it has kind of become anti patter to give the toggle. Now a site should silently switch to the mode that visitors prefer, and the dark mode toggle is only a escape hatch in case the implementation of dark mode is somehow not great.

If the operating system supports dark mode, user has told their OS that they indeed prefer dark mode, browser has told your site the user prefers dark mode, but user is compelled to switch to light mode for your site, it probably means you have done some mistake in your dark mode implementation, it may not be optimized in dark mode, some element may not be readable etc. A dark mode toggle soon may become part of developer tools for developers to see how their site looks like in different modes while they are developing the site.

Further Operation Systems today support changing dark mode preference based on time of day, and soon may do it based on ambient light conditions and so on. So relying on operating system dark mode hint is truly superior overall, as a future looking strategy.

Since currently the state of art has not matured enough, future is here but is not evenly distributed yet, it is still a recommendation to give dark mode switcher.

But the dark mode switcher should be “three state”, “user wants dark mode”, “user wants light mode”, and “user wants you to follow whatever their operating system is telling you about their dark mode preference”. Many sites give you two state logic, a toggle button that switches between a sun and moon icons. This two state switcher should be considered an anti pattern.

This kind of UI is preferred today:

Dark Mode Switcher

In the collapsed state it should show the icon showing the mode that is currently being used based on combination of user and system preference. Unlike the image shown above, the icon for system mode should show the value system is recommending right now.

fpm.dark-mode

To support dark mode in your themes, you should use fpm.dark-mode variable, which is set by FPM based on past user preference, and current OS settings.

-- import: fpm

-- ftd.text highlight: $title
caption title:
color if $fpm.dark-mode: yellow
background-color if not $fpm.dark-mode: yellow

-- import: fpm

-- ftd.text highlight: $title
caption title:
color if $fpm.dark-mode: yellow
background-color if not $fpm.dark-mode: yellow

We have used $fpm.dark-mode to change color and background colors here.

fpm.follow-system-dark-mode and fpm.system-dark-mode

fpm.follow-system-dark-mode tells you if user has asked to follow system dark mode or user has explicitly selected dark or light mode, over-riding the system preference.

And fpm.system-dark-mode tells you if the system prefers dark-mode.

These two variable should not be used for style switching in most of your code, you should use fpm.dark-mode for that. These two variables are only to help you create the dark mode switcher.

Preferences Are Stored In A Cookie

On first page load a cookie is created from JavaScript, indicating the dark-mode setting. The name of the cookie is fpm-dark-mode, and it contains value in this format: user or system | system prefers light or dark | final setting dark or light e.g., user | dark | light: meaning what we are following right now is user’s override, system is dark and user prefers light.

The exact cookie format may change in future, this is only for informational value that the settings are preserved. When fpm-repo is ready, or if the FPM files are being served via a dynamic host instead of static file servers, the cookie would be used to set the way initial page is rendered. Currently when the page loads, the site is assumed to be light mode, so there is a slight flash when the mode switches back to dark.

Updating The Preference

When user interacts with the dark mode switcher UI in your theme and they can chose to overwrite system preference and go for dark, overwrite and go for light, or indicate they want to switch back to system preference.

For these we have exposed three message host “actions”: $on-click$: message-host enable-dark-mode or message-host enable-light-mode or message-host enable-system-mode.

The host functions, “enable-dark-mode” etc, are provided by fpm, and they will update the cookie, and change fpm.dark-mode, fpm.follow-system-dark-mode and fpm.system-dark-mode FTD variables.