如何实现VSCode默认暗色主题背景搭配Monokai语法高亮

解决方案 #

• 第一步：获取默认暗色主题完整色值
  先切换到VSCode默认暗色主题，打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），执行Developer: Generate Color Theme From Current Settings命令，即可导出包含该主题所有元素hex色值的JSON文件，所有你需要的配色参数都在该文件内。
• 第二步：覆盖Monokai主题界面配色
  切换回Monokai主题后，打开settings.json，添加workbench.colorCustomizations配置节点，把需要调整的界面元素色值替换为导出的默认暗色主题对应色值即可，基础示例配置如下：

  {
    "workbench.colorTheme": "Monokai",
    "workbench.colorCustomizations": {
      "[Monokai]": {
        "editor.background": "#1e1e1e", // 编辑器背景
        "sideBar.background": "#1e1e1e", // 侧边栏背景
        "activityBar.background": "#333333", // 活动栏背景
        "toolbar.background": "#1e1e1e", // 工具栏背景
        "titleBar.activeBackground": "#323233", // 标题栏背景
        "statusBar.background": "#007acc", // 状态栏背景
        "tab.activeBackground": "#1e1e1e", // 激活标签页背景
        "tab.inactiveBackground": "#2d2d2d" // 未激活标签页背景
        // 其余元素可对照导出的色值文件按需补充
      }
    }
  }
  

如果需要查询特定界面元素对应的配色key，可执行命令面板的Developer: Inspect Editor Tokens and Scopes功能，点选对应元素即可查看参数名，直接添加到配置中即可。上述示例中的基础色值为默认暗色主题的官方原生参数，直接使用也可实现Monokai语法高亮+默认暗色界面的效果，无需安装额外扩展，不会出现高亮异常、字体被篡改的问题。

内容的提问来源于stack exchange，提问作者Mo0rBy