如何向 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 中执行相同的操作，但我不知道如何操作： Fallout 4 Terminal

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

已解决：VS Code 自定义主题

Answer 1

可以这么说，目前如果不“对 VS Code 进行手术”就无法做到这一点。VS Code 颜色主题不允许任意/自定义 CSS。

解决方法

你可以看一下^{_{（我与这个扩展没有任何关系）}}，这是一个目前处于测试阶段的扩展。它基本上提供了一个配置点，供您指定要导入到 VS Code 自己的 CSS 文件中的 CSS 文件的路径，并修改 VS Code 安装的文件以导入这些文件，这将导致 VS Code 发出损坏警告，因为它会执行启动检查，以查看其安装是否已被篡改（可能是出于安全原因以保护您，并且您可以通过齿轮按钮菜单将其标记为不再显示）。be5invis/vscode-custom-css

为什么 VS Code 选择不添加这样的功能

我用谷歌搜索“ site:github.com/microsoft/vscode/issues custom css”并找到Simple CSS Editor Customization #106750，它指向Add some API to support GUI optimization #1833，其中探索链接的票证会导致Support user stylesheet(s) and user script(s) #459，其中有一条评论指出了 VS Code 团队决定不接受实现此类功能的 Pull 请求的理由：

感谢您的 PR，但我们决定不允许直接对 CSS 进行此类修改。相反，我们认为我们的主题故事应该发展以允许更多的用户配置。例如，请参见#26128、#26129和#26130 。

这种方法的两个主要问题是：

• 基本上，这使得我们所有的 CSS 类名成为 API（就像我们所有的主题颜色都变成了 API）。我们不想致力于保持 CSS 类名的稳定。相反，我们应该找到那些我们想要使其可主题化的样式，然后将它们显式声明为 API（与我们对颜色所做的操作相同）
• 另一个问题是，如果用户使用我们不知道的自定义 CSS 更改来运行，我们收到的错误报告将更难以理解。我们认为我们应该控制哪些用户样式可以更改，并提供明确的支持，而不是为这种方法可能发生的任何 CSS 更改打开大门

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