Color Themes

65 editor color themes from shiki, available across Jalco UI's code and data components. Click any swatch to copy the theme name.

Supported components

Component	Prop	Accepts
Code Block	theme	Shiki theme name string
Code Line	theme	Shiki theme name string
Code Block Command	colorTheme	{ bg, fg } object
JSON Viewer	colorTheme	Theme name string or custom palette object

Usage

tsx

// Code Block — pass theme name directly
<CodeBlock code={myCode} language="ts" theme="dracula" />

// Code Line — same prop
<CodeLine code="npm install zod" language="bash" theme="nord" />

// JSON Viewer — use colorTheme
<JsonViewer data={myData} colorTheme="tokyo-night" />

// Code Block Command — pass { bg, fg } from the theme map
import { jsonThemes } from "@/components/json-viewer/lib/themes"

const { bg, fg } = jsonThemes["catppuccin-mocha"]
<CodeBlockCommand {...commands} colorTheme={{ bg, fg }} />

All 65 themes

Each swatch shows a mini JSON preview in the theme's actual colors. Click to copy the theme name.

{"k":"v","n":42,"b":true}

Defaultno theme

Custom themes

JSON Viewer also accepts a custom JsonColorTheme object if none of the 65 built-in themes fit. Provide hex colors for each token type.

<JsonViewer data={data} colorTheme={{ bg: "#1a1a2e", fg: "#eee", key: "#e94560", string: "#0f3460", number: "#16213e", boolean: "#533483", null: "#533483", punctuation: "#999" }} />