- Download Microsoft Visual Studio For Mac
- Visual Studio For Mac Os
- Microsoft Visual Studio For Mac
- Visual Studio
https://zoever972.weebly.com/visual-studio-for-mac-review.html. You can customize your active Visual Studio Code color theme with the
workbench.colorCustomizations
user setting.Note: If you want to use an existing color theme, see Color Themes where you'll learn how to set the active color theme through the Preferences: Color Theme dropdown (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)).
Color formats
Visual Studio for Mac is an IDE from Microsoft for Mac users. Use this tag if you have a specific question about Visual Studio for Mac features and functionality, not just a question regarding your code. In this article, we will show grid rows of Qualified Leads in Green Color, Lost or Disqualified Leads in Red color and Newly created Leads in Yellow Color Step 1: Create a web resource of JavaScript Type and paste the below code under Text Editor.
Color values can be defined in the RGB color model with an alpha channel for transparency. As format, the following hexadecimal notations are supported:
#RGB
, #RGBA
, #RRGGBB
and #RRGGBBAA
. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, a-f or A-F). The three-digit notation (#RGB
) is a shorter version of the six-digit form (#RRGGBB
) and the four-digit RGB notation (#RGBA
) is a shorter version of the eight-digit form (#RRGGBBAA
). For example #e35f
is the same color as #ee3355ff
.If no alpha value is defined, it defaults to
ff
(opaque, no transparency). If alpha is set to 00
, the color is fully transparent.Some colors should not be opaque in order to not cover other annotations. Check the color descriptions to see to which colors this applies.
Contrast colors
The contrast colors are typically only set for high contrast themes. If set, they add an additional border around items across the UI to increase the contrast.
contrastActiveBorder
: An extra border around active elements to separate them from others for greater contrast.contrastBorder
: An extra border around elements to separate them from others for greater contrast.
Base colors
focusBorder
: Overall border color for focused elements. This color is only used if not overridden by a component.foreground
: Overall foreground color. This color is only used if not overridden by a component.widget.shadow
: Shadow color of widgets such as Find/Replace inside the editor.selection.background
: Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).descriptionForeground
: Foreground color for description text providing additional information, for example for a label.errorForeground
: Overall foreground color for error messages (this color is only used if not overridden by a component).
Text colors
Colors inside a text document, such as the welcome page.
textBlockQuote.background
: Background color for block quotes in text.textBlockQuote.border
: Border color for block quotes in text.textCodeBlock.background
: Background color for code blocks in text.textLink.activeForeground
: Foreground color for links in text when clicked on and on mouse hover.textLink.foreground
: Foreground color for links in text.textPreformat.foreground
: Foreground color for preformatted text segments.textSeparator.foreground
: Color for text separators.
Button control
A set of colors for button widgets such as Open Folder button in the Explorer of a new window.
button.background
: Button background color.button.foreground
: Button foreground color.button.hoverBackground
: Button background color when hovering.checkbox.background
: Background color of checkbox widget.checkbox.foreground
: Foreground color of checkbox widget.checkbox.border
: Border color of checkbox widget.
Dropdown control
A set of colors for all Dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the Dropdown control is not used on macOS currently.
dropdown.background
: Dropdown background.dropdown.listBackground
: Dropdown list background.dropdown.border
: Dropdown border.dropdown.foreground
: Dropdown foreground.
Input control
Colors for input controls such as in the Search view or the Find/Replace dialog.
input.background
: Input box background.input.border
: Input box border.input.foreground
: Input box foreground.input.placeholderForeground
: Input box foreground color for placeholder text.inputOption.activeBackground
: Background color of activated options in input fields.inputOption.activeBorder
: Border color of activated options in input fields.inputValidation.errorBackground
: Input validation background color for error severity.inputValidation.errorForeground
: Input validation foreground color for error severity.inputValidation.errorBorder
: Input validation border color for error severity.inputValidation.infoBackground
: Input validation background color for information severity.inputValidation.infoForeground
: Input validation foreground color for information severity.inputValidation.infoBorder
: Input validation border color for information severity.inputValidation.warningBackground
: Input validation background color for information warning.inputValidation.warningForeground
: Input validation foreground color for warning severity.inputValidation.warningBorder
: Input validation border color for warning severity.
Scrollbar control
scrollbar.shadow
: Scrollbar slider shadow to indicate that the view is scrolled.scrollbarSlider.activeBackground
: Scrollbar slider background color when clicked on.scrollbarSlider.background
: Scrollbar slider background color.scrollbarSlider.hoverBackground
: Scrollbar slider background color when hovering.
Badge
Badges are small information labels, for example, search results count.
badge.foreground
: Badge foreground color.badge.background
: Badge background color.
Progress bar
progressBar.background
: Background color of the progress bar shown for long running operations.
Lists and trees
Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.
list.activeSelectionBackground
: List/Tree background color for the selected item when the list/tree is active.list.activeSelectionForeground
: List/Tree foreground color for the selected item when the list/tree is active.list.dropBackground
: List/Tree drag and drop background when moving items around using the mouse.list.focusBackground
: List/Tree background color for the focused item when the list/tree is active.list.focusForeground
: List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.list.highlightForeground
: List/Tree foreground color of the match highlights when searching inside the list/tree.list.hoverBackground
: List/Tree background when hovering over items using the mouse.list.hoverForeground
: List/Tree foreground when hovering over items using the mouse.list.inactiveSelectionBackground
: List/Tree background color for the selected item when the list/tree is inactive.list.inactiveSelectionForeground
: List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.list.inactiveFocusBackground
: List background color for the focused item when the list is inactive. An active list has keyboard focus, an inactive does not. Currently only supported in lists.list.invalidItemForeground
: List/Tree foreground color for invalid items, for example an unresolved root in explorer.list.errorForeground
: Foreground color of list items containing errors.list.warningForeground
: Foreground color of list items containing warnings.listFilterWidget.background
: List/Tree Filter background color of typed text when searching inside the list/tree.listFilterWidget.outline
: List/Tree Filter Widget's outline color of typed text when searching inside the list/tree.listFilterWidget.noMatchesOutline
: List/Tree Filter Widget's outline color when no match is found of typed text when searching inside the list/tree.tree.indentGuidesStroke
: Tree Widget's stroke color for indent guides.
Activity Bar
The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.
activityBar.background
: Activity Bar background color.activityBar.dropBackground
: Drag and drop feedback color for the Activity Bar items.activityBar.foreground
: Activity bar foreground color (for example used for the icons).activityBar.inactiveForeground
: Activity bar item foreground color when it is inactive.activityBar.border
: Activity Bar border color with the Side Bar.activityBarBadge.background
: Activity notification badge background color.activityBarBadge.foreground
: Activity notification badge foreground color.
Side Bar
The Side Bar contains views like the Explorer and Search.
sideBar.background
: Side Bar background color.sideBar.foreground
: Side Bar foreground color. The Side Bar is the container for views like Explorer and Search.sideBar.border
: Side Bar border color on the side separating the editor.sideBar.dropBackground
: Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through. The side bar is the container for views like explorer and search.sideBarTitle.foreground
: Side Bar title foreground color.sideBarSectionHeader.background
: Side Bar section header background color.sideBarSectionHeader.foreground
: Side Bar section header foreground color.sideBarSectionHeader.border
: Side bar section header border color.
Minimap
The Minimap shows a minified version of the current file.
minimap.findMatchHighlight
: Highlight color for matches from search within files
Editor Groups & Tabs
Editor Groups are the containers of editors. There can be many editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.
editorGroup.border
: Color to separate multiple editor groups from each other.editorGroup.dropBackground
: Background color when dragging editors around.editorGroupHeader.noTabsBackground
: Background color of the editor group title header when Tabs are disabled (set'workbench.editor.showTabs': false
).editorGroupHeader.tabsBackground
: Background color of the Tabs container.editorGroupHeader.tabsBorder
: Border color of the editor group title header when tabs are enabled.editorGroup.emptyBackground
: Background color of an empty editor group.editorGroup.focusedEmptyBorder
: Border color of an empty editor group that is focused.tab.activeBackground
: Active Tab background color in an active group.tab.unfocusedActiveBackground
: Active Tab background color in an inactive editor group.tab.activeForeground
: Active Tab foreground color in an active group.tab.border
: Border to separate Tabs from each other.tab.activeBorder
: Bottom border for the active tab.tab.unfocusedActiveBorder
: Bottom border for the active tab in an inactive editor group.tab.activeBorderTop
: Top border for the active tab.tab.unfocusedActiveBorderTop
: Top border for the active tab in an inactive editor grouptab.inactiveBackground
: Inactive Tab background color.tab.inactiveForeground
: Inactive Tab foreground color in an active group.tab.unfocusedActiveForeground
: Active tab foreground color in an inactive editor group.tab.unfocusedInactiveForeground
: Inactive tab foreground color in an inactive editor group.tab.hoverBackground
: Tab background color when hoveringtab.unfocusedHoverBackground
: Tab background color in an unfocused group when hoveringtab.hoverBorder
: Border to highlight tabs when hoveringtab.unfocusedHoverBorder
: Border to highlight tabs in an unfocused group when hoveringtab.activeModifiedBorder
: Border on the top of modified (dirty) active tabs in an active group.tab.inactiveModifiedBorder
: Border on the top of modified (dirty) inactive tabs in an active group.tab.unfocusedActiveModifiedBorder
: Border on the top of modified (dirty) active tabs in an unfocused group.tab.unfocusedInactiveModifiedBorder
: Border on the top of modified (dirty) inactive tabs in an unfocused group.editorPane.background
: Background color of the editor pane visible on the left and right side of the centered editor layout.
Editor colors
The most prominent editor colors are the token colors used for syntax highlighting and are based on the language grammar installed. These colors are defined by the Color Theme but can also be customized with the
editor.tokenColorCustomizations
setting. See Customizing a Color Theme for details on updating a Color Theme and the available token types.All other editor colors are listed here:
editor.background
: Editor background color.editor.foreground
: Editor default foreground color.editorLineNumber.foreground
: Color of editor line numbers.editorLineNumber.activeForeground
: Color of the active editor line number.editorCursor.background
: The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.editorCursor.foreground
: Color of the editor cursor.
Selection colors are visible when selecting one or more characters. In addition to the selection also all regions with the same content are highlighted.
editor.selectionBackground
: Color of the editor selection.editor.selectionForeground
: Color of the selected text for high contrast.editor.inactiveSelectionBackground
: Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations.editor.selectionHighlightBackground
: Color for regions with the same content as the selection. The color must not be opaque so as not to hide underlying decorations.editor.selectionHighlightBorder
: Border color for regions with the same content as the selection.
Word highlight colors are visible when the cursor is inside a symbol or a word. Depending on the language support available for the file type, all matching references and declarations are highlighted and read and write accesses get different colors. If document symbol language support is not available, this falls back to word highlighting.
editor.wordHighlightBackground
: Background color of a symbol during read-access, for example when reading a variable. The color must not be opaque so as not to hide underlying decorations.editor.wordHighlightBorder
: Border color of a symbol during read-access, for example when reading a variable.editor.wordHighlightStrongBackground
: Background color of a symbol during write-access, for example when writing to a variable. The color must not be opaque so as not to hide underlying decorations.editor.wordHighlightStrongBorder
: Border color of a symbol during write-access, for example when writing to a variable.
Find colors depend on the current find string in the Find/Replace dialog.
editor.findMatchBackground
: Color of the current search match.editor.findMatchHighlightBackground
: Color of the other search matches. The color must not be opaque so as not to hide underlying decorations.editor.findRangeHighlightBackground
: Color the range limiting the search (Enable 'Find in Selection' in the find widget). The color must not be opaque so as not to hide underlying decorations.editor.findMatchBorder
: Border color of the current search match.editor.findMatchHighlightBorder
: Border color of the other search matches.editor.findRangeHighlightBorder
: Border color the range limiting the search (Enable 'Find in Selection' in the find widget).
The hover highlight is shown behind the symbol for which a hover is shown.
editor.hoverHighlightBackground
: Highlight below the word for which a hover is shown. The color must not be opaque so as not to hide underlying decorations.
The current line is typically shown as either background highlight or a border (not both).
editor.lineHighlightBackground
: Background color for the highlight of line at the cursor position.editor.lineHighlightBorder
: Background color for the border around the line at the cursor position.
The link color is visible when clicking on a link.
editorLink.activeForeground
: Color of active links.
The range highlight is visible when selecting a search result.
editor.rangeHighlightBackground
: Background color of highlighted ranges, used by Quick Open, Symbol in File and Find features. The color must not be opaque so as not to hide underlying decorations.editor.rangeHighlightBorder
: Background color of the border around highlighted ranges.
To see the editor white spaces, enable Toggle Render Whitespace.
editorWhitespace.foreground
: Color of whitespace characters in the editor.
To see the editor indent guides, set
'editor.renderIndentGuides': true
.editorIndentGuide.background
: Color of the editor indentation guides.editorIndentGuide.activeBackground
: Color of the active editor indentation guide.
To see editor rulers, define their location with
'editor.rulers'
editorRuler.foreground
: Color of the editor rulers.
CodeLens:
editorCodeLens.foreground
: Foreground color of an editor CodeLens.
Bracket matches:
editorBracketMatch.background
: Background color behind matching brackets.editorBracketMatch.border
: Color for matching brackets boxes.
Overview ruler:
This ruler is located beneath the scroll bar on the right edge of the editor and gives an overview of the decorations in the editor.
editorOverviewRuler.border
: Color of the overview ruler border.editorOverviewRuler.findMatchForeground
: Overview ruler marker color for find matches. The color must not be opaque so as not to hide underlying decorations.editorOverviewRuler.rangeHighlightForeground
: Overview ruler marker color for highlighted ranges, like by the Quick Open, Symbol in File and Find features. The color must not be opaque so as not to hide underlying decorations.editorOverviewRuler.selectionHighlightForeground
: Overview ruler marker color for selection highlights. The color must not be opaque so as not to hide underlying decorations.editorOverviewRuler.wordHighlightForeground
: Overview ruler marker color for symbol highlights. The color must not be opaque so as not to hide underlying decorations.editorOverviewRuler.wordHighlightStrongForeground
: Overview ruler marker color for write-access symbol highlights. The color must not be opaque so as not to hide underlying decorations.editorOverviewRuler.modifiedForeground
: Overview ruler marker color for modified content.editorOverviewRuler.addedForeground
: Overview ruler marker color for added content.editorOverviewRuler.deletedForeground
: Overview ruler marker color for deleted content.editorOverviewRuler.errorForeground
: Overview ruler marker color for errors.editorOverviewRuler.warningForeground
: Overview ruler marker color for warnings.editorOverviewRuler.infoForeground
: Overview ruler marker color for infos.editorOverviewRuler.bracketMatchForeground
: Overview ruler marker color for matching brackets.
Errors and warnings:
Download Microsoft Visual Studio For Mac
editorError.foreground
: Foreground color of error squiggles in the editor.editorError.border
: Border color of error boxes in the editor.editorWarning.foreground
: Foreground color of warning squiggles in the editor.editorWarning.border
: Border color of warning boxes in the editor.editorInfo.foreground
: Foreground color of info squiggles in the editor.editorInfo.border
: Border color of info boxes in the editor.editorHint.foreground
: Foreground color of hints in the editor.editorHint.border
: Border color of hint boxes in the editor.
Unused source code:
editorUnnecessaryCode.border
: Border color of unnecessary (unused) source code in the editor.editorUnnecessaryCode.opacity
: Opacity of unnecessary (unused) source code in the editor. For example,'#000000c0'
will render the code with 75% opacity. For high contrast themes, use the'editorUnnecessaryCode.border'
theme color to underline unnecessary code instead of fading it out.
The gutter contains the glyph margins and the line numbers:
editorGutter.background
: Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.editorGutter.modifiedBackground
: Editor gutter background color for lines that are modified.editorGutter.addedBackground
: Editor gutter background color for lines that are added.editorGutter.deletedBackground
: Editor gutter background color for lines that are deleted.editorGutter.commentRangeForeground
: Editor gutter decoration color for commenting ranges.
Diff editor colors
For coloring inserted and removed text, use either a background or a border color but not both.
diffEditor.insertedTextBackground
: Background color for text that got inserted. The color must not be opaque so as not to hide underlying decorations.diffEditor.insertedTextBorder
: Outline color for the text that got inserted.diffEditor.removedTextBackground
: Background color for text that got removed. The color must not be opaque so as not to hide underlying decorations.diffEditor.removedTextBorder
: Outline color for text that got removed.diffEditor.border
: Border color between the two text editors.
Editor widget colors
The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover.
editorWidget.foreground
: Foreground color of editor widgets, such as find/replace.editorWidget.background
: Background color of editor widgets, such as Find/Replace.editorWidget.border
: Border color of the editor widget unless the widget does not contain a border or defines its own border color.editorWidget.resizeBorder
: Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget.editorSuggestWidget.background
: Background color of the suggestion widget.editorSuggestWidget.border
: Border color of the suggestion widget.editorSuggestWidget.foreground
: Foreground color of the suggestion widget.editorSuggestWidget.highlightForeground
: Color of the match highlights in the suggestion widget.editorSuggestWidget.selectedBackground
: Background color of the selected entry in the suggestion widget.editorHoverWidget.background
: Background color of the editor hover.editorHoverWidget.border
: Border color of the editor hover.editorHoverWidget.statusBarBackground
: Background color of the editor hover status bar.
The Debug Exception widget is a peek view that shows in the editor when debug stops at an exception.
debugExceptionWidget.background
: Exception widget background color.debugExceptionWidget.border
: Exception widget border color.
The editor marker view shows when navigating to errors and warnings in the editor (Go to Next Error or Warning command).
editorMarkerNavigation.background
: Editor marker navigation widget background.editorMarkerNavigationError.background
: Editor marker navigation widget error color.editorMarkerNavigationWarning.background
: Editor marker navigation widget warning color.editorMarkerNavigationInfo.background
: Editor marker navigation widget info color.
Peek view colors
Peek views are used to show references and declarations as a view inside the editor.
peekView.border
: Color of the peek view borders and arrow.peekViewEditor.background
: Background color of the peek view editor.peekViewEditorGutter.background
: Background color of the gutter in the peek view editor.peekViewEditor.matchHighlightBackground
: Match highlight color in the peek view editor.peekViewEditor.matchHighlightBorder
: Match highlight border color in the peek view editor.peekViewResult.background
: Background color of the peek view result list.peekViewResult.fileForeground
: Foreground color for file nodes in the peek view result list.peekViewResult.lineForeground
: Foreground color for line nodes in the peek view result list.peekViewResult.matchHighlightBackground
: Match highlight color in the peek view result list.peekViewResult.selectionBackground
: Background color of the selected entry in the peek view result list.peekViewResult.selectionForeground
: Foreground color of the selected entry in the peek view result list.peekViewTitle.background
: Background color of the peek view title area.peekViewTitleDescription.foreground
: Color of the peek view title info.peekViewTitleLabel.foreground
: Color of the peek view title.
Merge conflicts
Merge conflict decorations are shown when the editor contains special diff ranges.
merge.currentHeaderBackground
: Current header background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.merge.currentContentBackground
: Current content background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.merge.incomingHeaderBackground
: Incoming header background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.merge.incomingContentBackground
: Incoming content background in inline merge conflicts. The color must not be opaque so as not to hide underlying decorations.merge.border
: Border color on headers and the splitter in inline merge conflicts.merge.commonContentBackground
: Common ancestor content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.merge.commonHeaderBackground
: Common ancestor header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.editorOverviewRuler.currentContentForeground
: Current overview ruler foreground for inline merge conflicts.editorOverviewRuler.incomingContentForeground
: Incoming overview ruler foreground for inline merge conflicts.editorOverviewRuler.commonContentForeground
: Common ancestor overview ruler foreground for inline merge conflicts.
Panel colors
Panels are shown below the editor area and contain views like Output and Integrated Terminal.
panel.background
: Panel background color.panel.border
: Panel border color to separate the panel from the editor.panel.dropBackground
: Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through.panelTitle.activeBorder
: Border color for the active panel title.panelTitle.activeForeground
: Title color for the active panel.panelTitle.inactiveForeground
: Title color for the inactive panel.panelInput.border
: Input box border for inputs in the panel.
Preview
imagePreview.border
: Border color for image in image preview.
Status Bar colors
The Status Bar is shown in the bottom of the workbench.
Visual Studio For Mac Os
statusBar.background
: Standard Status Bar background color.statusBar.foreground
: Status Bar foreground color.statusBar.border
: Status Bar border color separating the Status Bar and editor.statusBar.debuggingBackground
: Status Bar background color when a program is being debugged.statusBar.debuggingForeground
: Status Bar foreground color when a program is being debugged.statusBar.debuggingBorder
: Status Bar border color separating the Status Bar and editor when a program is being debugged.statusBar.noFolderForeground
: Status Bar foreground color when no folder is opened.statusBar.noFolderBackground
: Status Bar background color when no folder is opened.statusBar.noFolderBorder
: Status Bar border color separating the Status Bar and editor when no folder is opened.statusBarItem.activeBackground
: Status Bar item background color when clicking.statusBarItem.hoverBackground
: Status Bar item background color when hovering.statusBarItem.prominentForeground
: Status Bar prominent items foreground color.statusBarItem.prominentBackground
: Status Bar prominent items background color.statusBarItem.prominentHoverBackground
: Status Bar prominent items background color when hovering.statusBarItem.remoteBackground
: Background color for the remote indicator on the status bar.statusBarItem.remoteForeground
: Foreground color for the remote indicator on the status bar.
Prominent items stand out from other Status Bar entries to indicate importance. One example is the Toggle Tab Key Moves Focus command change mode indicator.
Title Bar colors
titleBar.activeBackground
: Title Bar background when the window is active.titleBar.activeForeground
: Title Bar foreground when the window is active.titleBar.inactiveBackground
: Title Bar background when the window is inactive.titleBar.inactiveForeground
: Title Bar foreground when the window is inactive.titleBar.border
: Title bar border color.
Menu Bar colors
menubar.selectionForeground
: Foreground color of the selected menu item in the menubar.menubar.selectionBackground
: Background color of the selected menu item in the menubar.menubar.selectionBorder
: Border color of the selected menu item in the menubar.menu.foreground
: Foreground color of menu items.menu.background
: Background color of menu items.menu.selectionForeground
: Foreground color of the selected menu item in menus.menu.selectionBackground
: Background color of the selected menu item in menus.menu.selectionBorder
: Border color of the selected menu item in menus.menu.separatorBackground
: Color of a separator menu item in menus.menu.border
: Border color of menus.
Notification colors
Note: The colors below only apply for VS Code versions 1.21 and higher.
Notification toasts slide up from the bottom-right of the workbench.
Once opened in the Notification Center, they are displayed in a list with a header:
notificationCenter.border
: Notification Center border color.notificationCenterHeader.foreground
: Notification Center header foreground color.notificationCenterHeader.background
: Notification Center header background color.notificationToast.border
: Notification toast border color.notifications.foreground
: Notification foreground color.notifications.background
: Notification background color.notifications.border
: Notification border color separating from other notifications in the Notification Center.notificationLink.foreground
: Notification links foreground color.
If you target VS Code versions before the 1.21 (February 2018) release, these are the old (no longer supported) colors:
notification.background
notification.foreground
notification.buttonBackground
notification.buttonForeground
notification.buttonHoverBackground
notification.errorBackground
notification.errorForeground
notification.infoBackground
notification.infoForeground
notification.warningBackground
notification.warningForeground
Extensions
extensionButton.prominentForeground
: Extension view button foreground color (for example Install button).extensionButton.prominentBackground
: Extension view button background color.extensionButton.prominentHoverBackground
: Extension view button background hover color.extensionBadge.remoteBackground
: Background color for the remote badge in the extensions view.extensionBadge.remoteForeground
: Foreground color for the remote badge in the extensions view.
Quick picker
pickerGroup.border
: Quick picker (Quick Open) color for grouping borders.pickerGroup.foreground
: Quick picker (Quick Open) color for grouping labels.quickInput.background
: Quick input background color. The quick input widget is the container for views like the color theme picker.quickInput.foreground
: Quick input foreground color. The quick input widget is the container for views like the color theme picker.
Integrated Terminal colors
terminal.background
: The background of the Integrated Terminal's viewport.terminal.border
: The color of the border that separates split panes within the terminal. This defaults to panel.border.terminal.foreground
: The default foreground color of the Integrated Terminal.terminal.ansiBlack
: 'Black' ANSI color in the terminal.terminal.ansiBlue
: 'Blue' ANSI color in the terminal.terminal.ansiBrightBlack
: 'BrightBlack' ANSI color in the terminal.terminal.ansiBrightBlue
: 'BrightBlue' ANSI color in the terminal.terminal.ansiBrightCyan
: 'BrightCyan' ANSI color in the terminal.terminal.ansiBrightGreen
: 'BrightGreen' ANSI color in the terminal.terminal.ansiBrightMagenta
: 'BrightMagenta' ANSI color in the terminal.terminal.ansiBrightRed
: 'BrightRed' ANSI color in the terminal.terminal.ansiBrightWhite
: 'BrightWhite' ANSI color in the terminal.terminal.ansiBrightYellow
: 'BrightYellow' ANSI color in the terminal.terminal.ansiCyan
: 'Cyan' ANSI color in the terminal.terminal.ansiGreen
: 'Green' ANSI color in the terminal.terminal.ansiMagenta
: 'Magenta' ANSI color in the terminal.terminal.ansiRed
: 'Red' ANSI color in the terminal.terminal.ansiWhite
: 'White' ANSI color in the terminal.terminal.ansiYellow
: 'Yellow' ANSI color in the terminal.terminal.selectionBackground
: The selection background color of the terminal.terminalCursor.background
: The background color of the terminal cursor. Allows customizing the color of a character overlapped by a block cursor.terminalCursor.foreground
: The foreground color of the terminal cursor.
Debug
debugToolBar.background
: Debug toolbar background color.debugToolBar.border
: Debug toolbar border color.editor.stackFrameHighlightBackground
: Background color of the top stack frame highlight in the editor.editor.focusedStackFrameHighlightBackground
: Background color of the focused stack frame highlight in the editor.
Welcome page
welcomePage.background
: Background color for the Welcome page.welcomePage.buttonBackground
: Background color for the buttons on the Welcome page.welcomePage.buttonHoverBackground
: Hover background color for the buttons on the Welcome page.walkThrough.embeddedEditorBackground
: Background color for the embedded editors on the Interactive Playground.
Git colors
gitDecoration.addedResourceForeground
: Color for added Git resources. Used for file labels and the SCM viewlet.gitDecoration.modifiedResourceForeground
: Color for modified Git resources. Used for file labels and the SCM viewlet.gitDecoration.deletedResourceForeground
: Color for deleted Git resources. Used for file labels and the SCM viewlet.gitDecoration.untrackedResourceForeground
: Color for untracked Git resources. Used for file labels and the SCM viewlet.gitDecoration.ignoredResourceForeground
: Color for ignored Git resources. Used for file labels and the SCM viewlet.gitDecoration.conflictingResourceForeground
: Color for conflicting Git resources. Used for file labels and the SCM viewlet.gitDecoration.submoduleResourceForeground
: Color for submodule resources.
Settings Editor colors
Note: These colors are for the GUI settings editor which can be opened with the
Preferences: Open Settings (UI)
command.settings.headerForeground
: The foreground color for a section header or active title.settings.modifiedItemIndicator
: The line that indicates a modified setting.settings.dropdownBackground
: Dropdown background.settings.dropdownForeground
: Dropdown foreground.settings.dropdownBorder
: Dropdown border.settings.dropdownListBorder
: Dropdown list border.settings.checkboxBackground
: Checkbox background.settings.checkboxForeground
: Checkbox foreground.settings.checkboxBorder
: Checkbox border.settings.textInputBackground
: Text input box background.settings.textInputForeground
: Text input box foreground.settings.textInputBorder
: Text input box border.settings.numberInputBackground
: Number input box background.settings.numberInputForeground
: Number input box foreground.settings.numberInputBorder
: Number input box border.
The theme colors for breadcrumbs navigation:
breadcrumb.foreground
: Color of breadcrumb items.breadcrumb.background
: Background color of breadcrumb items.breadcrumb.focusForeground
: Color of focused breadcrumb items.breadcrumb.activeSelectionForeground
: Color of selected breadcrumb items.breadcrumbPicker.background
: Background color of breadcrumb item picker.
Snippets
The theme colors for snippets:
editor.snippetTabstopHighlightBackground
: Highlight background color of a snippet tabstop.editor.snippetTabstopHighlightBorder
: Highlight border color of a snippet tabstop.editor.snippetFinalTabstopHighlightBackground
: Highlight background color of the final tabstop of a snippet.editor.snippetFinalTabstopHighlightBorder
: Highlight border color of the final tabstop of a snippet.
Color ids can also be contributed by extensions through the color contribution point. These colors also appear when using code complete in the
workbench.colorCustomizations
settings and the color theme definition file. Users can see what colors an extension defines in the extension contributions tab.Extension colors
Color ids can also be contributed by extensions through the color contribution point. These colors also appear when using code complete in the
workbench.colorCustomizations
settings and the color theme definition file. Users can see what colors an extension defines in the extension contributions tab.[Visual Studio]
![Visual studio for mac Visual studio for mac](https://regmedia.co.uk/2015/04/29/visual_studio_code.jpg?x=648&y=429&crop=1)
By Alessandro Del Sole | December 2017
Visual Studio for Mac is a fully featured native development environment designed for building cross-platform applications with Xamarin and .NET Core on macOS. The IDE enables productivity through a rich set of features and tools, combined with powerful customizations that allow developers to implement their preferences. In my previous article (msdn.com/magazine/mt845621), I discussed Visual Studio for Mac productivity from the point of view of the code editor and debugging tools. In this article, I’ll focus on the customization points that Visual Studio for Mac offers, and the impact those points have on productivity. Most of the customizations described in this article can be done in the Preferences dialog, which you open by selecting the Visual Studio Preferences menu.
Applying Languages and Themes
Visual Studio for Mac quickly allows you to change the display language for the UI. You can do this in the Visual Style tab of the Preferences dialog, selecting one of the available languages from the User Interface Language combo box. Currently, Visual Studio for Mac supports the following languages: Chinese (China and Taiwan), Czech, French, German, Italian, Japanese, Korean, Polish, Portuguese (Brazil), Russian, Spanish, Turkish and, of course, English.
In the same tab, you can change the appearance of the Visual Studio for Mac UI with different themes. At the time of this writing, Visual Studio for Mac offers two themes: Light and Dark. You can apply a theme by selecting the Visual Style tab in the Preferences dialog, and then select a theme from the User Interface Theme dropdown.
When you select a different theme, you’ll be invited to restart Visual Studio. At restart, you’ll see how the theme affects not only the code editor, but the entire workspace, including the pads and dialogs. Figure 1 shows an example based on the Dark theme.
Figure 1 Visual Studio for Mac with Dark Theme
You can actually change the theme for the code editor only, rather than for the complete workspace. This can be useful to keep the editor window highlighted. The Color Theme tab in the Preferences dialog allows you to select from a long list of built-in themes, as well as any themes you create and import on your own. Visual Studio for Mac supports the Visual Studio (.vssettings), Xamarin Studio (.json) and TextMate (.tmTheme) formats, so you can quickly import new themes by simply pressing the Add button and specifying one or more supported themes.
Customizing Keyboard Shortcuts
Visual Studio for Mac offers a huge number of predefined keyboard shortcuts, referred to as key bindings, that make quick work of invoking common commands by reducing time spent mousing around the interface. Key bindings are completely customizable, and you can change them in the Key Bindings tab of the preferences dialog. As you can see in Figure 2, key bindings are grouped by menu. You can change a key binding by clicking a command and then entering the new binding in the Edit Binding textbox.
Figure 2 Customizing Key Bindings
Microsoft Visual Studio For Mac
Visual Studio for Mac provides a number of built-in schemes with key bindings that recall the same shortcuts used in other popular development tools, such as Visual Studio Code and Xcode. For example, if you’ve been building apps with Xcode for a while, you can select the Xcode scheme and use the same keyboard shortcuts in Xcode for the code editor and debugging in Visual Studio for Mac. As another example, if you’ve been working with Visual Studio on Windows and now you need to work with Visual Studio for Mac, you can select the Visual Studio (Windows) scheme to make use of its familiar keyboard shortcuts.
Customizing Fonts
Visual Studio for Mac gives you control over the fonts used in the code editor, the Output pad, and all other pads (pads are tool windows that can be rearranged and docked in the workspace). Just click the Fonts tab in the Preferences dialog box to access this functionality.
To make a font change, select the font you want to replace, then click the new font (with style and size) in the Select Font dialog. A preview window lets you see what the new font selection will look like. Note that you can replace a default font with the newly selected font via the Set To Default button.
Adding Custom Commands
A common need for developers is to be able to launch external tools from within the development environment against one or more files in the solution. For example, you might want to launch a professional image-editing tool on a bitmap you have in a project, or you might want to launch a particular code editor or command line against a file in a project. Visual Studio for Mac allows you to launch external tools by adding new custom commands to the Tools menu.
To accomplish this, open the External Tools tab in the Preferences dialog and then click Add. In the screen that appears, provide the details for the external tool, such as the text you want to be displayed in the Tools menu (Title field), the tool to be launched (Command field), command arguments such as file or folder names (Arguments field), the directory where the command must be executed (Working directory field) and a keyboard shortcut (Key Binding field). Figure 3 shows an example that launches Visual Studio Code.
Figure 3 Adding a Command to Invoke an External Tool
Notice that, for the Arguments and Working directory fields, the target pathname must be supplied via one of the supported constants, such as ${FilePath} that represents the pathname of the current file. However, it isn’t necessary to remember all the possible constants and their meaning. In fact, you can click the arrow-down button at the right of both fields to select a target, and Visual Studio for Mac will show a human-readable description for each target, then will place the corresponding constant into the field when you select the desired target.
With regard to Figure 3, you’ll see File Path in the list of possible targets (which represents the current file). When you select this option, Visual Studio for Mac will add the ${FilePath} constant into the Arguments field. You can also select multiple targets in one field.
Finally, it’s worth mentioning the checkboxes at the bottom of the dialog. If selected, Prompt for arguments will cause Visual Studio to ask you to enter additional arguments that will be passed to the external tool. When the Save current file checkbox is selected, the target file will be saved before the external tool is launched. By checking the Use output window checkbox, the output of the external tool will be redirected to the Output pad in Visual Studio, which is extremely convenient so that you won’t need to shift your focus outside of the IDE. After you click OK, you’ll see a new command in the Tools menu, the text of which exactly matches the string you entered in the Title field.
Working with Custom Layouts
You can arrange the layout of Visual Studio for Mac by displaying or hiding some pads, and by moving and docking pads to a different position in the workspace. The IDE ships with four built-in, general-purpose layouts called Code, Design, Debug and Test, all available in the View menu, and each quickly allowing you to switch to a different pad layout depending on the context. For example, when you start debugging an application, Visual Studio for Mac automatically switches to the Debug layout and then goes back to the previous layout, usually Code or Design, once you’re finished. However, it is common to rearrange the IDE layout based on the developer’s preferences or on the type of the solution with which the developer is working. For example, when working with Xamarin solutions, you might need specific pads that you don’t use with ASP.NET Core solutions and vice versa, or you might want to organize pads in a way that’s similar to Visual Studio on Windows.
Instead of manually rearranging pads every time, Visual Studio for Mac lets you save your own layouts with the Save Current Layout command in the View menu. This command asks you to enter the name of the new layout, then stores your current layout and adds its name in the View menu, below the names of the built-in layouts. This way you can quickly switch to your favorite layout with a single click. Once you select a custom layout, the View menu also enables the Delete Current Layout command for removing custom layout from the list. As you might expect, this command is disabled for built-in layouts.
Extending Visual Studio
Visual Studio for Mac is an environment built upon modules that expose a number of extensibility points. This means that other modules can be installed and that the IDE can be extended with third-party packages, referred to as extensions. This allows you to add new productivity features and tools to Visual Studio. You install, update and manage extensions in the Extension Manager dialog, which you enable with the Extensions command in the Visual Studio menu. In the Installed tab (see Figure 4), you can see the list of installed extensions grouped by category.
Figure 4 Displaying the List of Installed Extensions
You can select an extension and see detailed information in the window to the right. You also have the option to disable or uninstall an extension.
Some built-in, integrated tools in Visual Studio for Mac are extensions themselves. For these extensions, the Uninstall button is generally unavailable and the Disable button is only available if disabling the extension doesn’t affect the core features of the IDE. Extensions that are part of the core of Visual Studio for Mac, such as the ChangeLog Add-in in Figure 4, are presented in gray in the Extension Manager.
If you switch to the Gallery tab, you’ll see a list of available extensions from an online gallery, as shown in Figure 5. In the Repository combo box you can choose to see only stable extensions, only beta release extensions or all extensions.
Visual Studio
Figure 5 Discovering and Installing Extensions from the Online Gallery
When you’ve found an extension of interest, click its name on the left, review the details on the right and then click Install. Visual Studio will ask for confirmation and then install the selected extension. Depending on the extension, you’ll find the IDE updated with new project templates, new menu commands, new pads or new context commands. The description you get in the Extension Manager tool should clarify how you access the new tools.
It’s worth mentioning that you can also develop your own extensions for Visual Studio for Mac using an extension called Add-in Maker, which you can find under the Extension Development group of the Gallery tab in the Extension Manager. This package will install all the tools you need to build extensions, including specific project templates that appear in the Miscellaneous node of the New Project dialog.
Add-in Maker is an open source project (bit.ly/2zKxWIa) that’s already emerged as the tool of choice for building extensions for IDEs such as Xamarin Studio and MonoDevelop. The official Microsoft documentation provides an interesting page that explains the extensibility points in Visual Studio for Mac (bit.ly/2yIpvNn) and a walk-through that provides an example based on a simplified extension that makes it possible to insert the current date in the active editor through a command added to the Edit menu (bit.ly/2yJ1V4E). If you plan to build extensions for Visual Studio for Mac with Add-in Maker, I strongly recommend you read these documents before you get started.
Wrapping Up
Productivity often depends on how comfortable the developer feels with an IDE. Visual Studio for Mac puts productivity at its core, enabling developers to customize the most important areas of the workspace. As a developer, you can localize the UI by selecting from a list of available cultures. You can change the visual theme to get the colors you like most, and you can customize fonts according to your preferences. You can also rearrange the pads layout and save each layout for later use, so that you won’t need to manually rearrange pads every time.
Of course, Visual Studio for Mac can be enhanced with custom commands to invoke external tools, which is a very common need. And it can be extended with third-party packages that make it easier to add new features and tools. Combined, these capabilities enable developers to feel more comfortable with the IDE and to customize it in a way to maximize productivity.
Alessandro Del Solehas been a Microsoft MVP since 2008. Awarded MVP of the Year five times, he has authored many books, eBooks, instructional videos and articles about .NET development with Visual Studio. Del Sole works as a senior .NET Developer, focusing on .NET and mobile app development, training and consulting. He has recently authored an upcoming book called “Beginning Visual Studio for Mac” (bit.ly/2hsRxYx). You can follow him on Twitter: @progalex.
Thanks to the following Microsoft technical expert for reviewing this article: Jordan Matthiesen