DEV Community

Mauricio Yair
Mauricio Yair

Posted on

Easy Mode Dark

I would like share a esay dark mode with CSS and JavaScript

I continuos learn JS and CSS this a example using variables in CSS, and use Selectors, Events, Class in JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Dark Mode</h1>
    <button id="app">Change the page color</button>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
 :root {
    --black: #000;
    --white: #fff;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
}

#app {
    border: none;
    padding: 10px 20px;
    background-color: #ececec;
    color: var(--black);
    text-transform: uppercase;
}

.light {
    background-color: var(--white);
    color: var(--black);
}

.dark {
    background-color: var(--black);
    color: var(--white);
}
Enter fullscreen mode Exit fullscreen mode
let $btn = document.querySelector("#app"); // get button tag
let $html = document.documentElement; // get html tag and the content
let $body = document.body; // get body tag and the content
let darkMode = getComputedStyle($html).getPropertyValue("--black"); // Here I get the value it has: CSS root 
let ligthMode = getComputedStyle($html).getPropertyValue("--white"); //Get the value that has: CSS root but in this case the color white

$btn.addEventListener("click", (e) => { // Added a listener to the button

    if (e.type === "click") { // Evaluated the type of event that ran
        $body.classList.toggle("dark"); // Add a class 
    }
    $body.classList.toggle("light"); // Remove a class
});
Enter fullscreen mode Exit fullscreen mode

I hope you like it, as a practice for handling the Document Object Model.

Top comments (0)