G6

Theme

G6

Theme

Loading...

Overview of Theme

G6 allows users to customize the appearance of graphs through themes. Themes can be used to define colors, shapes, and styles for nodes, edges, and other graph elements.

API Reference

Graph.getTheme()

Get the theme

getTheme(): ThemeOptions;

Related Parameters

Return Value:

Type: false | 'light' | 'dark' | string
Description: Current theme

Graph.setTheme(theme)

Set the theme

setTheme(theme: ThemeOptions | ((prev: ThemeOptions) => ThemeOptions)): void;

Example

graph.setTheme('dark');

Related Parameters

Parameter	Type	Description
theme	false \| 'light' \| 'dark' \| string \| ((prev: false \| 'light' \| 'dark' \| string) => false \| 'light' \| 'dark' \| string)	Theme name

Return Value:

Type: void

Type Definitions

ThemeOptions

type ThemeOptions = {
  // Colors used in the theme
  colors: string[];

  // Node style settings
  nodeStyle?: {
    fill: string;
    stroke: string;
  };

  // Edge style settings
  edgeStyle?: {
    stroke: string;
  };

  // Additional configuration options for the theme
  [configKey: string]: any;
};

Loading...

Overview of Theme

G6 allows users to customize the appearance of graphs through themes. Themes can be used to define colors, shapes, and styles for nodes, edges, and other graph elements.

API Reference

Graph.getTheme()

Get the theme

getTheme(): ThemeOptions;

Related Parameters

Return Value:

Type: false | 'light' | 'dark' | string
Description: Current theme

Graph.setTheme(theme)

Set the theme

setTheme(theme: ThemeOptions | ((prev: ThemeOptions) => ThemeOptions)): void;

Example

graph.setTheme('dark');

Related Parameters

Parameter	Type	Description
theme	false \| 'light' \| 'dark' \| string \| ((prev: false \| 'light' \| 'dark' \| string) => false \| 'light' \| 'dark' \| string)	Theme name

Return Value:

Type: void

Type Definitions

ThemeOptions

type ThemeOptions = {
  // Colors used in the theme
  colors: string[];

  // Node style settings
  nodeStyle?: {
    fill: string;
    stroke: string;
  };

  // Edge style settings
  edgeStyle?: {
    stroke: string;
  };

  // Additional configuration options for the theme
  [configKey: string]: any;
};