Palette reference

Tokyo Night color palette

Copy the core colors used by the original VS Code theme. The palette keeps syntax readable against a deep blue background, with brighter colors reserved for code structure, values, and errors.

Copy HEX colors Copy CSS variables Original VS Code source

Theme variants

Variant names depend on the port. The original VS Code extension has Night, Storm, and Light. The maintained Neovim port has Night, Storm, Moon, and Day.

Night

Background: #1a1b26. This is the darkest standard background and the base used by this site.

Storm

Background: #24283b. Storm uses a lighter blue background with the shared Tokyo Night syntax palette.

Moon

Background: #222436. Moon belongs to the maintained Neovim port and uses its own adjusted accent colors.

Light and Day

The VS Code Light background is #e6e7ed. Neovim generates Day from a dark palette and allows brightness adjustment.

Sources: Tokyo Night for VS Code and tokyonight.nvim.

Core Night and Storm colors

Click any swatch to copy its HEX value. Usage labels follow the original VS Code theme documentation.

CSS variables

This block uses the Night background and the core syntax colors shared with Storm.

:root {
  --tokyo-bg: #1a1b26;
  --tokyo-bg-storm: #24283b;
  --tokyo-fg: #c0caf5;
  --tokyo-fg-dark: #a9b1d6;
  --tokyo-comment: #565f89;
  --tokyo-blue: #7aa2f7;
  --tokyo-cyan: #7dcfff;
  --tokyo-green: #9ece6a;
  --tokyo-magenta: #bb9af7;
  --tokyo-purple: #9d7cd8;
  --tokyo-orange: #ff9e64;
  --tokyo-yellow: #e0af68;
  --tokyo-red: #f7768e;
  --tokyo-teal: #1abc9c;
}