{"id":13617085,"url":"https://github.com/tokyo-night/tokyo-night-vscode-theme","last_synced_at":"2026-01-27T11:02:27.185Z","repository":{"id":37451064,"uuid":"216851118","full_name":"tokyo-night/tokyo-night-vscode-theme","owner":"tokyo-night","description":"A clean, dark Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.","archived":false,"fork":false,"pushed_at":"2025-02-05T19:34:53.000Z","size":1010,"stargazers_count":2243,"open_issues_count":12,"forks_count":152,"subscribers_count":11,"default_branch":"master","last_synced_at":"2026-01-14T05:55:50.470Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tokyo-night.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-10-22T15:45:20.000Z","updated_at":"2026-01-13T11:18:11.000Z","dependencies_parsed_at":"2023-10-04T07:25:15.873Z","dependency_job_id":"b42fe0da-629d-402d-9d63-05f18cb10d72","html_url":"https://github.com/tokyo-night/tokyo-night-vscode-theme","commit_stats":null,"previous_names":["enkia/tokyo-night-vscode-theme"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tokyo-night/tokyo-night-vscode-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokyo-night%2Ftokyo-night-vscode-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokyo-night%2Ftokyo-night-vscode-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokyo-night%2Ftokyo-night-vscode-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokyo-night%2Ftokyo-night-vscode-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tokyo-night","download_url":"https://codeload.github.com/tokyo-night/tokyo-night-vscode-theme/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokyo-night%2Ftokyo-night-vscode-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28812367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T20:01:36.793Z","updated_at":"2026-01-27T11:02:27.160Z","avatar_url":"https://github.com/tokyo-night.png","language":null,"funding_links":[],"categories":["Others","HarmonyOS",":hammer_and_wrench: My Tools","Color Schemes","Palettes","Colour Schemes"],"sub_categories":["Windows Manager",":floppy_disk: My Software","Single Schemes"],"readme":"# [Tokyo Night](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)\n[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/theme/enkia.tokyo-night/Tokyo%20Night%20Storm)\n\nA clean Visual Studio Code theme that celebrates the lights of Downtown [Tokyo at night.](https://www.google.com/search?q=tokyo+night\u0026newwindow=1\u0026sxsrf=ACYBGNRiOGCstG_Xohb8CgG5UGwBRpMIQg:1571032079139\u0026source=lnms\u0026tbm=isch\u0026sa=X\u0026ved=0ahUKEwiayIfIhpvlAhUGmuAKHbfRDaIQ_AUIEigB\u0026biw=1280\u0026bih=666\u0026dpr=2)\n\n**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.\n\n## Screenshots\nTokyo Night\n![Screenshot - Tokyo Night](https://raw.githubusercontent.com/enkia/tokyo-night-vscode-theme/master/static/ss_tokyo_night.png)\n\nTokyo Night Storm\n![Screenshot - Tokyo Night Storm](https://raw.githubusercontent.com/enkia/tokyo-night-vscode-theme/master/static/ss_tokyo_night_storm.png)\n\nTokyo Night Light\n![Screenshot - Tokyo Night Light](https://raw.githubusercontent.com/enkia/tokyo-night-vscode-theme/master/static/ss_tokyo_night_light.png)\n\nFont used in the screenshots is [JetBrains Mono.](https://www.jetbrains.com/lp/mono/)\n\n## Disabling Italics\nPaste this into your [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) to disable italics.\n\n```javascript\n\"editor.tokenColorCustomizations\": {\n    \"[Tokyo Night]\": { // or \"[Tokyo Night Storm]\"\n        \"textMateRules\": [{\n            \"scope\": [\n                \"comment\",\n                \"meta.var.expr storage.type\",\n                \"keyword.control.flow\",\n                \"keyword.control.return\",\n                \"meta.directive.vue punctuation.separator.key-value.html\",\n                \"meta.directive.vue entity.other.attribute-name.html\",\n                \"tag.decorator.js entity.name.tag.js\",\n                \"tag.decorator.js punctuation.definition.tag.js\",\n                \"storage.modifier\"\n            ],\n            \"settings\": {\n                \"fontStyle\": \"\"\n            }\n        }]\n    }\n}\n```\n## Enabling JSDoc Highlights\nPaste this into your [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) to Enable JSDoc Highlight.\n\n```javascript\n\"editor.tokenColorCustomizations\": {\n    \"[Tokyo Night]\": { // or \"[Tokyo Night Storm]\"\n        \"textMateRules\": [\n        {\n            \"scope\": [\n                \"comment keyword.codetag.notation\",\n                \"comment.block.documentation keyword\",\n                \"comment.block.documentation storage.type.class\"\n            ],\n            \"settings\": {\n                \"foreground\": \"#bb9af7\"\n            }\n        },\n        {\n            \"scope\": [\"comment.block.documentation entity.name.type.instance\"],\n            \"settings\": {\n                \"foreground\": \"#73daca\",\n                \"fontStyle\": \"italic\"\n            }\n        },\n        {\n            \"scope\": [\n            \"comment.block.documentation entity.name.type punctuation.definition.bracket\"\n            ],\n            \"settings\": {\n                \"foreground\": \"#bb9af7\"\n            }\n        },\n        {\n            \"scope\": [\"comment.block.documentation variable\"],\n            \"settings\": {\n                \"foreground\": \"#e0af68\",\n                \"fontStyle\": \"italic\"\n            }\n        }\n        ]\n    }\n  }\n```\n## Customization Settings Examples\n#### Higher Contrast Settings\nThe 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. \n```javascript\n\"workbench.colorCustomizations\": {\n    \"[Tokyo Night]\": {\n        \"foreground\": \"#959cbd\",\n        \"panelTitle.activeBorder\": \"#3d59a1\",\n        \"panelTitle.activeForeground\": \"#bdc7f0\",\n        \"panelTitle.inactiveForeground\": \"#959cbd\",\n        \"tab.activeForeground\": \"#bdc7f0\",\n        \"tab.inactiveForeground\": \"#959cbd\",\n        \"breadcrumb.foreground\": \"#959cbd\",\n        \"breadcrumb.focusForeground\": \"#bdc7f0\",\n        \"breadcrumb.activeSelectionForeground\": \"#bdc7f0\",\n        \"statusBar.foreground\": \"#bdc7f0\",\n        \"list.focusForeground\": \"#bdc7f0\",\n        \"list.hoverForeground\": \"#bdc7f0\",\n        \"list.activeSelectionForeground\": \"#bdc7f0\",\n        \"list.inactiveSelectionForeground\": \"#bdc7f0\",\n        \"list.inactiveSelectionBackground\": \"#202330\",\n        \"sideBar.foreground\": \"#959cbd\",\n        \"dropdown.foreground\": \"#959cbd\",\n        \"menu.foreground\":\"#bdc7f0\",\n        \"menubar.selectionForeground\":\"#bdc7f0\",\n        \"input.foreground\": \"#959cbd\",\n        \"input.placeholderForeground\": \"#959cbd\",\n        \"activityBar.foreground\": \"#bdc7f0\",\n        \"activityBar.inactiveForeground\": \"#787c99\",\n        \"gitDecoration.ignoredResourceForeground\": \"#696d87\",\n    },\n}\n```\n#### Brightening Codelens text\nI 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:\n```javascript\n\"workbench.colorCustomizations\": {\n    \"[Tokyo Night]\": { // or \"[Tokyo Night Storm]\"\n        \"editorCodeLens.foreground\": \"#7982a9\", // Preferred hex color\n    }\n}\n```\n\n#### Window Active and Inactive borders (vscode 1.40.0)\nmacOS 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:\n```javascript\n\"workbench.colorCustomizations\": {\n    \"[Tokyo Night]\": { // or \"[Tokyo Night Storm]\"\n        \"window.activeBorder\": \"#ff0000\",\n        \"window.inactiveBorder\":\"#0000ff\"\n    }\n}\n```\n\n## Color Palette\n#### Tokyo Night and Tokyo Night Storm\n| Color\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; | Use |\n| ---------- | ------------------------------------------------------------ |\n| ![#f7768e](https://place-hold.it/15/f7768e/f7768e?text=+) `#f7768e` | This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red |\n| ![#ff9e64](https://place-hold.it/15/ff9e64/ff9e64?text=+) `#ff9e64` | Number and Boolean constants, Language support constants |\n| ![#e0af68](https://place-hold.it/15/e0af68/e0af68?text=+) `#e0af68` | Function parameters, Regex character sets, Terminal Yellow |\n| ![#cfc9c2](https://place-hold.it/15/cfc9c2/cfc9c2?text=+) `#cfc9c2` | Parameters inside functions (semantic highlighting only) |\n| ![#9ece6a](https://place-hold.it/15/9ece6a/9ece6a?text=+) `#9ece6a` | Strings, CSS class names |\n| ![#73daca](https://place-hold.it/15/73daca/73daca?text=+) `#73daca` | Object literal keys, Markdown links, Terminal Green |\n| ![#b4f9f8](https://place-hold.it/15/b4f9f8/b4f9f8?text=+) `#b4f9f8` | Regex literal strings |\n| ![#2ac3de](https://place-hold.it/15/2ac3de/2ac3de?text=+) `#2ac3de` | Language support functions, CSS HTML elements |\n| ![#7dcfff](https://place-hold.it/15/7dcfff/7dcfff?text=+) `#7dcfff` | Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords |\n| ![#7aa2f7](https://place-hold.it/15/7aa2f7/7aa2f7?text=+) `#7aa2f7` | Function names, CSS property names, Terminal Blue |\n| ![#bb9af7](https://place-hold.it/15/bb9af7/bb9af7?text=+) `#bb9af7` | Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta |\n| ![#c0caf5](https://place-hold.it/15/c0caf5/c0caf5?text=+) `#c0caf5` | Variables, Class names, Terminal White |\n| ![#a9b1d6](https://place-hold.it/15/a9b1d6/a9b1d6?text=+) `#a9b1d6` | Editor Foreground |\n| ![#9aa5ce](https://place-hold.it/15/9aa5ce/9aa5ce?text=+) `#9aa5ce` | Markdown Text, HTML Text |\n| ![#565f89](https://place-hold.it/15/565f89/565f89?text=+) `#565f89` | Comments |\n| ![#414868](https://place-hold.it/15/414868/414868?text=+) `#414868` | Terminal Black |\n| ![#24283b](https://place-hold.it/15/24283b/24283b?text=+) `#24283b` | Editor Background (Storm) |\n| ![#1a1b26](https://place-hold.it/15/1a1b26/1a1b26?text=+) `#1a1b26` | Editor Background (Night) |\n\n#### Tokyo Night Light\n| Color\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; | Use |\n| ---------- | ------------------------------------------------------------ |\n| ![#8c4351](https://place-hold.it/15/8c4351/8c4351?text=+) `#8c4351` | This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red |\n| ![#965027](https://place-hold.it/15/965027/965027?text=+) `#965027` | Number and Boolean constants, Language support constants |\n| ![#8f5e15](https://place-hold.it/15/8f5e15/8f5e15?text=+) `#8f5e15` | Function parameters, Regex character sets, Terminal Yellow |\n| ![#634f30](https://place-hold.it/15/634f30/634f30?text=+) `#634f30` | Parameters inside functions (semantic highlighting only) |\n| ![#385f0d](https://place-hold.it/15/385f0d/385f0d?text=+) `#385f0d` | Strings, CSS class names |\n| ![#33635c](https://place-hold.it/15/33635c/33635c?text=+) `#33635c` | Object literal keys, Markdown links, Regex literal strings, Terminal Green |\n| ![#006c86](https://place-hold.it/15/006c86/006c86?text=+) `#006c86` | Language support functions, CSS HTML elements |\n| ![#0f4b6e](https://place-hold.it/15/0f4b6e/0f4b6e?text=+) `#0f4b6e` | Object properties, Regex quantifiers and flags, Terminal Cyan, Markdown code, Import/export keywords |\n| ![#2959aa](https://place-hold.it/15/2959aa/2959aa?text=+) `#2959aa` | Function names, CSS property names, Markdown Headings, Terminal Blue |\n| ![#5a3e8e](https://place-hold.it/15/5a3e8e/5a3e8e?text=+) `#5a3e8e` | Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta |\n| ![#343b58](https://place-hold.it/15/343b58/343b58?text=+) `#343b58` | Editor Foreground, Variables, Class names, Terminal White |\n| ![#40434f](https://place-hold.it/15/40434f/40434f?text=+) `#40434f` | Markdown Text, HTML Text |\n| ![#343B58](https://place-hold.it/15/343B58/343B58?text=+) `#343B58` | Terminal Black |\n| ![#6c6e75](https://place-hold.it/15/6c6e75/6c6e75?text=+) `#6c6e75` | Comments |\n| ![#e6e7ed](https://place-hold.it/15/e6e7ed/e6e7ed?text=+) `#e6e7ed` | Editor Background |\n\n## Other Ports\n**iTerm**   \n`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)\n\n**Sublime Text / bat**   \n*Tokyo Night* is a color scheme option in my [Enki Theme.](https://packagecontrol.io/packages/Enki%20Theme)\n\n**Xcode**   \n*Tokyo Night* theme for Xcode [mesqueeb/TokyoNightXcodeTheme](https://github.com/mesqueeb/TokyoNightXcodeTheme)\n\n**Alfred**   \nInstall the [Tokyo Night Alfred Theme.](https://www.alfredapp.com/extras/theme/puSaeqbft2/)\n\n**DuckDuckGo**   \n[DuckduckGo theme preferences](https://duckduckgo.com/?kae=d\u0026ks=m\u0026kak=-1\u0026kax=-1\u0026kaq=-1\u0026kap=-1\u0026kao=-1\u0026kau=-1\u0026k5=1\u0026k7=1a1b26\u0026kj=16161e\u0026kx=1abc9c\u0026k21=16161E\u0026k18=-1\u0026ka=e\u0026kaa=BB9AF7\u0026k9=C0CAF5\u0026k8=6183BB\u0026kt=e)\n(by [Grafikart](https://github.com/Grafikart))\n\n**JetBrains IDE**  \n- [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))\n- [TokyoNight Editor \u0026 UI Theme](https://plugins.jetbrains.com/plugin/18820-tokyo-night-theme) compatible with material theme, supports 2 dark variants, planned support for day theme.(by [alexadhy](https://github.com/alexadhy))\n\n**VIM/Neovim**    \n- [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) (by [ghifarit53](https://github.com/ghifarit53/))\n\n- [tokyonight.nvim](https://github.com/folke/tokyonight.nvim), a [Neovim](https://neovim.io/) color scheme. This theme also has support for many Vim plugins and [other programs](https://github.com/folke/tokyonight.nvim/tree/main/extras) such as Alacritty, Fish and Kitty. (by [folke](https://github.com/folke))\n\n**Kitty Terminal**       \n[Tokyo Night](https://github.com/davidmathers/tokyo-night-kitty-theme) color scheme for [kitty](https://sw.kovidgoyal.net/kitty/)\n(by [davidmathers](https://github.com/davidmathers))\n\n**Alacritty Terminal**    \n[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))\n\n**Hyper terminal**    \n[hyper-tokyo-night](https://github.com/mhyfritz/hyper-tokyo-night), a theme for [Hyper](https://hyper.is/) (by [fitrh](https://github.com/fitrh))\n\n**Windows Terminal**   \n[tokyonight-windows-terminal](https://github.com/g-e-o-m-e-t-r-i-c/tokyonight-windows-terminal), a theme for [Windows Terminal](https://github.com/microsoft/terminal) (by [g-e-o-m-e-t-r-i-c](https://github.com/g-e-o-m-e-t-r-i-c))\n\n**Insomnia**  \n[Tokyo Night](https://github.com/pokedotdev/tokyo-night-insomnia) theme for [Insomnia](https://insomnia.rest/) (by [pokedotdev](https://github.com/pokedotdev))\n\n**Visual Studio 2022**  \n[tokyo-night-visual-studio-theme](https://github.com/m1chaelbarry/tokyo-night-visual-studio-theme) for Visual Studio 2022 (by [m1chaelbarry](https://github.com/m1chaelbarry))\n\n**Firefox**  \n[Tokyonight_Vim](https://addons.mozilla.org/en-US/firefox/addon/tokyonight_vim/) theme for Firefox, LibreWolf, etc. (by [Jared Reardon](https://addons.mozilla.org/en-US/firefox/user/14600679/))\n\n**Warp**   \n[warp-tokyo-night](https://github.com/bart-krakowski/warp-tokyo-night), a theme for [Warp](https://warp.dev/) (by [bart-krakowski](https://github.com/bart-krakowski))\n\n**KiCad**    \n[tokyo-night-kicad-theme](https://github.com/kevin-nel/tokyo-night-kicad-theme), a theme for the [KiCad](https://www.kicad.org/) schematic editor (by [kevin-nel](https://github.com/kevin-nel))\n\n**Tilix/Black Box Terminal**   \n[tokyo-night-tilix-black-box-theme](https://github.com/kevin-nel/tokyo-night-tilix-black-box-theme) a theme for tilix colorscheme compatible terminals (by [kevin-nel](https://github.com/kevin-nel))\n\n**gtksourceview** (gnome text editor, gedit, builder, etc)      \n[tokyo-night-gtksourceview](https://github.com/kevin-nel/tokyo-night-gtksourceview) a theme for gtksourceview applications (by [kevin-nel](https://github.com/kevin-nel))\n\n**gitk**\n[gitk-tokyonight](https://github.com/domwalters/gitk-tokyonight) a theme for [gitk](https://git-scm.com/docs/gitk) (by [Dominic Walters](https://github.com/domWalters))\n\n**git-gui**\n[git-gui-tokyonight](https://github.com/domwalters/git-gui-tokyonight) a theme for [git-gui](https://git-scm.com/docs/git-gui/) (by [Dominic Walters](https://github.com/domWalters))\n\n**DevTools**   \n[Tokyo Night on DevTools](https://github.com/AdelFetner/devToolsExtension) a theme for most browsers' DevTools (by [AdelFetner](https://github.com/AdelFetner))\n\n\n\u003cbr\u003e\u003cbr\u003e\n**Enjoy!**\n\n###### Tokyo Tower icon used in theme icon made by Smashicons from www.flaticon.com. Color palettes in this README use [place-hold.it](https://place-hold.it).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokyo-night%2Ftokyo-night-vscode-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftokyo-night%2Ftokyo-night-vscode-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokyo-night%2Ftokyo-night-vscode-theme/lists"}