轮播图夜间模式适配核心是CSS变量配合prefers-color-scheme媒体查询，统一定义--color-bg、--color-text等变量并在dark媒体查询中重置，确保容器、指示器、按钮、图标等所有元素样式响应系统主题。

轮播图夜间模式适配的核心其实是 CSS 变量 + 媒体查询

纯 HTML 无法自动识别夜间模式，必须靠 prefers-color-scheme 媒体查询 + CSS 自定义属性联动。轮播图本身（如用 swiper、glidejs 或原生 carousel）不决定明暗，真正起作用的是你给它的容器、指示器、按钮、文字等元素定义的样式是否响应系统主题。

• 不要试图在 HTML 中写两套
  分别对应日/夜——冗余且难维护
• 所有颜色值（背景、文字、边框、指示器激活色）应统一用 --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 里，直接控制变量即可。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

<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 变量。

• 手动切换后，不要只改 的 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 的 ）默认颜色常被写死，它们同样需要通过 CSS 变量控制，否则夜间下可能变成黑底黑箭头。