57

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

3

10 Answers 10

23

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

enter image description here

1
  • 1
    Thanks so much, this worked. Once installed, you search for markdown-preview-github-styles.colorTheme in settings and can choose your light or dark preferences.
    – Azurespot
    Commented Dec 8, 2023 at 19:06
19

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.

1
  • Thank you so much. I was looking to switch from light to dark and there's a setting for that in the extension. My eyes are saved.
    – Azurespot
    Commented Feb 17, 2023 at 23:51
17

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

3
  • 1
    This is NOT built in functionality.. You have to install a plugin in order to get it working! Commented Apr 9, 2021 at 11:33
  • Sorry I should have specified built-in to Markdown Preview Enhanced extension. Commented Apr 9, 2021 at 17:37
  • Did they remove this setting? I can't find it in the Command Palette and can't set it.
    – Bridge
    Commented Aug 17, 2022 at 16:28
9

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

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))
1
  • how would it be so that the parts of the code (```bash) look dark and the rest white?
    – acgbox
    Commented Jul 24 at 15:40
5
  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>
2
  • In settings.json Commented Sep 3, 2019 at 15:18
  • 1
    Note that, by using a css file, VS Code doesn't update preview panel instantly to reflect changes. Background style seems to be reflected in preview panel upon opening only.
    – marckassay
    Commented Jan 31, 2020 at 17:45
1

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.

0

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
0

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
-1

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

{
    "editor.renderWhitespace": true
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.