Theme

There are some prefab themes you can import directly.

import chaya from "@pattaya/pattaya/chaya";
import { nodes } from "@pattaya/pattaya/components";

const n = {
  x: 0,
  y: 0,
  // the circle is decorated with chaya active styles.
  shapes: nodes.circle.shapes({ radius: 64 }, chaya.theme.nodes.active),
};

graph.updateQueue(0, [[n]]);

It’s the default light theme with simple and clean colors.

import mayk from "@pattaya/pattaya/mayk";

It’s the default dark theme.

import chaya from "@pattaya/pattaya/chaya";

It’s a light theme with shadow.

import khin from "@pattaya/pattaya/khin";

You can set your styles as follows:

const nodeStyles = {
  border: "#000",
  background: "#aaa",
}

You can set all the styles of components to build a theme;

const nodeStyles = {...};
const splitStyles = {...};
// ...

const theme = {node: nodeStyles, split: splitStyles, ...};

If you have some base styles for the theme, you can derive from them:

const baseStyles = {
  line: "#222",
  lineWidth: 1,
  border: "#000",
  background: "#aaa",
  fontColor: "#000";
};

const theme = deriveTheme(baseStyles);

And you can modify it to personalize your theme.

const mySpecialTheme = deriveTheme(baseStyles);

mySpecialTheme.theme.node.background = "#abc";