Tengo una página web y estoy trabajando en la configuración de un conmutador para cambiar entre el modo claro y oscuro. Tengo dos versiones del logotipo de mi página web, una que es buena para el modo oscuro y otra para la luz. Me gustaría cambiar el logotipo en el encabezado según el interruptor de palanca, pero no puedo entender en qué parte de mi javascript puedo hacerlo. El marco es Ghost. Aquí está el código de encabezado que originalmente establece la imagen:
<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>aquí está el código que estoy usando para configurar una cookie basada en la alternancia del tema preferido, y lea la cookie para configurar el tema.
<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>