Dark Mode - 《Moleskine》

图片.png

可以用 mix-blend-mode: difference; 快速实现：

.dark-mode-screen {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  mix-blend-mode: difference;
}

还可以用 @media (perfers-color-scheme: dark) 来判断当前浏览器是不是深色模式，两个结合一下，给网站实现浏览模式跟随貌似非常简单。

还有个比较有用的优化是使用 isolation: isolate; 将不想要被混合颜色的节点独立出来，可以用在站点 logo、图片、iframe 等内容上：

图片.png

比较尴尬的是在语雀的节点上似乎不生效，还没搞懂为什么。

参考文章：