暗黑模式的初试

暗黑模式大多数运用于移动端产品，这一方面也更多是产品或者UI设计师需要考虑的问题。暗黑模式的意义在于UI风格的统一、弱光环境下对用户视力的保护以及在移动设备上浏览时对电源的保护。

暗黑模式首次运用于苹果浏览器Safari 68版本上。

简单来说，暗黑模式的实现设计对于前端来讲无非是两套css切换的实现，大概如下所示：

@media (prefers-color-scheme: dark) {
  /* Styles for users who prefer dark mode */
}

@media (prefers-color-scheme: light) {
  /* Styles for users who prefer light mode */
}

但是关于暗黑模式作为一种产品而言有待商榷：

暗黑模式适合在全设备使用还是只适合在移动端上使用。
为什么要使用暗黑模式这一功能？用户的审美，或是说更能凸显前端内容对用户的展示（强调也好，更亲和也好）等等？
如何理解“暗黑”一词？是白色的对立面“黑色”还是有其他更广义的深色表达？
“暗黑模式”当中仅仅只是需要考虑色彩本身的表达吗？
最重要的一点，如何在浏览器实现这一点，尤其是浏览器是否支持media query？

暗黑模式的简单实现

首先在根元素上需要对颜色进行简单的定义：

:root {
  --red: #fd1e1e;
  --orange: #fd5a1e;
  --gray-lightest: #f7f2f1;
  --gray-lighter: #e8e3e1;
  --gray-light: #cabdb9;
  --gray: #b0a3a0;
  --gray-medium: #7d7472;
  --gray-dark: #615a58;
  --gray-darker: #463e3b;
  --gray-darkest: #221d1b;
  --white: #fff;
  --black: #000;
}

变量的方式表达更直观：

:root {
  /* Same as before */
  --primary-color: var(--orange);
  --text-color: var(--gray-darkest);
  --background: var(--gray-lightest);
  --site-title: var(--gray-dark);
  --border-color: var(--gray);
  --link-border: var(--primary-color);
  --link-color: var(--text-color);
  --link-hover: var(--white);
  --link-current: var(--gray-darkest);
  --code-blocks: var(--white);
  --error-color: var(--red);
  --table-background: var(--gray-lighter);
}

现在开始引入暗黑模式，这是最简单的一种方式了：

@media (prefers-color-scheme: dark) {
  --text-color: var(--white);
  --background: var(--gray-darkest);
  --site-title: var(--gray);
  --border-color: var(--gray-lightest);
  --link-color: var(--white);
  --link-current: var(--white);
  --code-blocks: var(--black);
  --table-background: var(--gray-darker);
}

现在有个问题是，暗黑模式与普通模式之间的切换，这个倒是很简单，一个简单的js绑定事件切换就能做到，当然从设计的角度或者说用户的体验上讲，还需要的就是考虑暗黑模式中各个色彩的搭配。

黑体白纸和黑纸白体之间并不能划上等号，高对比度的文本和背景并不能很好地解决用户体验上的问题，这里我不推荐简单地运用CSS中的filter元素来对颜色进行双场景下的反转，再次强调一点，暗黑模式重点是设计层面上的问题，这不是简单的黑白对立的问题。

这是一个开放性的问题。