无需JavaScript，如何根据用户配色偏好切换静态站点图片？

一、纯CSS指定明暗模式对应图片 #

无需重复插入两张图片，以下两种纯前端无JS方案可实现不同版本图片的自动切换：

1. 使用<picture>元素配合媒体查询 #

这是HTML原生支持的方案，浏览器会根据系统配色模式自动加载对应图片：

<picture>
  <!-- 深色模式加载的图片 -->
  <source media="(prefers-color-scheme: dark)" srcset="dark-image.jpg">
  <!-- 浅色模式加载的图片 -->
  <source media="(prefers-color-scheme: light)" srcset="light-image.jpg">
  <!-- 兼容不支持媒体查询的浏览器 -->
  <img src="default-image.jpg" alt="图片描述">
</picture>

2. CSS背景图结合prefers-color-scheme #

如果图片作为背景使用，直接通过CSS媒体查询切换背景图即可：

.image-box {
  width: 300px;
  height: 200px;
  background: url('light-bg.jpg') center/cover no-repeat;
}

@media (prefers-color-scheme: dark) {
  .image-box {
    background-image: url('dark-bg.jpg');
  }
}

二、CSS调整图片亮度适配深色模式 #

对于无需换图的场景，可借助CSS的filter属性调整图片明暗、对比度等参数，快速适配深色模式：

/* 浅色模式默认样式 */
.adaptive-img {
  display: block;
  max-width: 100%;
}

/* 深色模式下调整视觉参数 */
@media (prefers-color-scheme: dark) {
  .adaptive-img {
    /* 降低亮度+提高对比度，适配多数图片 */
    filter: brightness(0.8) contrast(1.2);
    /* 线条/图标类图片可尝试反转颜色并保持原有色调 */
    /* filter: invert(1) hue-rotate(180deg); */
  }
}

这种方式无需额外存储图片文件，但效果取决于图片类型：插画、图标类调整后表现较好，摄影类图片可能还是换图更自然。

总结 #

完全不需要使用JavaScript，纯CSS（配合HTML原生元素）即可实现两种需求：要么切换不同版本的适配图片，要么通过滤镜调整现有图片视觉效果来适配深色模式。

内容的提问来源于stack exchange，提问作者Francisco de Javier