Themes

ChartKit comes with 17 built-in themes — 13 dark and 4 light — inspired by popular developer tools and color schemes.

Available Themes

Midnight

theme="midnight"

#4ade80

#38bdf8

#a78bfa

#fb923c

#f472b6

#0c0c0c

text

#ffffff

accent

#22d3ee

positive/negative

#4ade80 / #f87171

Emerald

theme="emerald"

#10b981

#06b6d4

#8b5cf6

#f59e0b

#ec4899

#0a0a0a

text

#fafafa

accent

#06b6d4

positive/negative

#10b981 / #ef4444

Mono

theme="mono"

#50e3c2

#0070f3

#7928ca

#f5a623

#ff0080

#000000

text

#ededed

accent

#ffffff

positive/negative

#50e3c2 / #ee0000

Slate

theme="slate"

#3fb950

#58a6ff

#a371f7

#d29922

#f85149

#0d1117

text

#f0f6fc

accent

#58a6ff

positive/negative

#3fb950 / #f85149

Arctic

theme="arctic"

#88c0d0

#81a1c1

#b48ead

#ebcb8b

#a3be8c

#2e3440

text

#eceff4

accent

#88c0d0

positive/negative

#a3be8c / #bf616a

Orchid

theme="orchid"

#50fa7b

#8be9fd

#bd93f9

#ffb86c

#ff79c6

#282a36

text

#f8f8f2

accent

#bd93f9

positive/negative

#50fa7b / #ff5555

Obsidian

theme="obsidian"

#98c379

#61afef

#c678dd

#e5c07b

#e06c75

#282c34

text

#abb2bf

accent

#61afef

positive/negative

#98c379 / #e06c75

Neon

theme="neon"

#9ece6a

#7aa2f7

#bb9af7

#e0af68

#f7768e

#1a1b26

text

#c0caf5

accent

#7aa2f7

positive/negative

#9ece6a / #f7768e

Mocha

theme="mocha"

#a6e3a1

#89b4fa

#cba6f7

#fab387

#f38ba8

#1e1e2e

text

#cdd6f4

accent

#89b4fa

positive/negative

#a6e3a1 / #f38ba8

Owl

theme="owl"

#22da6e

#82aaff

#c792ea

#ffcb8b

#f78c6c

#011627

text

#d6deeb

accent

#82aaff

positive/negative

#22da6e / #ef5350

Retro

theme="retro"

#72f1b8

#36f9f6

#fe4450

#fede5d

#ff7edb

#262335

text

#ffffff

accent

#ff7edb

positive/negative

#72f1b8 / #fe4450

Copper

theme="copper"

#b8bb26

#83a598

#d3869b

#fabd2f

#fb4934

#282828

text

#ebdbb2

accent

#fabd2f

positive/negative

#b8bb26 / #fb4934

Rose

theme="rose"

#31748f

#9ccfd8

#c4a7e7

#f6c177

#ebbcba

#191724

text

#e0def4

accent

#c4a7e7

positive/negative

#9ccfd8 / #eb6f92

Sunset

theme="sunset"

#10b981

#06b6d4

#8b5cf6

#f59e0b

#ec4899

#ffffff

text

#111827

accent

#f59e0b

positive/negative

#10b981 / #ef4444

Silver

theme="silver"

#1a7f37

#0969da

#8250df

#bf8700

#cf222e

#ffffff

text

#24292f

accent

#0969da

positive/negative

#1a7f37 / #cf222e

Pearl

theme="pearl"

#50a14f

#4078f2

#a626a4

#c18401

#e45649

#fafafa

text

#383a42

accent

#4078f2

positive/negative

#50a14f / #e45649

Latte

theme="latte"

#40a02b

#1e66f5

#8839ef

#df8e1d

#d20f39

#eff1f5

text

#4c4f69

accent

#1e66f5

positive/negative

#40a02b / #d20f39

Using Themes

Pass the theme name to any component:

tsx

<Sparkline data={data} theme="midnight" />
<KpiCard data={data} theme="mono" />
<LineChart data={data} theme="slate" />

Accessing Theme Colors

Import the themes object to access colors directly:

tsx

import { themes } from '@derpdaderp/chartkit';

const t = themes['midnight'];

// Use in your components
<div style={{ backgroundColor: t.bg, color: t.text }}>
  <span style={{ color: t.positive }}>+12.5%</span>
</div>

Theme Structure

Each theme provides these color properties:

tsx

interface ChartTheme {
  name: string;           // Display name
  bg: string;             // Primary background
  bgSecondary: string;    // Secondary background
  bgCard: string;         // Card background
  text: string;           // Primary text
  textSecondary: string;  // Secondary text
  textMuted: string;      // Muted text
  border: string;         // Border color
  gridLine: string;       // Grid line color
  colors: string[];       // Chart series colors (5)
  accent: string;         // Accent color
  positive: string;       // Success/positive color
  negative: string;       // Error/negative color
  baseline?: string;      // Optional baseline color
}