Kanagawa Flat

🌊 KANAGAWA-FLAT.vscode 🌊

A flat adaptation of the Kanagawa color scheme by rebelot for Visual Studio Code, shipping all three original flavors:

Kanagawa Wave Flat — the classic dark blue-violet (sumiInk base).
Kanagawa Dragon Flat — a darker, muted, lower-saturation dark theme.
Kanagawa Lotus Flat — the light variant, warm paper tones.

What "flat" means here

Every structural region of the editor — the editor surface, side bar, activity bar, panel, status bar, title bar, tabs and terminal — shares one single background color. No region is darker or lighter than another. That is the whole point of this theme, and it is a deliberate departure from how most themes (including upstream Kanagawa) use several background shades to imply depth.

Flatness removes the depth cues users normally rely on to tell regions apart, so to stay usable this theme restores those cues without breaking the single background:

Borders mark where one region ends and the next begins.
Foreground weight (bright vs. dimmed text) separates active from inactive.
Translucent overlays make selection, hover and the current line perceptible without introducing a second opaque surface.

In short: flat surfaces, never flat feedback.

Faithful to the original color roles

The priority of this port is respecting what each Kanagawa color means. A string stays springGreen, a keyword stays oniViolet, a type stays waveAqua, and so on — per variant, transcribed directly from rebelot/kanagawa.nvim. The mapping lives in one auditable place: src/roles.js.

Role	Wave	Dragon	Lotus
string	springGreen	dragonGreen2	lotusGreen
number	sakuraPink	dragonPink	lotusPink
constant	surimiOrange	dragonOrange	lotusOrange
function	crystalBlue	dragonBlue2	lotusBlue4
keyword	oniViolet	dragonViolet	lotusViolet4
type	waveAqua2	dragonAqua	lotusAqua
operator	boatYellow2	dragonRed	lotusYellow2
parameter	oniViolet2	dragonGray	lotusBlue5
comment	fujiGray	dragonAsh	lotusGray3

Accessibility

Body text meets WCAG AA on all three flavors (contrast ≈ 11.3 Wave, 10.8 Dragon, 6.2 Lotus). Comments are intentionally low-contrast — that is Kanagawa's original design intent (muted comments recede), preserved here on purpose.

Project structure

The theme JSON files under themes/ are generated. Do not edit them by hand; edit the source and rebuild.

src/
  palette.js     # raw Kanagawa palette, verbatim hex (single source of truth)
  roles.js       # semantic role -> palette, per variant (intended use)
  tokens.js      # TextMate scopes -> role (shared across variants)
  workbench.js   # flat workbench mapping + state overlays
  build.js       # assembles and writes the three theme files
themes/          # generated artifacts loaded by VS Code

Credit

Original color scheme: Kanagawa by rebelot — https://github.com/rebelot/kanagawa.nvim Inspired by the colors of Katsushika Hokusai's The Great Wave off Kanagawa.