如何抵消invert(1)+hue-rotate(180deg)实现的暗黑模式CSS滤镜？

问题根源 #

当你给body设置filter: invert(1) hue-rotate(180deg)时，所有子元素都会继承这个滤镜效果——子元素的filter是在父元素滤镜的基础上叠加，而非抵消。直接给子元素加相同的反向滤镜，只会让两次滤镜效果叠加，无法还原原始样式。

可行解决方案 #

方案1：调整滤镜作用范围（推荐） #

放弃给整个body加滤镜，转而让body下除例外元素外的所有元素应用暗黑滤镜。这样地图图例等需要保留原样的元素，只需添加.negate-dark-mode类即可跳过滤镜：

/* 替换原来的body滤镜写法 */
.dark-mode *:not(.negate-dark-mode) {
  filter: invert(1) hue-rotate(180deg);
}

这个方法从根源上避免了滤镜叠加的问题，不需要额外的反向样式，效果最稳定。

方案2：将例外元素移出滤镜作用域 #

如果无法修改选择器范围，可以把地图图例这类元素从body的子层级中移出，直接作为html的子元素。这样body的滤镜就不会影响到它：

<!-- 调整DOM结构 -->
<html>
  <body class="dark-mode">
    <!-- 其他需要暗黑模式的内容 -->
  </body>
  <div class="map-legend negate-dark-mode">
    <!-- 地图图例内容 -->
  </div>
</html>

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}
.map-legend {
  /* 根据需要添加定位样式，比如固定在页面角落 */
  position: fixed;
  bottom: 20px;
  left: 20px;
}

方案3：强制抵消滤镜（仅作为备选） #

如果上述两种方案都无法实现，可以尝试给例外元素叠加相同的滤镜（因为invert(1)和hue-rotate(180deg)执行两次会还原原始效果），但需要注意元素的背景色、图片等资源可能需要额外调整：

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}
.dark-mode .negate-dark-mode {
  filter: invert(1) hue-rotate(180deg);
  /* 若元素有固定背景色，需同步设置原始背景色 */
  background-color: #ffffff; /* 示例原始背景色，根据实际调整 */
}

这个方案可能因元素自身样式或浏览器渲染差异出现偏差，仅建议在万不得已时使用。

总结 #

优先选择方案1，它无需调整DOM结构，代码简洁且效果稳定。如果DOM结构无法修改，再考虑方案2。方案3仅作为最后备选方案。

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