Server — Themes — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/server/themes

Theme Showcase

The same chart rendered with every built-in theme. All styling is inlined — no CSS custom properties, no browser needed. Each card shows the exact output of renderChart() with a different theme string.

To experiment with themes interactively, open theRender Studio.

light

dark

tufte

tufte-dark

journalist

journalist-dark

bi-tool

bi-tool-dark

carbon

carbon-dark

pastels

pastels-dark

italian

italian-dark

playful

playful-dark

high-contrast

Using themes in server rendering

Pass any theme preset name as a string, or a partial SemioticTheme object for custom overrides. The resolveTheme() function handles merging.

import { renderChart, resolveTheme } from "semiotic/server" // Named preset const svg = renderChart("BarChart", { data, theme: "tufte" }) // Custom override (merges onto dark base) const svg2 = renderChart("LineChart", { data, theme: { mode: "dark", colors: { primary: "#ff6b6b" } }, })