昨晚，我习惯性地打开手机浏览个人博客，在暗黑环境下访问时，我发现博客的暗黑模式存在不少问题，诸如色彩反转不协调、细节处理不到位等现象尤为明显。

面对这些问题，我在 0.01+秒短暂思考后做出决定：今天移除暗黑模式的相关代码。之所以如此决定，主要是考虑到修复这些细节问题需要投入大量时间和精力进行校对，而我个人对此缺乏足够的耐心。

尽管此前我利用 @media(prefers-color-scheme:dark) 的 CSS 选择器实现了暗黑模式的快速切换，但这种方法要求对每一个细微之处都进行精准调整，而这对我来说是一项颇为繁重的任务。

考虑到暗黑模式的核心诉求是降低屏幕亮度以保护视力，我设想了一种更为简易的解决方案：添加一个按钮，点击后在页面上覆盖一层透明度为 30%的黑色遮罩，并设置其 pointerEvents 属性为 none，使鼠标可以穿透。这样，用户只需一键操作即可达到近似暗黑模式的效果。

然而，经过实践后我发现此方法趣味性不足，且仅适用于采用 AJAX 交互的网站，否则页面跳转后遮罩会消失，实用性受限。

在进一步回忆和探索中，我想到了 iPhone 手电筒亮度调节的设计，试图借鉴其理念对上述方案进行优化。所以并编写了一段 JS 代码以实现类似的功能，就是为博客添加了一个按钮，并在按钮中分布了四个亮度的格子可以控制不同亮度的遮罩。

不废话，直接开搞：

<span id="light-control">light-control</span>

页面先增加一个按钮，再来一段乱七八糟的 js：

<script>
document.addEventListener('DOMContentLoaded', function () {
  const lightControlButton = document.getElementById('light-control');
  let currentOpacity = 0.1;
  let isLightControlActive = false;
  let timerId;
  function createLightControl() {
    const existingMask = document.querySelector('.dark-mask');
    if (existingMask) {
      existingMask.remove();
    } else {
    const mask = document.createElement('div');
    mask.className = 'dark-mask';
    mask.style.opacity = currentOpacity;
    Object.assign(mask.style, {
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      backgroundColor: '#000',
      zIndex: '999',
    });
    document.body.appendChild(mask);
    const controlBar = document.createElement('div');
    controlBar.className = 'light-control-bar';
    Object.assign(controlBar.style, {
      border: '1px #b9b9b9 solid',
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '88px',
      height: '200px',
      backgroundColor: '#fff',
      borderRadius: '25px',
      zIndex: '1000',
      overflow: 'hidden',
    });
    document.body.appendChild(controlBar);
    const opacityValues = [0.2, 0.4, 0.6, 0.7];
    for (let i = 0; i < 4; i++) {
      const cell = document.createElement('div');
      cell.className = 'light-cell';
      cell.style.width = '100%';
      cell.style.height = '50px';
      cell.style.backgroundColor = '#000';
      cell.style.opacity = `${opacityValues[i]}`;
      cell.addEventListener('click', () => {
        currentOpacity = opacityValues[i];
        mask.style.opacity = currentOpacity;
        clearTimeout(timerId);
        timerId = setTimeout(() => {
          if (!isLightControlActive) {
            controlBar.remove();
            mask.style.pointerEvents = 'none';
            isLightControlActive = false;
          }
        }, 3000);
      });
      controlBar.appendChild(cell);
    }}
  }
  lightControlButton.addEventListener('click', createLightControl);
});
</script>

然而，在实际操作过程中，我发现代码量超出预期，甚至超过了之前删除的暗黑模式 CSS 代码，考虑到此举违背了我网站精简的初衷，最终选择放弃了进一步的尝试和调整。

再经历了启用、反思、尝试改进，再到看到这篇文章时，我还是把这个功能撤掉，美其美曰，网站精简！哈哈！

啊！又是愉快的瞎折腾的一天~

当然，效果预览我也做在了当前页面，由于 ajax 缘故，需要刷新一下当前页面才可以触发函数，刷新当前页面后可以点击下方的灯泡小小的试玩一下~