dark mode html css javascript
dark mode html css javascript
xxxxxxxxxx<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { padding: 25px; background-color: white; color: black; font-size: 25px;}.dark-mode { background-color: black; color: white;}</style></head><body><h2>Toggle Dark/Light Mode</h2><p>Click the button to toggle between dark and light mode for this page.</p><button onclick="myFunction()">Toggle dark mode</button><script>function myFunction() { var element = document.body; element.classList.toggle("dark-mode");}</script></body></html>Source: Grepper
Closely Related Answers
xxxxxxxxxxconst body = document.body;body.style.backgroundColor = "#333";body.style.color = "#ddd";const elements = document.querySelectorAll("div, section, article, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, li, td, th");for (const element of elements) { element.style.backgroundColor = "#333"; element.style.color = "#ddd";}Source: Grepper
xxxxxxxxxxconst body = document.querySelector('body');function toggleDark() { if (body.classList.contains('dark')) { body.classList.remove('dark'); localStorage.setItem("theme", "light"); } else { body.classList.add('dark'); localStorage.setItem("theme", "dark"); }}if (localStorage.getItem("theme") === "dark"){body.classList.add('dark');}Source: Grepper
xxxxxxxxxx// Enter code directly in the console for instant dark mode.var allDivs = document.querySelectorAll('div');for(var i = 0; i < allDivs.length; i++){ allDivs[i].style['background-color'] = 'black'; allDivs[i].style['color'] = 'green'; allDivs[i].style['font-family'] = 'Monospace';}Source: Grepper
Twitter 
LinkedIn