Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make DARKMODE option!
Minikeyboard (25)

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:


.dark-mode {
background-color: black;
color: white;


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.

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

Now start a new tag called:
Easy job, you know! After add a button tag:
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!

Minikeyboard (25)

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