Skip to content
A clean, dark Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
static
themes
.gitignore
CHANGELOG.md
README.md
icon.png
icon.svg
package.json
tokyo-night.itermcolors

README.md

Tokyo Night

Version Rating Issues

A clean, dark Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.

Note: Many UI elements are intentionally low contrast so as not to distract. I can provide customization settings similar to what is shown below to anyone who needs specific text brightened.

Screenshots

Tokyo Night Screenshot - Tokyo Night

Tokyo Night Storm Screenshot - Tokyo Night Storm

Disabling Italics

Paste this into your settings.json to disable italics.

"editor.tokenColorCustomizations": {
    "[Tokyo Night]": { // or "[Tokyo Night Storm]"
        "textMateRules": [{
            "scope": [
                "comment",
                "meta.var.expr storage.type",
                "keyword.control.flow",
                "meta.directive.vue punctuation.separator.key-value.html",
                "meta.directive.vue entity.other.attribute-name.html",
                "tag.decorator.js entity.name.tag.js",
                "tag.decorator.js punctuation.definition.tag.js",
                "storage.modifier"
            ],
            "settings": {
                "fontStyle": ""
            }
        }]
    }
}

Brightening Codelens text

I prefer my Codelens text fade into the background unless hovered over, but if you'd like a higher contrast, add this to your settings.json:

"workbench.colorCustomizations": {
    "[Tokyo Night]": { // or "[Tokyo Night Storm]"
        "editorCodeLens.foreground": "#7982a9", // Preferred hex color
    }
}

Window Active and Inactive borders (vscode 1.40.0)

macOS dark-mode doesn't play well with these two theme mods so I've chosen to darken them as much as I can to fix the gray border issue on my side. Set them however you like using:

"workbench.colorCustomizations": {
    "[Tokyo Night]": { // or "[Tokyo Night Storm]"
        "window.activeBorder": "#ff0000",
        "window.inactiveBorder":"#0000ff"
    }
}

Other portings

iTerm
tokyo-night.itermcolors is supplied in this theme's ~/.vscode/extensions folder or via github.

Sublime Text
Tokyo Night is a color scheme option in my Enki Theme.



Enjoy!

Tokyo Tower icon used in theme icon made by Smashicons from www.flaticon.com
You can’t perform that action at this time.