①夜黑模式的检测:
如果是在 APP 中,可以让 APP 传个标志量;
如果是纯 Web,则在现代浏览器下,可以使用 prefers-color-scheme 查询语句,属性值包括:
no-preference:系统没有告知用户使用的颜色方案;
light:表示系统倾向于使用浅色主题;
dark:表示系统倾向于使用深色主题;
②如果需要在 JavaScript 代码中对系统的深浅主题进行判断,可以使用原生的 window.matchMedia () 方法,返回的是 true 或 false;
③在 CSS 中,目前实现反相效果的方法有两个:
一、filter:invert (1) 反相滤镜;
二、白色背景元素设置 mix-blend-mode:difference;
④filter 属性是个比较烧性能的属性,尤其这种整个网站都应用这个属性;
⑤mix-blend-mode 属性的性能要优于 backdrop-filter;
(参考:www.zhangxinxu.com/wordpress/2…