Create a Dark Mode Switch with HTML CSS Javascript

Adding a Dark Mode toggle feature to your web project can greatly enhance user experience, making it easier on the eyes during nighttime browsing. In this tutorial, we’ll walk through how to create a simple yet visually appealing Dark Mode toggle using HTML, CSS, and JavaScript, with icons representing the on and off states.

Step 1: HTML Structure

Start by setting up the basic HTML structure. You'll need a container for your content and an image-based button to toggle Dark Mode:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="content">
    <h1>Dark Mode Toggle</h1>
    <button id="darkModeToggle">
      <img src="light-mode-icon.png" alt="Light Mode" id="toggleIcon">
    </button>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Next, style your content and the Dark Mode feature using CSS. Define the styles for both light and dark modes, and make sure the toggle button is clearly visible:

body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.content {
    text-align: center;
    margin-top: 20%;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

.light-mode {
    background-color: #ffffff;
    color: #000000;
}

Step 3: JavaScript Functionality

Finally, add JavaScript to make the Dark Mode toggle functional. This script will change the mode based on user interaction and swap the icon accordingly:

const toggleButton = document.getElementById('darkModeToggle');
const toggleIcon = document.getElementById('toggleIcon');

toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    if (document.body.classList.contains('dark-mode')) {
        toggleIcon.src = 'dark-mode-icon.png';
    } else {
        toggleIcon.src = 'light-mode-icon.png';
    }
});

This implementation allows you to easily switch between light and dark modes with a simple click, improving your website's usability and giving it a modern touch.

Comments

Creating an Interactive Tic Tac Toe Game

In this tutorial, we'll walk through the steps to create a dynamic Tic Tac Toe game using HTML, CSS, and JavaScript. This classic game is a great way to practice your web development skills and learn more about interactive web applications. HTML Structure We'll start with the HTML structure, which includes the game board, a reset button, and a status display: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tic Tac Toe</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Tic Tac Toe</h1> <div id="board" class="board"></div> <button id="reset">Reset Game</button> <div id=...

Creating a Simple Car Racing Game with HTML, CSS, Javascript

In this post, we will create a simple car racing game using HTML, CSS, and JavaScript. This game will feature a player car, an opponent car, and a score counter. The player can move their car left and right to avoid collisions with the opponent car. Let's dive into the code! HTML Structure The HTML structure consists of a game area that contains the road, player car, opponent car, and score display: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Car Racing Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="gameArea"> <div class="road"></div> <div class="playerCar"></div> <div class="opponentCar"></div...

Create Your Own Chrome Dino Game with HTML, CSS, and JavaScript

Have you ever wanted to create your own version of the Chrome Dino game? With just a few lines of HTML, CSS, and JavaScript, you can bring this iconic game to life. Here's a step-by-step guide to building a simple yet fun version of the Dino game. HTML Start by creating an HTML file to define the game structure. You'll need a container for the game, a <div> for the dinosaur, another <div> for the cactus, and a score display. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chrome Dino Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="game-container"> <div id="dino" class="dino"></div> <div id="cactus" class="cactus...

Sky Code82

Search This Blog