0
0
Fork 0
mirror of https://github.com/enkia/tokyo-night-vscode-theme.git synced 2024-11-07 20:24:11 -05:00
A clean, dark Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.
Find a file
2019-12-13 23:33:38 -05:00
static Initialize launch 2019-10-22 11:45:55 -04:00
themes Color variables in bracket notation 2019-12-13 23:32:15 -05:00
.gitignore Initialize launch 2019-10-22 11:45:55 -04:00
CHANGELOG.md Color variables in bracket notation 2019-12-13 23:32:15 -05: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
package.json 0.4.6 2019-12-13 23:33:38 -05:00
README.md Add window active and inactive borders 2019-11-09 10:55:55 -05:00
tokyo-night.itermcolors Initialize launch 2019-10-22 11:45:55 -04:00

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