三星互联网浏览器深色/夜间模式自定义样式失效问题咨询

这个问题的核心原因是三星浏览器的深色模式默认走浏览器层强制颜色反转逻辑，不遵循标准网页深色模式适配规范，所以常规的prefers-color-scheme媒体查询、:root级color-schemeCSS声明优先级不够，会被浏览器注入的强制样式覆盖，按以下步骤修复即可：

• 第一步：在页面<head>标签的最顶部（所有CSS资源、样式声明之前）加入高优先级meta声明，告诉浏览器当前页面自行处理颜色模式，不需要浏览器强制反转：

<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">

注意这两个meta标签必须靠前放，放在样式表后面会被浏览器跳过识别，直接失效。

• 第二步：添加针对三星浏览器的强制样式覆盖规则，兜底拦截浏览器注入的反转样式：

/* 三星浏览器强制深色兜底覆盖 */
:root {
  color-scheme: light only !important;
}
/* 不需要适配深色模式就加这组重置，把色值换成你站点实际的浅色模式色值即可 */
html, body {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}
/* 需要自定义深色模式的话，删掉上面的html/body颜色重置，在下面的媒体查询里写自定义规则 */
@media (prefers-color-scheme: dark) {
  /* 自定义深色模式样式写在这里，此时不会被三星浏览器的强制规则覆盖 */
}

• 第三步：排查现有CSS，删掉所有给html、body或者全局容器加的filter: invert(1)类颜色反转代码，这类代码会触发三星浏览器的二次反转逻辑，直接导致颜色显示错乱。
  改完之后清除三星浏览器缓存，完全杀掉浏览器进程重开页面就生效了，之后你写的所有自定义深浅色模式规则都能正常触发，不会被浏览器强制篡改。

内容的提问来源于stack exchange，提问作者jonathan