I have a webpage and I'm working on configuring a toggle for switching between light and dark mode. I have two versions of my webpage logo, one that's good for dark mode and another for light. I would like to change the logo in the header based on the toggle switch but I can't quite figure out where in my javascript to do that. The framework is Ghost. Here's the header code that originally sets the image:
<body class="home-template">
<div class="site">
<header class="site-header">
<div class="container">
<div class="navbar">
<div class="navbar-left">
<a class="logo" href="<my-domain.com>">
<img class="logo-image" src="<logo-img-source-location>" alt="<alt-text>">
</a> </div>
<remainder cut>
here's the code I'm using to set a cookie based on the toggle for preferred theme, and read the cookie to actually set the theme.
<script>
/* Dark Mode Sets Cookie */
// On page load set the theme.
$(document).ready(function(){
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('theme') == null) {
document.documentElement.classList.add('dark-mode');
localStorage.setItem("theme", "dark-mode");
}
let cookie = localStorage.getItem("theme") || "";
if(cookie) {
document.documentElement.classList.add(cookie);
}
if($('html').hasClass('dark-mode')) {
$('.switch input').prop( "checked", false );
} else {
$('.switch input').prop( "checked", true );
}
});
$('.switch').click(function(e){
e.preventDefault();
$('html').toggleClass("dark-mode");
console.log($('.switch'))
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
if($('html').hasClass('dark-mode')) {
$('.switch input').prop( "checked", false );
} else {
$('.switch input').prop( "checked", true );
}
});
</script>