#36 - Easy dark-mode rules in LESS

Date: 2018-11-24 12:00 - LESS

Simple mixin in LESS to make it easy to create rules for website with dark-mode.

.dark(@rules) {
    body.dark & {
        @rules();
    }
}

// example usage:
.card {
    margin: 10px;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.4), 0px 0px 20px 0px rgba(0,0,0,0.1) inset;

    .dark({
        box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.4), 0px 0px 20px 0px rgba(255,255,255,0.1) inset;
    });
}

// a little extra: dark-mode based on time of day with JavaScript (append to the end of body tag)
// <script>var hour = (new Date()).getHours(); if (hour < 7 || hour > 19) document.body.classList.add('dark');</script>

Previous snippet | Next snippet