Dark Mode Markdown Colour Scheme for VS Code

tips & tricks
1

I like to color markdown entities differently in VS code to distinguish between them. Below is a simple color scheme that I use with the dark mode (I use and recommend Atom One Dark theme, but the default VS code dark themes will do too). Just copy paste the code in your settings.json file.

The color scheme covers the basics - YAML/TOML frontmatter, quotes, headings, lists, markdown links, italics and bold. Enjoy!

Summary 
"editor.tokenColorCustomizations": {
		"comments": "#9E9E9E",
		"textMateRules": [{
			"scope": [
			"entity.name.tag.yaml",
			"keyword.key.toml",
            "meta.embedded.block.toml.frontmatter"
			],
			"settings": {
			"foreground": "#D19A66"
			}
			},
			{
			"scope": [
			"string.quoted.double.yaml",
			"string.unquoted.plain.out.yaml",
			"string.quoted.single.basic.line.toml"
			],
			"settings": {
			"foreground": "#C678DD"
			}
			},
			{
			"scope": [
			"markup.quote.markdown"
			],
			"settings": {
			"foreground": "#ffa226"
			}
			},
			{
			"scope": [
			"markup.list.unnumbered.markdown",
			"markup.list.numbered.markdown"
			],
			"settings": {
			"foreground": "#D19A66"
			}
			},
			{
			"scope": [
			"markup.bold.markdown"
			],
			"settings": {
			"foreground": "#f6230f"
			}
			},
			{
			"scope": [
			"markup.italic.markdown"
			],
			"settings": {
			"foreground": "#98C379"
			}
			},
			{
			"scope": [
			"markup.underline.link.markdown"
			],
			"settings": {
			"foreground": "#23c7ff"
			}
			}
		]
	}
1 Like
2

Nice, thanks!

see also the extension “Markdown Header Coloring”, to highlight titles and sub-titles. This makes the structure of Markdown files easier to understand.

Here are my settings:

    "markdown-header-coloring.userDefinedHeaderColor": {
        "enabled": true,
        "Header_1": {
            "color": "#da2c60",
            "textDecoration": "font-weight: 600; font-size: 2.4em;background:none;"
        },
        "Header_2": {
            "color": "#da2c60",
            "textDecoration": "font-weight: 600; font-size: 2.4em;background:none;"
        },
        "Header_3": {
            "color": "#da2c60CC",
            "textDecoration": "font-weight: 600; font-size: 1.8em;background:none;"
        },
        "Header_4": {
            "color": "#7e1937",
            "textDecoration": "font-weight: 600; font-size: 1.4em;background:none;"
        },
        "Header_5": {
            "color": "#7e1937",
            "textDecoration": "font-weight: 600; font-size: 1.4em;background:none;"
        },
        "Header_6": {
            "color": "#FF5252",
            "textDecoration": "font-weight: 600; font-size: 1.4em;background:none;"
        }
    },
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.