https://pintorajs.vercel.app/assets/js/fb963eff.78fa1c3e.js

1"use strict";(globalThis.webpackChunkpintora_website=globalThis.webpackChunkpintora_website||[]).push([["3069"],{93402:function(e,n,r){r.r(n),r.d(n,{default:()=>c,frontMatter:()=>i,metadata:()=>t,assets:()=>s,toc:()=>d,contentTitle:()=>l});var t=JSON.parse('{"id":"configuration/theme","title":"Theme","description":"Pintora has some builtin themes. Check the Live Editor to experiment each theme\'s look.","source":"@site/docs/configuration/theme.mdx","sourceDirName":"configuration","slug":"/configuration/theme","permalink":"/docs/configuration/theme","draft":false,"unlisted":false,"editUrl":"https://github.com/hikerpig/pintora/edit/master/website/docs/configuration/theme.mdx","tags":[],"version":"current","frontMatter":{"title":"Theme"},"sidebar":"tutorialSidebar","previous":{"title":"Custom Style","permalink":"/docs/configuration/custom-style"},"next":{"title":"API Usage","permalink":"/docs/advanced/api-usage"}}'),o=r("35250"),a=r("40151");let i={title:"Theme"},l=void 0,s={},d=[{value:"Define and apply a new theme",id:"define-and-apply-a-new-theme",level:2},{value:"Register a theme",id:"register-a-theme",level:2}];function h(e){let n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["Pintora has some builtin themes. Check the ",(0,o.jsx)(n.a,{href:"https://pintorajs.vercel.app/demo/live-editor",children:"Live Editor"})," to experiment each theme's look."]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"default"}),", default light theme, based on Ayu Light palette."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"dark"}),", dark theme, based on Dracula palette."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"larkLight"}),", light theme, based on ",(0,o.jsx)(n.a,{href:"https://coolors.co/3370ff-143c9a-01d6b9-447dfd-edf4ff",children:"Lark palette"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"larkDark"}),", dark theme, based on ",(0,o.jsx)(n.a,{href:"https://coolors.co/3370ff-143c9a-01d6b9-447dfd-edf4ff",children:"Lark palette"}),"."]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["You can set theme through the ",(0,o.jsx)(n.code,{children:"setConfig"})," method."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"pintora.default.setConfig({\n  themeConfig: {\n    theme: 'dark',\n    // override some of the theme's variables\n    themeVariables: {\n      primaryColor: '#A8DADC',\n    }\n  }\n})\n"})}),"\n",(0,o.jsx)(n.h2,{id:"define-and-apply-a-new-theme",children:"Define and apply a new theme"}),"\n",(0,o.jsxs)(n.p,{children:["At first glance, a theme is an object that fits to the ",(0,o.jsx)(n.code,{children:"ITheme"})," interface."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"export interface ITheme {\n  /**\n   * Indicate if this is a dark theme, if not specified, will be treat as a light theme\n   */\n  isDark?: boolean\n  /**\n   * While toggling between light/dark theme, will switch to this if this is specified\n   */\n  schemeOppsiteTheme?: string\n\n  primaryColor: string\n  secondaryColor: string\n  teritaryColor: string\n\n  primaryLineColor: string\n  secondaryLineColor: string\n\n  primaryBorderColor: string\n  secondaryBorderColor: string\n\n  textColor: string\n  primaryTextColor: string\n  secondaryTextColor: string\n  teritaryTextColor: string\n\n  /**\n   * Background color for the canvas, by default, it will be transparent\n   */\n  canvasBackground?: string\n  groupBackground: string\n  background1: string\n  /**\n   * Used in area that needs to display dark text, like erDiagram's atrributes\n   */\n  lightestBackground?: string\n\n  /**\n   * Text color for note, by default, it will be the same with `textColor`\n   */\n  noteTextColor?: string\n  /**\n   * Background color for note, by default, it will be slightly light yellow\n   */\n  noteBackgroun

1d?: string\n}\n"})}),"\n",(0,o.jsx)(n.p,{children:"For example, the default theme:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"// ayu light\nexport const AYU_LIGHT = {\n  white: '#fff',\n  normalDark: '#3b4044',\n  neutralGray: '#f8f8f2',\n  cyan: '#55b4d4',\n  green: '#9c0',\n  orange: '#fdb05e',\n  pink: '#f07171',\n  purple: '#af71d0',\n  red: '#e45649',\n  yellow: '#f5f1be'\n}\n\nexport class ThemeDefault implements ITheme {\n  schemeOppsiteTheme = 'dark'\n\n  primaryColor = AYU_LIGHT.orange\n  secondaryColor = AYU_LIGHT.yellow\n  teritaryColor = AYU_LIGHT.purple\n\n  primaryLineColor = AYU_LIGHT.normalDark\n  secondaryLineColor = AYU_LIGHT.normalDark\n\n  textColor = AYU_LIGHT.normalDark\n  primaryTextColor = AYU_LIGHT.normalDark\n  secondaryTextColor = AYU_LIGHT.normalDark\n  teritaryTextColor = AYU_LIGHT.normalDark\n\n  primaryBorderColor = AYU_LIGHT.normalDark\n  secondaryBorderColor = AYU_LIGHT.neutralGray\n\n  groupBackground = AYU_LIGHT.white\n  background1 = AYU_LIGHT.neutralGray\n\n  noteBackgroun

1d = AYU_LIGHT.yellow\n}\n"})}),"\n",(0,o.jsxs)(n.p,{children:["You can override the ",(0,o.jsx)(n.code,{children:"themeVariables"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"pintora.default.setConfig({\n  themeConfig: {\n    themeVariables: { ...yourThemeObject }\n  }\n})\n"})}),"\n",(0,o.jsx)(n.h2,{id:"register-a-theme",children:"Register a theme"}),"\n",(0,o.jsxs)(n.p,{children:["You can see the demo in ",(0,o.jsx)(n.a,{href:"https://codepen.io/hikerpig/pen/qBPgNGM",children:"Codepen"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"interface IPintoraStandalone {\n  themeRegistry: {\n    registerTheme(name: string, variables: ITheme): void\n  }\n}\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"/** @typedef {import('@pintora/standalone').ITheme} ITheme */\n\n// from a neovim theme https://github.com/EdenEast/nightfox.nvim\n// duskfox https://coolors.co/393552-eb6f92-a3be8c-f6c177-569fba-c4a7e7-9ccfd8-e0def4-ea9a97-eb98c3\nconst PALETTE = {\n  normalDark: '#393552',\n  pink: '#EB6F92',\n  purple: '#C4A7E7',\n  blue: '#569FBA',\n  yellow: '#F6C177',\n  green: '#A3BE8C',\n  lightBlue: '#9CCFD8',\n  pastelPink: '#EA9A97',\n  lightPurple: '#E0DEF4',\n  white: '#f9f9f9',\n};\n\n/** @type {ITheme} */\nconst themeDuskFox = {\n  schemeOppsiteTheme: 'default',\n  isDark: true,\n\n  primaryColor: PALETTE.pink,\n  secondaryColor: PALETTE.purple,\n  teritaryColor: PALETTE.blue,\n\n  primaryLineColor: PALETTE.lightPurple,\n  secondaryLineColor: PALETTE.lightBlue,\n\n  textColor: PALETTE.white,\n  primaryTextColor: PALETTE.normalDark,\n  secondaryTextColor: PALETTE.white,\n  teritaryTextColor: PALETTE.lightPurple,\n\n  primaryBorderColor: PALETTE.white,\n  secondaryBorderColor: PALETTE.blue,\n\n  canvasBackground: PALETTE.normalDark,\n  background1: PALETTE.pastelPink,\n  lightestBackground: PALETTE.white,\n  groupBackground: PALETTE.normalDark,\n\n  noteBackgroun

1d: PALETTE.yellow,\n  noteTextColor: PALETTE.normalDark,\n};\n\n\npintora.default.themeRegistry.registerTheme('duskfox', themeDuskFox);\n\n// use it somewhere after\npintora.default.setConfig({\n  themeConfig: {\n    theme: 'duskfox',\n  },\n});\n"})})]})}function c(e={}){let{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}}}]);