Dark Theme Using JavaScript

byMYFILES-DOWNUP -October 19, 2021

DARK THEME USING HTML CSS AND JAVASCRIPT SCROLL DOWN AND COPY THE SOURCE CODES

HTML PART

<!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"> <title>Dark Mode ~ Light Mode </title>   <link rel="stylesheet" href="style.css"> </head> <body>  <p id="demo"></p> <h1 id="light_mode" >Light Mode Is Enabled</h1> <div class="main_div"> <button onclick="myFunc()">Night Mode</button> </div>  <script src="main.js"></script> </body> </html>

CSS PART

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital@1&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap'); body { font-size: 15pt; display: grid; place-items: center; font-family: 'Bangers', sans-serif; } /ul{ width:100%; display:flex; justify-content: center; } ul li{ list-style: none; } ul li a{ color:rgb(210, 211,45); padding: 8px 15px; margin:0 10px; text-decoration: none; position: relative; } ul li a::before{ content:''; width:100%; height:100%; position: absolute; border-top:2px solid rgb(210, 211,45); }/ .main_div{ width: 12rem; height: 20rem; background-color: #eeeeee; display: grid; place-content: center; box-shadow: 0 1.2rem 3rem 0.5rem rgba(0, 0,0,0.2); border-radius: 2rem; padding:2rem; transition: all 3s; } .dark_mode{ background-color: black; color:white; } button{ background-color: black; color:#eeeeee; border-radius:2rem; border: none; padding: 2rem; box-shadow: 0 1.2rem 3rem 0.5rem rgba(0, 0,0,0.2); font-size: 23px; font-family:'Ubuntu', sans-serif; transition: all 2s; } button:active{ color:lightpink; transition: all 2s; } #light_mode{ transition: all 2s; } #demo{ transition: all 2s; }

JAVASCRIPT PART

console.log('Hello World!'); //Color Changing function myFunc() { let element = document.body; element.classList.toggle("dark_mode"); //Text Changing document.getElementById("light_mode").innerHTML = "Night Mode Is Enabled"; setTimeout(function (){ //Text Changing document.getElementById("light_mode").innerHTML = "Light Mode Is Enabled"; },1000 ); } let date = new Date(); document.getElementById("demo").innerHTML = date;

Thanks!