Scribd Logo
Upload

Welcome to Scribd!

  • Untitled

    Uploaded by

    Uchiha Itachi
    7 views1 page
    This document contains code for a dark mode button that toggles the page between light and dark themes. It uses CSS variables to define colors for text and backgrounds, and applies different values for the light and dark classes. When the checkbox is clicked, JavaScript toggles the light class on the body, changing the CSS variables and switching the page theme.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code for a dark mode button that toggles the page between light and dark themes. It uses CSS variables to define colors for text and backgrounds, and applies different values for the light and dark classes. When the checkbox is clicked, JavaScript toggles the light class on the body, changing the CSS variables and switching the page theme.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    7 views1 page

    Untitled

    Uploaded by

    Uchiha Itachi
    This document contains code for a dark mode button that toggles the page between light and dark themes. It uses CSS variables to define colors for text and backgrounds, and applies different values for the light and dark classes. When the checkbox is clicked, JavaScript toggles the light class on the body, changing the CSS variables and switching the page theme.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 1

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>darkmode</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </head>

    <style>
    :root {
    --text-color: #fff;
    --bg-color: #121212;
    }

    .light {
    --text-color: #121212;
    --bg-color: #fff;
    }

    body {
    color: var(--text-color);
    background-color: var(--bg-color);
    transform: all 2.5s;
    }
    </style>
    <body>
    <section>
    <h1>dark mode button</h1>

    <label class="toggle">
    <input type="checkbox" />
    <span class="slider"></span>
    </label>
    </section>

    <script>
    const checkbox = document.querySelector("input[type='checkbox']");
    checkbox.addEventListener("click", () => {
    document.body.classList.toggle("light");
    });
    </script>
    </body>
    </html>

    You might also like