Night mode plugin?

Help
1

I’m looking for a night mode plugin for my site that’s using @mmistakes’s Minimal Mistakes theme. I’ve seen the same plugins across different vendors, like MacStories Wordpress site and @joebuhlig’s site.

Wonder how I can get the same thing for my site. Wondering if it’s JS or whatever.

1 Like
2

I actually got inspiration from MacStories for mine. It’s pretty simple the way I did it. It’s CSS styling found here:

And to do the triggering/saving of your preference I used javascript. At the initial, it will check for the cookie and set the theme accordingly:

And then I added the icon that does the toggle, which is activated via javascript as well:

That’s it. It looks a lot more complicated than it really is.

1 Like
3

Thanks! Yeah MacStories night mode is quite cool.

1 Like
4

@joebuhlig I’ve been trying to add Dark mode to my site, but I’ve been unsuccessful. It seems complicated. The repo that you’ve linked above seems not to be found. Do you have any updated steps jotted down somewhere for newbies like me?

5

Hey, Pavan! I’ve since changed the way I deploy my site and needed to convert it to a private repo. So unfortunately I don’t have a public version of that code.

At the same time, I’m not currently offering this on my site due to a redesign and lack of interest in it.

That said, here are the relevant bits of that code:

if (getCookie("theme") == "dark"){
	$('html').addClass("dark");
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

$(".theme-toggle").click(function(e){
		e.preventDefault();
		$('html').toggleClass("dark");
		if ($('html').hasClass("dark")){
			document.cookie = "theme=dark;path=/";
		}
		else {
			document.cookie = "theme=light;path=/";
		}
	})

/**
 * Dark Theme
*/
html.dark{
    body {
        background-color: #333333;
        color: #eeeeee;
    }
    code {
        color: #333333;
    }

    .header-name svg{
        fill: #eeeeee;
    }
    .sidebar-segment{
        background-color: #555555;
        box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.25);
    }

    .sidebar h2{
        color: #eeeeee;
        border-bottom: 1px solid #eeeeee;
    }
    #carbonads .carbon-text, .ad-text a {
        color: #eeeeee;
    }

    .bookworm path{
        fill: #97B9CC;
    }

    .theoretical path{
        fill: #FAAC1B;
    }

    .meta-tag, a.meta-tag:visited, a.meta-tag:hover {
        color: #333333;
    }
}
1 Like