深色模式Dark Mode
你可能会说
给产品加真正的深色模式，文字、边框、图表和代码块都要跟着切换。
深色模式是一套可切换的深色界面主题状态，而不只是把页面背景涂黑。例如用户选择深色模式或系统偏好深色时，页面的背景、文字、边框、按钮、图表和聚焦状态都换成协调且足够对比的值。它服务于不同环境和偏好；一张黑色海报或深色视觉风格并不自动构成可切换主题。
也常被叫作暗色模式夜间模式深色主题Dark Theme
从浅色到深色时，哪些界面值必须一起变化
行程偏好
还没有填写出发日期
深色模式是一套主题状态
颜色关系要整体切换：背景变深后，正文、弱提示、边框、按钮、输入框、图表和代码块都要重新检查对比与层级；不能只反转一个底色。
用户偏好需要被尊重：产品可读取系统的 prefers-color-scheme 作为默认，也可提供明确切换并记住用户选择。切换后焦点、悬停、选中和错误状态仍必须可辨认。
你可以这样告诉 AI Agent
请实现深色模式：默认可参考系统 `prefers-color-scheme`，并提供用户切换。背景、文字、边框、输入框、错误、焦点、图表和代码块都要有对应主题值；改完后检查浅色和深色下的默认、悬停、聚焦和错误状态。
接下来学什么
延伸阅读 · 权威出处
快速练习