The Ultimate Shiki Theme Matrix

A live preview of all 65 built-in Shiki syntax highlighting themes, side by side, rendered with real code at build time -- so you can see exactly what each one looks like before picking one for your own site.

GitHub & Git Ecosystem

github-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
github-dark-default 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
github-dark-dimmed 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
github-dark-high-contrast 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
github-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
github-light-default 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
github-light-high-contrast 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Material & Tech Collections

material-theme 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
material-theme-darker 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
material-theme-lighter 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
material-theme-ocean 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
material-theme-palenight 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
ayu-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
ayu-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
ayu-mirage 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Gruvbox & Natural Tones

gruvbox-dark-hard 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
gruvbox-dark-medium 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
gruvbox-dark-soft 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
gruvbox-light-hard 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
gruvbox-light-medium 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
gruvbox-light-soft 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
everforest-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
everforest-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
kanagawa-dragon 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
kanagawa-lotus 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
kanagawa-wave 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Catppuccin & Vibrant Pastels

catppuccin-frappe 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
catppuccin-latte 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
catppuccin-macchiato 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
catppuccin-mocha 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
rose-pine 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
rose-pine-dawn 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
rose-pine-moon 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
dracula 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
dracula-soft 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Popular Dev Classics

nord 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
one-dark-pro 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
one-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
monokai 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
night-owl 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
night-owl-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
tokyo-night 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
solarized-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
solarized-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Minimalist & High Contrast

vitesse-black 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
vitesse-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
vitesse-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
min-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
min-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
dark-plus 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
light-plus 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
vesper 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Specialty, Synth & Gaming

andromeeda 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
aurora-x 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
horizon 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
horizon-bright 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
houston 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
laserwave 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
plastic 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
poimandres 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
red 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
slack-dark 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
slack-ochin 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
snazzy-light 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}
synthwave-84 
// Returns a greeting
function greet(name = "World") {
  const count = 42;
  const isReady = true;
  return `Hello, ${name}! #${count}`;
}

Frequently asked questions

How do I use one of these themes in my own project?

Install the theme name as Shiki’s `theme` option (e.g. `theme: "dracula"`) wherever you configure Shiki -- in Astro’s markdown config, VitePress, Nuxt Content, or a direct `codeToHtml()` call. Every name shown on this page is one of Shiki’s officially bundled themes, so no extra install is needed.

What’s the difference between a theme and its variants (e.g. Catppuccin Mocha vs Latte)?

Variants are the same color system at different brightness levels -- usually a dark and a light version, sometimes more. Catppuccin, for example, ships four: Latte (light), and Frappé, Macchiato, and Mocha (progressively darker).

Can I use a different theme for light and dark mode?

Yes -- Shiki supports passing multiple themes at once (e.g. `themes: { light: "github-light", dark: "github-dark" }`), and switches between them automatically based on a CSS class or media query, without re-rendering the code block.

Why do some themes look identical in this gallery?

A few themes share a base palette but differ in details this short sample doesn’t exercise, such as bracket-pair coloring, diff/git markers, or markup languages other than JavaScript. Try a theme in your own project for the full picture.