为 VS Code 创建您自己的自定义主题

大家好！：）

几天前我发现了一个扩展程序，它可以让你在 Visual Studio Code 中加载自定义 CSS 和 JS 文件。如果你有兴趣修改你使用的主题，或者为 Visual Studio Code 创建自己的 CSS 样式，这篇文章或许能帮到你 :)

Custom CSS and JS Loader我们需要安装这个扩展程序。

安装完成后，您需要启用此扩展。使用快捷键Ctrl + Shift + P或命令面板Shift + ⌘ + P，F1然后选择“启用自定义 CSS 和 JS”。系统会提示您重启。

下一步，您需要在文件系统中创建一个 CSS 文件，并将该文件的路径添加到VS Code 的属性vscode_custom_css.imports中。settings.json

{
  "vscode_custom_css.imports": [
    "file:///{PATH_TO_THIS_FILE}/{YOUR_FILE_NAME}.css"
  ]
}

如果你像我一样使用 Windows 系统，你需要像这样输入文件路径。

{
  "vscode_custom_css.imports": [
    "file:///C:/Users/User/vs_dark.css"
  ]
}

您可以在此 CSS 文件中添加以下样式之一：

另外，如果您已附加此主题，synthwave84.css则应将其安装到 VS Code 中；如果您使用我的 VS Code 深色主题扩展，则应Dark+ (default dark)在 VS Code 中选择主题。

之后，您需要重新加载 VS Code 以启用这些自定义 CSS 文件。
为此，您需要打开命令面板并选择“重新加载自定义 CSS 和 JS”。

之后你应该能在VS Code中看到CSS的修改了:)

或者，如果您附加了synthwave.css您的 VS Code 编辑器，它应该看起来像这样

如果你想调试和修改这个文件，你需要打开命令提示符并选择“开发者：切换开发者工具”。

它会打开开发者工具，该工具与谷歌浏览器中的开发者工具相同。

您的自定义样式会覆盖现有样式。

如果您有任何疑问，请随时在此提问。
感谢阅读本文，祝您阅读愉快！

菜单