Hey everyone what's up Dustin here I've got a quick one for you today
I want to show you how easily we can transform our project
from a light theme to a dark theme it's pretty easy and we mostly just use css
and only two lines of JavaScript let's hop into the code and take a better look
the way that we'll do this is by using CSS variables and in case you aren't familiar
with CSS variables let's go over them really quickly so in our style sheet we can set
up a new rule for the body and let's say we wanted to set up a background color of blue
well to do this with a variable we can just type in the variable name which will start with two
dashes so dash dash and we can call this body bg and we can set it to blue now all this does is
initialize a variable we aren't actually using this yet so in order to use it we'll need to
come in here and type in the var keyword with a set of parentheses
and inside of those parentheses we will just copy and paste our variable name so now this
is the same as saying background color blue css variables are actually pretty simple to use
let's hop into our main style sheet and take a look at what we've got so far
so in our body rule you'll notice at the very top we will have two variables that are already being
used for background color we are using the primary page bg which is right here and this
is the light gray background color and then we also have a variable being used for the
color which is primary text color and this is the dark gray that you see for the text
next you'll see accent color which is this light red that we're using for the underline as well as
the heart the rest of the variables are actually what we're going to change whenever we toggle our
dark mode so what we'll want to do is actually override all of these variables with darker
colors for our darker theme and the way that we can do that is by setting up a new body rule
with a class of dark and we can start overriding these by adding in different colors so our primary
text color will be a light color because our title panel bg as well as our snippet panel bg will have
darker colors our read more button will get a light background with darker text so we'll hit
save and we can test this by hopping into our html file and giving our body a class of dark and there
we go we have our dark theme but we don't want to do this like that we want to write some javascript
so let's hop into our javascript file and what we can do is target this button here
and this button has an id of toggle theme button so let's copy that and we'll add an event listener
so we can set this up in a variable
so we set up a toggle theme button and we're going to add an event listener for clicks
so toggle theme button dot add event listener click and we'll give it an anonymous function
and what we want to do is we want to toggle the dark theme for our body
and we can do that by typing in document body
dark and if you're unfamiliar with the classlist.toggle it basically adds a class of
dark if the body doesn't have one when this event listener runs and if it does then it just removes
it so let's hit save and let's click on our button there we go we have now toggled our dark theme
i hope this quick walk-through guide on setting up a dark theme toggle helps you create some
awesome looking projects or apps and if you do don't be afraid to share them with the community
until next time happy coding and i'll see you in the next one