Change background colour for Visual Studio Code

Question

How can we change the background colour in Visual Studio Code?

Schacker

It's annoying that EVERY single answer is for Visual Studio and NOT for Visual Studio Code. I'd mark them all down but it's pointless. – Rosina

Edited out the use of 'Visual Studio Code Editor' to refer to Visual Studio. When this question was asked 6 years ago the wording made sense. Since the release of Visual Studio Code (the text editor) it's very confusing! – Qianaqibla

@Qianaqibla It was explicitly asked about VS Code, not about Visual Studio. I was using Visual Studio Code at a moment the question was asked. Why you even changed it? – Medrano

@Medrano ah sorry about that - I think it was because the title said Visual Studio and because it also had the visual-studio tag. Was just trying to help out, thought it might have been a typo in the question :-) Have changed back (and updated the title and tag) – Qianaqibla

Answer 1

Jeff Atwood wrote a blog post (some years ago actually) for customizing VS code editor with custom fonts, background etc...

This may point you to some interesting resources. Here's the link: http://www.codinghorror.com/blog/archives/000682.html

Dormancy

That was a great posting and got me totally inspired to make my colors more intuitive. – Glottochronology

exactly,the only problem I see is when you do frequent pair programming sessions that your team member may get confused by your changed syntax colouring. – Dormancy

well, that posting is from 2006 and it is also about fonts, not just colors; personally I would say the best font for code/programmers is DejaVu Monospace, the default terminal font in debian/ubuntu, and as it is free, it works in Visual Studio and windows command prompt as well: dejavu-fonts.github.io – Hertha

Answer 2

And the correct answer is (Visual Studio 2010):

From the menus:

Tools -> Options --> Environment -> Fonts and Colors:

Select "Plain Text".

On the right of that, under "Item backgroud:" hit the dropdown list.

As you will see, the "default" list of colours in here are way too strong for a background, so you'll have to hit "Custom...".

I highly recommend a very, very pale creamy yellow colour. When you've dragged the crosshair over the exact colour you wish, hit the hue arrow sidebar indicator on the right of the colour palette in order to view your selected colour in the "Color" indicator.

If you wish to save this colour for future reference, click on a vacant white space under "Custom Colours:", and hit the "Add to Custom Colors" button. Your newly selected colour will be saved here. Click OK twice.

Tip: In order to overwrite any of these custom colours with a new one, make sure you click the required square so the dotted surround appears, before adding the new colour to the palette position.

My work is done here.

:)

Stilbite

This will also affect the text in the code editor. But another answer by Rahul (below) gives instructions to add a color theme to the editor. Both answers are helpful. – Shlomo

Answer 3

Tools --> Options --> Environment --> Fonts and Colors

Canea

heh. what about search window. That one isn't listed. – Photocopy

Answer 4

Its really simple to customize the background of Visual Studio 2013. Here is it :

• Tools
• Options
• Environment -> General

P.S : Works in Visual Studio 2012 & 2013

Gaunt

This was the most helpful for me. I want to make the disabled code, namely disabled macros, appear in a more differential color scheme than the overall scheme selected. Using the Blue or Light themes worked best, for me. – Detrition

this is a visual studio answer. the question is about VS Code. – Lynch

Answer 5

In File->Preferences->Color Theme

Zambrano

This is Visual Studio Code, he was asking about Visual Studio. These are seperate so this isn't the same process – Hypoglycemia

Answer 6

This is the only one right answer on this whole page as people answered about "Visual Studio", not "Visual Studio Code":

To change color theme in "Visual Studio Code", use:

File -> Preferences -> Color Theme -> select any color theme you like

You can also download other custom themes as extensions. To do that, open extensions tab on sidebar and type "theme" into the search field to filter extensions only to themes related ones. Click any you like, click "download" and then "install". After installation and restarting VSC, you can find newly installed themes next to default themes in the same place:

File -> Preferences -> Color Theme -> select newly downloaded color theme

PS - Microsoft made bad naming decision by calling this new editor Visual Studio Code, it's terrible how many wrong links we have in google and stackoverflow. They should rename it to VSCode or something.

Medrano

But this page isn't about Visual Studio Code, so yours is in fact the only wrong answer. :) – Brainchild

This page is (well… was…) all about Visual Studio Code, but one very kind person decided to edit the question to match it with all the wrong answers, lol. Please check the original question before the edit. – Medrano

and that doesn't answer the question of just changing the background color... How do you do that, without changing everything by picking another theme? – Petromilli

Two thumbs up for renaming to VSCode! – Algolagnia

Answer 7

Tools -> Options -> Under the Environment section there are Fonts & Colors, change the Item Background.

Latin

Answer 8

basically same for VS2012e: TOOLS > Options > Environment > Fonts and Colors > Display Items: Plain Text > "Item background" dropdown selector

Mordred

Answer 9

File-> Preferences-> Settings.

Find workbench.colorCustomizations object, change its editor.background property and save (you will see the results immediately — no need to restart vs code). Or you just can copy my current config file vs code config gist.

Rhodic

Answer 10

2019

Tools -> Options --> Environment -> Fonts and Colors:

Louannlouanna

Answer 11

Latest version config below:

Go to File -> Preference -> Color Theme then you will see the available colors in main search bar

Pereyra

Answer 12

The background color of the Visual Studio text editor in a Theme Editor is accessed by:

Text Editor → Plain Text → Background

Barbershop

To find the item you might have to change from Show common elements to Show all elements; two icons at the top. – Festa

Answer 13

One line answer, F1 -> search for "Color Theme" -> select the color you like

Florrie

Answer 14

The easiest solution is to use

Visual Studio 2012 Color Theme

Mane

Answer 15

You can also use the Visual Studio Theme Generator. I have only tried this with VS 2005, but the settings it generates may work with newer versions of VS as well.

In case the link goes dead in the future here is a dark theme I generated. Just put this text into a file named VS_2005_dark_theme.vssettings and import it using Tools -> Import and Export Settings:

<UserSettings>
    <ApplicationIdentity version="8.0"/>
    <ToolsOptions>
        <ToolsOptionsCategory name="Environment" RegisteredName="Environment"/>
    </ToolsOptions>
    <Category name="Environment_Group" RegisteredName="Environment_Group">
        <Category name="Environment_FontsAndColors" Category="{1EDA5DD4-927A-43a7-810E-7FD247D0DA1D}" Package="{DA9FB551-C724-11d0-AE1F-00A0C90FFFC3}" RegisteredName="Environment_FontsAndColors" PackageName="Visual Studio Environment Package">
            <PropertyValue name="Version">2</PropertyValue>
            <FontsAndColors Version="2.0">
                <Categories>
                    <Category GUID="{5C48B2CB-0366-4FBF-9786-0BB37E945687}" FontName="PalmOS" FontSize="8" CharSet="0" FontIsDefault="No">
                        <Items>
                            <Item Name="Plain Text" Foreground="0x0000FF00" Background="0x00003700" BoldFont="No"/>
                            <Item Name="Selected Text" Foreground="0x00003700" Background="0x0000FF00" BoldFont="No"/>
                            <Item Name="Inactive Selected Text" Foreground="0x00003700" Background="0x00009100" BoldFont="No"/>
                            <Item Name="Current list location" Foreground="0x00A3DBFF" Background="0x01000007" BoldFont="No"/>
                        </Items>
                    </Category>
                    <Category GUID="{9973EFDF-317D-431C-8BC1-5E88CBFD4F7F}" FontName="PalmOS" FontSize="8" CharSet="0" FontIsDefault="No">
                        <Items>
                            <Item Name="Plain Text" Foreground="0x0057C732" Background="0x0017340E" BoldFont="No"/>
                            <Item Name="Selected Text" Foreground="0x00003700" Background="0x0000FF00" BoldFont="No"/>
                            <Item Name="Inactive Selected Text" Foreground="0x00003700" Background="0x00009100" BoldFont="No"/>
                            <Item Name="Current list location" Foreground="0x00A3DBFF" Background="0x01000007" BoldFont="No"/>
                        </Items>
                    </Category>
                    <Category GUID="{A27B4E24-A735-4D1D-B8E7-9716E1E3D8E0}" FontName="Monaco" FontSize="9" CharSet="0" FontIsDefault="No">
                        <Items>
                            <Item Name="Plain Text" Foreground="00CFCFCF" Background="00383838" BoldFont="No"/>
                            <Item Name="Indicator Margin" Foreground="0x02000000" Background="00383838" BoldFont="No"/>
                            <Item Name="Line Numbers" Foreground="00828282" Background="00383838" BoldFont="No"/>
                            <Item Name="Visible White Space" Foreground="0x00808080" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Comment" Foreground="00828282" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Compiler Error" Foreground="000000F0" Background="0x02000000" BoldFont="No"/>
                            <Item Name="CSS Comment" Foreground="00828282" Background="0x02000000" BoldFont="No"/>
                            <Item Name="CSS Keyword" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="CSS Property Name" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="CSS Property Value" Foreground="00F12FFE" Background="0x02000000" BoldFont="No"/>
                            <Item Name="CSS Selector" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="CSS String Value" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="HTML Attribute" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="HTML Attribute Value" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="HTML Comment" Foreground="00828282" Background="0x02000000" BoldFont="No"/>
                            <Item Name="HTML Element Name" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="HTML Operator" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Identifier" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Keyword" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Number" Foreground="002FFE60" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Operator" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Preprocessor Keyword" Foreground="00FE2F8C" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Stale Code" Foreground="0x00808080" Background="0x00C0C0C0" BoldFont="No"/>
                            <Item Name="String" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="String (C# Verbatim)" Foreground="00FE2F8C" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Task List Shortcut" Foreground="0x00FFFFFF" Background="0x02C0C0C0" BoldFont="No"/>
                            <Item Name="User Keywords" Foreground="00F12FFE" Background="0x02000000" BoldFont="No"/>
                            <Item Name="User Types" Foreground="00D64EDF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="Warning" Foreground="000000F0" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Attribute" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Attribute Quotes" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Attribute Value" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Comment" Foreground="00828282" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Delimiter" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Keyword" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Markup Extension Class" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Markup Extension Parameter Name" Foreground="00F12FFE" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Markup Extension Parameter Value" Foreground="00D64EDF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Name" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Processing Instruction" Foreground="00FE2F8C" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XAML Text" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>                            
                            <Item Name="XML @ Attribute" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Attribute Quotes" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Attribute Value" Foreground="0032FE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Comment" Foreground="00828282" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Delimiter" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Doc Attribute" Foreground="00D64EDF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Doc Comment" Foreground="00828282" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Doc Tag" Foreground="00D64EDF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Keyword" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Name" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Processing Instruction" Foreground="0x0015496C" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XML Text" Foreground="00CFCFCF" Background="0x02000000" BoldFont="No"/>
                            <Item Name="XSLT Keyword" Foreground="00FECE2F" Background="0x02000000" BoldFont="No"/>                                                                 
                        </Items>
                    </Category>
                </Categories>
            </FontsAndColors>
        </Category>
    </Category>
</UserSettings>

Marijuana