轮播图夜间模式适配核心是CSS变量配合prefers-color-scheme媒体查询，统一定义--color-bg、--color-text等变量并在dark媒体查询中重置，确保容器、指示器、按钮、图标等所有元素样式响应系统主题。
轮播图夜间模式适配的核心其实是 CSS 变量 + 媒体查询
纯 HTML 无法自动识别夜间模式，必须靠 prefers-color-scheme 媒体查询 + CSS 自定义属性联动。轮播图本身（如用 swiper、glidejs 或原生 carousel）不决定明暗，真正起作用的是你给它的容器、指示器、按钮、文字等元素定义的样式是否响应系统主题。
- 不要试图在 HTML 中写两套
<div class="carousel">分别对应日/夜——冗余且难维护 - 所有颜色值（背景、文字、边框、指示器激活色）应统一用
--color-bg、--color-text等 CSS 变量声明 - 在
@media (prefers-color-scheme: dark)内重置这些变量值，轮播图组件会自动跟随 - 若使用第三方库（如 Swiper），注意其默认样式是否覆盖了你的变量——可能需要加
!important或提高选择器权重
Swiper 4+ 版本如何让分页器（pagination）和导航箭头（navigation）适配夜间模式
Swiper 默认用内联样式或固定 class 控制颜色，需手动接管。关键不是改 JS 配置，而是用 CSS 覆盖其生成的节点样式，并确保这些样式响应 prefers-color-scheme。
- 分页器点状指示器（
.swiper-pagination-bullet）的背景色应基于--color-primary，未激活态用半透明灰，激活态用主色 - 导航箭头（
.swiper-button-next/.swiper-button-prev）的border-color和color必须用变量，不能写死#333或#fff - 如果启用了
watchOverflow: true，夜间下箭头可能因背景对比度不足而“消失”，此时要额外设置filter: brightness(1.2)类增强可见性 - Swiper 的
effect: 'fade'模式下，过渡层.swiper-fade-container若有背景色，也必须用变量声明
原生 HTML 轮播图（无 JS）如何最小成本支持夜间模式
用纯 CSS 实现轮播（如基于 input[type="radio"] + label + .slides 结构）时，夜间适配反而最干净——因为所有样式都在 CSS 里，直接控制变量即可。
<style>
:root {
--slide-bg: #fff;
--slide-text: #333;
--dot-inactive: #ccc;
--dot-active: #007bff;
}
@media (prefers-color-scheme: dark) {
:root {
--slide-bg: #1e1e1e;
--slide-text: #f0f0f0;
--dot-inactive: #555;
--dot-active: #4dabf7;
}
}
.slides { background: var(--slide-bg); color: var(--slide-text); }
.pagination .dot { background: var(--dot-inactive); }
.pagination .dot.active { background: var(--dot-active); }
</style>
- 避免在
:root外直接写.slides { background: #fff }—— 这样媒体查询无法覆盖 - 若用
backdrop-filter做毛玻璃效果，夜间下需调低blur()值，否则在深色背景上过糊 - 图片本身不会自动变暗/变亮，如需夜间弱化图片亮度，可对
.slide img加filter: brightness(0.92)（仅 dark 下生效）
用户手动切换主题时轮播图不更新？检查事件监听和 class 切换逻辑
系统级 prefers-color-scheme 是被动响应，但很多网站提供手动开关（如顶部「日/夜」按钮）。这时轮播图不会自动刷新，必须显式触发重绘或强制重设 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
- 手动切换后，不要只改
<html>的class="dark"，还要同步更新:root中的变量值（用 JS 设置document.documentElement.style.setProperty()） - Swiper 实例若已初始化，修改 CSS 变量后无需 destroy/reinit——但某些老版本（v5.4 之前）的
pagination会缓存颜色，需调用swiper.pagination.render() - 原生 radio 轮播依赖伪类
:checked，CSS 变量更新后完全无需 JS 干预，只要变量被正确应用，视觉立即响应 - 切记：本地存储主题偏好后，首次加载页面时就要根据
localStorage.getItem('theme')主动设置document.documentElement.setAttribute('data-theme', 'dark')，再由 CSS 规则匹配该属性
最常被忽略的一点：轮播图里的图标字体（如 Font Awesome 的 <i class="fas fa-chevron-right">）默认颜色常被写死，它们同样需要通过 CSS 变量控制，否则夜间下可能变成黑底黑箭头。
