背景

@antv/S2 是 AntV 团队开源的多维交叉表格解决方案，底层使用 @antv/g 进行渲染，内置了刷选、聚光灯等丰富的交互。S2 除了开箱即用的表格和分析组件，还提供了大量的自定义配置，方便用户结合业务场景使用。本篇文章会介绍 S2 的主题色板取用规则，以及不同粒度的主题自定义方法，让你的表格更多彩。

色彩

在表格渲染中，无论是角头、列头这样的单元格，还是单选、框选这样的交互行为，都需要选用合适的颜色来填充。在同一主题色下，不同组件、交互行为间通常使用不同明暗的派生色区分。

02_色彩介绍.png

所以在 S2 的色彩使用中，我们会基于给定的主题色，按如下规则生成一套 标准色板：

标准色板共 11 个色彩位，主题色位于索引 6 上
使用主题色加不同程度的 白 生成 5 个较淡的颜色，置于索引 0~5 上
使用主题色加不同程度的 黑 生成 5 个较深的颜色，置于索引 6~11 上

以下是使用不同主题色，生成标准色板的例子：

主题色取 #0A78F4
主题色取 #FF5500

S2 色板与主题 schema

在 S2 的绘制中，实际决定主题效果的是 主题 schema，它是一个 JSON 对象，其中详细定义了组件和交互行为的属性信息，如：

单元格的背景颜色、透明度
字体及 ICON 的颜色、粗细、大小
交互行为（高亮、刷选、minibar）的颜色、透明度

而 主题 schema 中的颜色信息均取自出 S2 色板（Palette）的属性：

basicColors： 基础颜色，如角/列/行头背景，字体/icon 颜色
semanticColors： 语义颜色，如红色、绿色指代的色值。作为 basicColors 的补充存在。
others： 补充颜色，一些固定特殊色，如搜索结果。作为 basicColors 的补充存在。

以 S2 内置的多彩色板 palette/colorful.ts 为例，下图介绍了 主题 schema、S2 色板 与 标准色板 三者之间的关系：

05_流程介绍.png

可以看到，因为 schema 规则是固定的，那么 S2 色板中的 basicColors 取值将直接决定了最终的效果。basicColors 一共有 15 个色彩位，每个位置依赖 basicColorRelations 的调配，用户可以轻松地使用该属性调配出自己的专属色板。

想调整 basicColors 上每个索引上的颜色看看效果？点击试试：s2.antv.vision/zh/examples…

由此 s2 保证了，所有绘制使用的颜色均来自于主题色或主题色的派生颜色。这样使表格界面色彩统一，也便于更改主题色来生成个性化主题。

自定义主题方法

s2Instance.setThemeCfg 方法是主题配置的入口，该方法接收一个类型为 ThemeCfg 的参数，你可以：

通过 ThemeCfg.name 使用预置主题
通过 ThemeCfg.palette 自定义色板生成主题
通过 ThemeCfg.theme 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）

使用内置主题

S2 内置了三套主题，分别为：

default：默认主题，使用较淡化的主题色
colorful：多彩主题，使用较鲜艳的主题色
gray：灰色主题

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.setThemeCfg({ name: 'colorful' });
s2.render();

06_预置主题.gif

自定义色板

完全自定义色板

即参照内置色板自定义所有的 basicColors（点此查看各索引上颜色定义）、semanticColors：

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

const palette = {
  basicColors: ['FFFFFF', '#F8F5FE', ...],
  ...
}

s2.setThemeCfg({ palette });
s2.render();

按主题色自动生成

完全自定义色板 的调配自由度大，但每个颜色都需要单独确定，整体过程较为复杂。为满足用户的一般主题诉求，S2 还提供了根据主题色生成色板的功能。点此在线体验

import { getPalette, generatePalette, PivotSheet } from '@antv/s2';

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

// 主题色
const themeColor = '#EA1720';

// 使用内置的 colorful 色板作为参考色板
// 根据风格差异，你也可以选择 default、gray 作为参考色板
const palette = getPalette('colorful');

// 使用参考色板 & 主题色值生成新色板
const newPalette = generatePalette({ ...palette, brandColor: themeColor });

// 使用新色板设置主题
s2.setThemeCfg({
  palette: newPalette,
});

s2.render();

08_主题色多彩.gif

自定义 schema

在内置主题 或 自定义色板 的基础上，如果还想微调主题属性，可以根据完整 schema 定义进行覆盖，此时不再局限于色彩，可以自由地调配各种属性（字体、边框）。如在 colorful主题的基础上，把数据格斑马纹背景色调整为粉色：

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.setThemeCfg({
  name: 'colorful',
  theme: {
    dataCell: {
      cell: {
        crossBackgroundColor: 'pink'
      }
    }
  }
});
s2.render();

09_schema介绍.png

实战极简风主题

10_极简主题介绍.png

在本节中，我们会使用前面的方法自定义出一个全新的 极简风主题。上图是极简风主题的成品效果，通过分析可以知道，该主题与内置其他主题存在以下差异点：

行/列头无背景色
无斑马纹
分割线非常规的透明度/粗细

色彩搭配

极简主题的取色逻辑与内置三套主题完全不同，比如极简主题的列/角头背景不着色，而内置主题会着或深或浅的主题色，所以极简主题无法从内置主题中派生（仅变更主题色）。针对色彩搭配的差异点，我们需要对照 S2 色板与主题 schema 章节，完整自定义 S2 色板中的 basicColorRelations 取色关系，让色板生成符合预期的 basicColors，进而影响后续 schema 的取色。

S2 内部会根据各色板的 basicColorRelations 取色关系构造对应的 basicColors ，流程如下

basicColors 共 15 个颜色位，数组下标 idx 遍历范围 [0, 14]

当 basicColorRelations 有 idx 对应信息时，则取对应标准色板的颜色

当 basicColorRelations 无 idx 对应信息时，则该位置取白色 #FFFFFF

const BASIC_SHEET_THEME_TYPE_COLOR_RELATIONS = [
  {
    // 行头&数据格交互(hover、选中、十字)
    basicColorIndex: 2,
    standardColorIndex: 1
  },
  {
    // 列头交互(hover、选中)
    basicColorIndex: 4,
    standardColorIndex: 1
  },
  {
    // 刷选遮罩
    basicColorIndex: 5,
    standardColorIndex: 2
  },
  {
    // 行头 link
    basicColorIndex: 6,
    standardColorIndex: 6
  },
  {
    // mini bar、resize 交互(参考线等)
    basicColorIndex: 7,
    standardColorIndex: 5
  },
  {
    // 行头边框、数据格边框
    basicColorIndex: 9,
    standardColorIndex: 1
  },
  { 
    // 角头边框、列头边框
    basicColorIndex: 10,
    standardColorIndex: 1
  },
  {
    // 竖向大分割线
    basicColorIndex: 11,
    standardColorIndex: 4
  },
  {
    // 横向大分割线
    basicColorIndex: 12,
    standardColorIndex: 4
  }
];

以上就是极简风主题色板的 basicColorRelations 取色关系，我们依照设计稿去掉了所有单元格的背景，并为边框、交互等挑选了合适的标准主题色。

绘制样式

在上一步骤中，我们自定义了极简主题的色板。针对样式差异问题，我们可以使用 getTheme 方法（色板作为参数）获取完整的主题 schema，再参照 schema 的定义修改对应属性，以下是关键步骤的代码：


const s2 = new PivotSheet(container, s2DataConfig, s2Options);

// 自定义主题色（方便后续可任意更换）
const newThemeColor = '#f51c5a';

// 生成自定义色板
// ----------------------------------------------------------------
const themePalette = generatePalette({
  // 复用 default 主题的 semanticColors 等通用属性
  ...getPalette("default"),
  brandColor: newThemeColor,
  // 自定义取色逻辑
  basicColorRelations: BASIC_SHEET_THEME_TYPE_COLOR_RELATIONS
});

// 获取色板对应的完整主题 schema
// ----------------------------------------------------------------
const baseTheme = getTheme({
  palette: themePalette
});

// 详细自定义绘制属性
// ----------------------------------------------------------------
// 处理行头/数据单元格背景色
const dataCellBgColor = baseTheme.dataCell.cell.backgroundColor;
baseTheme.dataCell.cell.crossBackgroundColor = dataCellBgColor;
baseTheme.cornerCell.cell.backgroundColor = dataCellBgColor;
baseTheme.rowCell.cell.backgroundColor = dataCellBgColor;
baseTheme.colCell.cell.backgroundColor = dataCellBgColor;
// 强化分割线
baseTheme.splitLine.verticalBorderColorOpacity = 1;
baseTheme.splitLine.horizontalBorderColorOpacity = 1;
// 弱化角头/列头border颜色（取表体单元格border颜色）
const rowBorderColor = baseTheme.rowCell.cell.verticalBorderColor;
baseTheme.cornerCell.cell.horizontalBorderColor = rowBorderColor;
baseTheme.cornerCell.cell.verticalBorderColor = rowBorderColor;
baseTheme.colCell.cell.horizontalBorderColor = rowBorderColor;
baseTheme.colCell.cell.verticalBorderColor = rowBorderColor;

s2.setThemeCfg({
  theme: baseTheme,
});
s2.render();

效果预览

上两节中我们自定义了极简主题的色板及主题 schema，并预留了主题色的变更能力，方便我们派生出不同颜色的极简主题。

11_极简主题效果.gif

结语

以上就是 S2 主题部分的介绍，希望大家在使用 S2 过程中能够轻松搭配出自己的多彩表格。如果关于 AntV S2 的功能特性和判断功能能否实现有疑惑，可以钉钉进「用户交流群」，所有开发者在线答疑。

也欢迎社区的同学和我们一起共建 AntV/S2，打造最强的开源大数据表格引擎。如果看完这篇文章你有所收获，欢迎给我们的仓库 Star⭐️ 鼓励。

S2 的相关链接：

GitHub
官网
核心层: @antv/s2
组件层: @antv/s2-react

让你的表格更多彩 - @antv/S2 主题介绍

背景

色彩