我该如何在VS Code中添加自定义CSS样式？

Question

我想对我的VS Code安装进行一些CSS方面的更改，但似乎我想要进行的更改并不受当前内置样式自定义点的支持。因此，基本上，我想要自定义VS Code编辑器/工作台的CSS，或在VS Code中使用用户样式表。

这是我想要使用的CSS：

body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%
        ),
        linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.06),
            rgba(0, 255, 0, 0.02),
            rgba(0, 0, 255, 0.06)
        );
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    /* pointer-events: none; */
}

我在BetterDiscord中看到了这个主题，想在VS Code中尝试相同的效果，但我不知道如何实现： 辐射4终端

链接：(https://gibbu.github.io/ThemePreview/?file=https://cdn.jsdelivr.net/gh/CommandCrafterHD/Fallout4TerminalTheme/Fallout4Terminal.theme.css)

已解决：VS Code自定义主题

- mksaadi8

Answer 1

目前你无法在 VS Code 上 "进行手术" 来实现这一点。VS Code 色彩主题不允许任意/自定义 CSS。

解决方法

你可以查看be5invis/vscode-custom-css^{_{(我与该扩展没有任何关联)}}，这是一个目前处于测试版的扩展。它基本上提供了一个配置点，让你指定要导入到 VS Code 自己的 CSS 文件中的 CSS 文件路径，并修改你的 VS Code 安装文件来导入那些文件。这将导致 VS Code 发出损坏警告，因为它在启动时会执行检查以查看安装是否被篡改（可能出于安全原因保护您），如果你觉得可以的话，你可以尝试安装另一个扩展来抑制警告：lehni.vscode-fix-checksums^{_{(我与该扩展没有任何关联)}}。

为什么 VS Code 选择不添加此功能

我在谷歌上搜索了“site:github.com/microsoft/vscode/issues custom css”，找到了Simple CSS Editor Customization #106750，它指向Add some API to support GUI customization #1833，通过探索相关联的票证，我们可以找到Support user stylesheet(s) and user script(s) #459，其中有a comment pointing to a rationale for why the VS Code team decided not to accept a Pull Request which implemented such a feature的评论。

谢谢你提供这个PR，但我们决定不允许直接修改我们的CSS。相反，我们认为我们的主题故事应该进一步发展，以允许更多用户配置。例如，请参见#26128，#26129和#26130。

这种方法存在两个主要问题： 基本上，这使得我们所有的CSS类名都成为API（就像我们所有的可主题化颜色一样）。我们不希望承诺保持CSS类名的稳定性。相反，我们应该找到那些我们想要使其可主题化的样式，并明确将它们公布为API（就像我们对颜色所做的一样）。 另一个问题是，如果用户运行自定义CSS更改，而我们不知道这些更改，那么我们收到的错误报告将更难理解。我们认为我们应该控制哪些用户样式可以更改，并提供明确的支持，而不是打开任何可能通过这种方法进行的CSS更改的大门。

另请参阅https://www.hyrumslaw.com/。

- starball