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 ToggleIn 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:
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:
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.
fpm.dark-mode
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 $ftd.dark-mode: yellow background-color if not $ftd.dark-mode: yellow
$ftd.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.
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 CookieOn 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.
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 PreferenceWhen 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.
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.