Skip to main content

Theme

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.

pintora.default.setConfig({
  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 = AYU_LIGHT.orange
  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:

pintora.default.setConfig({
  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 https://github.com/EdenEast/nightfox.nvim
// duskfox https://coolors.co/393552-eb6f92-a3be8c-f6c177-569fba-c4a7e7-9ccfd8-e0def4-ea9a97-eb98c3
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,

  primaryColor: PALETTE.pink,
  secondaryColor: PALETTE.purple,
  teritaryColor: PALETTE.blue,

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

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

  primaryBorderColor: PALETTE.white,
  secondaryBorderColor: PALETTE.blue,

  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
pintora.default.setConfig({
  themeConfig: {
    theme: 'duskfox',
  },
});