CODEWITHSUNDEEP
visual-studio-codemarkdown
crash
crash

Reputation: 4512

Set background color on Visual Studio Code Markdown Preview

I'm currently using the default Dark+ color theme on Visual Studio Code and the markdown preview is using the same style (black background color and white text).

How can I change to a light theme just for the markdown preview, like dark text and white background? I've tried writing something like "markdown.preview.background": "#FFFFFF" in the settings.json file without success.

Thanks

Upvotes: 63

Views: 43383

Answers (10)

Niko Fohr
Niko Fohr

Reputation: 33920

One way to get white background color in markdown preview while having a dark VS Code theme is to use the Markdown Preview GitHub Styling VS Code extension by Matt Bierner.

As the Markdown Preview GitHub Styling by default selects the theme type (light vs dark) based on your VS Code theme, you need to set

    "markdown-preview-github-styles.colorTheme": "light",

In your settings.json. (Ctrl-Shift-P -> Preferences: Open Settings (JSON)).

Using VS Code on WSL or Remote session?

  • Then, you'll have to install the Markdown Preview GitHub Styling extension in the WSL / Remote machine, and edit the Remote Settings settings.json: (Ctrl-Shift-P -> Preferences: Open Remote Settings (JSON) (RemoteName))

Upvotes: 9

Valdas Stonkus
Valdas Stonkus

Reputation: 549

This guide for VScode Office Viewer(Markdown Editor) extension. The task is to make markdown background light and independent from VScode color theme.

  1. in vscode click F1, write "open settings (JSON)"
  2. in settings.json add this line: "vscode-office.autoTheme": false,
  3. reload vscode

Upvotes: 0

edersonrmachado
edersonrmachado

Reputation: 1

It was solved for me by changing the "editor.renderWhitespace": "none" property to true, in settings.json file:

{
    "editor.renderWhitespace": true
}

Upvotes: -1

BiGYaN
BiGYaN

Reputation: 7159

I stumbled upon this question while trying to render only parts of the document in white background. This is how you do it without messing the settings file.

my text in default styling

<div style="background: #FFFFFF; color: #000">
my text in black with white background
</div>

my text back in default styling

enter image description here

PS: You can this trick to render LaTeX equations for screenshotting to other editors.

Upvotes: 1

Collin Thomas
Collin Thomas

Reputation: 1710

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"

Markdown Preview Enhanced Dark Theme

Upvotes: 20

Akhila
Akhila

Reputation: 609

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

enter image description here

Upvotes: 27

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8188

Checkout this extension called Markdown Live which helps to preview markdown and it comes with a WYSIWG editor which will help to easily edit any markdown content. It also provides following features

  • Renders multiple .md files
  • Instantly sync changes from WYSIWG editor into text document and vice-versa
  • Supports vscode themes

Upvotes: 0

dhdhagar
dhdhagar

Reputation: 141

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"
    ]

Upvotes: 10

paddyfields
paddyfields

Reputation: 1539

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.

Upvotes: 19

Vladimir Mikulic
Vladimir Mikulic

Reputation: 171

  1. Create styles.css file in root of your directory/workspace.
  2. Add markdown.styles: ["styles.css"] in settings.json
  3. In styles.css, add body { background: #fff; }

To achieve the same thing without all this hassle, you could also do this:

<body style="background: #fff;">
// Your markdown code
</body>

Upvotes: 5

Related Questions