DEV Community

Discussion on: RE: Add dark mode to any website with just a few lines of code

Collapse
 
mzaini30 profile image
Zen

Your code + localStorage:

buat_dark = () => {
    // ini kalau q.length nggak jalan / elemen belum ada
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.setAttribute('id', 'nightify');
    s.appendChild(document.createTextNode('html{-webkit-filter:invert(100%) hue-rotate(180deg) contrast(70%) !important; background: #fff;} .line-content {background-color: #fefefe;}'));
    h.appendChild(s); 
    localStorage.setItem('dark', 'true')
    return true
}

localStorage.dark == 'true' ? buat_dark() : ''

function dark() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        // ini kalau elemen sudah ada
        q[0].parentNode.removeChild(q[0])
        localStorage.removeItem('dark')
        return false
        // false berarti hentikan proses
    }
    buat_dark()
}

$(".dark").click(() => dark())

$("body").css("min-height", $(window).height())