# Anatomy of a Dark Theme: Tokyo

> Anatomy of Tokyo, a dark IDE theme: an indigo night editor lit by neon violet and pink, crisp cyan strings, matcha green and the amber of paper lanterns.

- URL: https://codigrate.com/blog/anatomy-of-the-tokyo-theme
- Published: 2026-10-05
- Category: Inspiration
- Theme: [Tokyo](https://codigrate.com/theme?product=tokyo)
- Publisher: Codigrate (https://codigrate.com)

Tokyo's night was blue long before it was neon. When the British chemist Robert William Atkinson
arrived in 1874 to teach at the school that became the University of Tokyo, the city he walked
through was dressed in one dye: work coats, shop curtains, towels and banners, nearly all of it
indigo. He is credited with the name the color still carries abroad, Japan Blue. A century and a
half later, when Tokyo picked the emblem for its 2020 Games, a ring of checkered rectangles, it was
printed in the same indigo.

Codigrate's Tokyo theme builds its night on that blue and then switches the signs on. The dark is
indigo, the light is violet, pink and cyan, and the few warm colors are the paper lanterns of the
side streets. What follows takes it apart color by color. It is the fifth city in this series after
[Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme),
[Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme) and
[Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme), and the second neon night after
Miami, cool where Miami ran hot.

## A City Dyed In One Blue

The theme's own description reads like a walk at midnight: neon side streets, the skyline after
dark, the quiet glow of alleys lined with lanterns. Deep indigo shadows and electric violet
highlights, moody blues to keep the editor calm, and luminous purples, soft lilacs and crisp cyan
for the code.

What the description does not say is how much of that is one color. The backgrounds, the keywords,
the caret, the line numbers, the accent and the interface text all sit on the same indigo hue,
around 229 degrees, and differ only in how light they are. A Shibuya blue
[#7285DC](https://codigrate.com/tools/color/7285DC) runs through the interface as the accent, and from there the night is
a single dye at many depths. The neon is laid on top of it: a neon violet
[#967AEA](https://codigrate.com/tools/color/967AEA), a pink neon [#ECA1EB](https://codigrate.com/tools/color/ECA1EB), a cyan sign
[#5DC8D6](https://codigrate.com/tools/color/5DC8D6) and a matcha green [#5CC19D](https://codigrate.com/tools/color/5CC19D).

## The Harmony: Neon On Both Sides Of Indigo

Put the colors on a wheel and the indigo sits in the middle of a long cool arc. On one side the
neon runs toward violet and magenta: the ultraviolet of the progress bar near 255 degrees, the
purple selection near 296, the pink neon of methods and fields at 301. On the other side it runs
toward the water and the parks: skyline blue at 219, the cyan sign at 187, matcha at 159. That is
an [analogous](https://codigrate.com/blog/introduction-to-color-harmony) spread, a street of signs that all agree on the
temperature.

The warm colors stand on the far side of the wheel. The paper lantern gold of static members sits
near 34 degrees and the amber sign of parameters near 18, almost straight across from the indigo at
229, a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair. There are only a handful of them. In a
street of cold neon a single warm lantern is the thing you look at, and in a Tokyo file the warm
tokens are the ones you go looking for: the inputs of a function and the members that belong to a
class rather than to an instance.

## Backgrounds, Dipped In Indigo

Japanese dyers have a name for every depth of indigo. The palest, a cloth barely shown to the vat,
is kamenozoki, a glance into the jar. The darkest, dipped again and again until it reads as black,
is kachiiro, worn by samurai because its name sounds like the word for winning. Tokyo's backgrounds
are four steps from the dark end of that range, all on the same hue near 229 degrees:

- Input [#0C0F1C](https://codigrate.com/tools/color/0C0F1C), a night alley, the darkest well, where you type into
  search fields and dialogs.
- Editor [#1A1F35](https://codigrate.com/tools/color/1A1F35), Tokyo midnight, the blue the code is written on.
- Window [#2A3051](https://codigrate.com/tools/color/2A3051), an indigo district for the tool windows and panels.
- Surface [#323B66](https://codigrate.com/tools/color/323B66), the outer frame the whole window sits in.

None of them is black and none is grey. Each is the same dye at a different strength, so the panels
separate by depth rather than by drawn lines. A selected row in the project tree stays in the vat
too, a deeper indigo [#354172](https://codigrate.com/tools/color/354172) edged in [#4758A9](https://codigrate.com/tools/color/4758A9).

The neon starts at the edges of your attention. Selected text in the editor turns purple
[#5E3061](https://codigrate.com/tools/color/5E3061), the active editor tab sits on a purple alley
[#542D58](https://codigrate.com/tools/color/542D58) with a neon purple underline [#8E2795](https://codigrate.com/tools/color/8E2795), search
matches light up in neon violet [#967AEA](https://codigrate.com/tools/color/967AEA), and the progress bar runs in
ultraviolet [#714CE3](https://codigrate.com/tools/color/714CE3). Whatever tells you where you are, what you picked or
what you found glows violet. Everything else stays indigo.

## One Foreground, Several Voices

Code is written in a near white [#EBEBEC](https://codigrate.com/tools/color/EBEBEC) at about 14:1 against the editor,
the brightest color in the theme and the only one that steps fully out of the blue. The interface
text around it is a streetlight silver [#AEB2C3](https://codigrate.com/tools/color/AEB2C3), the same indigo with most of
the color drained out, and one level down a duller [#858EB7](https://codigrate.com/tools/color/858EB7), so labels and
hints read as the same street at a lower light.

Comments step back into a slate [#8295B1](https://codigrate.com/tools/color/8295B1) at around 5:1, set in italics. Its
hue sits a few degrees off the indigo, a touch toward cyan, which is enough to read as a different
voice without leaving the family. That is the ladder from
[the readability post](https://codigrate.com/blog/introduction-to-readability): the code you act on reads first, the
notes about it second.

The gutter is dyed in the vat as well. The caret is a pale indigo [#939ED3](https://codigrate.com/tools/color/939ED3),
the line numbers a muted [#7982B0](https://codigrate.com/tools/color/7982B0), and the number on the current line lifts to
a stronger [#7B8AD1](https://codigrate.com/tools/color/7B8AD1), so the left edge of the editor is the same blue as the
page, lit a little where you are.

## Syntax: Signs And Lanterns

Open a file and the street fills in:

- Keywords in metro indigo [#7B89C8](https://codigrate.com/tools/color/7B89C8), the background's own hue lifted toward
  the light. They are the most frequent colored words in any file and the quietest syntax color in
  the theme, under 5:1, so the grammar of the language reads as part of the night, not as a sign.
- Strings and numbers in a cyan sign [#5DC8D6](https://codigrate.com/tools/color/5DC8D6), the clearest cool color in the
  editor.
- Methods and fields in pink neon [#ECA1EB](https://codigrate.com/tools/color/ECA1EB), and JavaScript member functions in
  a deeper magenta [#E47DC0](https://codigrate.com/tools/color/E47DC0), the signs above the doors.
- Local variables in matcha neon [#5CC19D](https://codigrate.com/tools/color/5CC19D), and global variables in a pale
  lime [#A3C683](https://codigrate.com/tools/color/A3C683).
- Tags in skyline blue [#7FA0DD](https://codigrate.com/tools/color/7FA0DD), the glass towers over the street.
- Parameters in an amber sign [#DD9B7F](https://codigrate.com/tools/color/DD9B7F), and static members in an italic paper
  lantern [#D3B690](https://codigrate.com/tools/color/D3B690), the two warm lights in the alley.
- Attributes in a rose [#D5839C](https://codigrate.com/tools/color/D5839C), and annotations in a soft pink
  [#DC9DA6](https://codigrate.com/tools/color/DC9DA6).

Class names, function names and constants stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0)
at about 12:1. With the names left white and the keywords left indigo, the structure of a file
reads in two quiet tones, and the color arrives only on the values, the members and the inputs you
actually need to find.

## Reading It Back

Taken apart, Tokyo is one dye and a handful of signs. The backgrounds, keywords, gutter and
interface are all the same indigo at different depths, so the frame never competes with the code.
The violets mark where you are and what you have selected. The pinks, cyans and greens are the neon
on the members, the values and the local names, and the two warm lanterns, amber and paper gold, are
kept for parameters and static members. The names stay near white and the comments step back into
slate.

It suits a dark room late at night, which is also when the real city looks like this, the towers lit
blue and the side streets glowing pink and gold below them. Tokyo installs free on JetBrains,
VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from
its [theme page](https://codigrate.com/theme?product=tokyo).

## Frequently Asked Questions

### What is the Tokyo theme?

Tokyo is one of Codigrate's dark city themes, built around Tokyo after midnight: indigo streets, glass towers, neon signs and the paper lanterns of the side alleys. The editor is a deep indigo instead of black, the frame around it is the same blue at lighter depths, and the code is lit by the signs: a pink neon for methods and fields, a cyan for strings, a matcha green for local variables, and an amber and a paper lantern gold for parameters and static members. It reads like a late walk through the city rather than a plain dark mode.

### Why is the Tokyo background blue instead of black?

Because the whole theme is dyed in one indigo. The input wells #0C0F1C, the editor #1A1F35, the tool windows #2A3051 and the outer frame #323B66 share a hue near 229 degrees, the Japan Blue that dressed the city's work coats and shop curtains in the nineteenth century, and so do the keywords, the caret, the line numbers and the accent. The panels separate by depth rather than by drawn lines, and the neon on top reads brighter against a blue night than against a flat black.

### How are the syntax colors chosen in Tokyo?

They follow a street at night. Keywords are the indigo of the background lifted toward the light, so the language itself stays quiet. The neon carries the code: pink for methods and fields, cyan for strings and numbers, matcha green for local variables, a pale lime for globals and a skyline blue for tags. Two warm lights are kept for the tokens you search for, an amber for parameters and an italic paper lantern gold for static members. Class and function names stay a light grey, and comments drop to an italic slate.

### Is Tokyo easy on the eyes for long coding sessions?

In a dim room, yes. Code is a near white #EBEBEC at about 14:1 against the indigo editor and names are a light grey at about 12:1, firm without the glare of pure white on pure black. The frame is one hue at a few depths, so nothing around the code pulls at the eye, and keywords, the most frequent colored words, are the quietest syntax color at under 5:1. The brightest neon is spent on small tokens rather than on large areas.