g6/packages/site/docs/manual/customize/themeExtension.en.md

title	order
Custom Theme Extension	5

G6 allows extension of existing themes.

• Theme is responsible for defining the visual style of the diagram.
• Theme Processor (ThemeSolver) is a functional component responsible for generating the final theme style specifications based on the provided configuration.

The following are examples of the two built-in topic processor types and their configuration options:

Features	SpecThemeSolver (Specification Theme Processor)	SubjectThemeSolver (Subject Theme Processor)
Customization level	Fine-grained, for specific components (such as nodes, edges)	Coarse-grained, overall chart theme
Swatch Application	Dynamically apply color swatches and styles based on data type	Apply basic colors and simplified swatch configurations
Style Definition	Define the visual style of each data type in detail	Unify the visual style of the overall theme
Applicable scenarios	Data-driven style customization, suitable for complex and specific visual needs	Theme style consistency, suitable for simple visual needs
Difference	Provides detailed customization capabilities, with different visual displays for different data segments	Provides macro theme adjustment capabilities, focusing on the overall appearance rather than details
Configuration item type	SpecThemeCfg	SubjectThemeCfg

SpecThemeCfg

type SpecThemeCfg = { type: 'spec' } & SpecThemeSolverOptions;

/**
 * The type of color palette can be a hexadecimal color string array or an object. The key is the data type name, and the value is the hexadecimal color value.
 */
type Palette = string[] | { [dataType: string]: string };
type ITEM_TYPE = 'node' | 'edge' | 'combo';
type SpecThemeSolverOptions = {
  /**
   * The built-in theme that the custom theme is based on, defaults to 'light'
   */
  base: 'light' | 'dark';
  specification: {
    [itemType: ITEM_TYPE]: {
      /**
       * The data type field of node/edge/combo. For example, if the node is classified according to the 'cluster' field, you can specify dataTypeField: 'cluster', and then the color will be selected from the color palette based on this classification.
       */
      dataTypeField: string;
      /**
       * Swatches
       */
      palette: Palette;
      /**
       * Customize the style of the graphics corresponding to the color palette
       */
      getStyleSets: (palette: Palette) => {
        default: {
          [shapeId: string]: ShapeStyle;
        };
        [stateName: string]: {
          [shapeId: string]: ShapeStyle;
        };
      };
    };
    canvas?: {
      /**
       * Configuration of the canvas background color. If not configured, it will follow the default color of base.
       */
      backgroundColor: string;
      [cssName: string]: unknown;
    };
  };
};

SubjectThemeCfg

type SubjectThemeCfg = { type: 'subject' } & SubjectThemeSolverOptions;

/**
 * The type of color palette can be a hexadecimal color string array or an object. The key is the data type name, and the value is the hexadecimal color value.
 */
type Palette = string[] | { [dataType: string]: string };
type ITEM_TYPE = 'node' | 'edge' | 'combo';
type SubjectThemeSolverOptions = {
  /**
   * The built-in theme that the custom theme is based on, defaults to 'light'
   */
  base: 'light' | 'dark';
  baseColor: string;
  specification?: {
    [itemType: ITEM_TYPE]: {
      /**
       * The data type field of node/edge/combo. For example, if the node is classified according to the 'cluster' field, you can specify dataTypeField: 'cluster', and then the color will be selected from the color palette based on this classification.
       */
      dataTypeField: string;
      /**
       * Swatches
       */
      palette: Palette;
    };
    canvas?: {
      /**
       * Configuration of the canvas background color. If not configured, it will follow the default color of base.
       */
      backgroundColor: string;
      [cssName: string]: unknown;
    };
  };
};

Example

Here we take the implementation of a simple theme as an example, and the theme tone is blue.

import { Graph } from '@antv/g6';

const graph = new Graph({
  theme: {
    type: 'spec',
    base: 'light',
    specification: {
      canvas: {
        backgroundColor: '#f3faff',
      },
      node: {
        dataTypeField: 'cluster',
        palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'],
      },
    },
  },
});