Dark Mode

Reko Library Is using a simple Dark Mode Configuration

Dark Mode only

Put a "dark" Class To the <body> element (This If you Want to use Dark mode only)

HTML
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>NEW PROJECT</title>
 <link rel="stylesheet" href="style.css">
 <script defer src="script.js"></script>                
</head>
<body class="dark">
 
</body>
</html>
Pug
doctype html
html(lang="en")
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title NEW PROJECT
    link(rel='stylesheet' href='style.css')
    script(defer, src='script.js')
  body.dark  
            

Toggle

Want To make it a toggle button by adding this id "body" to <body> element and a toggle button and give it id example "toggleBtn"

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEW PROJECT</title>
     <link rel="stylesheet" href="style.css">
     <script defer src="script.js"></script>                
</head>
<body id="body">
  <button id="toggleBtn">Toggle</button>
</body>
</html>
Pug
doctype html
html(lang="en")
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title NEW PROJECT
    link(rel='stylesheet' href='style.css')
    script(defer, src='script.js')
  body#body
    button#toggleBtn        

JavaScript

make a scipt.js in your root path and put this codes

JavaScript
  const body = document.getElementById("body");
  darkness = () => {
      body.classList.add("dark");
  },
  lightness = () => {
      body.classList.remove("dark");
  };
"dark" == localStorage.theme && darkness(),
  "light" == localStorage.theme && lightness(),
  light.addEventListener("click", () => {
    ("light" == localStorage.theme || null == localStorage.theme) &&
      localStorage.setItem("theme", "dark"),
      darkness();
  }),
  dark.addEventListener("click", () => {
    ("dark" == localStorage.theme || null == localStorage.theme) &&
      localStorage.setItem("theme", "light"),
      lightness();
  });