跳至主要内容

颜色

在 ChatGPT 中打开

webforJ 提供了一个基于 CSS 自定义属性的颜色系统。这些颜色变量能够保持应用程序的视觉风格一致，同时让您能够根据设计需求完全控制调色板的自定义。

您可以使用 --dwc-color-{palette}-{step} 语法引用任何颜色，其中 {palette} 是颜色组的名称（例如，primary、danger 等），{step} 是从 5 到 95 的数字，步长为 5，表示颜色的明亮程度。

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
阶段步进比例

步进值的范围从 5（最深）到 95（最浅），以 5 为步长递增。第 5 步始终是最深的，第 95 步始终是最浅的，无论是亮模式还是暗模式。

颜色调色板​

DWC 配置了七种调色板以及 black/white 调色板，每种调色板都是一种语义颜色的变化（阴影和色调）的集合。

可用的调色板​

  • default: 一种中性色调板，掺入了主要色调，适用于大多数组件的背景、边框和中性色彩元素。
  • primary: 通常代表您品牌的主要颜色。
  • success、warning、danger: 用于适当状态指示的语义调色板。
  • info: 用于次要强调的补充调色板。
  • gray: 一种纯灰度调色板，未掺色。
  • black/white: 动态模式感知颜色，能够自动适应当前主题。在亮模式下几乎是黑色，在暗模式下变为几乎白色，反之亦然。

调色板种子​

每种调色板是从两个种子变量生成的：hue 和 saturation。设置这两个值可以自动生成所有 19 个步骤。

种子变量描述
--dwc-color-{name}-h种子颜色的色相角度（0-360）。
--dwc-color-{name}-s饱和度百分比。100% 是完全饱和，0% 是完全无饱和（灰色）。

您可以通过在根样式中重新定义这些变量来调整调色板。例如，要修改主要调色板：

:root {
  --dwc-color-primary-h: 225;
  --dwc-color-primary-s: 100%;
}
变量默认值
--dwc-color-primary-h223
--dwc-color-primary-s91%

直接种子覆盖​

每种调色板还暴露了一个 --dwc-color-{name}-seed 变量。默认情况下，它是由色相和饱和度值构成的，但您可以用任何有效的 CSS 颜色直接覆盖它，以完全绕过色相/饱和度系统。

:root {
  --dwc-color-primary-seed: #6366f1;
}

色相旋转​

调色板生成器在步骤之间应用细微的色相旋转，以创建更自然的调色板。更深的阴影会略微偏暖，而更浅的阴影则会略微偏冷。这模仿了真实颜料的行为，并防止调色板显得平坦或合成。

变量默认值描述
--dwc-color-hue-rotate3调色板中色相偏移的度数。设置为 0 可以禁用。

每一步生成的变量​

每种调色板生成 19 个步骤（5 到 95）。对于每个步骤，产生以下变量：

变量模式描述
--dwc-color-{name}-{step}该步骤的调色板阴影。
--dwc-color-{name}-text-{step}从该步骤派生的安全文本颜色（符合 WCAG AA 标准）。
--dwc-color-on-{name}-text-{step}用于该阴影作为背景的文本颜色（自动翻转光/暗）。
可访问性

所有生成的文本颜色自动满足 WCAG AA 对比要求。您无需自己计算对比比率。

顶部行显示了阴影及其 on-text 颜色（用于直接放置在该阴影上的文本）。底部行显示在表面背景上的 text 颜色：

其他生成的变量​

变量模式描述
--dwc-color-{name}-tint种子颜色在 12% 不透明度下，用于细微高亮背景。
--dwc-border-color-{name}感知模式的边框颜色，全色调的边框颜色。
--dwc-border-color-{name}-emphasis用于悬停、聚焦和活动状态的更强的感知模式边框颜色。
--dwc-focus-ring-{name}调色板的焦点环阴影。

全局颜色​

这些是模式感知颜色，能够自动适应明暗主题。

变量描述
--dwc-color-black在亮模式中接近黑色，在暗模式中接近白色。
--dwc-color-white在亮模式中接近白色，在暗模式中接近黑色。
--dwc-color-body-text默认的主体文本颜色（使用 --dwc-color-black）。

组件主题​

DWC 将可用调色板的使用抽象化为一组更高级的语义变化变量。组件使用这些变化而不是原始的步骤数字，因为变化能够自动适应亮暗模式。

这些变化分为三组：normal、dark 和 light。

  1. normal 变量是基础颜色，用于背景和主要用户界面元素。
  2. dark 变量主要用于 active/pressed 状态。
  3. light 变量主要用于 hover/focus 状态。
--dwc-color-primary-dark: var(--dwc-color-primary-45)
--dwc-color-primary: var(--dwc-color-primary-50)
--dwc-color-primary-light: var(--dwc-color-primary-55)
--dwc-color-primary-alt: var(--dwc-color-primary-tint)

--dwc-color-primary-text-dark: var(--dwc-color-primary-text-40)
--dwc-color-primary-text: var(--dwc-color-primary-text-45)
--dwc-color-primary-text-light: var(--dwc-color-primary-text-50)

--dwc-color-on-primary-text-dark: var(--dwc-color-on-primary-text-45)
--dwc-color-on-primary-text: var(--dwc-color-on-primary-text-50)
--dwc-color-on-primary-text-light: var(--dwc-color-on-primary-text-55)
--dwc-color-on-primary-text-alt: var(--dwc-color-primary-text)

变化参考​

变量描述
--dwc-color-{name}基础颜色。用于背景、填充和边框。
--dwc-color-{name}-dark更深的版本。用于活动/按下状态。
--dwc-color-{name}-light更浅的版本。用于悬停/聚焦状态。
--dwc-color-{name}-alt种子颜色在 12% 不透明度下。用于细微高亮状态。
--dwc-color-{name}-text在应用表面上安全的文本颜色（WCAG AA）。
--dwc-color-{name}-text-dark更深的文本变化。
--dwc-color-{name}-text-light更浅的文本变化。
--dwc-color-on-{name}-text用于 --dwc-color-{name} 作为背景的文本颜色。
--dwc-color-on-{name}-text-dark用于 --dwc-color-{name}-dark 的文本颜色。
--dwc-color-on-{name}-text-light用于 --dwc-color-{name}-light 的文本颜色。
--dwc-color-on-{name}-text-alt用于 --dwc-color-{name}-alt 的文本颜色。
--dwc-border-color-{name}能够感知模式的边框颜色。
--dwc-border-color-{name}-emphasis更强的模式感知边框颜色。
--dwc-focus-ring-{name}焦点环阴影。

继续学习

A Java design system built in: webforJ DWC tokens and themes文章A Java design system built in: webforJ DWC tokens and themesDark mode in a Java web app: themes, toggle, saved choice文章Dark mode in a Java web app: themes, toggle, saved choiceTransform Your webforJ App with Professional Theming文章Transform Your webforJ App with Professional Theming
webforJ 团队

需要帮助吗？

与 webforJ 的工程师聊聊您的项目。

预约通话

我们支持EN · DE · FR · ES