What is Dark Mode UI?什么是 Dark Mode UI？
Dark Mode UI turns the screen into a calm night landscape, where charcoal surfaces rise through lightness and muted accents guide attention without glare.Dark Mode UI 将屏幕化作冷静的夜间景观——炭黑表面以明度抬升层级，柔和强调色则在不制造眩光的前提下引导注意。
Dark Mode UI in briefDark Mode UI 速览
Dark Mode UI is the mainstream dark-theme interface language codified by Google’s Material Design and adopted across Android and cross-platform products. Its foundation is near-black charcoal rather than absolute black. This small but consequential distinction softens the visual field, reduces harsh contrast, and leaves room for surfaces to become visibly lighter as they rise above the background.Dark Mode UI 是由 Google Material Design 系统化定义、并广泛进入 Android 与跨平台产品的主流暗色界面语言。它以近黑炭色而非绝对纯黑作为基底。这一看似细微的差别缓和了视觉场域，避免过于尖锐的明暗对撞，也为表面随层级上升而逐渐变亮留出了空间。
Its defining idea is that elevation should be expressed through composited light rather than conventional drop shadows. A resting surface remains close to the dark ground; a raised card, menu, or dialog receives more light and therefore appears slightly brighter. Depth emerges as a controlled progression of charcoal tones, preserving spatial hierarchy even when shadows would be difficult to perceive.它最核心的观念，是用叠加的光表达高度，而不是依赖传统投影。静置表面贴近深色基底；抬升的卡片、菜单或对话框承接更多亮度，因此显得稍浅。深度由一组受控的炭灰层次自然生成，即便阴影在暗色环境中不易辨认，空间关系仍然清楚。
Color and text are deliberately restrained. Soft lavender, muted teal, and dusty rose appear as functional accents rather than decoration, marking actions, selections, status, or errors. White text is softened according to importance instead of being displayed at full intensity everywhere. The result is not simply a light interface with its colors inverted, but a separate system calibrated for calm nighttime reading and dark OLED screens.色彩与文字都保持克制。柔和薰衣草紫、低调青绿与灰调玫红不是装饰，而是用于标记操作、选中状态、系统反馈或错误。白色文字也不会处处以最强亮度出现，而是依照信息重要性逐级收敛。它不是浅色界面的简单反相，而是一套专为夜间阅读与暗色 OLED 屏幕重新校准的视觉系统。
Where does Dark Mode UI come from?Dark Mode UI 从何而来？
Dark Mode UI emerged within the wider expansion of digital interfaces during the 2010s. As applications spread across phones, tablets, and cross-platform services, dark presentation moved beyond specialist software and became a mainstream interface option. The rise of OLED-era system theming further established the expectation that an operating system and its applications could share a coherent night-oriented appearance.Dark Mode UI 兴起于数字界面在2010年代全面扩张的背景之中。随着应用遍布手机、平板与跨平台服务，暗色呈现不再只是专业软件的特殊选择，而逐渐成为主流界面模式。OLED 时代的系统级主题进一步建立了一种普遍期待：操作系统与应用可以共享连贯统一的夜间外观。
Google’s Material Design provided the framework that turned scattered dark-interface practices into a repeatable system. Its dark-theme specification was consolidated around 2018–2019, defining a near-black charcoal ground, lightened surfaces for elevation, softened white text, and desaturated functional color. These rules addressed a central problem: a dark interface still needed to communicate hierarchy, state, and depth without reproducing the bright surfaces of its light counterpart.Google Material Design 为原本分散的暗色实践提供了可重复执行的框架。其暗色主题规范在2018至2019年前后趋于完整，确立了近黑炭色基底、以亮度表示抬升的表面、收敛的白色文字，以及去饱和的功能色。这些规则回应了一个关键问题：暗色界面仍须表达层级、状态与深度，却不能照搬浅色界面的明亮表面。
The decisive conceptual move was to treat darkness as a layered material. In a light interface, shadows can separate a raised object from a pale background. Against a dark ground, those shadows lose visibility. Material Design answered by reversing the cue: elevation introduces light. Semi-transparent white overlays make higher surfaces progressively brighter, allowing the interface to retain a readable spatial model while remaining predominantly dark.真正决定这套语言面貌的转变，是把黑暗理解为一种可分层的材料。在浅色界面中，阴影可以把抬升物体与明亮背景分开；进入深色场域后，阴影本身便难以察觉。Material Design 因而反转了这一线索：高度带来光。半透明白色叠层让较高表面逐步变亮，使界面在维持暗色基调的同时，仍拥有清晰可读的空间模型。
This codification helped Dark Mode UI travel beyond Android. Because its principles concern relationships rather than a single platform-specific appearance, they can be applied to web products and other cross-platform interfaces. Near-black foundations, restrained accents, softened text, and lightness-based elevation together formed a recognizable global language for calm, legible night interfaces.这套系统化方法也帮助 Dark Mode UI 超越 Android。它规定的是视觉关系，而不是某个平台独有的固定外观，因此能够自然迁移到网页产品及其他跨平台界面。近黑基底、克制强调色、柔化文字与明度层级共同构成了一种全球可识别的冷静夜间界面语言。
What defines the Dark Mode UI look?Dark Mode UI 的视觉特征是什么？
Charcoal Ground炭黑基底
The base is near-black charcoal, deliberately held away from absolute black. This reduces the severity of white-on-black contrast and creates a tonal floor beneath elevated surfaces. The background should feel deep and quiet, not empty or visually crushed.基础底面采用接近黑色的炭色，并刻意与绝对纯黑保持距离。这样既能缓解白字对黑底的尖锐反差，也为抬升表面留下明度空间。背景应显得深沉安静，而不是空洞或黑成一团。
Lightness as Elevation以明度表示层级
Raised elements become lighter through translucent white overlays. Cards, menus, and dialogs therefore separate from the ground by receiving more apparent light, not by casting prominent shadows. A coherent interface maintains a restrained progression from deep background to brighter foreground surfaces.抬升元素通过半透明白色叠层逐渐变亮。卡片、菜单与对话框不是依靠醒目投影脱离背景，而是像承接了更多光线一样浮现。连贯的界面会让深色底面到较亮前景之间形成克制而清楚的递进。
Softened Text柔化文字
Text begins with white but is reduced in intensity according to hierarchy. Primary information remains clear, supporting copy becomes quieter, and unavailable content recedes further. This prevents every label from competing at maximum contrast and keeps long reading sessions visually calm.文字以白色为起点，再根据层级降低强度。主要信息保持清楚，辅助说明更为安静，不可用内容则进一步退后。这样可以避免所有标签都以最强对比争夺注意，让持续阅读保持平稳。
Muted Functional Accents低饱和功能色
Accent colors are softened before entering the dark field. Lavender, teal, and dusty rose can identify actions, selections, success-like feedback, or errors without glowing aggressively. Their scarcity gives them authority: color signals that something matters or can be acted upon.强调色进入暗色场域前会先被柔化。薰衣草紫、青绿与灰调玫红可以标记操作、选中、正向反馈或错误，却不会发出咄咄逼人的亮光。正因使用稀少，色彩才具有权威性：它意味着某件事值得注意或可以操作。
Calm Contrast冷静对比
Contrast is organized rather than maximized. Important text and controls are clearly legible, but secondary surfaces and labels remain subdued. The interface avoids both muddy sameness and dazzling separation, producing a stable visual rhythm suited to nighttime use.对比度的目标是组织信息，而不是一味推到最强。重要文字与控件必须清晰，次要表面和标签则主动收敛。界面既不陷入浑浊难辨，也不制造刺眼割裂，从而形成适合夜间使用的稳定节奏。
Shadow Restraint投影克制
Drop shadows are not the primary depth cue because darkness offers them little room to remain visible. When surface lightness already explains elevation, heavy shadow becomes redundant and can make the interface murky. Separation comes from tonal layering, boundaries, and controlled contrast.投影不是主要的深度线索，因为深色环境几乎不给阴影留下可见空间。当表面明度已经解释了层级，浓重阴影便显得多余，还可能让界面变得污浊。元素分离主要依靠色调分层、边界与受控对比。
Who shaped Dark Mode UI?谁塑造了 Dark Mode UI？
The Google Material Design team codified Dark Mode UI as a systematic extension of Material Design rather than a simple color inversion. Its specification connected charcoal foundations, lightness-based elevation, softened text, and muted accents into a portable framework for Android and cross-platform products.Google Material Design 团队将 Dark Mode UI 定义为 Material Design 的系统性延伸，而非简单的颜色反相。其规范把炭黑基底、以明度表达的层级、柔化文字与低饱和强调色连接成一套可用于 Android 及跨平台产品的框架。
Matías Duarte is identified with the design leadership surrounding Material Design and its broader interface language. Within the history of Dark Mode UI, his significance lies in the effort to make digital surfaces behave as a coherent material system whose depth, hierarchy, and interaction cues remain understandable across products.马蒂亚斯·杜阿尔特与 Material Design 及其整体界面语言的设计领导工作密切相关。在 Dark Mode UI 的发展脉络中，他所代表的是一种系统化努力：让数字表面像连贯材料一样运作，使深度、层级与交互线索能够跨产品保持可理解性。
System-wide dark mode transformed dark theming from an isolated application choice into an operating-system-level expectation. In the OLED era, it encouraged applications to participate in a shared nighttime environment and made consistency between platform surfaces and individual products increasingly important.系统级暗色模式把暗色主题从单个应用的局部选择，转变为操作系统层面的普遍期待。在 OLED 时代，它推动应用共同参与统一的夜间环境，也让平台表面与具体产品之间的一致性愈发重要。
How do you use Dark Mode UI today?今天怎么用 Dark Mode UI？
For presentation covers, Dark Mode UI creates a composed, cinematic field without requiring decorative imagery. Use a deep charcoal ground, a restrained title, and one muted accent to establish focus. Content slides should separate sections through subtly lighter surface panels and clear text hierarchy rather than heavy borders or dramatic shadows.用于演示文稿封面时，Dark Mode UI 无需依赖装饰性图像，也能营造沉着而具有电影感的场域。以深炭色铺底，让标题保持克制，再用一种柔和强调色建立焦点。内容页则应通过略亮的表面区块与清晰文字层级划分章节，而不是依赖厚重边框或戏剧化阴影。
Data slides benefit from the style’s controlled contrast. Keep the plotting field close to the background, lift important summaries onto lighter surfaces, and reserve accent color for the active series, selected category, or critical exception. Supporting grid lines and labels should recede, allowing the structure of the data to remain visible without turning the slide into a glowing control panel.数据页尤其适合这种受控对比。绘图区尽量贴近背景，关键摘要置于较亮表面，强调色只交给当前数据系列、选中类别或关键异常。辅助网格线与标签主动退后，使数据结构清晰可见，又不至于把页面变成满屏发光的控制台。
For web dashboards and pricing interfaces, treat elevation as a shared grammar. The page ground should be darkest, persistent navigation slightly lifted, and temporary or decision-critical surfaces brighter still. Pricing tiers can be differentiated through surface emphasis and a single accent, while controls use color primarily for interaction, selection, and status.用于网页仪表板与定价界面时，应把层级当作一套共享语法。页面基底最深，常驻导航略微抬升，临时出现或关系重大决策的表面再亮一些。定价等级可通过表面强调和单一功能色区分；控件色彩则主要服务于交互、选中与状态反馈。
Editorial and marketing layouts should preserve generous dark breathing room and avoid filling every section with competing panels. Long-form articles need a calm reading column, clearly softened metadata, and sparing accent links. Marketing pages can alternate grounded and raised sections, using brighter charcoal surfaces to frame product claims or calls to action without abandoning the night-oriented atmosphere.编辑与营销版面需要保留充足的暗色呼吸空间，避免让每个区段都变成彼此竞争的面板。长篇文章应采用安静的阅读栏，让元数据明显柔化，并克制使用强调色链接。营销页面可以在贴地与抬升区段之间切换，以较亮炭色表面框定产品主张或行动号召，同时保持完整的夜间氛围。
The common mistake is to invert a light design and call the result dark mode. Pure black backgrounds, brilliant white text everywhere, saturated accents, and unchanged shadows create fatigue and flatten hierarchy. Authentic Dark Mode UI requires retuning every relationship: the ground must leave room for elevation, text must vary by importance, and color must remain scarce enough to communicate.最常见的错误，是把浅色设计反相后便称作暗色模式。纯黑背景、处处刺亮的白字、高饱和强调色与原封不动的阴影，会带来疲劳并压平层级。真正的 Dark Mode UI 必须重新校准所有关系：基底要为抬升留下空间，文字要按重要性变化，色彩也要足够稀少，才能承担传达任务。
Dark Mode UI — FAQDark Mode UI · 常见问题
Is Dark Mode UI simply an inverted light theme?Dark Mode UI 只是浅色主题的颜色反相吗？
No. Inversion preserves the original relationships even though those relationships behave differently on a dark ground. A considered dark interface uses near-black charcoal instead of absolute black, reconstructs elevation through lighter overlays, softens white text by hierarchy, and desaturates accents. Every surface relationship must be recalibrated.不是。反相会保留原有关系，但这些关系进入深色背景后已经不再以相同方式成立。经过设计的暗色界面会采用近黑炭色而非绝对纯黑，以较亮叠层重建高度，按照层级柔化白色文字，并降低强调色饱和度。所有表面关系都需要重新校准。
Why does the background avoid pure black?为什么背景要避开纯黑？
Near-black charcoal reduces the harshness of bright text against the ground and preserves room for tonal depth. If the base becomes an absolute visual void, surface distinctions can feel abrupt. Charcoal allows elevated elements to brighten gradually while the overall composition remains unmistakably dark.近黑炭色可以减轻亮色文字与底面的尖锐冲突，也为色调深度保留余地。如果基底成为绝对的视觉空洞，不同表面之间的差异便容易显得突兀。炭色允许抬升元素逐渐变亮，同时让整体仍然明确属于暗色界面。
How should elevation be shown without visible shadows?没有明显投影时，应如何表现层级？
Elevation is shown by compositing light onto the surface. Elements close to the page ground remain dark, while cards, menus, and dialogs become progressively lighter as their perceived height increases. Boundaries and contrast can support this distinction, but surface lightness carries the main spatial message.层级通过向表面叠加光感来表达。贴近页面基底的元素保持较深，卡片、菜单与对话框则随感知高度上升而逐渐变亮。边界和对比可以辅助区分，但真正承担空间信息的是表面明度。
Why are accent colors muted in a dark interface?为什么暗色界面的强调色需要降低饱和度？
Bright saturated color can appear unusually intense against charcoal and compete with text or controls. Softer lavender, teal, and dusty rose retain their functional identity while integrating with the night environment. Because accents are reserved for interaction and status, they remain noticeable without dominating the whole screen.明亮的高饱和色落在炭黑背景上会显得格外强烈，并与文字或控件争夺注意。柔和薰衣草紫、青绿与灰调玫红仍能保留功能身份，却更自然地融入夜间环境。由于强调色只用于交互和状态，它们无须统治整块屏幕也能被看见。
Does dark mode eliminate the need for hierarchy?暗色模式是否可以弱化甚至取消信息层级？
Dark mode makes hierarchy more important, not less. When many surfaces share closely related charcoal tones, lightness, text intensity, and accent color must work together with unusual discipline. Primary content should advance, supporting information should recede, and temporary elevated surfaces should be immediately distinguishable from the persistent page structure.暗色模式不会降低层级的重要性，反而对层级提出更高要求。当大量表面共享相近的炭灰色调时，明度、文字强度与强调色必须更有纪律地协作。主要内容需要前进，辅助信息应当后退，临时抬升表面也必须能与常驻页面结构立即区分。
Related design styles相关设计风格
IBM Plex Mono DevColor used like syntax highlighting. Carbon Gray 100 canvas, IBM Plex Mono th…颜色像语法高亮：Carbon 近黑画布、通篇 IBM Plex Mono 等宽…
Montserrat StartupSeries-A on a projector. Black Montserrat on charcoal-teal, lit by one bright…2010 年代拉美创业路演幻灯片：深炭青底铺超大加粗 Montserrat，单…
Aperture ScienceSterile authority. Cool panel seams, Archivo signage, and sparse orange-blue…冷峻权威：冷灰板缝、Archivo 标识与稀疏橙蓝光环。
Bang & Olufsen AluminiumQuiet luxury, machined flat. Satin aluminium grain, hairlines, thin charcoal…安静奢华，精密平面。缎面铝纹、发丝线与炭灰细字。
Circular FintechFinance feels light. Lilac-white space, rounded cards, and one vivid purple g…金融变轻：淡紫白留白、圆角卡片与亮紫渐变。
Estonia e-Residency Digital (2014)Trust without weight. Cornflower blue, 12-column grids, and cyan verified sig…信任不沉重。矢车菊蓝、十二栏网格与青色验证信号。