2019-10-22 11:48:31 -04:00
# [Tokyo Night](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)
2019-11-09 10:55:55 -05:00
[](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)
[](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)
[](https://github.com/enkia/tokyo-night-vscode-theme/issues)
2020-04-03 13:47:27 -04:00
< br >< br > A clean, dark (and now light) Visual Studio Code theme that celebrates the lights of Downtown [Tokyo at night. ](https://www.google.com/search?q=tokyo+night&newwindow=1&sxsrf=ACYBGNRiOGCstG_Xohb8CgG5UGwBRpMIQg:1571032079139&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiayIfIhpvlAhUGmuAKHbfRDaIQ_AUIEigB&biw=1280&bih=666&dpr=2 )
2021-03-24 15:14:27 -04:00
< br >< br > **Note:** Many UI elements are intentionally low contrast so as not to distract. I can provide [customization settings ](https://code.visualstudio.com/api/references/theme-color ) similar to what is shown further down this page to anyone who needs specific text brightened.
< br >< br > **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 ](https://github.com/enkia/tokyo-night-vscode-theme/issues/new ) if you notice anything 'off' with semantic high lighting as I've just recently provided support for it.
2019-10-22 11:45:55 -04:00
## Screenshots
Tokyo Night
2019-10-22 12:05:37 -04:00
2019-10-22 11:45:55 -04:00
Tokyo Night Storm
2019-10-22 12:05:37 -04:00
2019-10-22 11:45:55 -04:00
2020-04-03 13:50:13 -04:00
Tokyo Night Light
2020-04-03 13:47:27 -04:00
2019-10-22 11:45:55 -04:00
## Disabling Italics
Paste this into your [settings.json ](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations ) to disable italics.
```javascript
"editor.tokenColorCustomizations": {
"[Tokyo Night]": { // or "[Tokyo Night Storm]"
"textMateRules": [{
"scope": [
"comment",
"meta.var.expr storage.type",
"keyword.control.flow",
2021-03-23 20:34:07 -04:00
"keyword.control.return",
2019-10-22 11:45:55 -04:00
"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": ""
}
}]
}
}
```
2021-03-24 15:14:27 -04:00
## Customization Settings Examples
#### Brightening Codelens text
2019-10-22 11:45:55 -04:00
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
}
}
```
2021-03-24 15:14:27 -04:00
#### Window Active and Inactive borders (vscode 1.40.0)
2019-11-09 10:55:55 -05:00
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"
}
}
```
2021-03-24 15:14:27 -04:00
## Color Palette
#### Tokyo Night and Tokyo Night Storm
| Color | Use |
| ---------- | ------------------------------------------------------------ |
|  `#f7768e` | This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red |
|  `#ff9e64` | Number and Boolean constants, Language support constants |
|  `#e0af68` | Function parameters, Regex character sets, Terminal Yellow |
|  `#9ece6a` | Strings, CSS class names |
|  `#73daca` | Object literal keys, Markdown links, Terminal Green |
|  `#b4f9f8` | Regex literal strings |
|  `#2ac3de` | Language support functions, CSS HTML elements |
|  `#7dcfff` | Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords |
|  `#7aa2f7` | Function names, CSS property names, Terminal Blue |
|  `#bb9af7` | Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta |
|  `#c0caf5` | Variables, Class names, Terminal White |
|  `#a9b1d6` | Editor Foreground |
|  `#9aa5ce` | Markdown Text, HTML Text, Parameters inside functions (semantic highlighting only) |
|  `#565f89` | Comments |
|  `#414868` | Terminal Black |
|  `#24283b` | Editor Background (Storm) |
|  `#1a1b26` | Editor Background (Night) |
#### Tokyo Night Light
| Color | Use |
| ---------- | ------------------------------------------------------------ |
|  `#8c4351` | This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red |
|  `#965027` | Number and Boolean constants, Language support constants |
|  `#8f5e15` | Function parameters, Regex character sets, Terminal Yellow |
|  `#485e30` | Strings, CSS class names |
|  `#33635c` | Object literal keys, Markdown links, Regex literal strings, Terminal Green |
|  `#166775` | Language support functions, CSS HTML elements |
|  `#0f4b6e` | Object properties, Regex quantifiers and flags, Terminal Cyan, Markdown code, Import/export keywords |
|  `#34548a` | Function names, CSS property names, Markdown Headings, Terminal Blue |
|  `#5a4a78` | Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta |
|  `#343b58` | Editor Foreground, Variables, Class names, Terminal White |
|  `#565a6e` | Markdown Text, HTML Text, Parameters used inside functions (semantic highlighting only) |
|  `#0f0f14` | Terminal Black |
|  `#9699a3` | Comments |
|  `#d5d6db` | Editor Background |
2019-10-22 11:45:55 -04:00
2019-11-01 11:13:07 -04:00
## Other portings
**iTerm**
`tokyo-night.itermcolors` is supplied in this theme's ~/.vscode/extensions folder or via [github. ](https://github.com/enkia/tokyo-night-vscode-theme/blob/master/tokyo-night.itermcolors )
2019-10-22 11:45:55 -04:00
2019-11-01 11:13:07 -04:00
**Sublime Text**
*Tokyo Night* is a color scheme option in my [Enki Theme. ](https://packagecontrol.io/packages/Enki%20Theme )
2019-10-22 11:45:55 -04:00
2021-03-05 20:47:39 -05:00
**Alfred**
Install the [Tokyo Night Alfred Theme. ](https://www.alfredapp.com/extras/theme/puSaeqbft2/ )
**DuckDuckGo**
2020-10-24 08:12:47 -04:00
[DuckduckGo theme preferences ](https://duckduckgo.com/?kae=d&ks=m&kak=-1&kax=-1&kaq=-1&kap=-1&kao=-1&kau=-1&k5=1&k7=1a1b26&kj=16161e&kx=1abc9c&k21=16161E&k18=-1&ka=e&kaa=BB9AF7&k9=C0CAF5&k8=6183BB&kt=e )
2021-03-05 20:47:39 -05:00
(by [Grafikart ](https://github.com/Grafikart ))
2020-10-24 08:12:47 -04:00
2021-01-01 20:42:29 -05:00
**JetBrains IDE**
2021-03-05 20:47:39 -05:00
[Tokyo Night Color Scheme ](https://plugins.jetbrains.com/plugin/15662-tokyo-night-color-scheme ) works best with material theme plugin and [this theme ](https://github.com/Grafikart/tokyo-night-jetbrains-theme/blob/main/tokyonight.xml )
(by [Grafikart ](https://github.com/Grafikart ))
2020-10-16 19:42:22 -04:00
2021-01-01 20:26:45 -05:00
**Kitty Terminal**
2021-03-05 20:47:39 -05:00
[Tokyo Night ](https://github.com/davidmathers/tokyo-night-kitty-theme ) color scheme for [kitty ](https://sw.kovidgoyal.net/kitty/ )
(by [davidmathers ](https://github.com/davidmathers ))
2020-12-17 21:28:48 -05:00
2021-03-06 19:54:57 -05:00
**VIM/Neovim**
[tokyonight.vim ](https://github.com/ghifarit53/tokyonight-vim ), a [VIM ](https://www.vim.org/ )/[Neovim](https://neovim.io/) color scheme.
This theme also has support for [lightline ](https://github.com/itchyny/lightline.vim ) as well as [airline ](https://github.com/vim-airline/vim-airline ).
**Alacritty Terminal**
2021-03-06 19:59:34 -05:00
[Tokyo Night Alacritty Theme ](https://github.com/zatchheems/tokyo-night-alacritty-theme ), a color scheme for [Alacritty Terminal Emulator ](https://github.com/alacritty/alacritty ) (by [mhyfritz ](https://github.com/mhyfritz ))
2021-03-06 19:54:57 -05:00
2021-03-06 19:55:19 -05:00
**Hyper terminal**
2021-03-06 19:59:34 -05:00
[hyper-tokyo-night ](https://github.com/mhyfritz/hyper-tokyo-night ), a theme for [Hyper ](https://hyper.is/ ) (by [fitrh ](https://github.com/fitrh ))
2021-03-06 19:55:19 -05:00
2019-11-01 11:13:07 -04:00
< br > < br >
**Enjoy!**
2019-10-22 11:45:55 -04:00
2019-11-01 11:13:07 -04:00
###### Tokyo Tower icon used in theme icon made by Smashicons from www.flaticon.com
