Así que tengo el siguiente código que administra mi modo oscuro (tenga en cuenta que no escribí el código original, solo lo estoy modificando):
if (toggleTheme) { toggleTheme.click(function () { darkMode(); }); }; // Theme Switcher function darkMode() { const logo = document.getElementById('logo'); // I Added this line if (html.hasClass('dark-mode')) { html.removeClass('dark-mode'); localStorage.removeItem("theme"); $(document.documentElement).removeAttr("dark"); logo.src = logo.dataset.logoLight; // I Added this line } else { html.addClass('dark-mode'); localStorage.setItem("theme", "dark"); $(document.documentElement).attr("dark", ""); logo.src = logo.dataset.logoDark // I Added this line } }Aquí está el HTML relativo (nota, estoy construyendo con Hugo , por lo que se incluye Go Templating):
{{- $logo := (resources.Get site.Params.logo).Resize "270x webp q100" -}} {{- $logoDark := (resources.Get "/images/logo-dark.png").Resize "270x webp q100" -}} <img id="logo" class="logo__image" src="{{- $logo.RelPermalink -}}" data-logo-light="{{- $logo.RelPermalink -}}" data-logo-dark="{{- $logoDark.RelPermalink -}}" alt="{{ .Site.Title }}" height="{{- div $logo.Height 2 -}}" width="{{- div $logo.Width 2 -}}">Solo agregué las tres líneas mencionadas anteriormente al JavaScript.
Entonces eso funciona exactamente como yo quiero. Cuando alguien cambia el botón para el modo oscuro y el logotipo cambia a la versión del modo oscuro.
Excelente.
Excepto cuando hacen clic en una nueva página, el logotipo original está en su lugar.
No estoy seguro de cómo almacenar, verificar y recuperar el logotipo apropiado porque no soy muy bueno con JavaScript (simplemente pirateo lo que necesito).
¿Cómo harías esto?
Creo que siempre puedes almacenar una variable de bandera que verifique si la página se cambió al modo oscuro, te muestro:
// Theme Switcher function darkMode(){ if (html.hasClass('dark-mode')){ html.removeClass('dark-mode'); localStorage.removeItem("theme"); $(document.documentElement).removeAttr("dark"); localStorage.setItem('dark_mode', 'false'); darkModeLogo(); }else{ html.addClass('dark-mode'); localStorage.setItem("theme", "dark"); $(document.documentElement).attr("dark", ""); localStorage.setItem('dark_mode', 'true'); darkModeLogo(); } } //runs everytime the js file is loaded function darkModeLogo(){ const logo = document.getElementById('logo'); // I Added this line const DARK_MODE = localStorage.getItem('dark_mode'); if(eval(DARK_MODE)){ logo.src = logo.dataset.logoLight; // I Added this line }else{ logo.src = logo.dataset.logoDark // I Added this line } } darkModeLogo();Hay un par de formas de agregar la funcionalidad que le falta, pero la forma más sencilla dada su implementación actual probablemente sea usar el valor del theme de localStorage.
Su código ya está usando localStorage para almacenar el tema actual. Lo que le falta es algo de JavaScript que verifica el valor del theme en localStorage y luego establece la ruta del logotipo de manera adecuada. Puede usar ese valor almacenado para determinar cuál es el tema cuando se carga cualquier página colocando algo de JavaScript en el <head> de cada página, o agregándolo al archivo JavaScript donde está su lógica de alternancia de modo oscuro existente:
// Define a function that will check localStorage and set the logo path function checkThemeAndSetLogo() { const logo = document.getElementById('logo'); const currentTheme = localStorage.getItem("theme"); // get the theme value from localStorage if (currentTheme === "dark") { logo.src = logo.dataset.logoDark; } else { logo.src = logo.dataset.logoLight; } } // Call the function so that the logo is updated appropriately checkThemeAndSetLogo();Si está interesado en leer más y en opciones adicionales para el modo oscuro, le recomiendoUna guía completa para el modo oscuro en la Web .