发现支持夜间模式还是挺重要的一件事,于是花了一两个小时调了一下 Color Scheme

实现的方式是控制黑暗模式 CSS 的 <link> 元素的添加和移除,这个方案很简单,但是有一个问题

<script>
  var cssId = 'dark_css';
  var icon = document.getElementById('mode-icon');
  resume();

  function setDark() {
    localStorage.setItem("mode","dark");
    icon.classList.replace('fa-moon', 'fa-sun');
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = '/css/styles-dark.css';
    link.media = 'all';
    head.appendChild(link);
  }

  function setLight() {
    localStorage.setItem("mode", "light");
    icon.classList.replace('fa-sun', 'fa-moon');
    icon.setAttribute('css', 'fa fa-moon');
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.getElementById(cssId);
    head.removeChild(link);
  }

  function resume() {
    switch (localStorage.getItem("mode")) {
      case 'dark': 
        setDark();
        break;
      case 'light':
        setLight();
        break;
      default:
        setLight();
    }
  }

  function switcher() {
    var current = localStorage.getItem("mode");
    if (current == null || current == 'light') {
      setDark();
    } else if (current == 'dark') {
      setLight();
    }
  }
</script>

由于 DOM 操作,这段 <script> 代码只能放在切换按钮 icon 元素的下面, 而且暗黑样式表是直接加载覆盖上去。在夜间模式下,两个CSS的加载会有一定的时间间隔,导致打开新的站内页面时(页面是重新加载的),可能会闪一下屏,只能尽量的把这段代码往前放

目前没想到比较好的解决方案,就先这样吧