Introduction

There are 3 out-of-the-box theme configurations built into S2, and powerful theme customization functions are also provided. View APIs

color

In the color usage of S2, we will first select a theme color, and use the theme color to generate a set of标准色板:

• There are 11 color positions in the standard color palette, and the theme color is located on index 6
• Use the theme color plus different degrees of white to白5 lighter colors, placed on index 0~5
• Use the theme color plus different degrees of黑to generate 5 darker colors and place them on indexes 6~11

The following is an example of using #0A78F4 and #FF5500 different theme colors to generate a standard color palette:

Swatch Palette

The swatch is defined as Palette , from which the color will be taken when the theme schema is generated, and its color comes from the standard swatch. The key properties of Palette are:

• basicColors: the basic color, with a total of 15 color bits, which essentially determines the color scheme of the table. When generating the theme schema, the color will be selected from the fixed index of basicColors. If the background color of the row header is fixed, the color of basicColors[1] will be taken
• basicColorRelations: the corresponding relationship between basicColors and standard swatches. For example, in the built-in colorful theme, basicColors[1] is the color of index 0 in the standard swatches.

Thus S2 guarantees that all the colors used in drawing come from the theme color or the derived color of the theme color. In this way, the color of the table interface is unified, and it is also convenient for users to generate personalized themes according to the theme colors they need.

ThemeSchema

The theme schema is defined as S2Theme , which describes the theme style of cells and interactions in detail, and its attributes include color, line thickness, text size, text alignment, etc. Throughout the schema, all colors will be taken from the Palette :

• basicColors: Basic colors, such as corner/column/row header background, font/icon color
• semanticColors: Semantic colors, such as the color values ​​referred to by red and green
• others: Supplementary colors, some fixed special colors, such as search results

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

s2.setTheme({
  background: {
    color: '#353c59',
  },
});
s2.render(false);

custom theme

The setThemeCfg method on the s2 instance is the entry point for all theme configurations. This method receives a parameter of type ThemeCfg . You can:

• Use a preset theme via ThemeCfg.name
• Generate a theme by customizing the swatches of ThemeCfg.palette
• Generate the theme through the ThemeCfg.theme custom schema (can be used with the above two properties at the same time, that is, override the theme generated by them)

Choose a preset theme

You can use the corresponding theme by specifying the theme name:

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

// name 可为 default, colorful, gray
s2.setThemeCfg({ name: 'colorful' });
s2.render(false);

S2 has 3 built-in theme effects:

Default
Colorful blue
Simple gray

​📊 See more theme examples .

custom schema

If the built-in themes do not meet your requirements, you can override specific configurations by customizing the schema .

At this point you can call s2.setTheme or s2.setThemeCfg() to configure the theme object. View the complete schema configuration :

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

const customTheme = {
  background: {
    color: '#353c59',
  },
};

// s2.setThemeCfg({ theme: customTheme })
s2.setTheme(customTheme)
s2.render(false);

Customize cell alignment

View details and full API

s2.setTheme({
  rowCell: {
    text: {
      textAlign: 'left',
    },
    bolderText: {
      textAlign: 'left',
    },
  },
});

Custom cell background color

View full API

s2.setTheme({
  rowCell: {
    cell: {
      backgroundColor: '#dcdcdc',
    },
  },
});

custom scrollbar style

View full API

s2.setTheme({
  scrollBar: {
    thumbColor: '#666',
    thumbHorizontalMinSize: 20,
    thumbVerticalMinSize: 20,
  },
});

custom swatches

Although the custom schema is flexible, it has a heavy mental burden and requires a more detailed understanding of the schema structure. Therefore, we also provide a custom color palette function. At this time, you need to configure the palette object for setThemeCfg . View full swatch configuration :

Optional swatch color

You can refer to the built-in swatches to personalize basicColors and semanticColors . The selected colors will be used to draw different parts of the table. For the relationship between colors, please refer to the swatch comparison table below .

In addition, in order to facilitate the deployment of exclusive color palettes, S2 officially provides a self-service color palette tool , which helps you quickly adjust color palettes, copy and paste them into projects for use with one click.

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

const s2Palette = {
  // 基础配色色板
  basicColors: [
    '#FFFFFF',
    '#F8F5FE',
    '#EDE1FD',
    '#873BF4',
    '#7232CF',
    '#AB76F7',
    '#FFFFFF',
    '#DDC7FC',
    '#9858F5',
    '#B98EF8',
    '#873BF4',
    '#282B33',
    '#121826',
  ],
  // 语义化色板
  semanticColors: {
    red: '#FF4D4F',
    green: '#29A294',
  },
};
s2.setThemeCfg({ palette: s2Palette });
s2.render(false);

Automatically generated by theme color

There is a large degree of freedom in the deployment of self- selected swatch colors , but each color needs to be determined individually, and the overall process is relatively complicated. To meet users' general theme demands, S2 also provides the function of generating color palettes based on theme colors.

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(false);

Preset theme color palette comparison table