Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Dark Mode with React & Tailwind!
You have completed Dark Mode with React & Tailwind!
Preview
In this workshop, Dustin walks you through how to set up a sleek and functional dark mode toggle using React & Tailwind. You’ll learn how to configure Tailwind for dark mode support, manage theme state with React, and create a toggle switch that makes switching themes feel seamless. This workshop is perfect for developers who already have the basics of React and Tailwind down and are ready to level up their UI!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Are you using React?
0:00
Are you using Tailwind?
0:02
Do you want to make
0:04
a dark or a light
0:04
mode theme for your
0:05
website or app?
0:06
Let me show you
0:08
how it's done.
0:08
My name is
0:09
Dustin and I'm a
0:10
developer here at Treehouse. Let's get started.
0:10
So to get started with
0:14
a new React project,
0:15
I'm going to use Vite.
0:17
We'll say NPM create
0:18
Vite at latest.
0:20
I'm going to call
0:22
this dark mode.
0:23
We'll set this up with
0:24
React and we'll set this
0:25
up as a JavaScript
0:27
project.
0:28
Now I'm going to
0:30
CD into dark mode
0:30
and just run NPM,
0:32
I
0:33
to install everything and then we'll
0:33
open this up in the editor.
0:35
All right.
0:37
Now that we're
0:38
in the editor,
0:38
I'm going to go ahead
0:39
and delete a few
0:40
things just to kind
0:41
of get us started.
0:42
Inside of index.cs,
0:43
I'm going to copy
0:45
everything and just
0:47
erase it.
0:49
I'm going to completely
0:50
remove the app.cs file
0:51
and inside of app.js,
0:53
I'm going to copy
0:55
everything and create a
0:56
basic app file.
0:57
Okay.
0:59
So now let's open up the
1:00
terminal and run NPM,
1:01
run dev.
1:03
Let's see
1:05
our project in
1:05
the browser.
1:06
Okay.
1:07
So it's pretty basic.
1:08
It just says app.
1:08
So in order
1:10
to install Tailwind,
1:10
I came to the docs
1:11
here because it's
1:12
been a while since
1:13
I've used this
1:13
with React and Vite.
1:14
So using Vite,
1:15
we need to run NPM install
1:17
and install a few of the
1:19
packages here.
1:21
So let's go back into
1:22
the terminal and I'm
1:23
going to paste this in.
1:24
It's NPM
1:25
install Tailwind.cs.
1:25
All right.
1:28
Now that that
1:28
is finished,
1:29
it says we need to
1:30
import the Tailwind
1:31
into our Vite config.
1:33
So let's do that at
1:35
the top of the file
1:35
and also let's include
1:36
in our plugins,
1:38
Tailwind.cs
1:40
and hit save.
1:41
We should see
1:42
our project now.
1:43
It should look a little
1:44
different than earlier,
1:45
but let's make sure that
1:45
Tailwind is
1:47
installed correctly.
1:48
So let's go to our app
1:50
and let's say
1:52
class name and we'll say
1:52
text, red, 500. Okay.
1:55
Cool.
1:58
It works.
1:59
So Tailwind is
1:59
officially set up with
2:00
our basic React project.
2:02
I'm going to build a
2:05
very quick UI with just
2:05
a couple of buttons.
2:07
I'll
2:07
speed through this
2:08
since this isn't
2:09
really the main
2:10
part of the video.
2:10
And when I'm done,
2:12
I'll come back
2:13
and I'll explain what
2:13
we've done and how
2:14
we're going to start
2:15
setting up our dark mode.
2:16
So what I'm doing here,
2:29
I just wanted to
2:31
kind of stop and
2:31
show this to you.
2:32
I'm importing
2:34
some icons.
2:34
This is super
2:36
simple to do.
2:36
I really like
2:37
React icons.
2:38
All you need to do
2:39
is just go to react
2:40
icons.github.com.
2:41
I'll put a link down
2:43
below for you and just
2:44
type in whatever icon
2:46
that you're looking for.
2:47
I'm going to type in sun
2:49
because I'm going to use a
2:50
sun icon and I
2:51
really like this
2:53
one from Lulu Sun.
2:53
So you just copy
2:55
this import.
2:56
You paste it at the
2:57
top of the file that you
2:58
want to use the icon.
2:59
Then you copy the
3:00
code for the icon and
3:01
you just paste it.
3:02
And then all you
3:03
need to do to use
3:04
it is just run
3:04
npm.
3:05
I react icons to install
3:06
the icon library.
3:08
Run your server again.
3:11
Make sure you
3:13
hit save in your
3:13
component.
3:14
And then when you go
3:15
back to the browser,
3:16
you should see an icon.
3:17
Pretty cool.
3:18
Okay, so I think
3:26
we're done.
3:27
This is pretty basic.
3:27
I'll go over
3:28
it really fast.
3:29
We just have a
3:30
container that is the
3:31
full height of the
3:32
height and width
3:33
of the browser.
3:34
And I placed everything
3:35
in the center.
3:35
And the only thing
3:36
in the center is this
3:37
one container that
3:38
contains our buttons.
3:39
And it's basically
3:41
just a container that
3:42
contains two buttons.
3:42
We have a sun icon
3:44
for light mode and we
3:45
have a moon icon for
3:46
dark mode.
3:47
And right now,
3:48
nothing happens because
3:48
we don't have any
3:49
logic for this yet.
3:50
But
3:52
right now,
3:52
I'll show you how we
3:53
can set up the dark mode.
3:54
It's actually
3:55
very, very simple.
3:56
If we go back to
3:57
the tailwind docs and
3:58
we go to dark mode.
4:00
And we scroll down.
4:03
We see that we need to
4:05
add this to our CSS. Okay,
4:06
so I'm going to go
4:08
ahead and copy this.
4:09
And back in our index.
4:11
CSS file,
4:12
I'm just going to
4:12
paste that in
4:13
there and hit save.
4:13
Now that doesn't
4:15
do anything,
4:16
but what it allows us to
4:17
do is add a class name.
4:18
So if I were to
4:20
add the class of dark on
4:22
our entire page right here,
4:24
right?
4:26
Nothing will happen
4:27
because we don't have any
4:27
dark classes set up.
4:28
But in order to set
4:30
up a dark class,
4:31
it's pretty simple.
4:31
So right now,
4:33
you can see for
4:33
the entire app,
4:34
we're using a
4:35
BG of white.
4:35
You can see this by
4:37
changing it to red.
4:38
So this is controlling
4:39
the entire page.
4:40
Let's set that
4:42
back to white.
4:43
Now,
4:44
if we want to have
4:45
a different color for
4:45
this in dark mode,
4:47
we would just need
4:48
to write dark colon,
4:48
BG.
4:51
And then we could say
4:52
zinc 800 something dark,
4:53
right?
4:55
And then we'll hit save.
4:56
And now you see that
4:57
we have this dark mode.
4:58
And that's because
4:59
of this dark class
5:00
that we have set on
5:01
the parent container.
5:02
So if we remove that,
5:04
we'll have our light mode.
5:05
If we add it back,
5:06
we'll have our
5:07
dark mode.
5:08
So I'm going to
5:09
leave this class on
5:09
the parent container
5:11
so that I can adjust
5:12
how our app
5:13
looks in dark mode.
5:14
For the button
5:15
container,
5:16
we can say dark
5:16
BG zinc 700. And
5:18
now for the hover,
5:21
I think that hover is
5:23
just a little too light.
5:24
Something really cool that
5:25
we can do pro tip.
5:26
We can say dark, hover,
5:27
BG zinc 100. And
5:31
if we hit save,
5:35
you'll see it's
5:36
pretty light,
5:36
but we can actually
5:37
reduce the opacity
5:38
by just adding
5:39
a forward slash.
5:40
And then our
5:41
opacity value,
5:42
you could say like
5:43
10%. So now when
5:44
we hover over it,
5:45
it's a little
5:46
bit lighter,
5:46
which I think
5:47
looks really good.
5:48
And I also think
5:50
we want to take the
5:51
text and we'll say
5:52
dark text white.
5:53
So this is what our
5:56
button will look
5:57
like in dark mode.
5:57
I really like
5:58
these settings.
5:59
So let's go ahead
6:00
and just copy.
6:01
This for our second
6:03
button as well.
6:04
Cool.
6:06
So this is
6:07
our dark mode.
6:07
And if we go ahead
6:09
and take the dark
6:10
class off of the
6:10
parent container,
6:12
we'll have our
6:12
light mode.
6:12
So now we should work
6:13
with use state to
6:15
manage the state of the
6:16
application so that
6:17
our users can choose
6:19
if they want a
6:20
dark or light mode.
6:21
And that's
6:22
really simple.
6:23
We're going to need
6:24
import use state.
6:24
So I'll say import
6:25
use state from react.
6:26
And just above the
6:31
return statement,
6:32
we're going to set
6:33
up our variables.
6:34
We'll say theme and
6:35
then set theme is
6:36
equal to use state.
6:38
And we'll just set
6:40
an empty string.
6:40
So basically whenever
6:42
we want our dark
6:42
mode to be active,
6:43
we'll set the
6:44
theme to dark.
6:45
But whenever we don't
6:47
have dark mode activated,
6:48
we'll just have an empty
6:49
string for our theme.
6:50
And now we just need
6:51
to set up some on
6:52
clicks on our buttons.
6:53
So for the light mode,
6:55
we'll say set theme
6:56
and we'll set it
6:57
to an empty string.
6:58
Let's just copy this
7:00
on click for our second
7:00
button and then we
7:02
will just write dark.
7:03
And we'll hit save.
7:07
So now whenever we click
7:10
this dark mode icon,
7:12
which is the moon,
7:14
it will set our
7:15
theme as dark.
7:15
And then whenever we
7:16
click the light icon,
7:17
it's just going to set
7:19
it to an empty string.
7:19
So all we need to
7:21
do is conditionally render
7:22
that class of dark to
7:23
this container based off
7:25
what the value of theme
7:26
is in our state.
7:27
Let's go ahead and remove
7:29
these quotation marks
7:30
and replace them with
7:31
curly braces because we're
7:32
going to need to write
7:34
some logic in here.
7:34
And also we're going to
7:36
add a set of backticks.
7:38
And then at the
7:40
very beginning,
7:40
let's just
7:41
interpolate a value.
7:41
We can say if theme
7:43
is equal to dark,
7:44
let's add the
7:46
class of dark.
7:46
And if not, we'll
7:47
set a class.
7:48
Well, we won't
7:49
actually set a class.
7:50
So let's click
7:52
our dark mode.
7:53
Sweet,
7:54
it changes everything
7:54
to dark and clicking
7:55
light mode changes
7:56
everything back.
7:57
So setting up dark
7:59
mode for our website
8:00
or app is really
8:00
simple with react,
8:02
especially
8:03
using tailwind.
8:03
And I really hope that
8:04
you can use this to make
8:05
some really cool looking
8:07
apps in the future.
8:08
I'll see you guys
8:09
in the next one.
8:10
Peace.
8:11
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up