Dark and Light switcher (HTML) in 3 lines of code!
Okay so,
My friends dared me to make a website. I wanted a dark and light mode switcher in the least amount of code possible. I figured out by just removing spaces between lines I could compress each of the 3 files to 1 line each. I made a website in 3 lines. This is simple but I am still pround
HTML:
Dark mode: DevTopsDarkMode
This file cannot be displayed: moon.jpgDarkAndLight: a DevTops demo
CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');body.LightMode{background-image: linear-gradient(to right, #ffffff, #f1f1f1, #ffffff);color: #363636;font-family: 'Roboto', sans-serif;text-align: center;}body.DarkMode{background-image: linear-gradient(to right, #525252, #5e5e5e, #525252);color: whitesmoke;font-family: 'Roboto', sans-serif;text-align: center;}
JS:
function swapMode(a){var body = document.getElementById("body");var currentClass = body.className;var coice = currentClass == "DarkMode" ? "LightMode" : "DarkMode";body.className = coice;document.getElementById("viewMode").innerHTML = coice;if(coice == "DarkMode"){a.src = "moon.jpg";}else{a.src = "sun.jpg";}}
Note I did update it and had to have more that three lines but I will save and upload the 3 lined version or remake it later.
Cool!