The Simple Guide to Creating a Dark and Light Mode Website

Author - Maketechstuff
May 26, 2023
0

In this blog post we going to make website (landing page) with registration form using HTML CSS & JavaScript that have dark and light mode.


Dark mode is a popular feature that many people use to reduce eye strain and improve their overall viewing experience. By creating a website with dark mode, you can make your website more accessible to a wider range of users.


In this tutorial, I'll walk you through the steps of creating a website with dark and light mode. We'll start by creating the HTML and CSS for the website. Then, we'll write the JavaScript code that will switch between the two modes.


By the end of this tutorial, you'll have a working website that can be switched between dark and light mode. You'll find full source code for this tutorial at the end of the blog post.


website with dark and light mode


You may have seen many websites or apps that have dark and light mode theme options. In this blog we going to make simple website that have option to switch from dark to light and light to dark mode with toggle button.


So, what in this website:

  • Navigation bar.
  • Toggle button (for switching the theme colour).
  • Title and description.
  • Registration form.


Video Tutorial on Website With Dark & Light Mode.



Website with dark and light mode.

Its simple to make website with dark and light mode functionality. We going to use :root selector and var function in CSS.


File structure:

  1. Create one folder.
  2. Open it in your code editor.
  3. Create two files in that folder with name index.html and index.css.


I've integrated JavaScript within the HTML file.


So, let's start making website with dark and light mode step by step.


Step 1: Create basic html structure.

Link the CSS file with html file and add the basic structure of html.


HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    


</body>
<script>



</script>
</html>

CSS


*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}


Step 2: Create navigation for the website.

First we'll create a navigation menu for the website and to switch the modes (dark and light). we'll also add a toggle button and one tool tip for the toggle button that shows a hover on toggle button.


Also read: How to create animation on navigation menu on page load using HTML, CSS and JavaScript.

Also read: How to create toggle switch using only HTML and CSS.


HTML


<div class="container">
        <div class="menu">

            <div class="logo_text">Maketechstuff</div>

            <nav>
                <ul>
                    <li><a href="#">Home</a><span></span></li>
                    <li><a href="#">Services</a><span></span></li>
                    <li><a href="#">About Us</a><span></span></li>
                    <li><a href="#">Contact Us</a><span></span></li>
                </ul>
                <label class="button">
                    <input type="checkbox" class="checkbox">
                    <span></span>
                    <p class="tool_tip">Theme</p>
                </label>
            </nav>
        </div>



    </div>

CSS


.container{
    width: 100%;
    height: 100vh;
    background-color: #fff;
}
.container .menu{
    width: 90%;
    display: flex;
    justify-content: space-between;
    place-items: center;
    margin: 0px auto;
}
.menu .logo_text{
    font-size: 35px;
    font-weight: bold;
    color: #000;
}
.menu nav{
    display: flex;
    padding: 30px 0px;
}
.menu nav ul{
    display: flex;
    margin-right: 10px;
}
.menu nav ul li{
    list-style: none;
    margin: 0px 15px;
    position: relative;
}
.menu nav ul li span{
    position: absolute;
    width: 0px;
    height: 4px;
    border-radius: 200px;
    background-color: blue;
    bottom: -5px;
    left: 0px;
    transition: 0.3s;
}
.menu nav ul li:hover span{
    width: 100%;
}
.menu nav ul li a{
    font-size: 25px;
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

/* ---------- Toggle button ---------- */
.button{
    width: 60px;
    height: 30px;
    display: inline-block;
    background-color: #f2f2f2;
    border-radius: 200px;
    cursor: pointer;
    position: relative;
}
.button span{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 200px;
    margin: 5px;
    left: 0px;
    transition: 0.2s;
}

.button .tool_tip{
    position: absolute;
    top: 10px;
    left: -8px;
    background-color: #f2f2f2;
    padding: 5px 10px;
    pointer-events: none;
    font-size: 18px;
    border-radius: 5px;
    opacity: 0;
    transition: 0.2s;
    transition-delay: 0.5s;
}
.button:hover .tool_tip{
    opacity: 1;
    top: 50px;
}
input[type="checkbox"]:checked + span{
    left: 30px;
    background-color: blue;
}
input[type="checkbox"]{
    display: none;
}

Output :


website navigation


Step 3: Add website topic and description.

Now after navigation let's add a topic and description for the website and some buttons below the menu class. 


Here I made a website for learning web development so I added the topic 'learn web development'.


Below it for a short description I have added some text and after it two buttons.


Also read: CSS button hover effects.


HTML


<div class="content_box">

            <div class="title_and_description">
                <h1>Learn Web Development</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae quidem qui atque ducimus officia, ullam perferendis illo voluptas veritatis in odit repellendus asperiores nemo cupiditate.</p>
                <div class="button_box">
                    <button type="button" style="background-color: blue; color: #fff;">Explore blogs</button>
                    <button type="button">Learn More</button>
                </div>
            </div>



        </div>

CSS


/* ---------- content box ---------- */
.content_box{
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    justify-content: space-between;
    place-items: center;
}
.content_box .title_and_description{
    line-height: 1.5;
    width: 50%;
}
.content_box .title_and_description h1{
    color: blue;
    font-size: 50px;
}
.content_box .title_and_description p{
    color: #000;
    font-size: 20px;
}
.content_box .button_box{
    margin-top: 20px;
}
.content_box .button_box button{
    font-size: 25px;
    font-weight: bold;
    padding: 10px 25px;
    border-radius: 200px;
    background-color: transparent;
    color: #000;
    border: none;
    border: 2px solid blue;
    margin-left: 10px;
    cursor: pointer;
    transition: 0.2s;
}
.content_box .button_box button:hover{
    color: #fff;
    background-color: blue;
}

Output:


website title and description


Step 4: Add Registration Form in Website.

Now let’s add the registration form below the title and description (class="title_and_description") inside the content box (class="content_box"). So that users who want to learn web development can register. It is just the frontend but here is how you can make registration or signup form with backend using PHP and MySQL.


As the title and description (class="title_and_description")and signup form (class="signup_class") is in the same element (class="content_box") we can display the both side by side by display flex property of CSS.


Also read: How to create Login and Registration form using HTML, CSS and JavaScript.


HTML


            <div class="signup_form">
                <h2>Registration</h2>
                <form action="#">

                    <div class="input_box">
                        <input type="text" required>
                        <label>Username</label>
                    </div>
                    <div class="input_box">
                        <input type="text" required>
                        <label>Email Id</label>
                    </div>
                    <div class="input_box">
                        <input type="text" required>
                        <label>Create Password</label>
                    </div>

                    <div class="link">By submitting the form you agree to <a href="#">Terms & Conditions</a></div>
                    <button type="submit">Submit</button>
                    <div class="contact_link">Need Help? <a href="#">Contact Us</a></div>
                </form>
            </div>

CSS


/* ---------- Sign Up Form ---------- */
.signup_form{
    width: 400px;
    background-color: blue;
    border-radius: 20px;
    text-align: center;
    padding: 20px 30px;
    border: 2px solid blue;
}
.signup_form h2{
    color: #fff;
    font-size: 30px;
}
.signup_form form .input_box{
    width: 100%;
    border-bottom: 2px solid #fff;
    margin: 25px 0px;
    position: relative;
}
.signup_form form .input_box input{
    width: 100%;
    font-size: 25px;
    padding: 10px 0px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
}
.signup_form form .input_box label{
    position: absolute;
    font-size: 20px;
    left: 0px;
    top: 15px;
    color: #fff;
    pointer-events: none;
    transition: 0.2s;
}
.signup_form form .input_box input:focus + label,
.signup_form form .input_box input:valid + label{
    top: -12px;
    font-size: 16px;
}
.signup_form form button{
    font-size: 25px;
    font-weight: bold;
    padding: 5px 0px;
    width: 100%;
    background-color: #fff;
    border: none;
    color: #000;
    border-radius: 10px;
    cursor: pointer;

}
.signup_form form .contact_link,
.signup_form form .link{
    font-size: 16px;
    margin: 25px 0px;
    color: #fff;
}
.signup_form form .contact_link a,
.signup_form form .link a{
    font-weight: bold;
    color: #fff;
}

Output :


website with registration form


So that’s the basic design. You can say it’s the light mode of a website. Now let’s add dark mode and add functionality to the toggle button to switch between modes.


Step 5: Create a dark mode.

We are going to make dark mode by using :root selector and var() function in css.


First let’s create a variable for colours in: :root selector which is currently being used in websites and you want to change it in to the dark mode.


To create a variable inside :root selector you have to initialise variables with -- to create variables in :root selector.


CSS


:root{
    --first: #fff;
    --second: #000;
    --third: blue;
    --four: #fff;
}


After that create another class (I gave a name .theme) in CSS. And change :root selector variables value to the colour that you want to display in dark mode.


For example in :root selector, --first variable have value of colour of #fff, Now what colour you want instead of #fff on switch to dark mode.


If you want #000 colour than update or change the --first variable value to #000 inside theme class.


CSS


.theme{
    --first: #000;
    --second: #fff;
    --third: #1b1b1b;
    --four: blue;

}


Now update all the colour codes in all elements in the css file that you want to change colour on dark mode with variable names in :root selector that have the same colour codes which elements have already.


Means if you want to change white colour to black of a element on dark mode to an element, then add variable name that have value of white colour(#fff) in :root selector and have same variable name with value black colour (#000) in .theme class that was created above (for dark theme).


How do you update the colour codes ? If you want to change white colour to black then see in :root selector which variable value have white colour (#fff) and change to black in .theme. It's --first right. So add a colour value like this color: var(--first); to the element that you want to change colour from white to black in dark mode.


See below css that I have updated. I have updated the colour value with :root variables value which I want to change to dark mode.


CSS


:root{
    --first: #fff;
    --second: #000;
    --third: blue;
    --four: #fff;
}
.theme{
    --first: #000;
    --second: #fff;
    --third: #1b1b1b;
    --four: blue;

}
.container{
    width: 100%;
    height: 100vh;
    background-color: var(--first);
}
.container .menu{
    width: 90%;
    display: flex;
    justify-content: space-between;
    place-items: center;
    margin: 0px auto;
}
.menu .logo_text{
    font-size: 35px;
    font-weight: bold;
    color: var(--second);
}
.menu nav{
    display: flex;
    padding: 30px 0px;
}
.menu nav ul{
    display: flex;
    margin-right: 10px;
}
.menu nav ul li{
    list-style: none;
    margin: 0px 15px;
    position: relative;
}
.menu nav ul li span{
    position: absolute;
    width: 0px;
    height: 4px;
    border-radius: 200px;
    background-color: blue;
    bottom: -5px;
    left: 0px;
    transition: 0.3s;
}
.menu nav ul li:hover span{
    width: 100%;
}
.menu nav ul li a{
    font-size: 25px;
    text-decoration: none;
    font-weight: bold;
    color: var(--second);
}

/* ---------- Toggle button ---------- */
.button{
    width: 60px;
    height: 30px;
    display: inline-block;
    background-color: #f2f2f2;
    border-radius: 200px;
    cursor: pointer;
    position: relative;
}
.button span{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 200px;
    margin: 5px;
    left: 0px;
    transition: 0.2s;
}

.button .tool_tip{
    position: absolute;
    top: 10px;
    left: -8px;
    background-color: #f2f2f2;
    padding: 5px 10px;
    pointer-events: none;
    font-size: 18px;
    border-radius: 5px;
    opacity: 0;
    transition: 0.2s;
    transition-delay: 0.5s;
}
.button:hover .tool_tip{
    opacity: 1;
    top: 50px;
}
input[type="checkbox"]:checked + span{
    left: 30px;
    background-color: blue;
}
input[type="checkbox"]{
    display: none;
}

/* ---------- content box ---------- */
.content_box{
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    justify-content: space-between;
    place-items: center;
}
.content_box .title_and_description{
    line-height: 1.5;
    width: 50%;
}
.content_box .title_and_description h1{
    color: blue;
    font-size: 50px;
}
.content_box .title_and_description p{
    color: var(--second);
    font-size: 20px;
}
.content_box .button_box{
    margin-top: 20px;
}
.content_box .button_box button{
    font-size: 25px;
    font-weight: bold;
    padding: 10px 25px;
    border-radius: 200px;
    background-color: transparent;
    color: var(--second);
    border: none;
    border: 2px solid blue;
    margin-left: 10px;
    cursor: pointer;
    transition: 0.2s;
}
.content_box .button_box button:hover{
    color: #fff;
    background-color: blue;
}
/* ---------- Sign Up Form ---------- */
.signup_form{
    width: 400px;
    background-color: var(--third);
    border-radius: 20px;
    text-align: center;
    padding: 20px 30px;
    border: 2px solid blue;
}
.signup_form h2{
    color: #fff;
    font-size: 30px;
}
.signup_form form .input_box{
    width: 100%;
    border-bottom: 2px solid #fff;
    margin: 25px 0px;
    position: relative;
}
.signup_form form .input_box input{
    width: 100%;
    font-size: 25px;
    padding: 10px 0px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
}
.signup_form form .input_box label{
    position: absolute;
    font-size: 20px;
    left: 0px;
    top: 15px;
    color: #fff;
    pointer-events: none;
    transition: 0.2s;
}
.signup_form form .input_box input:focus + label,
.signup_form form .input_box input:valid + label{
    top: -12px;
    font-size: 16px;
}
.signup_form form button{
    font-size: 25px;
    font-weight: bold;
    padding: 5px 0px;
    width: 100%;
    background-color: var(--four);
    border: none;
    color: var(--second);
    border-radius: 10px;
    cursor: pointer;

}
.signup_form form .contact_link,
.signup_form form .link{
    font-size: 16px;
    margin: 25px 0px;
    color: #fff;
}
.signup_form form .contact_link a,
.signup_form form .link a{
    font-weight: bold;
    color: var(--four);
}


Now when you add that .theme class to the body tag then .theme class variable value or colour code will be applied and when removed then :root selector variable value will be applied. So the colour code will change. Making different colour theme.


We'll add and remove that .theme class inside the body tag with JavaScript based on the toggle button state.


Step 6: Adding JavaScript For Toggle Dark and Light Mode in Website.

To add and remove the .theme class in the body tag. We are going to use javascript. Here we used the toggle button, when the checkbox is checked we toggle the .theme class.


And the sliding functionality of the toggle button according to the checkbox state was added within the css file above.


JavaScript


    let button = document.querySelector(".button");
    let checkbox = document.querySelector(".checkbox");

    button.onclick = function(){
        if(checkbox.checked){
            document.body.classList.toggle("theme");
        }
    }

Output:


website with dark and light mode


As you can see when the toggle button is checked the dark theme is applied and when the unchecked light theme or previous styles are applied.


You may like:

  1. How to create a simple Login and Registration form using HTML, CSS and JavaScript.
  2. How to create a toggle button with images using HTML, CSS and JavaScript.
  3. How to make elements to change styling based on toggle button state.
  4. How to create simple website landing page using HTML and CSS.
  5. How to create registration form using PHP and MySQL with Prepared statement.


Final code:



In this tutorial, you learned how to create a website with dark and light mode using HTML, CSS, and JavaScript. By following the steps in this tutorial, you can create a working website that can be switched between the two modes.If you have any questions or suggestions you can write in the comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top