15. 🌗 暗色与主题化 Theme ★★☆☆☆

🌏 Web 网页规范

  • 首选项检测: `prefers-color-scheme` 媒体查询系统配置
  • 变量实现: CSS Variables 原生变量挂载根节点覆盖
  • 切换动效: 根节点透明度平滑过渡或 View Transitions API
  • 色彩检测: 动态对比度反色算法

📱 App 移动端规范

  • 首选项检测: UIUserInterfaceStyle 原生属性变化监听
  • 变量实现: 原生主题 Asset Catalog 色板命名规范动态识别
  • 切换动效: 系统级切换快照遮罩过渡，完全没有白屏闪烁
  • 色彩检测: 编译期严格校验对比度合规性

Web 变量级主题切换与 prefers-color-scheme

Web CSS Variable Themes & System Preference

Web 端利用 CSS 变量存储多套配色方案，通过 JS 切换或 CSS 媒体查询 prefers-color-scheme 动态响应操作系统的浅色/深色主题选项。

App 系统级夜间模式适配与自适应反色

App Native Dark Mode & Contrast Security

App 端在应用打包时就需要向系统声明深色支持，确保其在系统级“暗色模式”打开时自动进行底层颜色资产反转，并根据环境光传感器防刺眼。

LIVE PLAYGROUND: 局部暗色模式/护眼模式深度沙盒切换 切换下方主题选项卡，观察卡片色彩变量及对比度变化
https://web.meta-ui.edu/themes
09:41
📶 🔋

跟随变量发生转换的标题

在不同模式下，前景色（字色）和背景色变量自动重算映射，保障对比度均满足 AA 级阈值标准。

#Accent #Secondary
📋 大模型统一 Prompt (LLM Prompt)