Categories
Development

Switching Between Visual Studio Code Themes Doesn’t Have to Strain Your Brain & Eyesight ☢️🧠👀

I do development. I code most of the day, hammering strategically at my Stackable WordPress plugin. I probably stare at Visual Studio Code for at least 8 hours a day, every day. So you can understand why I want to keep my eyes safe and sound.

I do development. I code most of the day, hammering strategically at my Stackable WordPress plugin. I probably stare at Visual Studio Code for at least 8 hours a day, every day.

So you can understand why I want to keep my eyes safe and sound.

I’ve grown accustomed to using a dark theme when editing code – Base16 Tomorrow Dark to be exact (I used to use Atom). It’s awesome. But staring at the same colors can be boring after a few months.

Good thing VS Code has a lot of themes available for free created by the community.

My main problem with themes though is that they do require some getting used to. I can’t seem to switch between one theme from the next right away. I think my main concern is that my brain has been convinced that code should always be colored text against an almost black background – not dark ocean blue (which seems to be very popular), not deep dark red and not purple.

To fix this, I’ve come up with a short set of customizations for VS Code that will make sure that the editor area is always almost black, while retaining all of the cool color combinations themes offer.

To use it, head to your VS Code, go to your preferences, and find the Color Customizations option. Click on the Edit in settings.json link and then add the following code in your Workspace Settings:

{
	"workbench.colorCustomizations": {
		"statusBar.background" : "#1A1A1A",
		"editor.background": "#1a1a1a",
		"sideBar.background": "#1a1a1a",
		"activityBar.background": "#1a1a1a",
		"panel.background": "#222",
		"editorGutter.background": "#1d1d1d",
		"editorIndentGuide.background": "#2a2a2a",
		"editorIndentGuide.activeBackground": "#2a2a2a",
		"editor.lineHighlightBackground": "#2a2a2a",
	},
}

After adding those color customizations, your editor area will always remain dark regardless of what theme you’re using.

🤘

I’m trying out One Dark Pro Bold right now and the color combination works great:

It also still works for more adventurous themes like Shades of Purple:

..or add contrast to ones which seem to make your entire code look as if it’s disabled:

..or tame really wild themes which I have no idea why any person would use like this “all red” theme:

By Benjamin Intal

Benjamin is an avid WordPress plugin developer, a full-stack developer, owner and lead developer of Gambit, founder of Stackable Blocks, Page Builder Sandwich, and creator of more than 30 WordPress plugins in CodeCanyon.

Connect with me on Twitter @bfintal

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.