September 18, 2018

Dark-mode theme switcher

The HTML:

<html data-theme="light">
<!-- ... -->
<a href="#" id="toggle_darkmode">toggle dark-mode</a>

The CSS:

html {
    --background-color-hue: 0;
    --background-color: hsl(var(--background-color-hue), 0%, 100%);
    --text-color-hue: 0;
    --text-color: hsl(var(--text-color-hue), 0%, 15%);
    --link-color-hue: 220;
    --link-color: hsl(var(--link-color-hue), 50%, 50%);
}
/* dark-mode colors */
html[data-theme="dark"] {
    --background-color: hsl(var(--background-color-hue), 0%, 10%);
    --text-color: hsl(var(--text-color-hue), 0%, 75%);
    --link-color: hsl(var(--link-color-hue), 50%, 60%);
}
/* invert images in dark-mode when they are compatible (eg. charts, but not photos) */
html[data-theme="dark"] img.darkmode_compatible {
    filter: invert(100%) hue-rotate(180deg);
    mix-blend-mode: screen;
}
/* transition when switching between the light and dark theme */
html.theme_change_transition, html.theme_change_transition * {
    transition: all 750ms !important;
    transition-delay: 0 !important;
}
body {
    background-color: var(--background-color);
    color: var(--text-color);
}
a:link, a:visited, a:hover, a:active {
    color: var(--link-color);
}

Special usage of CSS variables and HSL (hue, saturation, lightness) color representation

The JavaScript:

$(document).ready(function(){
    $('#toggle_darkmode').click(function(){
        $('html').addClass('theme_change_transition');
        if($('html').attr('data-theme') == 'light'){
            $('html').attr('data-theme','dark');
        }
        else {
            $('html').attr('data-theme','light');
        }
        setTimeout(function(){ 
            $('html').removeClass('theme_change_transition');    
        }, 3000);
        return false;
    });
});

Dependencies: jQuery

Try it!

Update

October 26, 2019

The above theme switcher became obsolete once Apple's iOS 13 introduced a native dark mode for all users. It is now possible to set styles based on the system theme (light or dark).

@media (prefers-color-scheme: dark){ 
    /*in here you can place all your CSS you want to use when the dark mode is set*/
    /*eg. dark background color and light font color*/
}

Tags: html, css, javascript, ui

« back

010100100110000101101110011001000110111101101101010000110110100101110000011010000110010101110010

About the author

human, software engineer, tech enthusiast, security researcher

E-Mail: blog@cipher.digital