Set background color on Visual Studio Code Markdown Preview

Solution 1:

A simple way to achieve this other than creating your own stylesheet for each project, is by installing the Markdown Preview Enhanced extension. The default markdown theme for the extension is white, but you can also choose a different them by setting the "markdown-preview-enhanced.previewTheme" in settings.json

"markdown-preview-enhanced.previewTheme": "medium.css"

A full list of available themes will be displayed as you start typing in the json value.

Solution 2:

I had the same problem and could not find an out-of-the-box solution to fix it. So I went ahead and made a modified version of the default markdown.css to work for the Dark+ theme: https://github.com/dhdhagar/vscode-md-preview-light.

In VSCode, just edit the Markdown: Styles configuration or add the following line to settings.json:

"markdown.styles": [
        "https://cdn.jsdelivr.net/gh/dhdhagar/vscode-md-preview-light/style.min.css"
    ]

Solution 3:

On the Visual Studio Code markdown documentation page they have actually used the extension Markdown Preview Github Styling

Solution 4:

With the Markdown Preview Enhanced extension you can choose your theme now in either the GUI or settings.json. Time of writing 2021-04-08

"markdown-preview-enhanced.previewTheme": "github-dark.css"