Skip to main content


Pintora has some builtin themes. Check the Live Editor to experiment each theme's look.

  • default, default light theme, based on Ayu Light palette.
  • dark, dark theme, based on Dracula palette.
  • larkLight, light theme, based on Lark palette.
  • larkDark, dark theme, based on Lark palette.

You can set theme through the setConfig method.

themeConfig: {
theme: 'dark',
// override some of the theme's variables
themeVariables: {
primaryColor: '#A8DADC',

Define and apply a new theme

At first glance, a theme is an object that fits to the ITheme interface.

export interface ITheme {
* Indicate if this is a dark theme, if not specified, will be treat as a light theme
isDark?: boolean
* While toggling between light/dark theme, will switch to this if this is specified
schemeOppsiteTheme?: string

primaryColor: string
secondaryColor: string
teritaryColor: string

primaryLineColor: string
secondaryLineColor: string

primaryBorderColor: string
secondaryBorderColor: string

textColor: string
primaryTextColor: string
secondaryTextColor: string
teritaryTextColor: string

* Background color for the canvas, by default, it will be transparent
canvasBackground?: string
groupBackground: string
background1: string
* Used in area that needs to display dark text, like erDiagram's atrributes
lightestBackground?: string

* Text color for note, by default, it will be the same with `textColor`
noteTextColor?: string
* Background color for note, by default, it will be slightly light yellow
noteBackground?: string

For example, the default theme:

// ayu light
export const AYU_LIGHT = {
white: '#fff',
normalDark: '#3b4044',
neutralGray: '#f8f8f2',
cyan: '#55b4d4',
green: '#9c0',
orange: '#fdb05e',
pink: '#f07171',
purple: '#af71d0',
red: '#e45649',
yellow: '#f5f1be'

export class ThemeDefault implements ITheme {
schemeOppsiteTheme = 'dark'

primaryColor =
secondaryColor = AYU_LIGHT.yellow
teritaryColor = AYU_LIGHT.purple

primaryLineColor = AYU_LIGHT.normalDark
secondaryLineColor = AYU_LIGHT.normalDark

textColor = AYU_LIGHT.normalDark
primaryTextColor = AYU_LIGHT.normalDark
secondaryTextColor = AYU_LIGHT.normalDark
teritaryTextColor = AYU_LIGHT.normalDark

primaryBorderColor = AYU_LIGHT.normalDark
secondaryBorderColor = AYU_LIGHT.neutralGray

groupBackground = AYU_LIGHT.white
background1 = AYU_LIGHT.neutralGray

noteBackground = AYU_LIGHT.yellow

You can override the themeVariables:

themeConfig: {
themeVariables: { ...yourThemeObject }

Register a theme

You can see the demo in Codepen.

interface IPintoraStandalone {
themeRegistry: {
registerTheme(name: string, variables: ITheme): void
/** @typedef {import('@pintora/standalone').ITheme} ITheme */

// from a neovim theme
// duskfox
const PALETTE = {
normalDark: '#393552',
pink: '#EB6F92',
purple: '#C4A7E7',
blue: '#569FBA',
yellow: '#F6C177',
green: '#A3BE8C',
lightBlue: '#9CCFD8',
pastelPink: '#EA9A97',
lightPurple: '#E0DEF4',
white: '#f9f9f9',

/** @type {ITheme} */
const themeDuskFox = {
schemeOppsiteTheme: 'default',
isDark: true,

secondaryColor: PALETTE.purple,

primaryLineColor: PALETTE.lightPurple,
secondaryLineColor: PALETTE.lightBlue,

textColor: PALETTE.white,
primaryTextColor: PALETTE.normalDark,
secondaryTextColor: PALETTE.white,
teritaryTextColor: PALETTE.lightPurple,

primaryBorderColor: PALETTE.white,

canvasBackground: PALETTE.normalDark,
background1: PALETTE.pastelPink,
lightestBackground: PALETTE.white,
groupBackground: PALETTE.normalDark,

noteBackground: PALETTE.yellow,
noteTextColor: PALETTE.normalDark,

pintora.default.themeRegistry.registerTheme('duskfox', themeDuskFox);

// use it somewhere after
themeConfig: {
theme: 'duskfox',