Harmony UI 配色方案安装与配置指南

技术文档

Harmony UI 配色方案安装与配置指南

1. 项目基础介绍

Harmony 是一个可访问的 UI 配色方案，旨在提升设计系统中颜色对比度的控制。它使用了 OKLCH 和 APCA 色彩空间，以保持色彩阴影的高度一致性，并支持 P3 色域，适用于现代屏幕。Harmony 由 Evil Martians 创建，适用于开发者工具的产品咨询。

本项目主要使用 TypeScript 编程语言。

2. 关键技术和框架

OKLCH 色彩空间: Harmony 使用 OKLCH 色彩空间来定义颜色，这是一种更加先进的色彩表示方法。
APCA: 用于确保颜色的可读性。
Tailwind CSS: Harmony 可以作为 Tailwind CSS 配色方案的即插即用替代品。

3. 安装与配置

准备工作

在开始安装之前，请确保你的系统中已经安装了以下工具：

Node.js
npm (Node.js 的包管理器)

安装步骤

步骤 1: 安装 Harmony

使用 npm 安装 Harmony：

npm install @evilmartians/harmony

步骤 2: 在 Tailwind CSS 中使用 Harmony

对于 Tailwind v4，你可以简单地通过导入 @evilmartians/harmony/tailwind.css 来使用 Harmony：

/* app.css 或任何 Tailwind 意识的上下文中 */@import \'tailwindcss\';@import \'@evilmartians/harmony/tailwind.css\';

对于 Tailwind v3，你需要在 tailwind.config.js 文件中导入 harmonyPalette：

// tailwind.config.jsimport harmonyPalette from \'@evilmartians/harmony/tailwind\';export default { theme: { colors: { ...harmonyPalette, }, }, //...};

**注意：**Harmony 使用 OKLCH 颜色，因此需要旧版浏览器的 polyfill。安装 PostCSS 插件来填充 OKLCH 颜色：

npm install -D @csstools/postcss-oklab-function

然后在 postcss.config.js 中启用它：

export default { plugins: { tailwindcss: {}, \'@csstools/postcss-oklab-function\': { \'preserve\': true }, autoprefixer: {}, },};

步骤 3: 在原生 CSS 中使用 Harmony

Harmony 提供了一组包含 CSS 变量的文件，每个文件包含了 OKLCH 和 RGB 回退的一种颜色的所有阴影。只需导入你需要的颜色并按如下方式使用：

@import \"@evilmartians/harmony/css/orange.css\";h1 { color: var(--orange-600);}

Harmony 还提供了一个 index.css 文件，它导入了所有其他的 CSS 文件。**注意：**这个文件非常大，只应在与 PurgeCSS（开启 variables 选项）或其他可以清除未使用 CSS 变量的工具一起使用，或者如果你确实需要所有颜色的情况下使用。

@import \"@evilmartians/harmony/css/index.css\";/* 现在你可以使用任何颜色 */h1 { color: var(--orange-600);}h2 { color: var(--red-300);}

步骤 4: 在 JavaScript 中使用 Harmony

你也可以从 @evilmartians/harmony/base 导入一个不包含 Tailwind 特定内容的纯 JavaScript 对象：

import palette from \"@evilmartians/harmony/base\";console.log(palette.red[\"50\"]);// => oklch(0.988281 0.0046875 20)

以上步骤为 Harmony 的基本安装和配置指南，适用于初学者级别。遵循这些步骤，你就可以开始使用 Harmony 配色方案来提升你的设计系统了。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Harmony UI 配色方案安装与配置指南