Skip to content
← Back to Community
How to make DARKMODE option!
Profile icon
Minilofe

Hey guys! I just wanted to show and show a cool method you could use for DARK-MODE in your websites/codes!

To start with open up a new project (If you want to start a new one!) Go to the page you wish has the effect and start with:

<style> -> You are doing all of this in the HTML so we will be using the CSS tags :)
After that, start a new CSS block you can call it anything but remember it as you will need it later.

.dark-mode { -> This starts a block. Now, this is what the whole block looks like:

.dark-mode {
background-color: black; -> This makes the color black!
color: white; -> This makes the color also white!
}

Just a quick double check; this is how your code should be looking right now!

<style> -> CSS Tag

.dark-mode { -> Starts the block
background-color: black; -> This makes the color black!
color: white; -> This makes the color also white!
} -> Ends the block.

Now, CSS is out of the way we can focus on JAVASCRIPT

First lets close the <style> tag by leaving a putting a </style> under the end of the CSS block. And now add a <script> tag. This is how your work should look right now:

<style>

.dark-mode {
background-color: black;
color: white;
}
</style>

<script>

Now lets create the function dark-mode(You can call it anything!) By copying the following line of code:

function dm() { -> This opens up a function.

Now copy this line of code, this links it to the HTML.
var element = document.body; -> Links to the HTML
And this is where you should've remembered what you called your CSS block (If you called it anything else!). If you can't remember go back up to your CSS tag and at the beginning of the block will be your name. This is the code which makes it all work! Without this this code would be useless.

element.classList.toggle("dark-mode"); -> Links the CSS to the function.

And now if you want to close the function with:
};
And close the Script Tag.
</script>

Well-done you're 2/3 of the way! Just need to do the button.

Now start a new tag called:
<html>
Easy job, you know! After add a button tag:
<button
and add a function in it like this:
<button onclick="">
In-between the "" add your function (if you made your own one!) Mine was dm so I put <button onclick="dm()" Make sure you add the brackets! Or else your function won't work and after the Onclick add a > and write anything like: `<button 'onclick="dm()">DARK MODE</button'
And you should be good to go!

Voters
Profile icon
gt1030gpu
Profile icon
NATHALIAGALLEGO
Profile icon
NathanielBadzmi
Profile icon
whyitsyou
Profile icon
kushalJain
Profile icon
InvisibleOne
Profile icon
Highwayman
Profile icon
TheSummit3145
Profile icon
Minilofe
Comments
hotnewtop
Profile icon
kushalJain

grt

Profile icon
Minilofe

@kushalJain Thanks!

Profile icon
Minilofe

@kushalJain Thanks ^^

Profile icon
kushalJain
Profile icon
Minilofe
Profile icon
InvisibleOne

Cool, much simpler then the way I did it

Profile icon
Minilofe
Profile icon
InvisibleOne
Profile icon
Minilofe

@InvisibleOne May I have a source code to your one?

Profile icon
Highwayman

Noice!

Profile icon
Minilofe

@Highwayman Thanks! It means a lot because you voted for me! Nice you have 1335 votes =3

Profile icon
Highwayman
Profile icon
TheSummit3145

poggers

Profile icon
Minilofe