如何用 javascript 永久交换深色模式徽标？

Question

所以我有以下代码来管理我的暗模式（请注意我没有写原始代码，我只是修改）：

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

这是相对的 HTML（注意，我正在使用 Hugo 进行构建，因此包括 Go 模板）：

{{- $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 -}}">

我只将上面提到的三行添加到 JavaScript。

这完全符合我的要求。当有人将按钮切换为深色模式并且徽标翻转为深色模式版本时。

太好了。

除非他们点击新页面，否则原始徽标就位。

不确定如何存储、检查和检索适当的徽标，因为我不太擅长 JavaScript（我只是把我需要的东西拼凑起来）。

你会怎么做？

Answer 1

我想你总是可以存储一个标志变量来检查页面是否切换到 dark-mode，我告诉你：

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

Answer 2

有几种方法可以添加您缺少的功能，但考虑到您当前的实现，最直接的方法可能是使用 localStorage 中的 theme 值。

您的代码已经在使用 localStorage 来存储当前主题。您缺少的部分是一些 JavaScript 检查 localStorage 中的 theme 值，然后适当地设置徽标路径。您可以使用该存储值来确定加载任何页面时的主题，方法是在每个页面的 <head> 中放置一些 JavaScript，或者将其添加到您现有的 JavaScript 文件中暗模式切换逻辑是：

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

如果您对深色模式的进一步阅读和其他选项感兴趣，我推荐 A Complete Guide to Dark Mode on the Web。

如何用 javascript 永久交换深色模式徽标？

How to permanently swap a darkmode logo with javascript?

html

javascript

css

hugo

darkmode