mirror of https://github.com/enkia/tokyo-night-vscode-theme.git synced 2024-12-19 20:54:42 -05:00

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

Find a file

Kristi 2dbedf6053 Revert turning on semantic highlighting by default		2021-04-05 10:13:49 -04:00
static	Add Tokyo Night Light theme variation	2020-04-03 13:47:27 -04:00
themes	Revert turning on semantic highlighting by default	2021-04-05 10:13:49 -04:00
.gitignore	Initialize launch	2019-10-22 11:45:55 -04:00
CHANGELOG.md	Update property defaultLibrary color	2021-04-04 20:40:08 -04:00
icon.png	Initialize launch	2019-10-22 11:45:55 -04:00
icon.svg	Initialize launch	2019-10-22 11:45:55 -04:00
LICENSE.txt	Add license	2021-03-06 19:50:33 -05:00
package.json	0.7.8	2021-04-04 20:40:28 -04:00
README.md	Update README	2021-03-31 23:05:24 -04:00
tokyo-night.itermcolors	Update terminal black color	2020-07-27 16:33:23 -04:00

README.md

Tokyo Night

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

Tokyo Night Storm

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:

"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
`#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