Skip to content
← Back to Community
Dark and Light switcher (HTML) in 3 lines of code!
Profile icon
h
has Hacker Plan
DevTops

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: DevTops

DarkMode

This file cannot be displayed: moon.jpg

DarkAndLight: 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";}}

Voters
Profile icon
Thehappysquid
Profile icon
DevTops
Comments
hotnewtop
Profile icon
Thehappysquid

Cool!

Profile icon
DevTops

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.