让 Safari 中的滚动条颜色自动适配深色模式

在 Safari 中，网页内的滚动条是不能自动适配深色模式的，除非网页自己制定了滚动条的颜色：

可以通过 Safari 的 “样式表” 来解决这个问题，我们可以自己指定深色和浅色样式下的滚动条颜色：

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
  --user-scrollbar-thumb-color:   #c2c2c2;
  --user-scrollbar-track-color:   #fafafa;
  --user-scrollbar-thumb-hover-color: #7d7d7d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --user-scrollbar-thumb-color: #757575;
    --user-scrollbar-track-color: #2e2e2e;
    --user-scrollbar-thumb-hover-color: #9e9e9e;
  }
}

*::-webkit-scrollbar-thumb {
  background: var(--user-scrollbar-thumb-color);
}

*::-webkit-scrollbar-track {
  background: var(--user-scrollbar-track-color);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--user-scrollbar-thumb-hover-color);
}

* {
  scrollbar-color: var(--user-scrollbar-thumb-color) var(--user-scrollbar-track-color);
}

把以上内容保存为一个 CSS 文件，然后在 Safari 的设置中加载这个文件：

适配后的效果：