How can I add custom CSS styles to VS Code?

Question

I want to make some changes to the CSS of my VS Code installation, but it seems that the changes I want to make aren't supported by the current builtin style customization points. So basically, I want to customize the CSS of the VS Code editor/workbench / have userstylesheets in VS Code.

This is the CSS I want to use:

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; */
}

I saw this theme in BetterDiscord and trying to do the same in VS Code, but I dont know how: Fallout 4 Terminal

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

Resolved: VS Code custom theme

Naphtha

Answer 1

You currently can't do this without "performing surgery on VS Code" so to speak. VS Code colour themes don't allow arbitrary / custom CSS.

Workarounds

You can take a look at extensions like be5invis/vscode-custom-css or drcika.apc-extension ^{_{(I have no affiliation with these extensions)}}. The first one basically provides a configuration point for you to specify paths to CSS files you want to be imported into VS Code's own CSS files, and modifies your VS Code installation's files to import those files, which will cause VS Code to issue a corruption warning, since it performs startup checks to see if its installation has been tampered with (probably for security reasons to protect you, and which you can mark to not be shown again through the gear button menu).

Why VS Code chooses not to add such a feature

I googled "site:github.com/microsoft/vscode/issues custom css" and found Simple CSS Editor Customization #106750, which points toward Add some API to support GUI customization #1833, where exploring the linked tickets leads to Support user stylesheet(s) and user script(s) #459, which has a comment pointing to a rationale for why the VS Code team decided not to accept a Pull Request which implemented such a feature:

Thanks for this PR but we decided to not allow these kinds of modifications to our CSS directly. Rather, we think that our theming story should be evolved to allow more user configurations. See #26128, #26129 and #26130 for example.

The two main issues with this approach here is:

• basically this makes all of our CSS class names API (in the same way all of our themable colors have become API). we do not want to commit ourselves to keeping the CSS class names stable. rather we should find those styles that we want to make themable and then explicitly announce them as API (same as we did and do for colors)
• the other issue is that bug reports we receive will be harder to understand if users run with custom CSS changes that we are not aware of. we think that we should be in control of which user styles can be changed and provide explicit support for instead of opening the door to any CSS changes that are possible with this approach

^{See also https://www.hyrumslaw.com/.}

Willyt

Answer 2

You could try APC extension - it provides tweaking abilities to customize VS Code look and allows CSS injection.

Irizarry