Tokyo Nightlife

A dark theme for Visual Studio Code inspired by Tokyo Night, built around readability.

Note: Tokyo Nightlife is an independent theme inspired by the look of Tokyo Night. It is not a fork of, and is not affiliated with or endorsed by, the original Tokyo Night project.

Features

• Full semantic highlighting support, with dedicated colors for default-library symbols where the language grammar supports it
• No token is ever colored using the error color, so errors are always unambiguous
• A deliberately smaller, shared color set (rather than one color per token type) to keep code visually calm and reduce eye fatigue
• Tuned indent guides, bracket-pair colors, and diff/git colors to match the rest of the palette
• Recommended pairing with JetBrains Mono

Screenshots

Note: JetBrains Mono is the font used in these screenshots.

Installation

From the Marketplace:

1. Open the Extensions view in VS Code (Ctrl+Shift+X / Cmd+Shift+X)
2. Search for Tokyo Nightlife
3. Click Install, then select it from the Color Theme picker (Ctrl+K Ctrl+T / Cmd+K Cmd+T)

From the command line:

code --install-extension mambroz27.tokyo-nightlife

Customization

Disable Italics

Tokyo Nightlife uses italics for comments. If you prefer to disable italics, you can add this snippet to your settings.json.

"editor.tokenColorCustomizations": {
    "[Tokyo Nightlife]": {
        "textMateRules": [{
            "scope": [
                "comment",
                "punctuation.definition.comment"
            ],
            "settings": {
                "fontStyle": ""
            }
        }]
    }
}

Enable JSDoc Highlighting

To enable JSDoc highlighting, you can add this snippet to your settings.json.

The colors used for JSDoc highlighting are mixed with the default comment colors, this keeps the highlighting consistent with the theme's color palette but mutes the colors slightly to avoid being too jarring within the context of a comment. These accent colors (#A394DE, #78BAC3, #B9A188) are only used here - they're muted variants layered on top of the base comment color and don't appear in the core palette below.

"editor.tokenColorCustomizations": {
    "[Tokyo Nightlife]": {
        "textMateRules": [
            {
                "scope": [
                    "comment keyword.codetag.notation",
                    "comment.block.documentation keyword",
                    "comment.block.documentation storage.type.class"
                ],
                "settings": {
                    "foreground": "#a394de"
                }
            },
            {
                "scope": ["comment.block.documentation entity.name.type.instance"],
                "settings": {
                    "foreground": "#78bac3",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    "comment.block.documentation entity.name.type punctuation.definition.bracket"
                ],
                "settings": {
                    "foreground": "#a394de"
                }
            },
            {
                "scope": ["comment.block.documentation variable"],
                "settings": {
                    "foreground": "#b9a188",
                    "fontStyle": "italic"
                }
            }
        ]
    }
}

The Color Palette

The palette was chosen to balance contrast and readability. Two principles guided it in particular:

• Error Clarity: No tokens reuse the error color ( #F7768E) so errors are always clear and easy to identify.
• Shared Colors: Some tokens share colors (e.g. #BB9AF7 for keywords and primitive types and storage modifiers) for a less fragmented palette that prevents "jumbled" colors and reduces fatigue.
• Leverage Semantic Highlighting: When possible, semantic-highlighting-aware languages (e.g. TypeScript, Rust, etc.) can take advantage of colors defined only in semanticTokenColors (e.g. #2AC3DE for default-library symbols).

Editor & UI Surfaces

Swatch	Hex	Usage
	#1A1B26	Editor background
	#16161E	Sidebar, panel, activity bar background
	#1E202E	Line highlight, drop background

Syntax & Token Colors

Swatch	Hex	Usage
	#C8D3F5	Default editor foreground / plain text, embedded code, Java import identifiers, operators, template expressions
	#C0CAF5	Variables, semantic variable & customLiteral tokens
	#6C7599	Comments (italic)
	#7F8BB8	Docblock/JSDoc comment content
	#BB9AF7	Keywords, storage/storage.type/modifier, language constants (true/false/null/this), primitive types, SCSS at-rules, preprocessor directives, deprecated markup, semantic variable.declaration
	#7AA2F7	Function & method names, decorators, HTML tags, markdown H3 heading, generic markup bold/heading, diff headers, ENV values, JSON key (level 0)
	#73DACA	Types, classes, interfaces, namespaces; markdown links; JSON key (level 1)
	#7DCFFF	Attribute names, object/property keys, CSS custom properties, regexp constants, Python dict keys, markdown H1 heading, semantic property, JSON key (level 2)
	#89DDFF	Import/export/module keywords, SQL keywords, template string interpolation punctuation, fenced code blocks, semantic newOperator
	#E0AF68	Function parameters, CSS tag/class/id/pseudo selectors, semantic parameter
	#9ABDF5	General punctuation, braces, brackets
	#9ECE6A	Strings, inline code/raw markup, inserted (diff), semantic stringLiteral
	#B4F9F8	String regexp content
	#FF9E64	Numeric constants, other constants, CSS property values, unit keywords, semantic numberLiteral
	#2AC3DE	Default-library symbols (semantic token)
	#61BDF2	Markdown H2 heading
	#8EA0D0	Markdown H4-H6 headings
	#F7768E	Errors / invalid tokens only (reserved - never used for regular syntax)

Contributing

Issues and pull requests are welcome - see the issue tracker to report a scope that renders incorrectly or looks off, or to suggest a new language/plugin scope to support.

License

Released under the MIT License.