Feature Request: Support CSS variables for theming

[stereobooster]

I want to pre-render diagram as SVG and embed it in HTML. And I want to style SVG with the help of CSS variables, so that I can add support for dark theme using CSS.

I tried something like this:

const themeCSS = {
  primaryColor: `rgb(var(--primaryColor))`,
  secondaryColor: `rgb(var(--secondaryColor))`,
  tertiaryColor: `rgb(var(--tertiaryColor))`,

  lineColor: `rgb(var(--lineColor))`,

  primaryLineColor: `rgb(var(--primaryLineColor))`,
  secondaryLineColor: `rgb(var(--secondaryLineColor))`,

  textColor: `rgb(var(--textColor))`,
  primaryTextColor: `rgb(var(--primaryTextColor))`,
  secondaryTextColor: `rgb(var(--secondaryTextColor))`,
  teritaryTextColor: `rgb(var(--teritaryTextColor))`,

  primaryBorderColor: `rgb(var(--primaryBorderColor))`,
  secondaryBorderColor: `rgb(var(--secondaryBorderColor))`,
  tertiaryBorderColor: `rgb(var(--tertiaryBorderColor))`,

  canvasBackground: `rgb(var(--canvasBackground))`,
  background1: `rgb(var(--background1))`,
  lightestBackground: `rgb(var(--lightestBackground))`,
  groupBackground: `rgb(var(--groupBackground))`,

  noteBackground: `rgb(var(--noteBackground))`,
  noteTextColor: `rgb(var(--noteTextColor))`,
};

But it won't work because some diagrams use tinycolor

pintora/packages/pintora-diagrams/src/class/config.ts

Lines 66 to 83 in 8ec6708

	getConfigFromTheme(t) {
	const primaryCorlorInstance = tinycolor(t.primaryColor)
	const canvasBgInstance = tinycolor(t.canvasBackground || PALETTE.white)
	const isBgLight = canvasBgInstance.isLight()
	let relationLineColor: string
	if (isBgLight) {
	relationLineColor = PALETTE.normalDark
	} else {
	relationLineColor = PALETTE.white
	}
	const entityBodyBackground = primaryCorlorInstance.brighten(60).toHexString()
	return {
	entityBackground: t.primaryColor,
	entityBodyBackground,
	relationLineColor,
	}
	},

[hikerpig]

The core of the implementation does not rely on CSS because it might be rendered inside any container so the diagrams would have to evaluate CSS vars during run-time or detect that it is a CSS var and do nothing, this is too complicated. Plus it also have one canvas renderer.
In your case, I figured that you may need to evaluate CSS vars to actual color string ， and pass it to the config of render function.

[hikerpig]

I'm guessing you want to pre-render SVG from server , and adjust the colors in the browser later ?

[stereobooster]

I'm guessing you want to pre-render SVG from server , and adjust the colors in the browser later ?

Yes. This is the main benefit of Pintora compared to Mermaid - I don't need runtime on the client.

I could as well render two images (light and dark) and use different version depending on the theme, but CSS variables solution seems to be more clear and straightforward (from consumer point of view).

Another pros of using inline SVG:

• I can use Cmd + F to search through text
• I can add small (optional) JS to pan/zoom, something like (there are a lot solutions for this):
  • https://github.com/anvaka/panzoom

[hikerpig]

Yes SVG indeed gives you all the possibilities to manipulation and enhancement.
I can see what you want now but I guess the complexity will hold me for a while for more considerations.

By now I need to focus on the core functionalities and add more tests for classDiagram for 0.7.0 release.

Let's keep this in mind for now.