THOMAS STEINER: Hi, folks.
My name is Tom.
And today, I want to
talk about Dark Mode.
I'm not sure when you have
entered the world of computing,
but for me, it was during
the dark era of MS DOS.
And you know what?
We've actually gone full
circle with Dark Mode.
If you've used a computer
in the 1970s or 1980s,
you probably have
used Dark Mode before.
Well, Dark Mode became a thing.
At that time, when screens
oftentimes were monochrome
and color screens
incredibly expensive,
Dark Mode wasn't a
choice but simply a fact.
Only when color monitors
became more affordable
and what you see is what you
get desktop publishing evolved,
the idea of making
a virtual document
resemble its physical printed
end product became popular.
And this baseline assumption of
dark text on light background
was carried over to the very
first, earliest web designs.
The output of those
heavy cathode ray tube
monitors with
massive desktop PCs
that we consume these very
first web pages on is long over.
And nowadays, more
often than not,
we use mobile devices
with light LCD displays
or AMOLED screens that also have
enabled completely new usage
patterns.
For example, I often browse
the web while in bed.
And because it's
easier on my eyes
and less likely to
wake up my better half,
I tend to turn on my
phone's Dark Mode.
I've done some user research
on why people use Dark Mode
and under which circumstances.
The results are
pretty interesting.
While the majority
of the surveyed users
unsurprisingly said Dark
Mode was easier on the eyes
and just looked
beautiful and elegant,
the third most mentioned
reason for using Dark Mode
was that it consumes
less energy.
The Android team
have looked into this
and found out that
on AMOLED screens,
Dark Mode can save
up to 60% energy.
This is why on Android Q,
when Battery Saver kicks in,
we automatically
activate Dark Mode.
And finally, some
people say they
require Dark Mode as a
true accessibility tool,
without which they can't
get their work done.
Interestingly, Dark Mode usage
correlates less than expected
with the surrounding
ambient light situation,
meaning a lot of people, like
me, use Dark Mode permanently.
So how do you activate Dark
Mode in the first place?
On Mac OS, it's a setting
in the System Preferences
in the General section.
On iOS and iPAD OS, you can
toggle Dark Mode in Settings
in the Display and
Brightness section.
On Android, Dark Mode
is called Dark Theme.
And you can activate
it in Settings
in the Display section.
For Windows, Dark Mode can
be activated in Settings
in the Colors dropdown menu in
the Personalization section.
And finally, for the
various Linux distributions,
activating Dark Mode
typically involves
setting a dark desktop theme.
Now that we know how
to enable dark Mode,
let's see how we
can actually support
Dark Mode on our web pages.
The secret is a user
reference media feature
called prefers-color-scheme.
It has three possible values--
dark, light, and no preference.
The simplest possible
Dark Mode implementation
is to just invert the background
and the foreground color
in the case the user
prefers Dark Mode.
You can see how the page reacts
when I toggle the MAC OS color
theme between light and dark.
Switching the entire operating
system's color scheme
can get really annoying.
So in Chrome Dev
Tools, we now allow
you to emulate the user's
preferred color scheme.
So back to the
theme [INAUDIBLE]..
While it works, already
in this basic example,
you can see how in
practice, things are
a lot more complex than that.
The default purple user
agent stylesheet color
of a visited link has a
contrast ratio of only 1.9,
which isn't enough.
We can fix this by
adding some [INAUDIBLE]..
And now it slowly
starts to look OK.
But you can see
where this is headed.
For a production website,
we'd have hundreds or even
thousands of cases like this
that we'd need to cover.
So rather than one by one,
we need something better,
semantic color definitions.
You can do this
with CSS variables.
So instead of using hardcoded
colors on the various elements,
we use variables like text
color or background color
and then define these
variables dynamically
based on a preferred
color scheme.
As I said before, we're
ready for the toy example.
We need quite some CSS and even
more for production web apps.
But here's the thing--
if you have Dark
Mode enabled, you
shouldn't be forced to load CSS
that is only relevant in Light
Mode and vice versa.
You can deal with
this by splitting out
CSS into three files, dark.css
that contains all the Dark Mode
relevant CSS variable
definitions, light.css that
contains all the Light
Mode relevant CSS variable
definitions, and style CSS that
contains the common CSS where
these variables are being used.
Like that, they make sure that
in the critical rendering path,
only the CSS that's needed
for the preferred color scheme
gets loaded with the highest
priority and the rest
with the lowest priority.
If you have to deal with older
browsers that don't understand
the prefers color
scheme media query yet,
we require one last trick
to make sure the default
CSS, for example,
light.css gets downloaded
with highest priority.
Therefore, we manually insert
the light.css stylesheet
with the good old
insertAdjacentHTML method
to force its download
with the highest priority.
The obvious [INAUDIBLE]
is to make it work even
on browsers that are only
compatible with [INAUDIBLE]
script 5.
All right.
With all of this out of
the way, let's have a look
at how you can actually
design for Dark Mode
and what to keep in mind.
As we've seen before, getting
all the contrasts right,
making sure the design
conveys concepts
like elevation in both
light and dark themes
and still incorporating
your brand's colors
and accent colors
is incredibly hard.
Material design can help
your design team bootstrap
a design that respects all
the best practices material
has established.
On material.io, you can find a
number of resources, including
a code lab to get you started.
One last tip-- remember
that not everyone who
has Dark Mode activated
on their operating system
necessarily wants
websites to be dark too.
It is a nice gesture
to provide users
with a Dark Mode
toggle for your site
that initially respects
people's prefers-color-scheme
preference.
But then, I'll ask them to
temporarily or even permanently
override it.
You can easily support this
use case with a custom element
that we've developed right for
this purpose, dark-mode-toggle.
All you need to do is load
the custom element script
and then include
it on your page.
You can find out more about
this custom element on GitHub.
And with that, thank you
very much for watching.
You can find links to all
the features, articles,
and code samples from this
video in the description.
See you next time,
and enjoy Dark Mode.
[MUSIC PLAYING]
