深色模式

Dark Mode

初级通用

深色模式（Dark Mode）是产品的一套深色界面配色，让背景、文字和控件在暗色环境中仍清楚可辨。它让用户能按环境或偏好切换界面外观，例如夜间使用后台时，减少大面积亮色背景带来的刺眼感。

你可能会说：「我想让网站能切成深色界面，晚上看着不刺眼，文字和按钮也得看得清。」

动手看看夜间查看订单后台

订单概览

外观设置

搜索订单或客户

今日成交额

较昨日 +12.8%

¥ 48,260

周一订单汇总今天 09:24 · 已同步

查看详情

界面模式

深色卡片提亮10%

切换界面模式，对比背景、文字、卡片和控件怎样一起换色；也可以悬停或用 Tab 聚焦搜索框与按钮，看看交互状态是否依然清楚。

深色模式不是把页面一键涂黑：背景最深，卡片稍亮，主要文字更亮；边框、状态标签和按钮也要换成适合暗底的颜色。

1
它是一套界面配色方案
深色模式不只是把白底改成黑底。我们还要一起调整文字、边框、卡片、输入框和状态颜色，因为这些元素原本是按浅色背景搭配的，单独换背景会让内容难以辨认。
2
切换方式决定用户体验
你可以让产品跟随设备设置，也可以提供手动开关。两种方式可以并存：用户没选过时跟随系统，选过后记住他的选择。这样夜间打开页面时，界面更可能符合他的预期。
3
组件状态也要一起检查
检查时别只看首页截图。把表单报错、按钮禁用、弹窗、图表和悬停状态也打开看看，因为它们可能用了固定的浅色配色。用设计令牌集中管理颜色，后续调整会省事得多。

深色模式说的是同一产品可使用的一套深色配色，通常和浅色模式配套；它不是把屏幕亮度调低，亮度变化不会修正文字与背景的颜色关系。它也不等于固定的“深色科技风”：后者是一种视觉风格，即使产品从不提供浅深切换，也能采用深色界面。

你的后台已有浅色界面，用户希望晚上能用深色配色。你让 AI Agent 改造时，哪种方案最符合深色模式？

请为现有后台增加深色模式，保留浅色模式。默认跟随设备外观设置，允许用户手动切换并记住选择；同时检查表单、按钮状态、弹窗和图表的文字与背景是否清楚可辨，不要只替换页面背景色。