从启用到弃用的暗黑模式

39天前781

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

面对这些问题,我在 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 缘故,需要刷新一下当前页面才可以触发函数,刷新当前页面后可以点击下方的灯泡小小的试玩一下~

* 若非特殊说明,本站文章均为博主原创,码字不易,如需转载,请注明出处!有疑问可留言交流,谢谢。

JavascriptCSS分享27 

从启用到弃用的暗黑模式 - Jdeal | Life is like a Design.