Dark Mode Design

Dark Mode Design 是专门展示暗色网站的人工策展画廊，About 页面说明所有案例由 Cai Cardenas 挑选。首页以截图和站名组成，点击后直接前往原网站，适合快速发现暗色视觉方向，再在真实页面中检查文字、交互和媒体表现。

暗色不等于纯黑背景

观察案例时先分辨背景层级：页面底色、卡片、浮层和边框是否使用不同明度，而不是全部压成黑色。轻微的色相和亮度差可以建立结构，也能减少高亮文字的刺眼感；复制十六进制颜色之前，先理解它在整套层级中的角色。

用内容层级检查对比度

品牌色在深底上会改变感觉

亮蓝、荧光绿和高饱和紫色在暗色背景上会显得更强，直接沿用浅色主题的品牌色可能造成眩光。参考案例时记录主色用于文字、按钮还是装饰，并为 hover、focus、error、success 等状态分别测试，不能只做一张静态首屏。

图片和视频需要重新调校

高亮白底截图放进暗色页面会产生明显“灯箱”效果。可以使用暗色产品截图、柔和边框或适当背景容器，但不要用压暗遮罩掩盖内容。视频封面和渐变叠层还要检查黑位是否丢失、文字是否压在复杂区域，以及加载失败时的占位状态。

从案例回到真实原站

1. 在画廊筛出视觉方向接近的案例。
2. 打开原站检查滚动、动画、表单和菜单。
3. 切换不同屏幕亮度与系统主题。
4. 用键盘走一遍 focus 状态。
5. 把可借鉴原则记录下来，不复制品牌资产。

设备环境会改变验收结果

暗色界面在 OLED、普通 LCD、低亮度手机和明亮办公室中的观感不同。至少测试桌面与手机、低亮和高亮环境，并检查浏览器自动填充、系统弹窗与第三方组件是否突然出现浅色块。截图好看并不能替代真实设备验收。

设计令牌不要只存一个 dark 值：背景、表面、边框和文字应按语义命名，并分别记录浅色与暗色取值。组件验收覆盖默认、悬停、键盘聚焦、按下、禁用和错误状态；如果状态只能靠微小亮度差识别，应增加边框、图标或文字提示。

案例提交与版权边界

官网提供邮件形式的 Submit a site 入口，并通过社交账号发布更新。被收录代表策展选择，不是可复用模板或无障碍认证。引用案例时保留原站链接；设计交付前仍需完成对比度、交互状态、内容可读性和素材授权检查。