search

Home >Web Front-end >JS Tutorial >How to Implement Dark/Light Themes in Your Web Apps

How to Implement Dark/Light Themes in Your Web Apps

王林
王林Original
2024-07-19 14:22:08937browse

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>

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>

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

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

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;
}

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);

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";
    }

This can be done in one line for cleaner code.

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

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!

JavaScript css html Object if switch for require using class JS function dom this border background web app
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Preventing Supply Chain Attacks in JavaScriptNext article：Preventing Supply Chain Attacks in JavaScript

Related articles

See more