Devcrea
common.loading

Dark and Light Mode Toggle in Your Website Using HTML, CSS, and JavaScript

Ekin Yalgin
Ekin Y.
Programming
0
Helpful
0
Not Helpful

In this tutorial, you will learn how to add a dark and light theme toggle to your website. This feature is especially useful for developers, web designers, and blog owners who want to enhance user experience. The dark theme reduces eye strain in low-light conditions, while the light theme improves readability in daylight. Providing users with the ability to switch themes enhances accessibility and personalizes their browsing experience.

Now, let's go step by step to implement this feature using HTML, CSS, and JavaScript.

How the Theme Toggle Works

When the user clicks the toggle button, the JavaScript code checks the current theme of the page. If the page is currently in dark mode, the corresponding CSS classes that set the background and text color are removed and replaced with light theme classes. This transition switches the page to light mode.

Conversely, if the page is in light mode, the reverse happens. The light theme classes are removed, and the dark theme classes are added. This change darkens the background and turns the text color white.

Additionally, CSS is used to modify the position and color of the toggle button, providing visual feedback. By shifting the button left or right, users can easily identify the active theme and switch as needed.

Basic Structure of the HTML File

First, create a file named index.html and add the following basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Dark and Light Theme Toggle</title>
</head>
<body class="bg-white text-black min-h-screen flex items-center justify-center">
    <div class="container mx-auto p-4 flex flex-col items-center">
        <div class="flex items-center mb-4">
            <div id="toggle" class="toggle mr-2"></div>
            <span id="toggle-text" class="text-lg font-semibold">LIGHT MODE</span>
        </div>
        <p id="sample-text" class="text-center text-lg">Neque porro quisquam est qui dolorem ipsum.</p>
        <img id="sample-image" class="rounded mt-5 border border-gray-400 p-2" src="https://via.placeholder.com/150" alt="Sample">
    </div>
    <script src="script.js"></script>
</body>
</html>

Why Tailwind CSS?

  • It allows for faster and more flexible design using predefined styles.
  • The toggle button is added to enable users to switch themes.
  • A span tag is included to display the current theme mode dynamically.
  • A sample paragraph and an image are included to observe how theme changes affect more than just the background.

Styling the Toggle Button in CSS

Next, create a style.css file and add the following styles:

.toggle {
    width: 60px;
    height: 30px;
    background-color: #333;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: transform 0.3s;
}

.toggle.dark {
    background-color: #bbb;
}

.toggle.dark::before {
    transform: translateX(30px);
}
  • The toggle button is designed with a width of 60px and a height of 30px.
  • The ::before pseudo-element is used to create the moving circular switch inside the toggle.
  • When the dark class is added, the button’s color and position change accordingly.

Implementing Theme Toggle with JavaScript

Now, create a script.js file and add the following JavaScript code:

const toggle = document.getElementById('toggle');
const toggleText = document.getElementById('toggle-text');
const body = document.body;
const sampleImage = document.getElementById('sample-image');

toggle.addEventListener('click', () => {
    const isDarkMode = body.classList.contains('bg-black');

    if (isDarkMode) {
        body.classList.remove('bg-black', 'text-white');
        body.classList.add('bg-white', 'text-black');
        toggle.classList.remove('dark');
        toggleText.textContent = 'LIGHT MODE';
        sampleImage.classList.remove('border-gray-800');
        sampleImage.classList.add('border-gray-400');
    } else {
        body.classList.remove('bg-white', 'text-black');
        body.classList.add('bg-black', 'text-white');
        toggle.classList.add('dark');
        toggleText.textContent = 'DARK MODE';
        sampleImage.classList.remove('border-gray-400');
        sampleImage.classList.add('border-gray-800');
    }
});
  • When the toggle button is clicked, the theme switches.
  • The body element’s classes are updated to change the background and text colors.
  • The toggle-text updates dynamically to reflect the active mode.
  • The image border color changes based on the selected theme.

Conclusion

In this tutorial, you learned how to implement a dark and light theme toggle using HTML, CSS, and JavaScript. This enhances user experience by providing a more customizable and accessible browsing environment.

Share