Need help with tokyo-night-vscode-theme?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

enkia
379 Stars 46 Forks MIT License 172 Commits 2 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 476,968
PHP
Shell
logging
logger
159 commits
# 35,105
zend-fr...
microfr...
Neovim
flex
3 commits
# 143,142
CSS
HTML
Angular
treevie...
1 commit
# 432,583
slim
HTML
JavaScr...
1 commit
# 110,312
C++
cancer-...
React
filteri...
1 commit
# 7,859
usersty...
github-...
Vue.js
vuepres...
1 commit

Tokyo Night

Version Rating Issues

A clean, dark (and now light) 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 further down this page to anyone who needs specific text brightened.

Semantic Highlighting: If you prefer all variables inside functions to be the same color, disable semantic highlighting in settings. Otherwise, parameters used will be dimmer in color. Submit an issue if you notice anything 'off' with semantic highlighting as I've just recently provided support for it.

Screenshots

Tokyo Night Screenshot - Tokyo Night

Tokyo Night Storm Screenshot - Tokyo Night Storm

Tokyo Night Light Screenshot - Tokyo Night Light

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",
                "keyword.control.return",
                "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": ""
            }
        }]
    }
}

Customization Settings Examples

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:

javascript
"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:

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

Color Palette

Tokyo Night and Tokyo Night Storm

| Color                | Use | | ---------- | ------------------------------------------------------------ | | #f7768e

#f7768e
| This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red | | #ff9e64
#ff9e64
| Number and Boolean constants, Language support constants | | #e0af68
#e0af68
| Function parameters, Regex character sets, Terminal Yellow | | #9ece6a
#9ece6a
| Strings, CSS class names | | #73daca
#73daca
| Object literal keys, Markdown links, Terminal Green | | #b4f9f8
#b4f9f8
| Regex literal strings | | #2ac3de
#2ac3de
| Language support functions, CSS HTML elements | | #7dcfff
#7dcfff
| Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords | | #7aa2f7
#7aa2f7
| Function names, CSS property names, Terminal Blue | | #bb9af7
#bb9af7
| Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta | | #c0caf5
#c0caf5
| Variables, Class names, Terminal White | | #a9b1d6
#a9b1d6
| Editor Foreground | | #9aa5ce
#9aa5ce
| Markdown Text, HTML Text | | #cfc9c2
#cfc9c2
| Parameters inside functions (semantic highlighting only) | | #565f89
#565f89
| Comments | | #414868
#414868
| Terminal Black | | #24283b
#24283b
| Editor Background (Storm) | | #1a1b26
#1a1b26
| Editor Background (Night) |

Tokyo Night Light

| Color                | Use | | ---------- | ------------------------------------------------------------ | | #8c4351

#8c4351
| This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red | | #965027
#965027
| Number and Boolean constants, Language support constants | | #8f5e15
#8f5e15
| Function parameters, Regex character sets, Terminal Yellow | | #485e30
#485e30
| Strings, CSS class names | | #33635c
#33635c
| Object literal keys, Markdown links, Regex literal strings, Terminal Green | | #166775
#166775
| Language support functions, CSS HTML elements | | #0f4b6e
#0f4b6e
| Object properties, Regex quantifiers and flags, Terminal Cyan, Markdown code, Import/export keywords | | #34548a
#34548a
| Function names, CSS property names, Markdown Headings, Terminal Blue | | #5a4a78
#5a4a78
| Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta | | #343b58
#343b58
| Editor Foreground, Variables, Class names, Terminal White | | #565a6e
#565a6e
| Markdown Text, HTML Text | | #634f30
#634f30
| Parameters inside functions (semantic highlighting only) | | #0f0f14
#0f0f14
| Terminal Black | | #9699a3
#9699a3
| Comments | | #d5d6db
#d5d6db
| Editor Background |

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.

Alfred
Install the Tokyo Night Alfred Theme.

DuckDuckGo DuckduckGo theme preferences (by Grafikart)

JetBrains IDE
Tokyo Night Color Scheme works best with material theme plugin and this theme (by Grafikart)

Kitty Terminal
Tokyo Night color scheme for kitty (by davidmathers)

VIM/Neovim
- tokyonight.vim, a VIM/Neovim color scheme. This theme also has support for lightline as well as airline (by ghifarit53)

Alacritty Terminal
Tokyo Night Alacritty Theme, a color scheme for Alacritty Terminal Emulator (by mhyfritz)

Hyper terminal
hyper-tokyo-night, a theme for Hyper (by fitrh)

Windows Terminal
tokyonight-windows-terminal, a theme for Windows Terminal (by g-e-o-m-e-t-r-i-c)

Insomnia
Tokyo Night theme for Insomnia (by arturoeh)



Enjoy!

Tokyo Tower icon used in theme icon made by Smashicons from www.flaticon.com. Color palettes in this README use www.placeholder.com.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.