东京之夜

一个简洁的 Visual Studio Code 主题，庆祝东京夜晚市中心的灯光。

**注意：**许多 UI 元素故意采用低对比度设计，以避免分散注意力。我可以为需要特定文本变亮的用户提供自定义设置，类似于本页面下方所示的内容。

截图

东京之夜截图 - 东京之夜

东京之夜暴风雨截图 - 东京之夜暴风雨

东京之夜亮色截图 - 东京之夜亮色

截图中使用的字体是 JetBrains Mono。

禁用斜体

将以下内容粘贴到您的 settings.json 中以禁用斜体。

"editor.tokenColorCustomizations": {
    "[Tokyo Night]": { // 或 "[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": ""
            }
        }]
    }
}

启用 JSDoc 高亮

将以下内容粘贴到您的 settings.json 中以启用 JSDoc 高亮。

"editor.tokenColorCustomizations": {
    "[Tokyo Night]": { // 或 "[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"
            }
        }
        ]
    }
  }

自定义设置示例

高对比度设置

以下设置虽然不能正式代表高对比度，但可以作为一个起点。这里假设使用的是较深色的东京之夜版本。

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

增亮 Codelens 文本

我更喜欢 Codelens 文本在未悬停时淡化到背景中，但如果您想要更高的对比度，请将以下内容添加到您的 settings.json 中：

"workbench.colorCustomizations": {
    "[Tokyo Night]": { // 或 "[Tokyo Night Storm]"
        "editorCodeLens.foreground": "#7982a9", // 首选的十六进制颜色
    }
}

窗口活动和非活动边框（vscode 1.40.0）

macOS 深色模式与这两个主题修改不太兼容，所以我选择尽可能地将它们变暗，以解决我这边的灰色边框问题。您可以使用以下方式自定义设置：

"workbench.colorCustomizations": {
    "[Tokyo Night]": { // 或 "[Tokyo Night Storm]"
        "window.activeBorder": "#ff0000",
        "window.inactiveBorder":"#0000ff"
    }
}

调色板

东京之夜和东京风暴之夜

颜色	用途
`#f7768e`	这个关键字、HTML元素、正则表达式组符号、CSS单位、终端红色
`#ff9e64`	数字和布尔常量、语言支持常量
`#e0af68`	函数参数、正则表达式字符集、终端黄色
`#cfc9c2`	函数内部的参数（仅语义高亮）
`#9ece6a`	字符串、CSS类名
`#73daca`	对象字面量键、Markdown链接、终端绿色
`#b4f9f8`	正则表达式字面量字符串
`#2ac3de`	语言支持函数、CSS HTML元素
`#7dcfff`	对象属性、正则表达式量词和标志、Markdown标题、终端青色、Markdown代码、导入/导出关键字
`#7aa2f7`	函数名、CSS属性名、终端蓝色
`#bb9af7`	控制关键字、存储类型、正则表达式符号和运算符、HTML属性、终端洋红色
`#c0caf5`	变量、类名、终端白色
`#a9b1d6`	编辑器前景色
`#9aa5ce`	Markdown文本、HTML文本
`#565f89`	注释
`#414868`	终端黑色
`#24283b`	编辑器背景（风暴）
`#1a1b26`	编辑器背景（夜晚）

东京之光

颜色	用途
`#8c4351`	这个关键字、HTML元素、正则表达式组符号、CSS单位、终端红色
`#965027`	数字和布尔常量、语言支持常量
`#8f5e15`	函数参数、正则表达式字符集、终端黄色
`#634f30`	函数内部的参数（仅语义高亮）
`#385f0d`	字符串、CSS类名
`#33635c`	对象字面量键、Markdown链接、正则表达式字面量字符串、终端绿色
`#006c86`	语言支持函数、CSS HTML元素
`#0f4b6e`	对象属性、正则表达式量词和标志、终端青色、Markdown代码、导入/导出关键字
`#2959aa`	函数名、CSS属性名、Markdown标题、终端蓝色
`#5a3e8e`	控制关键字、存储类型、正则表达式符号和运算符、HTML属性、终端洋红色
`#343b58`	编辑器前景色、变量、类名、终端白色
`#40434f`	Markdown文本、HTML文本
`#343B58`	终端黑色
`#6c6e75`	注释
`#e6e7ed`	编辑器背景

其他移植版本

iTerm
tokyo-night.itermcolors 文件位于此主题的 ~/.vscode/extensions 文件夹中，或可通过 github 获取。 Sublime Text / bat Tokyo Night 是我的 Enki 主题中的一个配色方案选项。

Alfred 安装 Tokyo Night Alfred 主题。

DuckDuckGo DuckDuckGo 主题设置（由 Grafikart 提供）

JetBrains IDE

Tokyo Night 配色方案最适合与 Material Theme 插件和此主题搭配使用（由 Grafikart 提供）
TokyoNight 编辑器和 UI 主题兼容 Material Theme，支持两种深色变体，计划支持白天主题（由 alexadhy 提供）

VIM/Neovim

tokyonight.vim，一个 VIM/Neovim 配色方案。该主题还支持 lightline 和 airline（由 ghifarit53 提供）
tokyonight.nvim，一个 Neovim 配色方案。该主题还支持许多 Vim 插件和其他程序，如 Alacritty、Fish 和 Kitty（由 folke 提供）