How to Implement Dark/Light Themes in Your Web Apps-JS Tutorial-php.cn

How to Implement Dark/Light Themes in Your Web Apps

王林

Release： 2024-07-19 14:22:08

Original

936 people have browsed it

Have you ever toggled between dark and light themes on a website and thought, "I wish my site could do that"? Well, now it can. In this article, I'll show you how to implement dark and light modes in your web projects using HTML, CSS, and JavaScript, giving your users the best visual experience.

Prerequisite: A basic understanding of HTML and CSS is required to comprehend this tutorial.

Dark/light theme Implementation

The key components of setting up a dark mode/light mode on websites are:

A webpage
A button for switching between the themes
The theme or color to be switched
The logic behind switching the theme and button text.

A Webpage

Set up your project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Tour App</title>
</head>
<body>
    <div class="hero-sec">
        <div class="col1">
            <h1>Everyday Is a Journey</h1>
            <p>Visit any Location Virtually, Anytime, Anywhere</p>
            <button>Tour</button>
        </div>
        <div class="col2">
            <img src="img.jpg" alt="landscape" width="560px">
        </div>
    </div>
</body>

</html>

Copy after login

Output of plain web page

Web app theming image

A Toggle Button

It is important to add the theme toggle button. This is the button that triggers the change of color from light mode to dark mode and vice versa.

    <button id="toggle-button">Dark mode</button>

Copy after login

How to Implement Dark/Light Themes in Your Web Apps

Light/dark mode theme

This is a crucial step because two themes or colors are involved here. We need a way to attach different styles to the web page with few lines of code. We will be using CSS variables for theming. Please read my article on CSS Variables if it sounds new to you .

Step 1:
Declare the style for the light theme

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme

Copy after login

Step 2:
Declare the class for the dark theme

.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
// This is the class that will be added onclick of the button

Copy after login

Note: The variable names must be the same.

This can be done without variables by using only the body element. However, it is better to use CSS variables because many occasions require more than the background color to be changed. Some web app theming requires changing text colors, border colors, shadows, etc. So using a variable allows full control of all elements, especially in large applications.

Let's complete the styling of our web page. Ensure your CSS is linked to the HTML file.

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
body{
    background: var(--bg);
    color: var(--color);
    font-family: monospace
}
.hero-sec{
    display: flex;
    justify-content: space-evenly;
    color: var(--color);
    margin-top: 48px;
}
.col1{
    margin-top: 6rem;
    height: 40%;
}
h1{
    font-size: 2.5rem;
}
p{
    font-size: 1.3rem;
}
button{
    padding: 1rem 2rem;
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.hero-sec button{
    font-size: 1.3rem;
}

Copy after login

Output

How to Implement Dark/Light Themes in Your Web Apps

The logic behind switching themes

When a user clicks the toggle button, we expect two things to happen.

The theme or color mode of the website should change.
The text on the button should change.

To Change the theme
Manipulate the DOM (Document Object Model) to get the button and body of the web page.
Declare a function to add "dark" class to the body element (which we already declared in the css).
Call the function once a user clicks the dark/light mode button. Ensure your JS is linked to your HTML.

const toggleBtn = document.getElementById("toggle-button")
const body = document.body

function toggleTheme() {
    body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);

Copy after login

To change the text
Add another block of code to the toggleTheme function. This code simply means that If the body contains the class "dark", toggle text to "Light mode" and vice versa.

if (body.classList.contains("dark")) {
        toggleBtn.textContent = "Light Mode";
    } else {
        toggleBtn.textContent = "Dark Mode";
    }

Copy after login

This can be done in one line for cleaner code.

 toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"

Copy after login

Yes, You can switch themes now. Cool Right? Check the attached video for full demo.

dark mode website

In Conclusion

By following the steps outlined in this tutorial, you can provide your users with the flexibility to choose their preferred theme, making your web app more engaging and accessible.
If you enjoyed my article you can Buy Me A Coffee to Support my Work

Read my other articles on Progressive Web Apps, Innermost workings of the web, CSS Variables, A Beginner's guide to front-end dev and more.

Please Like, Comment, and Follow for more web-dev and tech-related articles. Happy Coding!!!

The above is the detailed content of How to Implement Dark/Light Themes in Your Web Apps. For more information, please follow other related articles on the PHP Chinese website!