How to permanently swap a darkmode logo with javascript?-CodePudding

So I have the following code that manages my dark mode (please note I didn't write the original code, I'm just modifying):

  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
    }
  }

Here's the relative HTML (note, I'm building with Hugo so included is the 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"  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 -}}">

I've only added the three lines noted above to the JavaScript.

So that works exactly like I want. When someone toggles the button for dark mode and the logo flips to the darkmode version.

Great.

Except when they click to a new page, the original logo is in place.

Not sure how to store, check for, and retrieve the appropriate logo because I'm not very good with JavaScript (I just kind of hack together what I need).

How would you do this?

CodePudding user response：

i think you can always store a flag var that check if page was toggled to dark-mode, i show you:

// 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();

CodePudding user response：

There are a couple ways to add the functionality that you're missing, but the most straightforward way given your current implementation is probably to use the theme value from localStorage.

Your code is already using localStorage to store the current theme. The bit you're missing is some JavaScript that checks the theme value in localStorage and then sets the logo path appropriately. You can use that stored value to determine what the theme is when any page loads by putting some JavaScript in the <head> of every page, or by adding it to the JavaScript file where your existing dark mode toggle logic is:

// 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();

If you're interested in further reading and additional options for dark mode, I recommend A Complete Guide to Dark Mode on the Web.