So, we defined some CSS variables
with different colours
for our dark and light themes.
What we want to do now is
change the theme depending on
the mode selected by the user.
Let's start by cutting out
the dark theme from here,
because we want the light theme
to be used by default.
We want to apply the dark theme
only when the user clicks
the ThemeSwitch button,
so we'll need to do that
somewhere in this component.
Let's see how we can do that.
We're going to use "styled-jsx"
to apply the dark theme,
but in this case we want these styles
to be "global".
Because normally with "styled-jsx"
the styles only apply to this React component.
But for the theme we want
these rules to apply globally,
everywhere in our application.
And styled-jsx provides
this special "global" property
precisely for this purpose.
This way we can redefine
our "color" variables
inside this component
but have them apply to the whole page.
I'm not sure why the button
is showing like that.
It must have been
something to do with Fast Refresh.
Anyway, this is how we can apply
the dark theme from here.
But we only really want to apply those styles
when our "darkMode" state variable
is set to "true".
So we could add a condition
to our JSX elements:
if "darkMode" is a truthy value
then, and only then,
we'll apply these styles.
Now, this makes sense in theory,
but unfortunately it doesn't work.
We get an error that
is actually a bit obscure,
but looking at the stack trace
we can tell that it's happening
in some code to do with styled-jsx.
And this is in fact
a limitation of styled-jsx:
it's not possible to have
a "style" element
that's rendered conditionally.
Fortunately there's a workaround:
we can move these styles
to a separate React component.
So I'll cut them from here,
and go and create a new component,
let's call it "DarkTheme".
This is a normal React component,
as usual.
But what it will render
is just the "style" element
with our rules for the dark theme.
So once we have this separate component
we can use it in our "ThemeSwitch".
Let's start by using it directly,
without conditional logic.
We'll obviously need to import it.
I'll show you the import at the top,
just in case you're using a different editor
where you need to type it manually.
But like this, we'll apply the styles
that are defined in the "DarkTheme" component.
And it's actually nice to have them
encapsulated in their own component.
At this point we can reintroduce our condition,
and only display the "DarkTheme"
if "darkMode" is true.
So at the beginning, "darkMode" is false.
But if we click the button,
"darkMode" becomes true, and this causes
the "DarkTheme" component to be mounted,
and this in turn changes the colours.
If we click the button again,
'darkMode" becomes false,
so the DarkTheme component is unmounted,
and the page reverts
to the default colours.
If we inspect the page elements
we can see exactly which styles
are applied to the "body".
If you look under "Styles" you can see that
the "background-color" is currently white.
Now, if we go and click the button
the "--background-color" variable is black.
Click again,
and it's white again.
We can actually look at the variables
directly as well.
That's the light theme.
But if we switch "Dark Mode" on,
you can see the same variables
overriden by the "DarkTheme" values
So this can be useful
if you need to debug your styles.
But with this, we've got our
"ThemeSwitch" button working:
when you click it
it will actually change the theme.
And note that everything we did
to implement this functionality,
like calling the useState hook,
and conditionally applying some styles,
all this would be exactly the same
in a normal React app, without Next.js.
Still, there is something
slightly different happening
when running this code in Next.js,
and we'll see exactly what
in the next video.