How to enable Dark Mode in Blogger Website

By -

Watch this video for procedure:

Youtube video


Copy the below code: 


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    /* Root Variables for Light and Dark Modes */

    :root {

      --bg-light: #ffffff;

      --text-light: #000000;

      --bg-dark: #121212;

      --text-dark: #ffffff;

    }


    /* Default Light Mode */

    body {

      background-color: var(--bg-light);

      color: var(--text-light);

      font-family: Arial, sans-serif;

      margin: 0;

      transition: background-color 0.3s, color 0.3s;

    }


    /* Dark Mode */

    body.dark-mode {

      background-color: var(--bg-dark);

      color: var(--text-dark);

    }


    /* Universal Styling for Content */

    .content, .post, .post-content, .entry-content, .blog-post {

      background-color: var(--bg-light);

      color: var(--text-light);

      padding: 20px;

      border-radius: 8px;

      margin: 20px;

      transition: background-color 0.3s, color 0.3s;

    }


    /* Content in Dark Mode */

    body.dark-mode .content,

    body.dark-mode .post,

    body.dark-mode .post-content,

    body.dark-mode .entry-content,

    body.dark-mode .blog-post {

      background-color: #1e1e1e;

      color: var(--text-dark);

    }


    /* Dark Mode Widget Styling */

    .dark-mode-widget {

      position: fixed;

      bottom: 20px;

      right: 20px;

      background-color: #f0f0f0;

      border: 2px solid #ccc;

      border-radius: 50px;

      padding: 8px 16px;

      display: flex;

      align-items: center;

      gap: 10px;

      font-size: 14px;

      cursor: pointer;

      z-index: 1000;

      transition: background-color 0.3s, box-shadow 0.3s;

    }


    .dark-mode-widget:hover {

      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    }


    /* Green color for "Dark Mode" text */

    .dark-mode-widget span {

      color: green;

      font-weight: bold;

    }


    .toggle-switch {

      width: 40px;

      height: 20px;

      background-color: #ccc;

      border-radius: 50px;

      position: relative;

      cursor: pointer;

      transition: background-color 0.3s;

    }


    .toggle-switch::after {

      content: '';

      position: absolute;

      top: 2px;

      left: 2px;

      width: 16px;

      height: 16px;

      background-color: #ffffff;

      border-radius: 50%;

      transition: transform 0.3s;

    }


    .toggle-switch.active {

      background-color: #4caf50;

    }


    .toggle-switch.active::after {

      transform: translateX(20px);

    }

  </style>

</head>

<body>

  <!-- Dark Mode Widget -->

  <div class="dark-mode-widget" id="darkModeWidget">

    <span>Dark Mode</span>

    <div class="toggle-switch" id="toggleSwitch"></div>

  </div>


  <script>

    const body = document.body;

    const darkModeWidget = document.getElementById('darkModeWidget');

    const toggleSwitch = document.getElementById('toggleSwitch');


    // Store state in memory

    let darkModeEnabled = false;


    // Function to update dark mode

    function applyDarkModePreference() {

      if (darkModeEnabled) {

        body.classList.add('dark-mode');

        toggleSwitch.classList.add('active');

      } else {

        body.classList.remove('dark-mode');

        toggleSwitch.classList.remove('active');

      }

    }


    // Toggle dark mode

    darkModeWidget.addEventListener('click', () => {

      darkModeEnabled = !darkModeEnabled;

      applyDarkModePreference();

    });


    // Apply on page load

    applyDarkModePreference();

  </script>

</body>

</html>


Comments

Post a Comment

Popular posts from this blog

SGPA/CGPA Calculator for GGSIPU

By -
Image
🎓 GPA/CGPA Calculator for GGSIPU 📚 Semester GPA (SGPA) Subject Marks Grade Credits Action ➕ Add Subject 🧮 Calculate GPA 🏆 Cumulative GPA (CGPA) Semester GPA Credits Action ➕ Add Semester 📈 Calculate CGPA Download PDF GPA and CGPA Calculation Introduction The Semester Grade Point Average (SGPA) and Cumulative Grade Point Average (CGPA) are metrics used to evaluate a student's academic performance over a semester and throughout the entire academic program, respectively. These calculations are based on the grades, grade points, and credits associated with each course. This guide explains the grading system, the formulas for calculating SGPA and CGPA, and the criteria for awarding degrees.
Read more

How to remember the charge of cation and anion

By -
Image
A charge are mainly two types: 1) Positive (+) 2) Negative (-) In chemistry, we consider a positive charged is called Cation and negative charge  is called Anion. Many students are confused in this case. So this trick you apply to remembering a charge of cation and anion. Let's start, 1) Anion    This trick you apply for learn a      charge of Anion. 2) Cation - If Anion is negative, it                      means Cation is positive. Now, we see how to remember a charge on electrode. Electrode are mainly two types: 1) Cathode 2) Anode Anion is negative charge but Anode is positive charge electrode. You see, In above case anion charge is opposite of anode charge. So, you learn in this way if anion is negative charge so, anode is positive charge electrode. Cation is positive charge but Cathode is negative charge electrode. You see, In above case cation charge is opposite of Cathode charge. So, you learn in...
Read more

Microsoft's Quantum Breakthrough: Majorana 1 and the Future of Topological Qubits

By -
Image
What Would the World Look Like With a Computer That Can Accurately Model Nature? Imagine a computer that can simulate the laws of nature with perfect precision. This is the promise of quantum computing—even though limitations have always existed, recent breakthroughs are turning science fiction into a blend of science and art. At Microsoft, one of its longest-running research projects has made history. The Microsoft research team has not only observed a subatomic particle that was once purely theoretical but has also learned to control it. This achievement has led to the creation of an entirely new material and a breakthrough architecture for quantum computing—one that scales to millions of qubits on a single chip. A New Era in Computation Personal fascination with puzzles, challenges, mathematics, and computers has long driven the pursuit of computational breakthroughs. When the concept of a computer that did not yet exist—but that could solve problems beyond the reach of digital m...
Read more
Dark Mode