logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.3
  • Ant Design
    • 介绍
    • 设计价值观
    • 实践案例
  • 全局样式
    • 色彩
    • 布局
    • 字体
    • 图标
    • 暗黑模式
    • 阴影
  • 设计模式
    • 概览
    • 模板文档
      • 表单页
      • 数据可视化页
      • 详情页
    • 全局规则
      • 反馈
      • 导航
      • 数据录入
      • 数据展示
      • 数据格式
      • 文案
      • 按钮
      • 数据列表
    • 原则
      • 亲密性
      • 对齐
      • 对比
      • 重复
      • 直截了当
      • 足不出户
      • 简化交互
      • 提供邀请
      • 巧用过渡
      • 即时反应
  • 设计模式 - 探索
    • 概览
    • 模板文档
      • 表单页
      • 工作台
      • 列表页
      • 结果页
      • 异常页
    • 全局规则
      • 导航
      • 消息与反馈
      • 空状态
  • 可视化
  • 动效
  • 图形化
何时使用
设计原则
色彩
基础色板
色板生成工具

暗黑模式

图标阴影

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。

何时使用

  • 当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。
  • 当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。

    如同在电影院看电影时要全场关灯，是一样的原理。

设计原则

  1. 内容的舒适性

    暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。

  2. 信息的一致性

    暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。

色彩

颜色的应用上，我们基于 12 套基础色板，并结合透明度规则处理，来让色彩在不同的环境色下可以更好融合。

基础色板

Dust Red / 薄暮斗志、奔放
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
Volcano / 火山醒目、澎湃
volcano-1
volcano-2
volcano-3
volcano-4
volcano-5
volcano-6
volcano-7
volcano-8
volcano-9
volcano-10
Sunset Orange / 日暮温暖、欢快
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
orange-10
Calendula Gold / 金盏花活力、积极
gold-1
gold-2
gold-3
gold-4
gold-5
gold-6
gold-7
gold-8
gold-9
gold-10
Sunrise Yellow / 日出出生、阳光
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
Lime / 青柠自然、生机
lime-1
lime-2
lime-3
lime-4
lime-5
lime-6
lime-7
lime-8
lime-9
lime-10
Polar Green / 极光绿健康、创新
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
Cyan / 明青希望、坚强
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
Daybreak Blue / 拂晓蓝包容、科技、普惠
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
Geek Blue / 极客蓝探索、钻研
geekblue-1
geekblue-2
geekblue-3
geekblue-4
geekblue-5
geekblue-6
geekblue-7
geekblue-8
geekblue-9
geekblue-10
Golden Purple / 酱紫优雅、浪漫
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
Magenta / 法式洋红明快、感性
magenta-1
magenta-2
magenta-3
magenta-4
magenta-5
magenta-6
magenta-7
magenta-8
magenta-9
magenta-10

色板生成工具

同样，我们也提供了一套暗色下的色板生成工具，需要选择你的主色以及页面的背景色，我们会为你生成一套暗色下的色板

color-1#111d2c
color-2#112a45
color-3#15395b
color-4#164c7e
color-5#1765ad
color-6#177ddc
color-7#3c9ae8
color-8#65b7f3
color-9#8dcff8
color-10#b7e3fa
选择你的主色
#1890ff
选择你的背景色
#141414