We added a "Dark Mode" button
to our website.
But all it does at the moment if we click it
is changes its text.
What we want it to do
is actually change the colours of our page.
So let's see how to add some styles
to enable dark mode.
And for a start let's update
the "globals.css" styles.
"Dark mode" basically means
setting the "background-color" to a dark colour,
like "black".
And if we do that we also need to
change the "color",
that is the text colour,
to "white" for example.
And that's the result in the browser.
There's actually a small problem:
our "Dark Mode" button is not visible any more.
Let's go and fix that quickly.
What's happening is that the button text
is still being displayed as "black",
so it's the same as the background.
We can set the button "color" to "inherit",
so it will use the same colour
as its parent element,
which means "white",
since that's what we set on the "body".
And by the way we're setting
these styles on the "body",
because we want them to apply
to the entire document.
Now, the problem is that
we don't want our page to always look dark,
we want to be able to switch between
a dark and a light theme.
There are a few ways to do this,
but in this example we'll use CSS variables.
Let's define some global variables
using the ":root" pseudo-element.
CSS variables start with "--",
and then we can name them
however we like,
so we could define a "--background-color"
with a value of "white",
and let's call it a "--text-color"
with value "black".
So black text on white background
will be our "Light Theme".
Later we'll add a "Dark Theme" as well.
But first let's see how to use
those variables.
Instead of a normal value,
here we can use the "var()" function
and pass our variable name,
that is "--background-color".
So this expression will be
replaced with the value
of the "--background-color" variable.
Let's do the same for the "color",
before applying these changes.
In this case we want the value
of the "--text-color" variable.
If we save now,
you can see that the page displays
black text on white background.
Now, let's add the dark colour
by simply duplicating this block.
But this is the "Dark Theme",
so we want a "black" background,
and "white" "--text-color".
And if we save at this point,
we see the dark colours applied to the page.
The interesting thing here
is that we are redefining the values
of our CSS variables.
First we set them to the light theme,
then we set them again to the dark theme,
And the last definition wins.
So we can effectively set some default values,
that are our "Light Theme",
and then override them later
to use the "Dark Theme".
This will be useful to
change the theme dynamically.
But before we get to that,
let's improve our styles a little bit.
With a black background
our red links are not very readable.
So let's add another variable
for the "--link-color",
and by default we want it to be "darkred",
same as what we currently have.
But here we now want to use
the value of our "--link-color" variable.
So far this makes no difference.
If we comment out the Dark Theme
the default colour are the same as before.
But now we can redefine
that "--link-color" variable
for the Dark Theme.
We could use "yellow" in this case,
that works well on a black background.
That's much better, but
maybe these colours are a bit too saturated.
Let's pick a different shade of yellow,
maybe a bit more orange,
and also a bit darker,
like that.
That's easier on the eye.
We could do the same for the "white" as well,
make it just a tiny bit darker.
Something like that.
And our background could also be
slightly less black.
Ok, this will do for this example.
Of course feel free to pick
slightly different colours if you prefer.
The important thing is that
we have a different set of CSS variables
for our Dark Theme,
and in the next video we'll see
how to switch between the two themes
when the user clicks the button.