Tokyo Night, Storm, Light, and Islands

Start with the same source#

The screenshots show a TypeScript file with types, strings, numbers, comments, and template literals. Apply Tokyo Night under Settings → Appearance & Behavior → Appearance → Theme, then inspect the matching editor scheme.

Tokyo Night’s deep blue background and cool syntax accents give the family its recognizable appearance. Tokyo Night Storm uses a lighter dark surface, while Tokyo Night Light reverses the workspace into a light palette. Compare the dark variants with your usual display brightness unchanged.

Compare the whole workspace#

Inspect Project tree selection, editor tabs, the current line, and the text selection separately. A strong syntax palette is only useful when a selected file and focused popup remain easy to identify. Open completion to check its selected row and documentation pane.

Tokyo Night Islands is the explicitly registered Islands choice. Select it through Appearance; renaming a custom editor scheme to “Islands” does not enable workspace geometry. Rounded panels and layout behavior also depend on platform support.

Reproduce a comparison#

Download the reading samples, open palette.ts, and switch among the registered variants without changing font settings. Inspect the comment, 'failed', numeric 3, Job, and ${...} expression.

A screenshot records a particular IDE version and display. Use it to compare palette character, then make the final choice in your actual workspace. Follow the scheme and Islands guide if your editor differs sharply from the theme’s surrounding UI.

Tokyo Night uses a deep blue workspace around a TypeScript example. Select the image to view it at full size.

Tokyo Night Light presents the same source in a light workspace. Select the image to view it at full size.