Theming

Customize the appearance of the schema visualizer with built-in theme support.

Available Themes

PicaDeck Sync ships with two built-in themes:

light

White background, dark text, light borders. The default theme.

dark

Dark background, light text, subtle borders. Better for extended viewing.

Setting the Theme

Pass the theme option when mounting the middleware or creating a handler:

Express

app.use("/schema", schemaVisualizer(schema, {
  theme: "dark",
}));

NestJS

SchemaVisualizerModule.register({
  route: "/schema",
  parser: async (moduleRef) => { /* ... */ },
  theme: "dark",
})

Next.js

export const GET = createSchemaHandler({
  parser: () => parsePrismaFile("./prisma/schema.prisma"),
  theme: "dark",
});

How It Works

The theme is injected into the served HTML page as a window global:

<script>
  window.__PICADECK_THEME__ = "dark";
</script>

The embedded React application reads this value on mount and applies the corresponding CSS variables. The visualizer uses CSS custom properties for all colors, so switching themes changes the entire look without a page reload during server-side configuration changes.

Theme Globals Reference

Global Variable	Type	Description
window.__PICADECK_SCHEMA__	UniversalSchema	The schema data to visualize
window.__PICADECK_THEME__	"light" \| "dark"	Controls the visual theme