An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Just Creative
- The Logo Smith
- Creative Curio
- Naldz Graphics
- Reencoded
- Design Modo
- Web Resource Source
- Daily Now
- Dev To
- TechPowerUp
Help Webnuz
Referal links:
Create Dark Mode functionality with pure JavaScript
I was using front-end Framworks as Vue Js and jQuery, but I discover that I have some problems that I must fix in JavaScript basics (and Im proud to fix and learn new things always) because at all you will use Js in your Frameworks based project necessarily.
I decided to learn some principal in Js with deeply way because Im not learned it correctly in the beginning, and I will share some simple Implementations as blog posts maybe it will help someone in somewhere.
Lets start with creating a feature that is very common in websites this days, Dark Mode functionality .
The HTML page structure:
<!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>Dark Mode</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> </head> <body> <header> <button><i class="fas fa-sun"></i></button> </header> <main> <article> <h2>Pure Javascript Dark Mood</h2> <span class="date">May 7, 2021</span> </article> <article> <h2>Pure Javascript Dark Mood</h2> <span class="date">May 7, 2021</span> </article> <article> <h2>Pure Javascript Dark Mood</h2> <span class="date">May 7, 2021</span> </article> <article> <h2>Pure Javascript Dark Mood</h2> <span class="date">May 7, 2021</span> </article> </main> </body></html>We will use this simple CSS style for the page:
body { text-align: center;}article { margin-bottom: 1rem; border-bottom: 2px solid #ccc; padding: 10px;}button { background: transparent; border: 0; cursor: pointer; font-size: 2rem;}.darking-mode { background: #374151; color: #fff;}The JavaScript function that will handle the click and switching between normal and dark mode, I will try to explain every line of code clearly. I used to comment my code so its already commented but I will try to explain it also.
// get the element to be clickedconst buttonToBeClicked = document.querySelector('button');// addEventListener() method to execute the main functionbuttonToBeClicked.addEventListener("click", darkMode);// our dark mode functionfunction darkMode() { //console.log('Clicked!!'); let theBody = document.body; theBody.classList.toggle('darking-mode'); //console.log('switched to dark mode!'); if (document.body.classList.contains('darking-mode')) { let icon = document.querySelector('i'); //console.log(icon); icon.classList.remove('fa-sun'); icon.classList.add('fa-moon'); } else { let icon = document.querySelector('i'); icon.classList.remove('fa-moon'); icon.classList.add('fa-sun'); }}Function explaining:
I used an addEventListener() method to handle click to execute the function that will do the work.
After that I stocked the body element in theBody variable.
And I used Element.classList a property that return a live class darking-mode that is responsible on changing elements color and body background color.
Finally I use an if statement to handle toggle fontawesome icons.
The blog post has originally posted on my personal blog. Hope that will helps someone, somewhere.
Original Link: https://dev.to/bn_geek/create-dark-mode-functionality-with-pure-javascript-332c
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To