Back to Details

color-mode-and-theme

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Color Mode and Theme

配色模式与主题

The Decision: Light, Dark, or Both

决策：浅色、深色还是两者兼具

Color mode is a brand and context decision, not a personal preference. Make it deliberately.
配色模式是基于品牌和场景的决策，而非个人偏好，需审慎决定。

Light (white design)

浅色（白底设计）

Tone: Open, trustworthy, content-forward, accessible, professional
Fits: Marketing sites, e-commerce, editorial, SaaS with mixed audiences, consumer products, B2B tools where the content is the focus
Light mode is the safer default for most products. It performs better in bright environments and has broader accessibility coverage out of the box.
调性： 开放、可信、以内容为核心、易访问、专业
适用场景： 营销网站、电商平台、编辑类产品、受众广泛的SaaS、消费级产品、以内容为核心的B2B工具
浅色模式是大多数产品更安全的默认选择。在明亮环境下表现更佳，且原生具备更广泛的可访问性覆盖。

Dark (dark design)

深色（黑底设计）

Tone: Premium, focused, immersive, technical, high-contrast data
Fits: Trading platforms, developer tools, creative tools (video/audio editors), data dashboards with dense visualisations, entertainment, gaming
Dark mode reduces eye strain during extended use in low-light environments. It also makes colourful data visualisations (charts, heatmaps) pop more clearly against a dark surface.
Caution: Dark mode is harder to get right. Low-contrast text, over-saturated brand colours, and insufficient surface differentiation are common failures. If the team cannot maintain it properly, light mode is better than a broken dark mode.
调性： 高端、专注、沉浸式、技术感、高对比度数据展示
适用场景： 交易平台、开发者工具、创意工具（视频/音频编辑器）、包含密集可视化的数据仪表盘、娱乐、游戏
深色模式能减少低光环境下长期使用的眼部疲劳，还能让彩色数据可视化（图表、热力图）在深色背景上更清晰地突出显示。
注意事项： 深色模式更难做好。低对比度文本、过度饱和的品牌色、界面层级区分不足是常见问题。如果团队无法妥善维护，浅色模式比不完善的深色模式更好。

Combined (system-default + manual override)

混合模式（系统默认+手动切换）

Respect 
prefers-color-scheme
and let the OS set the default. Offer a toggle for users who want to override. This is the modern standard for most products with a returning user base.
css
@media (prefers-color-scheme: dark) {
  :root { /* dark tokens */ }
}
@media (prefers-color-scheme: light) {
  :root { /* light tokens */ }
}
[data-theme="dark"] { /* manual override */ }
[data-theme="light"] { /* manual override */ }
尊重
prefers-color-scheme
设置，让操作系统决定默认模式。为想要手动切换的用户提供开关。这是大多数有回头客的产品的现代标准方案。
css
@media (prefers-color-scheme: dark) {
  :root { /* dark tokens */ }
}
@media (prefers-color-scheme: light) {
  :root { /* light tokens */ }
}
[data-theme="dark"] { /* manual override */ }
[data-theme="light"] { /* manual override */ }

When to Build a Theme Selector in the UI

何时在UI中添加主题选择器

A theme selector is a UI control — it takes space and adds complexity. Only build it when user control genuinely matters.
SituationTheme selector?
Marketing site, landing pageNo — pick one mode, commit to it
Consumer SaaS, general audienceCombined (system-default + toggle)
Developer tool, technical productYes — developers expect it
Trading platform, financial dashboardYes — extended use, low-light sessions common
B2B enterprise tool (ERP, analytics)Yes — power users, long sessions, personal preference varies
E-commerce storefrontUsually no — light default, possibly system-default
Creative tool (design, video, audio)Yes — dark is often preferred, toggle still expected
Rule: if the user will spend hours per day in the tool, give them control. If it's a transactional or occasional-use product, pick the mode that fits the brand and move on.
Place the theme toggle in the header (top-right, near account) or in user settings — not in primary navigation.
主题选择器是一种UI控件——会占用空间并增加复杂度。仅当用户控制权确实重要时才添加。
场景是否需要主题选择器？
营销网站、着陆页否——选定一种模式并坚持使用
消费者SaaS、通用受众产品是——混合模式（系统默认+开关）
开发者工具、技术类产品是——开发者普遍有此需求
交易平台、金融仪表盘是——长期使用、低光环境使用场景常见
B2B企业工具（ERP、分析类）是——资深用户、使用时长久、个人偏好差异大
电商前端页面通常不需要——浅色默认，可考虑系统默认
创意工具（设计、视频、音频）是——深色通常更受欢迎，但仍需提供开关
规则： 如果用户每天会在工具中花费数小时，就给他们控制权。如果是交易类或偶尔使用的产品，选择符合品牌调性的模式即可。
将主题开关放在页眉（右上角，靠近账户入口）或用户设置中——不要放在主导航栏。

Brand Tone and Color Mode

品牌调性与配色模式

The brand's existing visual identity should inform the default mode.
Brand toneDefault mode
Clean, minimal, trustworthy, openLight
Premium, exclusive, bold, immersiveDark
Technical, data-heavy, preciseDark
Playful, colourful, energeticLight (dark mode harder to maintain with vivid brand colours)
Neutral, enterprise, functionalLight, with system-default toggle
If the brand uses a very dark primary colour (navy, deep green, near-black), a dark mode surfaces it naturally. If the brand is built around a bright, vivid primary, light mode lets it breathe.
品牌现有的视觉标识应作为默认模式的参考。
品牌调性默认模式
简洁、极简、可信、开放浅色
高端、专属、大胆、沉浸式深色
技术感、数据密集、精准深色
活泼、多彩、充满活力浅色（鲜艳品牌色的深色模式更难维护）
中立、企业级、功能性浅色，搭配系统默认开关
如果品牌使用非常深的主色调（藏青、深绿、近乎黑色），深色模式能自然地凸显它。如果品牌以明亮、鲜艳的主色调为核心，浅色模式能让它更舒展。

Dark Mode Token Principles

深色模式设计令牌原则

A theme switcher is a second palette, not a toggle. Every semantic colour needs a verified value in each mode — not one value flipped by an algorithm. Contrast that passes on light routinely fails on dark; saturation and elevation read differently. Real cost, and a reason not to build one unless it earns its place (see above).
Dark mode is not just inverting colours. Common mistakes:
  • Do not use pure black (#000000) as the base surface — use a very dark neutral (#0A0A0F, #111827) for depth
  • Surface hierarchy in dark mode uses lightness, not shadows — base, +1, +2 surfaces get progressively lighter, not more shadowed
  • Reduce brand colour saturation slightly — vivid colours on dark backgrounds can be visually aggressive; a 10–15% desaturation keeps them readable
  • Increase font weight for reversed text — light text on a dark background often appears "thinner" than the same weight in light mode. Increase the weight by one step (e.g., from Regular to Medium, or Medium to Semibold) to maintain legibility.
  • Text contrast needs active verification — light text on dark surfaces is not automatically WCAG-compliant; check all combinations
css
/* Dark mode surface scale */
--color-surface:         #0A0A0F;  /* base */
--color-surface-raised:  #141419;  /* cards */
--color-surface-overlay: #1E1E26;  /* modals, popovers */
--color-border:          rgba(255,255,255,0.08);
--color-text:            #F0F0F5;
--color-text-secondary:  #8A8F98;
主题切换器对应的是第二套调色板，而非简单的开关。 每个语义化颜色在每种模式下都需要经过验证的数值——不能仅通过算法翻转一个数值。在浅色模式下通过的对比度，在深色模式下通常会失效；饱和度和层级的呈现效果也不同。这需要实际成本，也是除非必要否则不做深色模式的原因（见上文）。
深色模式不是简单的颜色反转。常见错误：
  • 不要使用纯黑色（#000000）作为基础背景——使用极深的中性色（#0A0A0F、#111827）来营造层次感
  • 深色模式的界面层级通过亮度区分，而非阴影——基础、+1、+2层级的界面应逐渐变亮，而非增加阴影
  • 略微降低品牌色的饱和度——深色背景上的鲜艳颜色可能会过于刺眼；降低10-15%的饱和度能保持可读性
  • 反转文本（浅色文本在深色背景上）需增加字重——浅色文本在深色背景上通常看起来比浅色模式下的相同字重更“细”。将字重提高一级（例如从常规体改为中等体，或从中等体改为半粗体）以保持易读性
  • 文本对比度需要主动验证——浅色文本在深色背景上不会自动符合WCAG标准；需检查所有组合
css
/* Dark mode surface scale */
--color-surface:         #0A0A0F;  /* base */
--color-surface-raised:  #141419;  /* cards */
--color-surface-overlay: #1E1E26;  /* modals, popovers */
--color-border:          rgba(255,255,255,0.08);
--color-text:            #F0F0F5;
--color-text-secondary:  #8A8F98;

Review Checklist

审核清单

  • Is the color mode choice deliberate and based on brand tone and use context?
  • If combined mode: does 
    prefers-color-scheme
    set the default?
  • If a theme selector is built: is it placed in a low-profile but accessible location?
  • In dark mode: are surfaces differentiated by lightness steps, not just shadows?
  • In dark mode: is brand colour slightly desaturated to avoid visual aggression?
  • Are all text/background contrast ratios verified in both modes (WCAG 2.2 AA)?
  • Is font weight increased by one step for reversed text (light-on-dark) to maintain optical legibility?
  • Is pure black (#000000) avoided as a dark mode base surface?
  • 配色模式的选择是否基于品牌调性和使用场景，且经过审慎考虑？
  • 如果使用混合模式：是否由
    prefers-color-scheme
    设置默认值？
  • 如果添加了主题选择器：是否放置在低调但易访问的位置？
  • 深色模式下：界面是否通过亮度层级区分，而非仅依赖阴影？
  • 深色模式下：品牌色是否略微降低饱和度以避免视觉刺眼？
  • 两种模式下的所有文本/背景对比度是否都经过验证（符合WCAG 2.2 AA标准）？
  • 反转文本（浅色在深色上）是否提高了一级字重以保持视觉易读性？
  • 深色模式的基础背景是否避免使用纯黑色（#000000）？