ant-design/docs/spec/dark.md
二货机器人 fd498a7da5
docs: Design doc (#20754)
* docs: Design doc

* update overview & init data-format

* update data-format doc

* update buttons page

* replace imags

* add data-list doc

* add visualization docs

* update detail

* Update visualization-page.md

* Update detail-page.md

* Update buttons.md (#20843)

* Update data-list.md (#20844)

* data list

* update details

* Update MorePage.tsx (#20965)

* Update MorePage.tsx

* Update visualization-page.md (#20977)

* Update data-list.md (#20980)

* Update detail-page.md (#20981)

* chore: Update RecommendPage.tsx (#20989)

* Update RecommendPage.tsx

* Update RecommendPage.tsx

* Update buttons.md (#21003)

Co-authored-by: yingxirz <inseeing@gmail.com>

* Update buttons.md (#21004)

Co-authored-by: yingxirz <inseeing@gmail.com>

* rm inner link

* hide docs tmp

* fix typo

* adjust doc

Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com>
Co-authored-by: linye <59957450+ionshaw@users.noreply.github.com>
Co-authored-by: yingxirz <inseeing@gmail.com>
2020-01-20 17:21:29 +08:00

1.4 KiB

category order title skip
全局样式 6
zh-CN en-US
暗黑模式 Dark Theme
true

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

何时使用

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

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

设计原则

1、内容的舒适性 暗黑模式下避免使用对比很强的色彩或内容,长时间使用会带来疲劳感

2、信息的一致性 暗黑模式下的信息内容需要和浅色模式保持一致性,不应该打破原有的层级关系而应该延续。在浅色模式下越浅的代表信息的层级越弱,所以在暗色模式下应该越深,反之则越浅

色彩

暗黑模式中的颜色使用依旧可以延续浅色模式中的 12 套基础色板。应用思路上结合透明度规则处理,来让内容在不同的环境色下可以更好融合。

基础色板

TODO: Image

色板生产工具

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

TODO: Panel