暗色模式切换（Dark Mode Toggle）是什么：效果预览与 AI 设计提示词

效果预览

CSS 变量两套皮 · data-theme 一键切换

适合用在哪

内容型网站、开发者工具、任何用户停留久的页面。

容易踩的坑

主题脚本放在 body 末尾，刷新时先闪白屏再变暗，暗色用户被晃眼。
切换时给所有元素加 transition，数千节点同时过渡导致切换卡顿。
开关仅用图标表示，缺少 aria-label 与 aria-pressed，读屏不知当前主题。

设计提示词 · Prompt

暗色模式切换（Dark Mode Toggle）：颜色全部抽成 CSS 变量定义在 :root，[data-theme="dark"] 覆盖——切换主题就是换一个属性值。开关用太阳/月亮滑块（滑块图标与轨道渐变同步过渡）。三层默认策略：跟随系统（prefers-color-scheme）→ 用户手动选择 → localStorage 持久化。防闪烁（FOUC）：在 <head> 内联一段同步脚本先于渲染设置 data-theme。暗色不是反色——要降低纯白改用 #EAEAEA 级灰字、阴影改用更深的表面色阶、品牌色提亮 10-20% 保对比度。图片配暗色滤镜（brightness .9）。

Dark Mode Toggle: Extract all colors into CSS variables defined on :root, overridden by [data-theme="dark"] — switching themes just changes one attribute value. The switch is a sun/moon slider (the slider icon and track gradient transition in sync). Three-layer default strategy: follow the system (prefers-color-scheme) → user's manual choice → persisted in localStorage. Prevent flashing (FOUC): inline a synchronous script in <head> that sets data-theme before rendering. Dark mode is not color inversion — dial down pure white to #EAEAEA-level gray text, replace shadows with deeper surface color steps, and lighten brand colors by 10-20% to maintain contrast. Apply a dark filter to images (brightness .9).

常见搭配

同一页面里经常和「暗色模式切换」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

语义色板Semantic Color Tokens 阴影层级Elevation Scale 开关Toggle Switch 吸顶模糊导航Sticky Blur Header

演示 HTML 结构

<div class="s d-darktoggle">
  <div class="d-dt__card d-dt__card--light">
    <span class="d-dt__avatar"></span>
    <span class="d-dt__lines"><i style="width:70%"></i><i style="width:45%"></i></span>
    <span class="d-dt__sw"></span>
  </div>
  <div class="d-dt__card d-dt__card--dark">
    <span class="d-dt__avatar"></span>
    <span class="d-dt__lines"><i style="width:70%"></i><i style="width:45%"></i></span>
    <span class="d-dt__sw is-night"></span>
  </div>
  <span class="d-tiny">CSS 变量两套皮 · data-theme 一键切换</span>
</div>

暗色模式切换Dark Mode Toggle

效果预览

适合用在哪

容易踩的坑

设计提示词 · Prompt

常见搭配

演示 HTML 结构

标签

效果预览

适合用在哪

容易踩的坑

设计提示词 · Prompt

常见搭配

演示 HTML 结构

标签

同类模式 · 设计系统