Vim color schemes for HTML

I decided to explore what other color themes Vim offered to find one that worked well for me.

July 22, 2024

I like using Vim, the VI iMproved editor. I have a fondness for the classic vi editor, and Vim provides a ton of flexibility that works well for me. One power feature is how Vim makes it easy to edit files on remote systems over an ssh connection, such as editing pages on my website. With Vim, editing a file is just a keystroke away.

However, I’m not fond of the default color scheme that Vim uses; I find the colors a bit “too much” for me. And I don’t like how highlighting one bracket of a pair (like < and > in HTML tags) can make it appear as though my cursor has disappeared.

But Vim is very extensible, so I decided to explore what other color themes Vim offered to find one that worked well for me.

Trying out different colors

You can find the color themes in the /usr/share/vim/vim*/colors directory, with each theme file named with vim as the extension. My Linux system uses Vim 9.1, and my /usr/share/vim/vim91/colors path has these color themes installed by default:

$ cd /usr/share/vim/vim91/colors
$ ls *.vim
blue.vim      elflord.vim   lunaperche.vim  quiet.vim     sorbet.vim
darkblue.vim  evening.vim   morning.vim     retrobox.vim  torte.vim
default.vim   habamax.vim   murphy.vim      ron.vim       wildcharm.vim
delek.vim     industry.vim  pablo.vim       shine.vim     zaibatsu.vim
desert.vim    koehler.vim   peachpuff.vim   slate.vim     zellner.vim

To set the color theme in Vim, you use the colorscheme command with the name of one of the themes. So colorscheme blue will load the blue color theme.

I wanted to see what each color scheme would look like when editing a program, so I wrote a simple HTML page (a brief description about HTML for technical writers). In the screenshot, I also moved my cursor to the > bracket in the </p> tag to close the paragraph, so you can see how Vim highlights the matching < bracket.

I loaded the different color schemes separately while editing the HTML file, and captured a screenshot of each.

As you can see in this montage image, the Vim color schemes include “dark” and “light” themes, and a few in between. Some also have an additional feature that shows non-file lines at the end of the file. Vim normally displays ~ on these extra lines, but a few color schemes also add an extra color to visually separate these lines from the rest of the file.

My favorite color schemes

I really like the blue color scheme. This uses traditional white-on-blue colors, providing extra color highlighting for tags and keywords. For example, note that the html element name in <html lang="en"> is a different color than its attribute, and the string is also a different color - these make the code stand out. However, I’m less fond of how the color scheme changes the cursor color when matching the < and > braces; my cursor seems to disappear.

I also like the evening color scheme. This is another “dark” color theme that is easy on the eyes when writing code. The text is easy to read, and the highlighting helps separate elements, attributs, and other features from the code. Note that this theme highlights the non-file lines at the end in a different shade of gray. I also like that this theme keeps my cursor visible while highlighting the matching < and > pairs.

If you prefer a lighter theme, you may like the morning color scheme instead. This uses a light gray background, so it’s not as hard on the eyes like a bright white background would be. This color scheme also highlights the non-file lines at the end, but my cursor tends to disappear when highlighting the matching brackets.

I really like the quiet color scheme. This is almost a monochrome theme, showing text in black and white, but using a dark gray for comments. My cursor remains visible when highlighting the matching < and > pairs, using a different color to make them stand out. Of all the Vim color themes, this is the most reminiscent of original vi on classic Unix terminals – but with a modern twist.

Find your favorite

I love that Vim is so flexible and supports extensions like color schemes. This allows me to customize Vim to my preferences and suit my needs. Explore the different Vim color themes available on your system to find the one that works best for your style.

This article is adapted from My favorite Vim color schemes by Jim Hall, and is reused with the author’s permission.

Jim Hall is an open source software advocate and technical writer. At work, Jim is CEO of Hallmentum, an IT executive consulting company that provides hands-on IT Leadership training, workshops, and coaching.