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">

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

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

*::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)