Interactively explore all 17 named theme presets, customize colors and typography, and export the result as CSS custom properties, design tokens, or JSX code.
Theme Presets
Select a preset as your starting point:
Customize
Edit individual tokens below. Changes override the active preset.
Text Secondary
--semiotic-text-secondary
Primary
--semiotic-primary
Categorical Palette
#1f77b4
#ff7f0e
#2ca02c
#d62728
#9467bd
#8c564b
#e377c2
#7f7f7f
#bcbd22
#17becf
Live Preview
Preset:light
Mode:light
Font:sans-serif
Palette:
Export
Copy the generated code to use your theme in your project:
CSS
[data-semiotic-theme="custom"] { --semiotic-bg: transparent; --semiotic-text: #333; --semiotic-text-secondary: #666; --semiotic-grid: #e0e0e0; --semiotic-border: #ccc; --semiotic-primary: #00a2ce; --semiotic-font-family: sans-serif; --semiotic-selection-color: #00a2ce; --semiotic-selection-opacity: 0.15; --semiotic-diverging: RdBu; --semiotic-tick-font-size: 12px; --semiotic-axis-label-font-size: 12px; --semiotic-secondary: #6c757d; --semiotic-surface: #ffffff; --semiotic-success: #2ca02c; --semiotic-danger: #d62728; --semiotic-warning: #f0ad4e; --semiotic-error: #b4181b; --semiotic-info: #00a2ce; }
Preset Gallery
Visual comparison of all 17 presets. Each card shows the theme's categorical palette, font stack, and key colors.
light
primary
text
textSecondary
grid
border
sans-serif
dark
primary
text
textSecondary
grid
border
sans-serif
high-contrast
primary
text
textSecondary
grid
border
system-ui
pastels
primary
text
textSecondary
grid
border
Inter
pastels-dark
primary
text
textSecondary
grid
border
Inter
bi-tool
primary
text
textSecondary
grid
border
Segoe UI
bi-tool-dark
primary
text
textSecondary
grid
border
Segoe UI
italian
primary
text
textSecondary
grid
border
Helvetica Neue
italian-dark
primary
text
textSecondary
grid
border
Helvetica Neue
tufte
primary
text
textSecondary
grid
border
Georgia
tufte-dark
primary
text
textSecondary
grid
border
Georgia
journalist
primary
text
textSecondary
grid
border
Franklin Gothic Medium
journalist-dark
primary
text
textSecondary
grid
border
Franklin Gothic Medium
playful
primary
text
textSecondary
grid
border
Nunito
playful-dark
primary
text
textSecondary
grid
border
Nunito
carbon
primary
text
textSecondary
grid
border
IBM Plex Sans
carbon-dark
primary
text
textSecondary
grid
border
IBM Plex Sans
SSR Theme Switching
For server-side rendering or CSS-only theme switching, use thedata-semiotic-theme attribute. ThemeProvider automatically sets this attribute on its wrapper div, making it available as a CSS selector.
CSS
/* Generated with themeToCSS() — include in your stylesheet */ [data-semiotic-theme="tufte"] { --semiotic-bg: #fffff8; --semiotic-text: #111111; --semiotic-text-secondary: #555555; --semiotic-grid: #e0ddd0; --semiotic-border: #e0ddd0; --semiotic-primary: #8b0000; --semiotic-font-family: Georgia, 'Times New Roman', serif; --semiotic-focus: #8b0000; --semiotic-tooltip-bg: #fffff8; --semiotic-tooltip-text: #111111; --semiotic-tooltip-radius: 2px; --semiotic-tooltip-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --semiotic-border-radius: 0px; --semiotic-annotation-color: #8b0000; --semiotic-legend-font-size: 11px; --semiotic-tick-font-family: 'Courier New', Courier, monospace; --semiotic-tick-font-size: 12px; --semiotic-axis-label-font-size: 12px; --semiotic-secondary: #555555; --semiotic-surface: #fffff8; --semiotic-success: #556b2f; --semiotic-danger: #8b0000; --semiotic-warning: #b88700; --semiotic-error: #6b0000; --semiotic-info: #4a5568; } [data-semiotic-theme="tufte-dark"] { --semiotic-bg: #1c1b18; --semiotic-text: #e8e4d8; --semiotic-text-secondary: #a09880; --semiotic-grid: #3d3c35; --semiotic-border: #3d3c35; --semiotic-primary: #c05050; --semiotic-font-family: Georgia, 'Times New Roman', serif; --semiotic-focus: #c05050; --semiotic-tooltip-bg: #262520; --semiotic-tooltip-text: #e8e4d8; --semiotic-tooltip-radius: 2px; --semiotic-tooltip-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --semiotic-border-radius: 0px; --semiotic-annotation-color: #d06a6a; --semiotic-tick-font-size: 12px; --semiotic-axis-label-font-size: 12px; --semiotic-secondary: #a09880; --semiotic-surface: #262520; --semiotic-success: #7a8b5a; --semiotic-danger: #c05050; --semiotic-warning: #c8a060; --semiotic-error: #a04040; --semiotic-info: #8090a0; } /* Switch themes by changing the attribute — no JS needed after initial load */ <div data-semiotic-theme="tufte"> <!-- charts inherit CSS custom properties from the attribute selector --> </div>
You can also generate CSS for all presets at build time:
JSX
import { THEME_PRESETS, themeToCSS } from "semiotic/themes" // Generate CSS for all presets — useful for SSR stylesheets const allCSS = Object.entries(THEME_PRESETS) .map(([name, theme]) => themeToCSS(theme, `[data-semiotic-theme="${name}"]`) ) .join("\n\n")