enkia / tokyo-night-vscode-theme

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

Tokyo Night

A clean 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.

Screenshots

Tokyo Night

Tokyo Night Storm

Tokyo Night Light

Font used in the screenshots is JetBrains Mono.

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": ""
            }
        }]
    }
}

Enabling JSDoc Highlights

Paste this into your settings.json to Enable JSDoc Highlight.

"editor.tokenColorCustomizations": {
    "[Tokyo Night]": { // or "[Tokyo Night Storm]"
        "textMateRules": [
        {
            "scope": [
                "comment keyword.codetag.notation",
                "comment.block.documentation keyword",
                "comment.block.documentation storage.type.class"
            ],
            "settings": {
                "foreground": "#bb9af7"
            }
        },
        {
            "scope": ["comment.block.documentation entity.name.type.instance"],
            "settings": {
                "foreground": "#73daca",
                "fontStyle": "italic"
            }
        },
        {
            "scope": [
            "comment.block.documentation entity.name.type punctuation.definition.bracket"
            ],
            "settings": {
                "foreground": "#bb9af7"
            }
        },
        {
            "scope": ["comment.block.documentation variable"],
            "settings": {
                "foreground": "#e0af68",
                "fontStyle": "italic"
            }
        }
        ]
    }
  }

Customization Settings Examples

Higher Contrast Settings

The below can by no means officially represent high contrast but they may serve as a starting point. This assumes that the darker Tokyo Night version is being used.

"workbench.colorCustomizations": {
    "[Tokyo Night]": {
        "foreground": "#959cbd",
        "panelTitle.activeBorder": "#3d59a1",
        "panelTitle.activeForeground": "#bdc7f0",
        "panelTitle.inactiveForeground": "#959cbd",
        "tab.activeForeground": "#bdc7f0",
        "tab.inactiveForeground": "#959cbd",
        "breadcrumb.foreground": "#959cbd",
        "breadcrumb.focusForeground": "#bdc7f0",
        "breadcrumb.activeSelectionForeground": "#bdc7f0",
        "statusBar.foreground": "#bdc7f0",
        "list.focusForeground": "#bdc7f0",
        "list.hoverForeground": "#bdc7f0",
        "list.activeSelectionForeground": "#bdc7f0",
        "list.inactiveSelectionForeground": "#bdc7f0",
        "list.inactiveSelectionBackground": "#202330",
        "sideBar.foreground": "#959cbd",
        "dropdown.foreground": "#959cbd",
        "menu.foreground":"#bdc7f0",
        "menubar.selectionForeground":"#bdc7f0",
        "input.foreground": "#959cbd",
        "input.placeholderForeground": "#959cbd",
        "activityBar.foreground": "#bdc7f0",
        "activityBar.inactiveForeground": "#787c99",
        "gitDecoration.ignoredResourceForeground": "#696d87",
    },
}

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"
    }
}

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
#cfc9c2	Parameters inside functions (semantic highlighting only)
#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
#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
#634f30	Parameters inside functions (semantic highlighting only)
#385f0d	Strings, CSS class names
#33635c	Object literal keys, Markdown links, Regex literal strings, Terminal Green
#006c86	Language support functions, CSS HTML elements
#0f4b6e	Object properties, Regex quantifiers and flags, Terminal Cyan, Markdown code, Import/export keywords
#2959aa	Function names, CSS property names, Markdown Headings, Terminal Blue
#5a3e8e	Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta
#343b58	Editor Foreground, Variables, Class names, Terminal White
#40434f	Markdown Text, HTML Text
#343B58	Terminal Black
#6c6e75	Comments
#e6e7ed	Editor Background

Other Ports

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

Sublime Text / bat
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)
• TokyoNight Editor & UI Theme compatible with material theme, supports 2 dark variants, planned support for day theme.(by alexadhy)

VIM/Neovim

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

• tokyonight.nvim, a Neovim color scheme. This theme also has support for many Vim plugins and other programs such as Alacritty, Fish and Kitty. (by folke)

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

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 pokedotdev)

Visual Studio 2022
tokyo-night-visual-studio-theme for Visual Studio 2022 (by m1chaelbarry)

Firefox
Tokyonight_Vim theme for Firefox, LibreWolf, etc. (by Jared Reardon)

Warp
warp-tokyo-night, a theme for Warp (by bart-krakowski)

KiCad
tokyo-night-kicad-theme, a theme for the KiCad schematic editor (by kevin-nel)

Tilix/Black Box Terminal
tokyo-night-tilix-black-box-theme a theme for tilix colorscheme compatible terminals (by kevin-nel)

gtksourceview (gnome text editor, gedit, builder, etc)
tokyo-night-gtksourceview a theme for gtksourceview applications (by kevin-nel)

gitk gitk-tokyonight a theme for gitk (by Dominic Walters)

git-gui git-gui-tokyonight a theme for git-gui (by Dominic Walters)

DevTools
Tokyo Night on DevTools a theme for most browsers' DevTools (by AdelFetner)

Enjoy!

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

tokyo-night-vscode-theme's Issues

Python 3.10 "match/case" highlighting doesn't work

Issue

When writing python 3.10+ the match and case keywords are not highlighted.
I've provided screenshots to compare with the default dark VS Code theme.

Expected match/case highlighting

Actual match/case highlighting

Suggested match/case highlighting

Since match and case are two regular keywords, it'd be logical to apply the same color as if, else, etc.

Thank you for your time, and thank you again for this wonderful theme!

High width window messes up with the theme, the IDE looses the background color. Only when not on full screen.

So this seems like an issue that only happens only when not in full screen and on high width.

My environment is a Macbook Pro 2020. Running MacOS Catalina.

Let me know if you need more info.

see here:

Css curly braces is hardly visible

There are some issues with the curly braces for css files. It's like super light yellow and hardly visible until you actually highly the braces. Anyone else having this problem as well?

Included screenshots:

Editing the orange

Hi,

I love this theme but was hoping to make a small tweak to it and am having trouble. I would like the orange(#FF9E64) that is used for keys in ruby, for example, to be a different color. Do you know how I would update the settings.json file to globally change that color in the theme to another color (I don't only want to change ruby keys but all instances of that color)? Thanks in advance for the help, and thanks again for the awesome theme!

Better zen mode colouring?

In Zen mode the contrast between the file and the surrounding UI seems undesirable?

will emacs support?

Menus are not legible over Light theme

There is an issue when the Tokyo Night Light theme is selected.

When the mouse is over a menu item (hover), this menu is not legible

This over the menu bar

This is over the settings

Expected behavior

The font foreground should change to a lighter color to be visible

The latest version of typescript `type` and `interface` color is not obvious

latest

The type and interface colors overlap with the property colors and look fatiguing

v0.8.4

The previous version looked much more comfortable

Function parameters color inconsistent

I find this situation sub-optimal. I think it might be more pleasant to much the functions parameter on definition/declaration and on function calls. While maybe modifying the color of 'None' just a little bit to make it distinguishable.

All in all this is my favorite theme in time! Thanks a lot for this creation.

font

how to change font

Vertical pipe being displayed in italics making it seem like a forward slash

I'm creating an AWS Cloud Formation template in YAML, and I've noticed that for some reason a vertical pipe is being displayed in italics, making it seem like it's a forward slash.

I have ZipFile: |, but it looks like ZipFile: / and is a little confusing.

For comparison, here is a forward slash next to it.

I cant figure out what setting is causing this so I'm not sure how to fix it. Are you able to help at all?

Thanks!

Colors are not rendered anymore

Hi and thank you for this absolutely beautiful theme

I've noticed that the colors are not rendered anymore in any browser please see attached

Highlight background color too subtle

I've highlighted the word "hello" in the second image, but the highlight is too faint to notice. Why is this happening?

Request for Terraform Keyword Support

Love the theme, but it doesn't really work well for terraform syntax. Keywords are not separated from variable name colors, see screenshots. Notice how "resource" and "ingress" are not different colors than the variable "aws_security"group"

the selection color is too light to recogonize

Storm theme: Variable color keeps changing

Hi there! 👋

I'm using the Tokyo Night Storm theme and the color for variable names is usually white. However, perhaps since a week ago, the color changes to purple after vscode has finished loading.

See here where I reload window, the color changes to correct color of white, then it becomes purple after vscode has finished "Activating Extensions" & "initializing JS/TS language features".

Also note how it only occurs to variables following the declaration, not in the return statement.

tokyo.night.bug.mp4

Hope you can help solve this problem as the theme is gorgeous!! 😃
Cheers! Ash

System:
VScode: 1.55.0 (latest)
MacOS Catalina 10.15.7
Tokyo Night version: v0.7.7 (latest)
Also I have nothing in my settings to change ui colors.

I made a gnome terminal port

Link to Repo Here

I made a gnome terminal port for the Tokyo Night theme.
The link to the repo is attached.

Let me know if there is anything you would like me to add or change.

Font family and icons

What is the font family name who is in the screenshots showcase? Because I need to change from Fira Code.

Visual Studio 2022 version?

I'm struggling in Visual Studio (not "Code") 2022 without my beloved Tokyo Night theme. I found an extension that someone built but it doesn't work. Anyone have pointers to one that does work? Or something? Thanks for advice/help :-)

Golang variable name color

In golang a variable name gets colored with #bb9af7 instead of #c0caf5 when you declare it with the "var" keyword. Example: var testVariable string. If you use a short assignment statement like testVariable := "Hello World" the variable name gets the correct color.

Python match, case not highlighting

Hello, I have noticed that the match-case keyword in Python is not highlighting up. An image relating to that issue is down below. I hope that will help you fix it.
Thank you for the awesome theme as well!!

Integrated Terminal Autocomplete Color

Hey there! Great theme, loving it so far! I am noticing though the autocomplete color for zshell is pretty much impossible to see on top of the background in both VSCode and iTerm2. For iTerm I can bump up the min contrast slider and it improves but not sure how to do such changes in VSCode. Thanks!

VSCode

iTerm2

Not apply font colors in ts and js files

Hello guys,

Basically it doesn't apply theme colors to fonts in ts and js files it its show white

Let me know if you need any other information.

VS Code Performance

VS Code Prettier Extensions takes a longer time while using this theme

is this theme MIT licensed ?

Great theme in my opinion.

Under which license is this theme ?

It would be great if you guys could provide a license for it.

Customizing tag colours

I notice the element tag colours have changed. I'm not a fan and would like to revert it back to the original. I see here is the change: https://github.com/enkia/tokyo-night-vscode-theme/blob/ab23a44d8984583727943d1c3637924da6eab66c/themes/tokyo-night-storm-color-theme.json#L693

How can I customise this myself?

Light + Italics

It looks like there are dark themes with italic and non-italic options.
Is there a light theme with italics?

bracket pair colourisation support

vscode recently added office bracket pair colourisation with theming, would it be possible to update this theme to reflect colour the brackets correctly

Provide Color Palette for Porting Purpose

I love this color scheme, my vim, alacritty, even my tmux, i use this color scheme, we can open the JSON file to see all the colors, but i think it's a good idea to provide something like color palette guideline so another contributor can easily porting this theme for other platform.

Can I have the high contrast settings?

As mentioned in the readme, I could really benefit from higher contrast, and will be very grateful for those if you could send those to me.

Converting theme to Eclipse

Is there anyway that you could convert this theme to eclipse! This theme is bloody beautiful, you honestly did such an amazing job on it! Great work!
http://www.eclipsecolorthemes.org/
That's the site for eclipse themes. Please <3 I'm obsessed with your theme now!

Vue files does not fully support

Hi!

Vue template directives are not colorized as native HTML attributes.

How could I customize these things in the Tokyo Night theme?

Thanks a lot!

help! i need to change text color

Hi! I would like to change the color of the text that is between the labels, right now it is a red color but I would like to be able to make it white or another more different tone... I have tried to change it with json but I have not succeeded... thanks!

Scrollbar color

Scrollbar color is missed up for themes altsynt and gogh but fine for the just night and night storm.
tried uninstalling/reinstalling, different versions! it didn't use to look like that.

Comments are too much dark

The comment's color are too much close too the background color hence, comment are hard to read. Making comment color grey or and other color that doesn't match the background color would be excellent.

Poor contrast for merge conflict text

When merge conflicts occur, the builtin VSCode merge conflict helper has poor contrast making the "Current Change" and "Incoming Change" hard to read.

I'm thinking that the text match the background color so it "punches" through the green and blue bars.

Or lighten the text based on the background color for each.

Using the following colors:

#10a6a4
#5772b9

Or if there is a better color that follows the theme, that would be preferred.

Support for Visual Studio?

I really love this theme. It's the best high contrast, high saturation theme I could find so far. Do you think you could port it to Visual Studio? I was really disappointed to find it isn't there :(

Colour from custom component is the same as regular HTML tags

As you can see on the picture when we use Login and Register components there're exactly the same colour as other html tags.
It can be difficult to see what is what.

With this theme we can see the difference.

Could it be possible to add the same behaviour?

Color distinction between normal html tags and component tags

My eyes are forever grateful for the theme you made, It's my daily driver. I just wish we could have this color distinction between a component and a normal html tag. Makes it so much easier to scan with the eyes which is which especially when you're writing tons of components together with normal html tags, thanks!

Possible to port to JetBrains?

Are you experienced with JetBrains products? This would be amazing to have there, any plans on that matter?

Thanks

help. what is the font family you use ?

thanks

Provide color palette for Open-Source contribution

Hello, could you provide guidance for the color palette so that contributors can easily port this theme to other applications or platforms. It could become something similar to Dracula's project. You can check it out at Dracula for inspiration. Thanks!

Enabling Italics on HTML attributes and CSS classes/ids/etc.

Please I would like to enable italics on html attributes as well CSS classes/ids/@media etc. Mine isn't enabled by default and in the README, there's only information about disabling and not enabling.

Thanks!

Font used in example pictures

What font are those?

Github Organization for Tokyo Night

I have created a Github Organization for Tokyo Night here. It will be organized and managed similar to the organizations for the Catppuccin and Dracula themes.

An organization will be a great way to consolidate all the Tokyo Night theme repos into one place. I thought it would help in making the Tokyo Night theme gain more popularity.

I'd like to know if there's interest in having such an organization. I'd gladly help in managing and maintaining it.

Italic keywords/comments

Beautiful theme! Thanks for making this 😀

Except italic text doesn't look as legible to me as straight font. I'm sure this varies greatly by whatever font is used, but I really didn't want italics in my code and so I am humbly requesting to remove it from the theme.

It's your design of course, so I'll respect it if you don't want this changed. For this case, I also have a workaround somebody might appreciate. In the settings.json add this:

"editor.tokenColorCustomizations": {
    "[Tokyo Night]": {
        "textMateRules": [
            {
                "scope": [
                    "comment",
                    "keyword.control.flow",
                    "meta.var.expr storage.type"
                ],
                "settings": {
                    "fontStyle": ""
                }
            }
        ]
    }
}

Save it, and it should do away with italics.

Integrated terminal font colors hard to see on background

Icon color

File annotations icon color out of palette.

Question: Black apple logo

I know it's a very nit picky thing here, but is it at all possible to make the black apple logo the dark blue kind of colour, It's just ever so slightly driving up the wall every day xD

I have tried playing around with colours in my terminal (Hyper using: Hyper-tokyo-night) and also in vs-code but no luck with anything thus far.

differences between *.js and *.ts

First of all, this theme is truly awesome. I think i have finally discovered something that i want to stick with.

Just a minor thing, i would much prefer how it colors typescript files, especially imports

over all the purple in javascript files

Is there a reason it's doing this? Can it be configured?