关于浏览器黑暗主题下的深色模式问题

[TanYongF]

当浏览器处在黑暗主题下时，

1. 打开网站，会自动变成深色模式，同时相关逻辑会将localStorage里面的值设置成dark，
2. 点击图标，切换成亮色模式并且执行相关逻辑，并将localStorage设置dark
3. 重新刷新页面，执行逻辑1， 还是会出现黑暗模式，导致步骤2设置无效。

能不能在黑暗主题下，颜色模式选择逻辑改一下呢？这样就不能每次访问页面不需要手动切换亮色或者黑暗模式呢？也就是优先判断localStorage里面的值而不是根据浏览器主题选择？

附：原来./source/js/main.js路径中的相关逻辑：

  // 加载的时候检查深色模式
  loadCheckDarkMode: function () {
    var darkCheckbox = document.querySelector('#darkCheckbox')
    if (window.matchMedia && window.matchMedia(
      '(prefers-color-scheme: dark)').matches) {
      darkCheckbox.checked = true
      $(document.body).addClass("dark");
    } else if (localStorage.theme === 'dark') {
      darkCheckbox.checked = true
      $(document.body).addClass("dark");
    } else {
      darkCheckbox.checked = false
      $(document.body).removeClass("dark");
    }
  },

  // 检查本地缓存
  checkLocalStorage: function () {
    if (!localStorage.theme) {
      localStorage.setItem('theme', 'light')
    }
    if ($(document.body).hasClass('dark')) {
      localStorage.setItem('theme', 'dark')
    } else {
      localStorage.setItem('theme', 'light')
    }
  },

  // 深色模式
  toggleDarkMode: function () {
    $('#darkCheckbox').click(function () {
      $(document.body).toggleClass("dark");
      $('#navHeader').addClass('bg-transparent').removeClass('shadow-md')
      // 处理导航栏主题
      xueContext.handleNavTheme()
      // 检查本地缓存
      xueContext.checkLocalStorage()
      if (document.body.clientWidth <= 800) {
        toggleNavCheckBox();
      }
      $('script[data-pjax-comment]').each(function () {
        const commentParent = $(this).parent();
        const comment = $(this).remove();
        commentParent.append(comment);
      });
    });
  },

[xzhuz]

我认为先判断浏览器主题会比较好，这其实更偏向于个人的习惯

[zyy24796143]

我也觉得打开，偶尔会黑一下，感觉怪怪的

[TanYongF]

我认为先判断浏览器主题会比较好，这其实更偏向于个人的习惯

可能我没有表达明确。确实是符合个人习惯。但是如果浏览器是暗色主题的用户将网站设置亮色模式后，那么刷新页面，原来的亮色设置会失效。这是浏览器的暗色主题导致的，因为它的优先级总高于用户设置的，我觉得应该是第一次进入页面遵循浏览器主题，后续的都遵循用户设置过的（如果用户修改过的话）。。这种逻辑应该更加符合习惯，您觉得呢？