2015 Visual Studio User Experience Guidelines RC Preview

Visual Studio User Experience Guidelines 2015 RC PREVIEW

MICROSOFT VISUAL STUDIO PARTNER PREVIEW COPY. SUBJECT TO CHANGE. QUESTIONS OR FEEDBACK? CONTACT US AT [email protected]

Welcome The Visual Studio User Experience Guidelines are intended for t hose who design new features for fo r Visual Studio. These guidelines contain information about common user models and interaction patterns so that designers of new user interfaces (UI) can create user experiences that are s eamless and consistent within the dev elopment environment. Developing software for Microsoft products means understanding the guidance provided by Windows. Important resources to be aware of: 





The Windows User Experience Interaction Guidelines are the basics for Windows desktop behavior and appearance. These Visual Studio User Experience Guidelines are specific to Visual Studio and s upersede the general Windows guidelines wherever appropriate to our environment. The patterns and guides for Windows Store apps are a reference for emerging patterns that may be used in some instances within Visual Studio.

About these guidelines These guidelines give you information about what to do when designing for Visual Studio. In some cases, information about how to do it is also included. For more detailed implementation implementation information and to learn about specific APIs that allow you to write code for solutions that integrate into the Visual Studio IDE, use the Visual Studio SDK. SDK.

Sections and topics 1.

practices, Anti-patterns Anti-patterns,, UX Essentials: Best practices,

8. Layout: Dialog layout

and Dev14 UX principles

systems, 9. Notifications and Progress: Notification systems,

2. Fonts and Formatting: The environment font and Text style Studio , 3. Colors and Styling: Using color in Visual Studio,

Progress indicators, indicators, Infobars Infobars,, and Error validation

10. HDPI Requirements: Requirements for supporting HDPI displays, displays, Validating for HDPI displays, displays , and

The VSColor service, service, Shared colors, colors, Creating new color

Addressing DPI issues

tokens,, Color value reference, tokens reference , Choosing High Contrast

11. Accessibility: Accessibility

colors,, Using themed controls, colors controls , Exposing colors for end

12. Animations: Animation fundamentals

users,, and Daytona and web UI users Studio , 4. Images and Icons: Image use in Visual Studio, Visual Language Dictionary, Dictionary , Icon design, design, Using color in images, images, and Icon theming and inversion usage, 5. Menus and Commands: Command usage, Naming commands, commands, and Access and shortcut keys terminology , 6. UI Text and Help: UI text and terminology, Error messages, messages, and Accessing Help overview, 7. Interaction Patterns: Visual Studio patterns overview, Window interactions, interactions, Tool windows, windows, Document editor conventions,, Dialogs conventions Dialogs,, Projects Projects,, Common controls (Search Search,, Text controls, controls, Buttons and hyperlinks, hyperlinks, Lists and grids, grids , and Tree views) views), On-object UI and peeking,, Selection models, peeking models, Persistence and saving settings,, and Touch input settings

and Animation patterns

13. World Readiness: World readiness 14. Evaluation Tools: Craftsmanship checklist

1: UX Essentials



UX Essentials: Best practices Screen resolution Minimum resolution The minimum resolution for Visual Studio Dev14 is 1280x1024. This means that it is possible to possible to use Visual Studio at this resolution, although it might not be an optimal user experience. There is no guarantee that all aspects will be usable at resolutions lower than 1280x1024. Initial dialog size should not exceed 1000 pixels in height so as to fit within th e frame of the integrated development environment (IDE) within this minimum resolution at 96 dpi.

High-density displays UI in Visual Studio must work well in all DPI scaling factors that Windows supports out of the box: 150%, 200%, and 250%. Review the high-DPI guidelines (detailed further in 10: High-Density Display Requirements ) for more detailed information and an explanation about how to validate your UI for high-DPI situations.

Basic principles 1.

Be consistent within the Visual Studio environment. Follow existing interaction patterns within the shell. ( 7: Interaction Patterns) Design interface details to be consistent with the shell's visual language and craftsmanship requirements. (14: Evaluation Tools) Use shared commands and controls when they exist. Understand the Visual Studio hierarchy and how it establishes context and drives the UI.  

 

2.

Use the environment service for fonts and colors. All UI should respect the current environment font setting, unless it is exposed for customization in the Fo nts and Colors page in the Options dialog. ( 2: Fonts and Formatting) UI elements must use the VSColor service, using shared environment tokens or feature-specific tokens. (3: Colors and Styling) 



3.

Make all imagery consistent with the new Visual Studio style. Follow Visual Studio design principles for icons, glyphs, and other graphics. ( 4: Images and Icons ) Do not place text in graphic elements.  

4. Design from a user-centric perspective. Create the task flow before the individual features within it. Be familiar with your users and make that knowledge explicit in your sp ec. When reviewing the UI, evaluate the complete experience as well as the details. Design your UI so that it remains functional and attractive regardless of locale or language. (13: World Readiness)    

2 Visual Studio UX Guidelines: UX Essentials EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL UXBOARD@MICROSOF [email protected]. T.COM.

UX Essentials: Anti-patterns Visual Studio contains many examples of UI that follow our guidelines and best practices. In an effort to be consistent , developers often borrow from product UI design patterns similar to what they're building. Although this is a good approach that helps us drive consistency in user interaction and visual design, we do on occasion ship features with a f ew details that do not meet our guidelines due to schedule constraints or defect prioritization. In these cases, we do not want teams to copy one of these "anti-patterns" because they proliferate bad or inconsistent UI within the Visual Studio environment. This document is not an exhaustive list of anti-patterns within Visual Studio. If you have any questions about a feature design that you want to leverage and are unsure of whether it is sanctioned, the UxBoard is always available to answer your questions.

Required fields/settings shown in error state by default Feature team goals  

Warn users that they have added an element that must be configured. Draw the user’s attention attenti on to the areas that need input.

Anti-pattern solution As soon as the user has initiated an action and before they have completed the task, immediately place critical-stop icons next to the areas that need n eed configuration.

Example: Manifest Designer declarations Adding a declaration to the list immediately i mmediately places it in an error state, which persists until the user sets the required properties. In this case, there is an additional concern because the icon used for the alert contains an “X “ X,” so the common remove icon cannot be used beside it. As a result, the UI uses a Remove button, a more clunky control.

Result The user is left feeling that t hat adding a declaration has created an error, when the intended message is s imply that they’ve started a task and not yet finished it. This not only causes visual noise but is inconsistent with common UI, in which validation is done with focus change and not before.

Alternatives Better solutions to this problem would be to:  



Allow the user to add a declaration without warning and then move immediately to set properties on the item. Add the warning icon (gold triangle) when focus moves from the item, such as to add another declaration to the list or to attempt to change tabs within the designer. Pop up a dialog if the user attempts to change tabs before setting properties on any declarations. Explain that the application will not build (or whatever the implications) until the warnings are resolved. If the user dismisses the dialog and changes tabs anyway, then an icon (critical or warning, as appropriate) is added to the Declarations tab. Visual Studio UX Guidelines: UX Essentials 3

EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected]. [email protected].

Multiple clicks to dismiss UI Feature team goal Don’t allow the user user to dismiss the UI without first seeing s eeing the explanation text.

Anti-pattern The team inserting video links into various places within Visual Studio Ultimate decided against the common pattern of an “X” close button and tooltip explanation as specified by the UX team, team, and instead implemented a dropdown and “Don’t show this again” link.

Result Instead of a simple close button (one click), the us er is forced to use two clicks to simply dismiss the UI in every place that the video links appear.

Alternatives

Incorrect: forcing the user to read explanatory text before dismissing UI is an anti-pattern within Visual Studio.

The correct design for this situation would be to follow the pattern common to Internet Explorer, Office and Visual Studio: the user can see the tooltip description on hover, and one click hides the UI.

Correct: as designed, video links should display a tooltip with additional information on hover, and clicking the “X” should dismiss the message without need for further interaction.


Using command bars for settings

Figure A: Anti-pattern

Figure B: Better, but still an anti-pattern

Figure C: Correct use of Visual Studio pattern

Figure A represents this anti-pattern: putting a setting underneath a command button that applies to more than just that command. In this sketch, there are commands co mmands besides Start Debugging – like View in Browser, Start Without Debugging, and Step Into – that will respect the selected setting. Slightly better, but still undesirable, is putting settings of this type in the toolbars, as shown in Figure B. While split buttons take less space and therefore are an improvement over drop-downs, both designs are still using a toolb ar to promote something that isn't really a command. In Figure C, the setting is tied to a series of commands. There is no global setting being set and we're just switching between four commands. This is the only situation in which commands in the toolbar are acceptable.

Visual Studio UX Guidelines: UX Essentials 5 EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected]. [email protected].

Control anti-patterns Some anti-patterns are simply incorrect usage or presentation of a control or group of controls.

Underlining used as a group label, not a hyperlink Underlining text should be used only for hyperlinks.

Bad:

Good:

Clicking on a check box results in a pop-up dialog

Clicking the 'Enable Remote Desktop for all roles' check box in the 'Publish Windows Azure Application' wizard immediately brings up a pop-up dialog, a Visual Studio anti-pattern. In addition, the check box field does not fill with a checkmark after being selected, another interaction anti-pattern.


Hyperlink anti-patterns The following example contains two anti-patterns. 1. 2.

The foreground turning red on hover means that the correct shared color from the font service is not being used. “Learn more” is not the appropriate text for a link to a co nceptual topic. The user’s goal is not to learn lea rn more, it is to understand the ramifications of their choice.

Both the color choice and wording of this hyperlink are Visual Studio anti-patterns.

Alternative Pose the question that the user would be asking by clicking the link: How do Windows Azure Mobile Services work? When do I need a Windows Azure Mobile Service project?  

Using 'Click 'Click here' here' or 'Click here here'' for links Hyperlinks should be self-descriptive. It is an anti-pattern anti- pattern to use “Click here” or o r any similar variation.

Bad: Click here for instructions about how to create a new project.

Good: How do I create a new project?

Visual Studio UX Guidelines: UX Essentials 7 EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected]. [email protected].

UX Essentials: Dev14 UX principles All major businesses within Microsoft have made the decision to align behind a shared set of "modern" " modern" design principles. In keeping with this decision, these businesses have taken further steps to establish a sense of shared vi sual design direction and common experience patterns. Visual Studio follows the shared Microsoft design principles and the UX team has adapted them to be specific to our product and users. We use these principles to guide and evaluate divisional design efforts in designing a "best-of-breed" modern application.

Pride in craftsman craftsmanship ship 





Demonstrate craftsmanship within our own tools and services that sets a great example for developers who use Visual Studio as a reference when building b uilding their own applications. Prioritize and maintain a high bar for resolving craftsmanship issues that negatively impact the experience of building and designing modern apps and services. Engineer the experience to be complete, thorough, and polished at every stage.

Be fast and fluid   

Design task flows that feel smooth, with steps seamlessly connected to what comes before and after. Ensure that tool windows and information presented to the user are consistent with their current context. Deliver experiences that are more contextually aware. For example, recreate the context associated with an asset whenever that asset is reopened.

Authentically digital   

Be true to the capabilities of hardware, software, and services. Ensure that each feature is optimal for a specific task. Make sure that design decisions are validated with real users, completing real tasks, on the real platform and hardware.

Do more with less  



Make the experience great at something, not mediocre at lots of things. Pursue the minimal design for each experience by focusing on features or concepts that directly contribute to its core viability. Use pixels sparingly and fiercely reduce administrative UI wherever possibl e.

Win as one  

Optimize for the overall experience even if that requires local sacrifices. Adopt the appropriate shared design patterns to ensure that cross-partnership experiences are cohesive and jointly successful.


2: Fonts and Formatting



Fonts and Formatting: The environment font All fonts within Visual Studio must be exposed to the user for customization. This is primarily done through the Fonts and

Colors page in the Tools > Options dialog. The three main categories of font settings are: 





fo r the IDE (integrated development environment), used for all interface Environment font – the primary font for elements including dialogs, menus, tool windows, and document windows. By default, the environment font is i s tied to a system font that appears as 9 pt Segoe UI in current versions of Windows. Using one font for all interface elements helps ensure a consistent font appearance throughout the IDE. Text editor – elements that surface in the code editor and other text-based editors can be customized in the Text Editor settings in Tools > Options. Specific collections – designer windows that offer user customization of their interface elements may expose fonts specific to their design surface in their own settings page in Tools > Options.

Editor font customization and resizing Users often will enlarge or zoom the size and/or color of text in the editor according to their preference, independent of the general user interface. Because the environment font is used on elements that might appear within or as part of an editor/designer, editor/designer, it is important to note the expected behavior when one of these font classifications is changed. When creating UI elements that appear in the editor but are not part of the content , it is important to use the environment font and not the text font that elements resize in a predictable way. 1. 2.

For code text in the editor, resize with the code text font setting and respond to the editor text’s zoo m level. All other elements of the interface should be tied to the environment font setting and respond to any global changes in the environment. This includes (but is not limited to): Text in context menus Text in an editor adornment, such as light bulb menu text, quick find editor pane, and navigate to pane Label text in dialog boxes, such as Find in Files or Refactor   

Accessing the environment font In Native or WinForms code, the environment font can be accessed by calling the method IUIHostLocale::GetDialogFont after querying the interface from the SID_SUIHostLocale service. For Windows Presentation Foundation (WPF), derive your dialog window class from the shell's DialogWindow class instead of WPF's Window class. In XAML, the code looks like this: Code behind: internal partial class WebConfigModificationWindow : DialogWindow { }

(Replace Microsoft.VisualStudio.Shell.11.0 with the current version of the MPF dll.)

10 Visual Studio UX Guidelines: Fonts and Formatting EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

To display the dialog, call " ShowModal()" on the class over ShowDialog(). ShowModal() sets the correct modal state in the shell, ensures the dialog is centered in the parent window, and so on. The code is as follows: MyWindow window = new new MyWindow(); MyWindow(); window.ShowModal();

ShowModal returns a bool? (nullable Boolean) with the DialogResult, which can be used if needed. The return value is true if the dialog was closed with OK . If you need to display some WPF UI that is not a dialog and is hosted in its own HwndSource, such as a popup window or a WPF child window of a Win32/WinForms parent window, you will need to set the FontFamily and FontSize on the root element of the WPF element. (The shell sets the properties on the main window, but they will not b e inherited past a HWND). The shell provides resources the properties can be bound to, like this: /> />

Formatting (scaling/bolding) reference Some dialogs require particular text to be bold or a size other than the environment font. Previously, fo nts larger than the environment font were coded as "environment font +2" or similar. While that method will continue to work, using the provided code snippets will support high-DPI monitors and ensure that display text always appears at the correct size and weight (such as Light or Light or Semilight). style. Note: Before you apply formatting, ensure that you are following the guidance found in Text style. To scale the environment font, set the style of the TextBlock or Label as indicated. Each of these code snippets, p roperly used, will generate the correct font, including the appropriate size and weight variations. v ariations. Where "vsui" is a reference to the namespace Microsoft.VisualStudio.Shell:

xmlns: xmlns :vsui vsui="clr-namespace:Mi ="clr-namespace:Microsoft.VisualStud crosoft.VisualStudio.Shell;assembly io.Shell;assembly=Microsoft.VisualSt =Microsoft.VisualStudio.Shell.14.0" udio.Shell.14.0"

375% Environment font + Light Appears as: 34 pt Segoe UI Light Use for: (rare) unique branded UI, such as in the Start Page Procedural code: Where "textBlock" is a previously defined TextBlock and "label" is a previously defined Label: textBlock.SetResourceReference(TextBlock TextBlock.StyleProperty, .StyleProperty, VsResourceKeys.TextBlockE VsResourceKeys .TextBlockEnvironment nvironment375PercentF 375PercentFontSizeStyl ontSizeStyleKey); eKey); label.SetResourceReference(Label Label.StyleProperty, .StyleProperty, VsResourceKeys.LabelEnvir VsResourceKeys .LabelEnvironment375P onment375PercentFontS ercentFontSizeStyleKey izeStyleKey); ); XAML: Set the style of the TextBlock or Label as shown: .TextBlockEnvironment375PercentFontSizeStyleKey}}">TextBlock: TextBlock: 375 Percent Scaling > .LabelEnvironment375PercentFontSizeStyleKey}}">Label: Label: 375 Percent Scaling >

Visual Studio UX Guidelines: Fonts and Formatting 11 EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

310% Environment font + Light Appears as: 28 pt Segoe UI Light Use for: large signature dialog titles, main heading in reports Procedural code: Where "textBlock" is a previously defined TextBlock and "label" is a previously defined Label: textBlock.SetResourceReference(TextBlock TextBlock.StyleProperty, .StyleProperty, VsResourceKeys.TextBlockE VsResourceKeys .TextBlockEnvironment nvironment310PercentF 310PercentFontSizeStyl ontSizeStyleKey); eKey); label.SetResourceReference(Label Label.StyleProperty, .StyleProperty, VsResourceKeys.LabelEnvir VsResourceKeys .LabelEnvironment310P onment310PercentFontS ercentFontSizeStyleKey izeStyleKey); ); XAML: Set the style of the TextBlock or Label as shown: .TextBlockEnvironment310PercentFontSizeStyleKey}}">TextBlock: TextBlock: 310 Percent Scaling > .LabelEnvironment310PercentFontSizeStyleKey}}">Label: Label: 310 Percent Scaling >

200% Environment font + Semilight Appears as: 18 pt Segoe UI Semilight Use for: subheadings, titles in small and medium dialogs Procedural code: Where "textBlock" is a previously defined TextBlock and "label" is a previously defined Label: textBlock.SetResourceReference(TextBlock TextBlock.StyleProperty, .StyleProperty, VsResourceKeys.TextBlockE VsResourceKeys .TextBlockEnvironment nvironment200PercentF 200PercentFontSizeStyl ontSizeStyleKey); eKey); label.SetResourceReference(Label Label.StyleProperty, .StyleProperty, VsResourceKeys.LabelEnviron VsResourceKeys .LabelEnvironment200Perc ment200PercentFontSiz entFontSizeStyleKey); eStyleKey); XAML: Set the style of the TextBlock or Label as shown: .TextBlockEnvironment200PercentFontSizeStyleKey}}">TextBlock: TextBlock: 200 Percent Scaling > .LabelEnvironment200PercentFontSizeStyleKey}}">Label: Label: 200 Percent Scaling >

155% Environment font Appears as: 14 pt Segoe UI Use for: section headings in document well UI or reports Procedural code: Where "textBlock" is a previously defined TextBlock and "label" is a previously defined Label: textBlock.SetResourceReference(TextBlock TextBlock.StyleProperty, .StyleProperty, VsResourceKeys.TextBlockE VsResourceKeys .TextBlockEnvironment nvironment155PercentF 155PercentFontSizeStyl ontSizeStyleKey); eKey); label.SetResourceReference(Label Label.StyleProperty, .StyleProperty, VsResourceKeys.LabelEnvir VsResourceKeys .LabelEnvironment155P onment155PercentFontS ercentFontSizeStyleKey izeStyleKey); ); XAML: Set the style of the TextBlock or Label as shown: .TextBlockEnvironment155PercentFontSizeStyleKey}}">TextBlock: TextBlock: 155 Percent Scaling > .LabelEnvironment155PercentFontSizeStyleKey}}">Label: Label: 155 Percent Scaling > 12 Visual Studio UX Guidelines: Fonts and Formatting EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

122% Environment font Appears as: 11 pt Segoe UI Use for: section headings in signature dialogs, top nodes in tree view, vertical tab navigation Procedural code: Where "textBlock" is a previously defined TextBlock and "label" is a previously defined Label: textBlock.SetResourceReference(TextBlock TextBlock.StyleProperty, .StyleProperty, VsResourceKeys.TextBlockEnv VsResourceKeys .TextBlockEnvironment122 ironment122PercentFon PercentFontSizeStyleK tSizeStyleKey); ey); label.SetResourceReference(Label Label.StyleProperty, .StyleProperty, VsResourceKeys.LabelEnvir VsResourceKeys .LabelEnvironment122P onment122PercentFontS ercentFontSizeStyleKey izeStyleKey); ); XAML: Set the style of the TextBlock or Label as shown: .TextBlockEnvironment122PercentFontSizeStyleKey}}">TextBlock: TextBlock: 122 Percent Scaling > .LabelEnvironment122PercentFontSizeStyleKey}}">Label: Label: 122 Percent Scaling >

Environment font + bold Appears as: Bolded 9 pt Segoe UI Use for: Labels and subheads in signature dialogs, reports, and document well UI Procedural code: Where "textBlock" is a previously defined TextBlock and "label" is a previously defined Label: textBlock.SetResourceReference(TextBlock TextBlock.StyleProperty, .StyleProperty, VsResourceKeys.TextBlockE VsResourceKeys .TextBlockEnvironment nvironmentBoldStyleKe BoldStyleKey); y); label.SetResourceReference(Label Label.StyleProperty, .StyleProperty, VsResourceKeys.LabelEnvironmentBoldStyleKey); VsResourceKeys .LabelEnvironmentBoldStyleKey); XAML: Set the style of the TextBlock or Label as shown: Bold TextBlock > Bold Label >


Localizable styles In some instances, localizers will need to modify font styles for different locales, such as removing bolding from text for East Asian languages. To make the localization of font styles possible, those styles must be within the .resx file. The best way to accomplish this and still edit font styles in the Visual Studio form designer is to explicitly set the font styles at design time. Although this creates a full font object and might seem to break the inheritance of parent fonts, only the FontStyle property is used to set the font. The solution is to hook the dialog form's FontChanged event. In the font changed event, walk all controls and check if their font is set. If it is set, change it to a new font based on the form's font and the control's previous font style. An example of this in code is: private void Form1_FontChanged( void Form1_FontChanged(object object sender, sender, System.EventArgs e) { SetFontStyles(); } ///
/// SetFontStyles /// SetFontStyles - This function will iterate all controls on a page /// and /// and recreate their font with the desired fontstyle. /// It /// It should be called in the OnFontChanged handler (and also in the constructor /// in /// in case the IUIService is not available so OnFontChange doesn't fire). /// This /// This way, when the VS shell font is given to us the controls that have /// a /// a different style for the font (bolded for example) will recreate their font /// and /// and use the VS shell font but with a style variation (bolded ...). ///
protected void SetFontStyles() SetFontStyles() { SetFontStyles( this this, , this this, , this this.Font); .Font); } protected static void void SetFontStyles(Contr SetFontStyles(Control ol topControl, Control parent, Font referenceFont) { foreach(Control foreach (Control c in parent.Controls) parent.Controls) { if (c.Controls if (c.Controls != null null && && c.Controls.Count > 0) { SetFontStyles(topCon SetFontStyles(topControl, trol, c, referenceFont); referenceFont); } if (c.Font if (c.Font != topControl.Font) topControl.Font) { c.Font = new new Font(referenceFont, Font(referenceFont, c.Font.Style); } } }

Using this code guarantees that when the form's font is updated, the fonts of controls will update as well. This method should also be called from the form's constructor, because the dialog might fail to get an instance of IUIService and the

FontChanged event will never fire. Hooking FontChanged will allow dialogs to dynamically pick up the new font even if the dialog is already open.


Testing the environment font To ensure that your UI is using the environment font and respects the size settings, open Tools > Options > Environment menu . > Fonts and Colors and select “Environment Font” under the “Show settings for:” dropdown menu.

Set the font to something very different than the default. To make it obvious which UI does not update, choose a font with serifs (such as “Times New Roman”) and set a very large size. Then test your UI to ensure it respects the environment. Here is an example using the license dialog:

In this case, “User Information” and “Product Information” are not respecting the font. In some cases this might be an explicit design choice, but it can be a bug if the explicit font is not specified as a part of the redline specifications. To reset the font, font, click “Use Defaults” under Tools > Options > Environment > Fonts and Colors.


Fonts and Formatting: Text style Text style refers to font size, weight, and casing. This topic is about design. For implementation guidance, guidance, see The environment font. font.

Text casing All caps Do not use all caps for titles or labels in Visual Studio.

All lowercase Do not use all lowercase for titles or labels in Visual Studio.

Sentence and title case Text in Visual Studio should use either title case or sentence case, depending on the situation.

Use title case for: Dialog titles Group boxes Menu items Context menu items Buttons Table labels Column headers Tooltips

Use sentence case for: Labels Check boxes Radio buttons List box items Status bars

Title case Title case is a style in which the first letters of most or all of the words within a phrase are capitalized. In Visual Studio, title case is used for many items, including:

Tooltips Example: "Preview Selected Items"

Table field labels Example: "Browse to URL"

Column headers Example: "System Response"

Menu items Example: "Save All"

When using title case, refer to the following table for when to capitalize words and when to leave them lowercase:

Uppercase

Comments and examples

All nouns All verbs

including "Is" and other forms of "to be"

All adverbs

including "Than" and "When"

All adjectives

including "This" and "That"

All pronouns

including the possessive "Its" as well as "It's," a contraction of the pronoun "it" and verb "is"

First and last words, regardless of parts of speech Prepositions that are part of a verb phrase

Such as in: "Closing Out All Windows" or "Shutting Down the System"

All letters of an acronym

HTML, XML, URL, IDE, or RGB

The second word in a compound word if it is a noun or

Cross-Reference, Pre-Microsoft Software, Read/Write

proper adjective, or if the words have equal weight

Access, Run-Time


Lowercase

Examples

The second word in a compound word if it is another part of

How-to, Take-off

speech or a participle modifying the first word Articles, unless one is the first word in the title

a, an, the

Coordinate conjunctions

and, but, for, nor, or

Prepositions with words of four or fewer letters outside of a

into, onto, as for, out of, on top of

verb phrase “To” when used in an infinitive phrase

"How to Format Your Hard Disk"

Sentence case Sentence case is the standard capitalization method for writing in which only the first word of the sentence is capitalized, along with any proper nouns and the pronoun "I." In general, sentence case is easier for a worldwide audience to read, especially when the content will be translated by a machine. Use sentence case for: 



Status bar messages. These are simple, short, and provide only status information. Example: Example: “Loading project file” All other UI elements, including labels, check boxes, radio buttons, and list box items. Example: "Select all items in list"

Text formatting Default text formatting in Visual Studio 2013 is controlled by an environment font service. service . This service helps ensure a consistent font appearance throughout the IDE (integrated development environment), and you must use it to guarantee a consistent experience for your users. The default size used by the Visual Studio font service comes from Windows and appears as 9 pt. You can apply formatting to the environment font. This topic covers how and where to use styles. For implementation information, refer refer to The environment font. font.

Bold text Bold text is used sparingly in Visual Studio and should be reserved for:      

question labels in wizards designating the active project in Solution Explorer overridden values in the certain properties tool window certain events in the Visual Basic editor dropdown lists server-generated server-generated content in the document outline for web pages section headers in complex dialog or designer UI

Italics Visual Studio does not use either italic or italic or bolded

text. italic text.

Color 

Blue is reserved for hyperlinks (navigation and commanding) and should never be used for orientation.



Larger headings (environment (environment font x 155% or greater) can be colored for these purposes: o

To provide visual appeal to signature Visual Studio UI

o

To call attention to a specific area

o

To offer relief from the standard dark gray/black environment text color




Color in headings should leverage existing Visual Studio brand colors, primarily the main purple, #FF68217A #FF68217A..



When using color in headings, you must adhere to the Windows color guidelines, guidelines , including contrast ratio and other accessibility considerations.

Font size Visual Studio Dev14 UI design features a lighter appearance with more white space. Where possible, chrome and title bars have been reduced or removed. While information density is a requirement in Visual Studio, typography continues to be important, with an emphasis on more open line spacing and a variation of font sizes and weights. The following tables includes design details and visual examples for the display fonts used in Visual Studio. Some display font variations have both the size and weight, such as L ight or Semilight, coded into their appearance. Do not use other sizes, weights, or typefaces. Implementation code snippets for all display fonts can be found in The environment font. font .

Headline 1: Environment font x 375% + Light

AaBbCcXxYyZz Usage: Rare. Unique

In comps, appears as 34pt Segoe UI Light.

branded UI only.

Spec as: Environment font x 375% + Light.

Do: -

Use sentence case Always use Light weight

Visual example: Currently not used. May be used in the Start Page.

Do not: -

-

Use for UI other than signature UI such as Start Page Bold, italic, or bold italic Use for body text Use in tool windows


Headline 2: Environment font x 310% + Light

AaBbCcXxYyZz Usage:

In comps, appears as 28pt Segoe UI Light.

-

Spec as: Environment font x 310% + Light.

Larger heading in signature dialogs

-

Main report

Visual example:

heading

Do: -

Use sentence case Always use Light weight

Do not: -

-

Use for UI other than signature UI such as Start Page Bold, italic, or bold italic Use for body text Use in tool windows

Headline 3: Environment font x 200% + Semilight

AaBbCcXxYyZz Usage:

In comps, appears as 18 pt Segoe UI Semilight.

-

Spec as: Environment font x 200% + Semilight .

Subheadings Titles in small and medium dialogs

Visual example:

Do: -

Use sentence case Always use Semilight weight

Do not: -

Bold, italic, or bold italic Use for body text Use in tool windows


Headline 4: Environment font x 155% AaBbCcXxYyZz Usage:

In comps, appears as 14 pt Segoe UI.

-

Spec as: Environment font x 155%. 155%.

-

Section headings in document well UI Reports

Visual example:

Do: -

Use sentence case

Do not: -

Bold, italic, or bold italic Use for body text Use in standard VS controls Use in tool windows

Headline 5: Environment font x 122% AaBbCcXxYyZz Usage:


-

Spec as: Environment font x 122%.

-

Section headings in signature dialogs Top nodes in tree view Vertical tab navigation

Visual example:

Do: -

Use sentence case

Do not: -

Bold, italic, or bold italic Use for body text Use in standard VS controls Use in tool windows


Headline 6: Environment font + Bold AaBbCcXxYyZz

Usage:

In comps, appears as bolded 9 pt Segoe UI.

-

Spec as: Environment font + Bold.

Labels and subheads in signature dialogs, reports, and document well UI

Visual example:

Do: -

Use sentence case Use bold weight

Do not: -

Italic or bold italic Use for body text Use in standard VS controls Use in tool windows

Body: Environment font AaBbCcXxYyZz

Usage:


All other text

Spec as: Environment font.

Do: -

Use sentence case

Visual example:

Do not: -

Italic or bold italic


Padding and spacing Headings require space around them to give them the appropriate emphasis. This space varies depending on point size and what else is near the heading, such as a horizontal rule or a line of text in the environment font. 

The ideal padding for a heading by itself should be 90% of the capital character height space. For example, a 28 pt Segoe UI Light heading has a cap height of 26 pt, and the padding should be approximately 23 pt, or about 31 pixels.



The minimum space around a heading should be 50% of the capital character height. Less space may be used when a heading is accompanied by a rule or other tight-fitting element.



Bolded environment font text should follow default line height spacing and padding.

Additional resources -

MSDN: Fonts MSDN: User interface text


3: Colors and Styling



Colors and Styling: Using color in Visual Studio Color is an important element in most user interfaces, including Visual Studio. According to the Windows UX Guide: Guide: “Beyond “Beyond pure aesthetics, color has associated meanings and elicits emotional responses. To prevent confusion in meaning, color must be used consistently. To obtain the desired emotional responses, color must be used appropriately.” appropriately. ” In Visual Studio, color is used primarily as a communication tool, not just as decoration. Use color minimally and reserve it for situations where you want to:    

Communicate meaning or affiliation (for example, platform or language modifiers) Attract attention (for example, indicating a status change) Improve readability and provide landmarks for navigating the UI Increase desirability

Several options exist for assigning colors to UI elements in Visual Studio. Sometimes it can be difficult to figure out which option you’re supposed to use, or how to use it correctly. This series of articles will help you: 1. 2. 3.

Understand the different services and systems used to define colors in Visual Studio. Select the correct option for a given element. Correctly use the option you have chosen.

IMPORTANT: Never hardcode hex, RGB, or system colors to your UI elements. Using the services allows for flexibility in tuning hue. Additionally, without the service, you will not be able to take advantage of the theme-switching capabilities of the VSColor service and will either have to implement your own theme-switching method or your UI might look inconsistent in Visual Studio.

24 Visual Studio UX Guidelines: Colors and Styling EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

Methods for assigning color to Visual Studio interface elements Choose the method best suited to your UI elements: Your UI

Method

What are they?

You have embedded or standalone

System colors

System names that allow the operating system to define the

dialog boxes.

color and appearance of the UI elements, such as for common dialog controls

You have custom UI that you want to

Common shared colors

Existing predefined color token names for specific UI elements

Custom colors

Color token names that are specific to an area and not meant

be consistent with the overall VS environment and you have UI elements that match the category and semantic meaning of the shared tokens. tokens. You have an individual feature or group of features and there is no

to be shared with other UI

shared color for similar elements. You want to allow the end user to

End-user customization

Settings defined in the “Fonts and Colors” page of the Tools >

customize UI or content (for example,

(Tools > Options dialog)

Options dialog or a specialized page specific to one UI feature

Daytona

Allows UI authored in HTML to access the color and font service

for text editors or specialized designer windows). You have UI that is authored in HTML.

Visual Studio themes Visual Studio features three different color themes: light, dark, and blue . It also detects High Contrast mode, which is a system-wide color theme designed for accessibility. Users are prompted to select a theme during their first use of Visual Studio and are able to switch themes later by going to Tools > Options > Environment > General and choosing a new theme from the “color theme” drop-down theme” drop-down menu. Users can also use Control Panel to switch their entire systems into o ne of several High Contrast themes. If a user selects a High Contrast theme, then the Visual Studio color theme selector no longer affects colors in Visual Studio, although any theme changes are saved for when the user exits High Contrast mode. For F or more information about High Contrast mode, see Choosing High Contrast colors. colors .

Visual Studio UX Guidelines: Colors and Styling 25 EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

Colors and Styling: The VSColor service Visual Studio provides an environment color service, also called the VSColor service or the shell color service. This service allows you to bind the color values of your UI elements to a name-value color set containing colors for each theme. The VSColor service must be used for all UI elements, so that colors automatically change to reflect the current user-selected theme, and so that UI bound to the environment color service will integrate with new themes in future versions of Visual Studio. There are two ways to use the VSColor service: 1.

Use a named color token that has been predefined for the environment. See the Shared colors topic for more details. The benefit of this method is that your UI will always match common aspects of th e IDE. The downside of this method is that the set of colors is limited, and you are restricted to using these colors in the same way that the shell does. If you don’t use the colors correctly, you will have unexpected results when the environment changes due to the addition of a new theme. Design your own set of colors, give each color a token name, and add these definitions to your own theme color XML file. The Color value reference topic can assist you in choosing colors, and the Creating new color tokens topic will tell you how to add the colors to the service.  

2.

How the service works The environment color service reads VSColors defined in the .pkgdef for the UI component. These VSColors are then referenced in XAML markup or code and are loaded t hrough either the IVsUIShell5.GetThemedColor or a DynamicResource mapping.

Environment color service architecture


Accessing the service There are several different ways to access the VSColor service, depending on what kind of color tokens you are using and what kind of code you have.

Predefined environment colors From native code The shell provides a service that gives access to the COLORREF of the colors. The service/interface is:

IVsUIShell2::GetVSSysColorE IVsUIShell2::GetVSSysColorEx(VSSYSCOLOR x(VSSYSCOLOR dwSysColIndex, dwSysColIndex, DWORD *pdwRGBval) In the file VSShell80.idl, the enumeration __VSSYSCOLOREX has shell color constants. To use it, pa ss in as the index value either one of the values from the enum __VSSYSCOLOREX documented in MSDN or a regular index number that the Windows system API, GetSysColor, accepts. Doing this gets back the RGB value of the color that should be used in the second parameter. If storing a pen or brush with a new color, you must AdviseBroadcastMessages (off of the Visual Studio shell) and listen for WM_SYSCOLORCHANGE and WM_THEMECHANGED messages.

// To access the color service in native code, you'll make a call that resembles this: pUIShell2->GetVSSysColor pUIShell2->GetVSSysColorEx(VSCOLOR_ Ex(VSCOLOR_COLOR_NAME COLOR_NAME, , &rgbLOCAL_COLOR); &rgbLOCAL_COLOR); NOTE: The COLORREF values returned by GetVSSysColorEx() contain just R,G,B components of a theme color. If a theme entry uses transparency, the alpha-channel value is discarded before returning. Therefore, if the environment color of interest needs to be used in a place where transparency channel is important, you should use topic. IVsUIShell5.GetThemedColor instead of IVsUIShell2::GetVSSysColorEx, as described later in this topic.

From managed code Accessing the VSColor service through native code is fairly straightforward. If you are working through managed code, however, determining how to use the service can be tricky. Here is the process in C#:

private void VSColorPaint(object VSColorPaint(object sender, System.Windows.Forms.P System.Windows.Forms.PaintEventAr aintEventArgs gs e) { //getIVSUIShell2 IVsUIShell2 uiShell2 = Package.GetService(typeof Package.GetService(typeof(SVsUIShell)) (SVsUIShell)) as IVsUIShell2; Debug.Assert (uiShell2 != null null, , "failed to get IVsUIShell2"); IVsUIShell2"); if (uiShell2 != null if (uiShell2 null) ) { //get the COLORREF structure uint win32Color; uint win32Color; uiShell.GetVSSysColorEx(VSSYSCOLOREX.VSCOLOR_SMARTTAG_HOVER_FILL, out out win32Color); win32Color); //translate it to a managed Color structure Color myColor = ColorTranslator.FromWin32((int ColorTranslator.FromWin32((int)win32Color); )win32Color); //use it e.Graphics.FillRectangle(new e.Graphics.FillRectangle( new SolidBrush(myColor), SolidBrush(myColor), 0, 0, 100, 100); } } If you are working in Visual Basic, use: Dim myColor Dim myColor As As Color Color = ColorTranslator.FromWin32(( Integer Integer)win32Color) )win32Color)


From WPF UI You can bind to Visual Studio colors through values exported into the Application's ResourceDictionary. Below is a n example of using resources from the color table as well as binding to the environment font data in XAML.

New color tokens Consuming VSColors from WPF XAML If you are consuming VSColors from WPF UI, you can use the Theme Editor Tool’s “View Resource Code” button to create a C# class that will make it easy to access your resources. You can then copy the generated class to be compiled as part of your project. It doesn't matter what class name or namespace you use, because you are free to change that when you put this code into your project. This auto-generated class is intended to make it easy to consume the resources you've defined from XAML. For example, one might use XAML like this to access a new SelectedItem color:

At runtime, Visual Studio will dynamically bind to the correct brush values for your colors.

Consuming VSColors from non-WPF UI If you have non-WPF UI or need to access color values directly, you can use IVsUIShell5.GetThemedColor. Color values should be re-read from this service every ev ery time the theme changes. During theme changes, WM_THEMECHANGED or

WM_SYSCOLORCHANGE messages are broadcast to subscribers of IVsShell.AdviseBroadcastMessages. The class VSColorTheme provides a way to be notified of the change by listening to the ThemeChanged event.

Use IVsUIShell5.GetThemedColor instead of IVsUIShell2::GetVSSysColorEx The Visual Studio 2010 Environment Color S ervice used IVsUIShell2.GetVSSysColorEx to map VSColors to your UI. This method has been replaced by IVsUIShell5.GetThemedColor in Visual Studio 2012. Code that uses GetVSSysColorEx will continue to function, but it will only be able to access the VSColors that were defined in Visual Studio 2010, and the color values returned don’t contain the transparency channel. Additionally, you will not be able to access new colors defined in Visual Studio 2012 or your VSPackage.


Helper classes and methods for managed code For managed code, the shell’s Managed Package Framework library (Microsoft.VisualStudio.Shell.12.0.dll) contains a couple of helper classes facilitating the use of themed colors. The helper methods in the

Microsoft.VisualStudio.Shell.VsColors class in MPF include GetThemedGDIColor() and GetThemedWPFColor(). Those helper methods return the color value of a theme entry as System.Drawing.Color or System.Windows.Media.Color, to be used in WinForms or WPF UI.

IVsUIShell5 shell5; Button button = new Button(); button.BackColor button.BackColor = GetThemedGDIColor(shell5 GetThemedGDIColor(shell5, , SolutionExplorerColors.Se SolutionExplorerColors.SelectedItemBru lectedItemBrushKey); shKey); button.ForeColor button.ForeColor = GetThemedGDIColor(shell5 GetThemedGDIColor(shell5, , SolutionExplorerColors.Sele SolutionExplorerColors.SelectedItemTextB ctedItemTextBrushKey); rushKey); /// /// /// /// /// ///

Gets a System.Drawing.Color value from the current theme for the given color key.
hell">The The IVsUIShell5 service, used to get the color's val ue. name="themeResourceKey">The key to find the color for. for. The current theme's value of the named color. The color.

public static static System.Drawing.Color GetThemedGDIColor(this GetThemedGDIColor(this IVsUIShell5 IVsUIShell5 vsUIShell, ThemeResourceKey ThemeResourceKey themeResourceKey) themeResourceKey) { Validate.IsNotNull(vsUIShell, "vsUIShell" "vsUIShell"); ); Validate.IsNotNull(themeResourceKey, "themeResourceKey" "themeResourceKey"); ); byte[] byte [] colorComponents colorComponents = GetThemedColorRgba(vs GetThemedColorRgba(vsUIShell, UIShell, themeResourceKey); // Note: The Win32 color we get back from IVsUIShell5.GetTh IVsUIShell5.GetThemedColor emedColor is ABGR return return System.Drawing.Color.FromArgb(colorComponents[3], colorComponents[0], colorComponents[1], colorComponents[1], colorComponents[2]); colorComponents[2]); } private static byte[] byte[] GetThemedColorRgba(IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey) { Guid category = themeResourceKey.Category; themeResourceKey.Category; __THEMEDCOLORTYPE __THEMEDCOLORTYPE colorType = __THEMEDCOLORTYPE.TCT_F __THEMEDCOLORTYPE.TCT_Foreground oreground if (themeResourceKey.KeyType if (themeResourceKey.KeyType == ThemeResourceKeyType.BackgroundColor || themeResourceKey.KeyType themeResourceKey.KeyType == ThemeResourceKeyType.Bac ThemeResourceKeyType.BackgroundBrush) kgroundBrush) { colorType = __THEMEDCOLORTYPE.TCT __THEMEDCOLORTYPE.TCT_Background _Background; ; } // This call will throw an exception if the color is not found uint rgbaColor = vsUIShell.GetThemedColor(ref vsUIShell.GetThemedColor(ref category, themeResourceKey.Name, (uint uint)colorType); )colorType); return BitConverter.GetBytes( BitConverter.GetBytes(rgbaColor); rgbaColor); } public static static System.Windows.Media.Color GetThemedWPFColor(this IVsUIShell5 vsUIShell, ThemeResourceKey ThemeResourceKey themeResourceKey) themeResourceKey) { Validate.IsNotNull(vsUIShell, "vsUIShell" "vsUIShell"); ); Validate.IsNotNull(themeResourceKey, "themeResourceKey" "themeResourceKey"); ); byte[] byte [] colorComponents colorComponents = GetThemedColorCompone GetThemedColorComponents(vsUIShe nts(vsUIShell, ll, themeResourceKey); themeResourceKey); return System.Windows.Media.Color.FromArgb(colorComponents[3], colorComponents[0], colorComponents[1], colorComponents[1], colorComponents[2]); colorComponents[2]); } Visual Studio UX Guidelines: Colors and Styling 29 EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

The class can also be used to obtain VSCOLOR identifiers for a given WPF color resource key, or vice versa. public static string GetColorBaseKey( int int vsSysColor); vsSysColor); public static bool TryGetColorIDFromBaseKey( string string baseKey, baseKey, out int vsSysColor); vsSysColor);

The methods of VsColors class query the VSColor service to return the color value each time they are invoked. To obtain a color value as System.Drawing.Color, an alternative with better performance is to instead use the methods of the

Microsoft.VisualStudio.PlatformUI.VSThemeColor class, which caches the color values obtained from the VSColor service. The class subscribes internally to shell broadcast messages events, and discards the cached value when a theme changing event occurs. Also, the class provides a .NET-friendly event to subscribe to theme changes. Use the ThemeChanged event to add a new handler, and use the GetThemedColor() method to obtain color values for the ThemeResourceKeys of interest. A sample code could look like this: public MyWindowPanel() MyWindowPanel() { InitializeComponent(); // Subscribe to theme changes events so we can refresh the colors VSColorTheme.ThemeChanged += VSColorTheme_ThemeChanged; RefreshColors(); } private void void VSColorTheme_ThemeChanged(ThemeChangedEventArgs e) { RefreshColors(); // Also post a message to all the children so they can apply the current theme appropriately foreach foreach (System.Windows.Forms.Control child in this.Controls) this.Controls) { NativeMethods.SendMessage(child.Handle, e.Message, IntPtr.Zero, IntPtr.Zero); } } private void RefreshColors() RefreshColors() { this.BackColor this .BackColor = VSColorTheme.GetThemedColor(EnvironmentColors.ToolWindowBackgroundColorKey); this.ForeColor this .ForeColor = VSColorTheme.GetThemedColor(EnvironmentColors.ToolWindowTextColorKey); } protected override void Dispose(bool Dispose( bool disposing) disposing) { if (disposing) if (disposing) { VSColorTheme.ThemeChanged -= this this.VSColorTheme_ThemeChanged; .VSColorTheme_ThemeChanged; base.Dispose(disposing); base .Dispose(disposing); } }


Colors and Styling: Shared colors When you are designing UI that uses common Visual Studio shell elements, or you would like your interface element to be consistent with similar features, use existing token names in package definition files to choose and assign colors. This ensures that your UI stays consistent with the overall Visual Studio environment and that it updates automatically when themes are added or updated. This article describes common UI elements and the token names that they use, which you can reference when building similar UI. For specific information about how to access these color tokens, see The VSColor service.. service Make sure to use token names correctly: 





Use token names based on function, not on the color i tself. The common shared colors are associated with specific interface elements and are only intended to be used for the same or similar features. For example, don’t reuse the color of a pressed combo box for a spinning progress animation just because you like the color. The functions of the combo box and the animation are different, and if the color associated w ith the combo box changes, it may no longer be an appropriate color for your animation element. Consistent use of color helps orient your users and prevent confusion. Use background and text colors in the correct combination. Background colors that are intended to be used with text will have an associated text color. Don’t use text colors o ther than what is specified for that background. If there is not an associated text color, don’t use that background color for any surface on which you expect to display text. Other combinations of text and background colors may result in an unreadable interface. Use control colors that are appropriate for their location. In certain states, some Visual Studio controls do not have separate border and background colors. Instead, they pick up those colors from the surfaces behind them. Make sure that you always use the token names that are appropriate for the location where you are placing the control.

Shared color categories Shared color tokens should only be used for UI that is i ntended for similar purposes. Category names are a good indication of the type of area that the colors should be used in. Never mix and match tokens from different categories. The current shared tokens are in these categories: title, Menu);; Command bars (Command bar group, Command group, Command icons, Combo box, Command structures: Menus (Menu title, Menu) Drop-down, Split Drop-down, Split button, ‘More options’ and ‘Overflow’ buttons) buttons) frame; Document tabs (Open document tabs, Preview tabs, Preview tab, Document tab, Document overflow button) Document windows: Window frame; Document frame; Tool window title bar (Title bar buttons); buttons); Tool window tabs; Auto-hide tabs; Auto-hide tabs Tool windows: Tool window frame; Tool lists); Hyperlink; Infobar; Scrollbar; Infobar; Scrollbar; Tree Tree view; Button view; Button controls; Common shared controls: Search box (Search drop-down lists); Check box controls; Drop-down/Combo controls; Drop-down/Combo box controls; Tabular controls; Tabular data (grid) controls

Themed dialogs Manifest Designer Tagging: Tag; Glyph (close icon) Background; Command Command shelf Shell: Background;

Toolbox

NOTE: Do not use tokens found in the categories “Start Page” or “Cider”!


Command structures Menus Menus can occur at several places within Visual Studio 2013: the main menu bar, embedded in document or tool windows, or on right-click in various locations throughout the IDE. Implementations of menus associated with other UI elements are discussed in the section for the respective element. You should always use the standard menu implementation provided by the Visual Studio environment. However, in some rare instances you might not have access to the standard V isual Studio menus. In these situations, use the following token names to ensure that your UI is consistent with o ther menus in Visual Studio. Use … 



whenever you need to create a custom menu. when you have a new UI component that you want to match the VS menus.

Do not use … 

the background color alone. Always use the background/foreground combination as specified.


Menu title Menu titles consist of a background, a border, and the title text, as well as an o ptional glyph, usually when the menu is found in a command bar. Use … whenever you are creating a custom menu title. Do not use … 

 

State

Component

Default

Menu title

Menu title with glyph Hover

for anything that you don’t want to always match the menu men u title. in any background/foreground combination other than specified.

Element

Token name: Category.Color

Background

None

Foreground (Text)

Environment.CommandBarTextActive

Foreground (Glyph)

Environment.CommandBarMenuGlyph

Border

None

Background

Menu title

Menu title with glyph Pressed

Menu title with glyph Disabled

Menu title with glyph

Gradient stops for this token not used in themed UI.

Foreground (Text)

Environment.CommandBarTextHover

Foreground (Glyph)

Environment.CommandBarMenu Environment.C ommandBarMenuMouseOverGlyp MouseOverGlyph h

Border

Environment.CommandBarBorder

Background

Menu title

Environment.CommandBarMous Environment.C ommandBarMouseOverBackgrou eOverBackgroundBegin ndBegin

Environment.CommandBarMenu Environment.C ommandBarMenuBackgroundGra BackgroundGradientBegin dientBegin Gradient stops for this token not used in themed UI.

Foreground (Text)


Foreground (Glyph)

Environment.CommandBarMenu Environment.C ommandBarMenuMouseDownGlyp MouseDownGlyph h

Border

Environment.CommandBarMenuBorder

Background

None

Foreground (Text)

Environment.CommandBar Environment.C ommandBarTextInactive TextInactive

Foreground (Glyph)

Environment.CommandBarText Environment.C ommandBarTextInactive Inactive

Border

None


Menu An individual menu item consists item consists of the menu text and an optional icon, check box, or submenu glyph. Its background and text color change on hover. This color token is a background/foreground background/foreground pair. Use … 

for any drop-down list that is launched from a menu bar or command bar.

Do not use … 



State

for any drop-down list that occurs in another context. in any background/foreground combination other than specified.

Component

Element


Background

Environment.CommandBarMenuBackgroundG Environment.CommandBarMe nuBackgroundGradient radient Begin

Default

Gradient stops for this token not used i n themed UI.

Foreground (Text) Foreground

Menu

(Submenu glyph) Border Icon channel background

Checked

Selected Hover

Menu item

Environment.CommandBarTe Environment.C ommandBarTextActive xtActive Environment.CommandBarMe Environment.C ommandBarMenuSubmenuGlyp nuSubmenuGlyph h Environment.CommandBarMe Environment.C ommandBarMenuBorder nuBorder Environment.CommandBarMe Environment.C ommandBarMenuIconBackgro nuIconBackground und

Separator

Environment.CommandBarMe Environment.C ommandBarMenuSeparator nuSeparator

Shadow

Environment.DropShadowBa Environment.D ropShadowBackground ckground

Checkmark

Environment.CommandBarCheckBox

Checkmark background

Environment.CommandBarSe Environment.C ommandBarSelectedIcon lectedIcon

Icon background

Environment.CommandBarSelected

Icon border

Environment.CommandBarSe Environment.C ommandBarSelectedBorder lectedBorder

Background

Environment.CommandBarMe Environment.C ommandBarMenuItemMouseOv nuItemMouseOver er

Foreground (Text)

Environment.CommandBarMe Environment.C ommandBarMenuItemMouseOv nuItemMouseOver er

Foreground

Environment.CommandBarMenuMouseOverSu Environment.CommandBarMe nuMouseOverSubmenuGl bmenuGl yph

(Submenu glyph)


State

Component

Hover

Checked

Element


Checkmark

Environment.CommandBarCh Environment.C ommandBarCheckBoxMouseOv eckBoxMouseOver er

Checkmark background Icon background

Selected Disabled

Icon border Foreground (Text)

Menu item

Foreground (Submenu glyph) Checkmark Checkmark

Checked

background

Environment.CommandBarHo Environment.C ommandBarHoverOverSelect verOverSelectedIcon edIcon Environment.CommandBarHoverOverSelect Environment.CommandBarHo verOverSelected ed Environment.CommandBarHo Environment.C ommandBarHoverOverSelect verOverSelectedIconB edIconB order Environment.CommandBarT Environment.C ommandBarTextInactive extInactive Environment.CommandBarMe Environment.C ommandBarMenuSubmenuGlyp nuSubmenuGlyph h Environment.CommandBarCh Environment.C ommandBarCheckBoxDisable eckBoxDisabled d Environment.CommandBarSe Environment.C ommandBarSelectedIconDis lectedIconDisabled abled


Command bars The command bar can appear in multiple places within the Visual Studio IDE, most notably the command shelf and embedded in tool or document windows. In general, always use the standard command bar implementation provided by the Visual Studio environment. Using the standard mechanism ensures that all visual details will appear correctly and that interactive elements, will behave consistently with other Visual Studio command bar controls. However, if it is necessary for you to build your own command bar, make sure you style it correctly using the following token names.

Use … 

Do not use … in places where you need an embedded command bar but are unable to use the standard Visual Studio command bar implementation.





for UI elements that are not similar to a command bar. for command bar components other than t han the ones for which token names are specified.

Command bar group A command bar group consists of a related set of command bar controls and might contain any number of buttons, spl it buttons, drop-down menus, combo boxes, or menus. Colors fo r those controls are regulated by separate token names and are discussed individually elsewhere in this guide. A separator line is used to divide a command bar group into related subgroups.

Use … 

Do not use … in places where you need an embedded command bar but are unable to use the standard Visual Studio command bar implementation.

State

Element

Default

Background

(No other states)





for UI elements that are not similar to a command bar. for command bar components other than the ones for which token names are specified.


Environment.CommandBarGrad Environment.C ommandBarGradientBegin ientBegin Gradient stops for this token not used in themed UI.

Border

Environment.CommandBarTool Environment.C ommandBarToolBarBorder BarBorder

Drag handle

Environment.CommandBarDragHandle

Separator

Environment.CommandBarTo Environment.C ommandBarToolBarSepara olBarSeparator tor Environment.CommandBarTool Environment.C ommandBarToolBarSeparatorH BarSeparatorHighlight ighlight


Command icons For help selecting or designing icons for your command bar buttons, see the topic on Icon design ( 4: Images and Icons ). Use … 

for any buttons that will be placed on a co mmand bar.

Do not use …  

State

Component

Default

Standard

Selected

for controls that have their own token names. in any background/foreground combination other than specified.

Element


Background

N/A (inherits from command bar background)

Foreground (Text) Environment.C Environment.CommandBarTex ommandBarTextActive tActive Border

N/A

Background

Environment.CommandBarSelected

Foreground (Text) Environment.C Environment.CommandBarTex ommandBarTextSelected tSelected Border

Hover and keyboard focused

Background

Standard

Selected

Disabled

Standard


Border


Background

Environment.CommandBarHov Environment.C ommandBarHoverOverSelecte erOverSelected d

Foreground (Text) Environment.C Environment.CommandBarTex ommandBarTextHoverOverSel tHoverOverSelected ected

Background

Standard

Environment.CommandBarMou Environment.C ommandBarMouseOverBackgro seOverBackgroundBegin undBegin

Foreground (Text) Environment.CommandBarTextHover

Border Pressed

Environment.CommandBarSel Environment.C ommandBarSelectedBorder ectedBorder

Environment.CommandBarHov Environment.C ommandBarHoverOverSelecte erOverSelectedIconBorder dIconBorder Environment.CommandBarMou Environment.C ommandBarMouseDownBackgro seDownBackgroundBegin undBegin Gradient stops and values available, but not used in themed UI.

Foreground (Text) Environment.C Environment.CommandBarTex ommandBarTextMouseDown tMouseDown Border


Background

N/A (inherits from command bar background)

Foreground (Text) Environment.C Environment.CommandBarTex ommandBarTextInactive tInactive Border

N/A

Combo box Use ...  

when building custom combo boxes. when creating a command bar control that th at is similar to a combo box.

Do not use … 



for anything you don’t want always to match the command bar UI. when you have access to a styled combo box.


State

Component

Default

Input field

Drop-down button

Element

Token Name: Category.Color

Background

Environment.ComboBoxBackground

Foreground (Text)

Environment.ComboBoxText

Border

Environment.ComboBoxBorder

Separator

No separator

Background

N/A (inherits)

Foreground (Glyph) Environment.ComboBoxGlyph Background

Drop-down list Hover

Environment.ComboBoxPopu Environment.C omboBoxPopupBackgroundBegi pBackgroundBegin n Gradient stops for this token not used in themed UI.

Foreground (Text)

Environment.ComboBoxItemText

Border

Environment.ComboBoxPopupBorder

Background

Input field

Environment.ComboBoxMous Environment.C omboBoxMouseOverBackgroun eOverBackgroundBegin dBegin Gradient stops for this token not used in themed UI.

Foreground (Text)

Environment.ComboBoxMous Environment.C omboBoxMouseOverText eOverText

Border

Environment.ComboBoxMous Environment.C omboBoxMouseOverBorder eOverBorder

Separator

Environment.ComboBoxMous Environment.C omboBoxMouseOverSeparator eOverSeparator

Background

Environment.ComboBoxButt Environment.C omboBoxButtonMouseOverBac onMouseOverBackground kground

Drop-down button

Foreground (Glyph) Environment.C Environment.ComboBoxMous omboBoxMouseOverGlyph eOverGlyph

Drop-down list

Background

Environment.ComboBoxMous Environment.C omboBoxMouseOverBackgroun eOverBackgroundBegin dBegin

(Outside)


Background (Item)

Environment.ComboBoxItem Environment.C omboBoxItemMouseOverBac MouseOverBackground kground

Foreground (Text)

Environment.ComboBoxItem Environment.C omboBoxItemMouseOverText MouseOverText

Border (Outside)


Background

Environment.ComboBoxFocu Environment.C omboBoxFocusedBackground sedBackground

Foreground (Text)

Environment.ComboBoxFocusedText

Border

Environment.ComboBoxFocu Environment.C omboBoxFocusedBorder sedBorder

Separator

Environment.ComboBoxFocu Environment.C omboBoxFocusedButtonSepar sedButtonSeparator ator

Background

Environment.ComboBoxFocu Environment.C omboBoxFocusedButtonBackg sedButtonBackground round

Drop-down list Focused

Input field

Drop-down button Pressed

Input field

Drop-down button Disabled

Input field

Drop-down button

Foreground (Glyph) Environment.C Environment.ComboBoxFocu omboBoxFocusedGlyph sedGlyph Background

Environment.ComboBoxMous Environment.C omboBoxMouseDownBackgroun eDownBackground d

Foreground (Text)

Environment.ComboBoxMous Environment.C omboBoxMouseDownText eDownText

Border

Environment.ComboBoxMous Environment.C omboBoxMouseDownBorder eDownBorder

Separator

Environment.ComboBoxMous Environment.C omboBoxMouseDownSeparator eDownSeparator

Background

Environment.ComboBoxBut Environment.C omboBoxButtonMouseDown tonMouseDownBackground Background

Foreground (Glyph) Environment.C Environment.ComboBoxMous omboBoxMouseDownGlyph eDownGlyph Background

Environment.ComboBoxDisa Environment.C omboBoxDisabledBackground bledBackground

Foreground (Text)

Environment.ComboBoxDisa Environment.C omboBoxDisabledText bledText

Border

Environment.ComboBoxDisa Environment.C omboBoxDisabledBorder bledBorder

Separator

No separator

Background

N/A

Foreground (Glyph) Environment.C Environment.ComboBoxDisa omboBoxDisabledGlyph bledGlyph


Drop-down Use … 

when you are creating custom drop-down list controls.


State

Component

Default

Selection field

Drop-down button

for anything that is not similar to a drop-down list. for combo boxes or split buttons.

Element


Background

Environment.DropDownBackground

Foreground (Text)

Environment.DropDownText

Border

Environment.DropDownBorder

Separator

No separator

Background

None

Foreground (Glyph)

Environment.DropDownGlyph Environment.DropDownPopu Environment.D ropDownPopupBackgroundBeg pBackgroundBegin in

Background

Drop-down list

Hover

Foreground (Text)

Environment.ComboBoxItemText

Border

Environment.DropDownPopupBorder

Shadow

Environment.DropShadowBa Environment.D ropShadowBackground ckground

Background

Selection field

Drop-down button

Pressed

Selection field

Drop-down button

Environment.DropDownMous Environment.D ropDownMouseOverBackgroun eOverBackgroundBegin dBegin Gradient stops for this token not used in themed UI.

Border

Environment.DropDownMo Environment. DropDownMouseOverBorde useOverBorder r

Separator

Environment.DropDownButt Environment.D ropDownButtonMouseOverSep onMouseOverSeparator arator

Background

Environment.DropDownButt Environment.D ropDownButtonMouseOverBac onMouseOverBackground kground

Foreground (Glyph)

Environment.DropDownMous Environment.D ropDownMouseOverGlyph eOverGlyph

Background (Menu item)

Drop-down list


Environment.ComboBoxIt Environment. ComboBoxItemMouseOverB emMouseOverBackground ackground

Foreground (Text)

Environment.ComboBoxItem Environment.C omboBoxItemMouseOverText MouseOverText

Border (outside)


Border (Menu item)

Environment.ComboBoxItem Environment.C omboBoxItemMouseOverBorde MouseOverBorder r

Background

Environment.DropDownMous Environment.D ropDownMouseDownBackgroun eDownBackground d

Foreground (Text)

Environment.DropDownMous Environment.D ropDownMouseDownText eDownText

Border

Environment.DropDownMous Environment.D ropDownMouseDownBorder eDownBorder

Separator

Environment.DropDownButt Environment.D ropDownButtonMouseDownSep onMouseDownSeparator arator

Background

Environment.DropDownBu Environment.D ropDownButtonMouseDow ttonMouseDownBackgroun nBackground d

Foreground (Glyph)

Environment.DropDownMous Environment.D ropDownMouseDownGlyph eDownGlyph


Split button Split buttons share many token names with other command bar controls, such as buttons, menus, and command bar text. All necessary action and drop-down button token names are repeated here for convenience. Split button drop-down lists are implementations of command bar menus. Use … when you are building a custom split button. Do not use … 

 

State Default

Hover

Component

for other kinds of buttons. in any background/foreground combination other than specified.

Element


Background

None

Foreground (Text)


Foreground (Glyph)

Environment.CommandBarSpl Environment.C ommandBarSplitButtonGlyph itButtonGlyph

Border

N/A

Separator

N/A

Background

Environment.CommandBarMou Environment.C ommandBarMouseOverBackgro seOverBackgroundBegin undBegin Gradient stops for this token not used in themed UI.

Foreground (Text)


Foreground (Glyph)

Environment.CommandBarSpl Environment.C ommandBarSplitButtonMouse itButtonMouseOverGlyph OverGlyph

Border


Separator

Environment.CommandBarSpl Environment.C ommandBarSplitButtonSepar itButtonSeparator ator

Background

Environment.CommandBarMou Environment.C ommandBarMouseOverBackgro seOverBackgroundBegin undBegin Gradient stops for this token not used in themed UI.

Pressed

Background

Environment.CommandBarMou Environment.C ommandBarMouseDownBackgrou seDownBackgroundBegin ndBegin Gradient stops for this token not used in themed UI.

Disabled

Foreground (Text)

Environment.CommandBarTex Environment.C ommandBarTextMouseDown tMouseDown

Foreground (Glyph)

Environment.CommandBarSpl Environment.C ommandBarSplitButtonMouse itButtonMouseDownGlyph DownGlyph

Border


Separator

N/A

Background

N/A

Foreground (Text)

Environment.ComboBoxItemT Environment.C omboBoxItemTextInactive extInactive

Foreground (Glyph)

Environment.CommandBarTex Environment.C ommandBarTextInactive tInactive

Border

None

Separator

N/A


‘More options’ and ‘Overflow’ buttons The “More options” button is used when a command bar group is customizable by either adding or removing related command bar buttons. The “Overflow” button appears when a command bar is truncated due to lack of horizontal space, and on click shows a menu containing the command bar buttons that cannot be d isplayed. Colors for these two buttons are controlled by the same set of token names. Use … for custom “More options” or “Overflow” buttons. Do not use … 



State

for buttons that don’t have similar functionality to a “More options” or “Overflow” button.

Component

Default

More options

Overflow

Hover

Element


Background

Environment.CommandBarOp Environment.C ommandBarOptionsBackgroun tionsBackground d

Foreground (Glyph)

Environment.CommandBarOp Environment.C ommandBarOptionsGlyph tionsGlyph

Background

More options

Overflow

Pressed

Foreground (Glyph)

Background

More options

Overflow

Foreground (Glyph)

Environment.CommandBarOp Environment.C ommandBarOptionsMouseO tionsMouseOverBackgrou verBackgroundBegin ndBegin Gradient stops for this token not used i n themed UI.

Environment.CommandBarOp Environment.C ommandBarOptionsMouseOver tionsMouseOverGlyph Glyph Environment.CommandBarOp Environment.C ommandBarOptionsMouseDown tionsMouseDownBackgroundBeg BackgroundBegin in Gradient stops for this token not used i n themed UI.

Environment.CommandBarOp Environment.C ommandBarOptionsMouseDown tionsMouseDownGlyph Glyph


Document windows There is no need to replicate document windows, because they are provided by the Visual Studio environment. However, you might decide that you want to leverage the colors used in document windows so that your UI always appears consistent with this part of the Visual Studio environment. When using document window color tokens, you must be careful to use them only for similar elements, and always in pairs. If you do not do so, you will have unexpected results in your UI.

Document window frame Document windows can be either docked in the IDE or floating as a separate window. When a document window is floating outside the IDE, it still sits in a document well, and has background, border, text, and tab colors that are the same as when it is part of the IDE. However, the document sits inside a frame that has its own background, border, and text colors. When tool windows are docked in the document well, they inherit the behavior and color for their tabs from document window token names.

Docked document window

Floating document window

Use … 

anywhere you are creating UI that you want to match document windows.

Do not use … 

for any UI that you don’t want to change automatically if the shell has a theme update. In this case, refer to Color Value Reference and use the hues to create your own token names.


State

Component

Default Document: docked or floating

Element


Background

Depends on document type

Foreground (Text)

Frame: floating, focused

Border

Environment.ToolWindowBorder

Background

Environment.ToolWindowFlo Environment.T oolWindowFloatingFrame atingFrame

Foreground (Text) Foreground (Glyph) Border Border (Glyph) Background

Frame: floating, unfocused

Foreground (Text) Foreground (Glyph) Border Border (Glyph)

Hover

Background

Frame: floating, focused

(Glyph) Foreground (Glyph) Border (Glyph) Background (Glyph)

Frame: floating, unfocused

Foreground (Glyph) Border (Glyph)

Pressed

Depends on document type

Background (Glyph) Foreground (Glyph) Border (Glyph)

Environment.ToolWindowFlo Environment.T oolWindowFloatingFrame atingFrame Environment.RaftedWindowB Environment.R aftedWindowButtonActiveGl uttonActiveGlyph yph Environment.MainWindowActiveDefaultBor Environment.MainWindowAct iveDefaultBorder der Environment.RaftedWindowB Environment.R aftedWindowButtonActiveBo uttonActiveBorder rder Set to transparent

Environment.ToolWindowFlo Environment.T oolWindowFloatingFrameIna atingFrameInactive ctive Environment.ToolWindowFlo Environment.T oolWindowFloatingFrameIna atingFrameInactive ctive Environment.RaftedWindowB Environment.R aftedWindowButtonInactive uttonInactiveGlyph Glyph Environment.MainWindowInactiveBorder Environment.MainWindowIna ctiveBorder Environment.RaftedWindowB Environment.R aftedWindowButtonInactive uttonInactiveBorder Border Set to transparent

Environment.RaftedWindowB Environment.R aftedWindowButtonHoverAct uttonHoverActive ive Environment.RaftedWindowB Environment.R aftedWindowButtonHoverAct uttonHoverActiveGlyph iveGlyph Environment.RaftedWindowB Environment.R aftedWindowButtonHoverAct uttonHoverActiveBorder iveBorder Environment.RaftedWindowB Environment.R aftedWindowButtonHoverIna uttonHoverInactive ctive Environment.RaftedWindowB Environment.R aftedWindowButtonHoverIna uttonHoverInactiveGlyph ctiveGlyph Environment.RaftedWindowB Environment.R aftedWindowButtonHover uttonHoverInactiveBor InactiveBorder der Environment.RaftedWindowB Environment.R aftedWindowButtonDown uttonDown Environment.RaftedWindowB Environment.R aftedWindowButtonDownGlyp uttonDownGlyph h Environment.RaftedWindowB Environment.R aftedWindowButtonDownBord uttonDownBorder er


Document tabs Document tabs sit in the tab channel to indicate which documents are currently open, along with which one is the current selected or active document. Tool windows can also be docked in the document tab channel if the user places them there. In this situation, they use the same tab colors as document windows. If you are creating UI that you want to always match the document window colors (including theme updates or if new themes are installed), then reference these c olor tokens.

Use … anywhere you are creating UI that you want to match document tabs and automatically pick up theme updates or new theme colors.



Do not use … for any UI that you don’t want to change automatically when the shell has a theme update.



Open document tabs Each open document has a tab in the document tab channel that displays its name. Documents can be either selected or open in the background, and their tabs reflect these states: 



The selected tab represents the document that is currently displayed in the document well. A selected tab has a document border that extends across the top edge of the document well. Background tabs are any document tabs that are not the currently selected tab. Once clicked, they become the selected tab and acquire all background, border, and text colors from those token names. Use … when you are creating custom document tabs. Do not use … 

 

for provisional (preview) UI. for any UI that you don’t want to change automatically if the shell has a theme update. In this case, refer to Color Value Reference and use the hues to create your own token names.

Selected tab State Focused

Component

Element Background Foreground (Text) Border Document border

Unfocused

Background Foreground (Text) Border Document border


Environment.FileTabSelec Environment.F ileTabSelectedGradientTop tedGradientTop Gradient stops for this token not used in themed UI.

Environment.FileTabSelectedText Environment.FileTabSelec Environment.F ileTabSelectedBorder tedBorder Set to same color as background.

Environment.FileTabDocum Environment.F ileTabDocumentBorderBackg entBorderBackground round Environment.FileTabInact Environment.F ileTabInactiveGradientTop iveGradientTop Gradient stops for this token not used in themed UI.

Environment.FileTabInactiveText Environment.FileTabInact Environment.F ileTabInactiveBorder iveBorder Set to same color as background.

Environment.FileTabInactiveDocumentBor Environment.FileTabInact iveDocumentBorderBackg derBackg round


Background tab State

Component

Default

Element

Token Name: Category.Color

Background

Environment.FileTabBackground Environment.FileTabText Environment.FileTabBorder

Foreground (Text) Border Hover

Set to same color as background.

Environment.FileTabHotG Environment.F ileTabHotGradientTop radientTop

Background


Foreground (Text) Border

Environment.FileTabHotText Environment.FileTabHotBorder Set to same color as background.

Preview tab The preview tab appears on the right side of the document tab channel when the user clicks an i tem in the Solution Explorer tool window. It acts as a preview of the document and also gives the user the option to keep the document open on the left side of the document tab channel. Only one preview tab ope n can be open at a time. Preview tabs have both background and selected states, like open tabs, and can be focused or unfocused in their active state. Use … 

anywhere you are creating provisional preview and want some element to match the current preview tab color.

Do not use … 



for any kind of document or tab that is not provisional (preview). for any UI that you don’t want to change automatically if the shell has a theme update. In this case, refer to the hues in Color Value Reference to create your own token names.

Selected tab State Focused

Component

Element

Environment.FileTabProvisionalSelectedAc Environment.FileTabProvisio nalSelectedActive tive Environment.FileTabProvisio Environment.F ileTabProvisionalSelectedAc nalSelectedActiveForegrou tiveForegrou Foreground (Text) nd Environment.FileTabProvisio Environment.F ileTabProvisionalSelectedAc nalSelectedActiveBorder tiveBorder Background

Border

Document border Unfocused



Environment.FileTabProvisio Environment.F ileTabProvisionalSelectedAc nalSelectedActiveBorder tiveBorder

Environment.FileTabProvisionalSelectedIn Environment.FileTabProvisio nalSelectedInactive active Environment.FileTabProvisio Environment.F ileTabProvisionalSelectedIn nalSelectedInactiveForegr activeForegr Foreground (Text) ound Environment.FileTabProvisio Environment.F ileTabProvisionalSelectedIn nalSelectedInactiveBorder activeBorder Background

Border

Document border


Environment.FileTabProvisio Environment.F ileTabProvisionalSelectedIn nalSelectedInactiveBorder activeBorder



Component

Default

Element


Background

Environment.FileTabProvis Environment.F ileTabProvisionalInactive ionalInactive

Foreground (Text)

Environment.FileTabProvisionalInactive Environment.FileTabProvis ionalInactiveForeground Foreground Environment.FileTabProvis Environment.F ileTabProvisionalInactive ionalInactiveBorder Border

Border Hover


Background

Environment.FileTabProvis Environment.F ileTabProvisionalHover ionalHover

Foreground (Text)

Environment.FileTabProvisionalHoverFor Environment.FileTabProvis ionalHoverForeground eground Environment.FileTabProvis Environment.F ileTabProvisionalHoverBor ionalHoverBorder der

Border


Document overflow button The document overflow button is present if there are one or more documents open, regardless of whether there is vertical space in the current configuration to fit all document tabs. The document overflow drop-down menu, which is controlled by the CommandBarMenu colors, displays a list of all open documents, both visible and hidden, and the overflow glyph changes depending on whether all the open documents are displayed in the tab channel. Use … when you are creating a custom overflow button. Do not use … 

 

State Default

Hover

Pressed

Component

for UI that is not similar to an overflow button. for command bar overflow buttons.

Element


Background

Environment.DocWellOverf Environment.D ocWellOverflowButtonBack lowButtonBackground ground

Foreground (Glyph)

Environment.DocWellOverf Environment.D ocWellOverflowButtonGlyp lowButtonGlyph h

Border

N/A

Background

Environment.DocWellOverf Environment.D ocWellOverflowButtonMous lowButtonMouseOverBackgrou eOverBackground nd

Foreground (Glyph)

Environment.DocWellOverf Environment.D ocWellOverflowButtonMous lowButtonMouseOverGlyph eOverGlyph

Border

Environment.DocWellOverf Environment.D ocWellOverflowButtonMous lowButtonMouseOverBorder eOverBorder

Background

Environment.DocWellOverf Environment.D ocWellOverflowButtonMo lowButtonMouseDownBac useDownBackground kground

Foreground (Glyph)

Environment.DocWellOverf Environment.D ocWellOverflowButtonMous lowButtonMouseDownGlyph eDownGlyph

Border

Environment.DocWellOverf Environment.D ocWellOverflowButtonMous lowButtonMouseDownBorder eDownBorder


Tool windows There is no need to replicate tool windows, because they are provided by the Visual Studio environment. However, you might decide that you want to leverage the colors used in tool windows so that your UI always appears consis tent with this part of the Visual Studio environment. Use … anywhere you are creating UI that you want to match tool windows. Do not use … 



for any UI that you don’t want to change automatically if the shell has a theme update. In this case, refer to the hues in Color Value Reference to create your own token names.


Tool window frame Tool windows in Visual Studio are used for many different tasks, and can exist in one of several different states. If a tool window is open, it can be assigned to any of the fo ur sides of the document area. Tool windows can also float outside of the IDE, which allows them to be repositioned anywhere within the user’s screen. Floating windows always sit on top of the IDE. Finally, tool windows can be docked as document windows and appear as a tab in the document well. Tool windows that have been docked as document windows are colored in part using document window token names. Use … anywhere you are creating UI that you want to match tool windows. Do not use … 





State

Component

Docked

Element

Environment.ToolWindowBorder

Background Environment.ToolWindowBackground

Border

Floating: unfocused



Border

Floating: focused

for any UI that you don’t want to change automatically. if the shell has a theme update. In this case, refer to Color Value Reference and use the hues to create your own token names.

Environment.MainWindowActi Environment.M ainWindowActiveDefaultBord veDefaultBorder er


Border

Environment.MainWindowInac Environment.M ainWindowInactiveBorder tiveBorder


Tool window title bar The title bar border is not a true border, but a thick line across the top of the title bar. It does not have a token name for its unfocused state. Use … anywhere you are creating UI that you want to match tool windows. Do not use … 



Shown in light theme to illustrate drag handle texture

State Focused

Component

Element Background Foreground (Text) Border Drag handle

Unfocused

Background Foreground (Text)

for any UI that you don’t want to change automatically if the shell has a theme update. In this case, refer to Color Value Reference and use the hues to create your own token names. Token name: Category.Color

Environment.TitleBarActi Environment.T itleBarActiveGradientBegi veGradientBegin n Gradient stops for this token not used i n themed UI.

Environment.TitleBarActiveText Environment.TitleBarActi Environment.T itleBarActiveBorder veBorder Set to same color as background.

Environment.TitleBarDrag Environment.T itleBarDragHandleActive HandleActive Environment.TitleBarInac Environment.T itleBarInactiveGradientBe tiveGradientBegin gin Gradient stops for this token not used i n themed UI.

Environment.TitleBarInac Environment.T itleBarInactiveText tiveText

Border

N/A

Drag handle

Environment.TitleBarDragHandle


Title bar buttons Use … for buttons that use color tokens from the tool window title bars. Do not use … 

 

State

Component

Default

Focused

Unfocused

Hover

Focused

Unfocused

Pressed

Focused

Unfocused

for buttons that appear in other locations. in any background/foreground combination other than specified.

Element


Background

N/A

Foreground (Glyph)

Environment.ToolWindowBut Environment.T oolWindowButtonActiveGlyp tonActiveGlyph h

Border

N/A

Background

N/A

Foreground (Glyph)

Environment.ToolWindowBut Environment.T oolWindowButtonInactiveGl tonInactiveGlyph yph

Border

N/A

Background

Environment.ToolWindowBut Environment.T oolWindowButtonHoverActiv tonHoverActive e

Foreground (Glyph)

Environment.ToolWindowBut Environment.T oolWindowButtonHoverActiv tonHoverActiveGlyph eGlyph

Border

Environment.ToolWindowBut Environment.T oolWindowButtonHoverActiv tonHoverActiveBorder eBorder

Background

Environment.ToolWindowBut Environment.T oolWindowButtonHoverInact tonHoverInactive ive

Foreground (Glyph)

Environment.ToolWindowBut Environment.T oolWindowButtonHoverInact tonHoverInactiveGlyph iveGlyph

Border

Environment.ToolWindowBut Environment.T oolWindowButtonHoverInact tonHoverInactiveBorder iveBorder

Background

Environment.ToolWindowBu Environment.T oolWindowButtonDown ttonDown

Foreground (Glyph)

Environment.ToolWindowBut Environment.T oolWindowButtonDownActive tonDownActiveGlyph Glyph

Border

Environment.ToolWindowBut Environment.T oolWindowButtonDownBorder tonDownBorder

Background

Environment.ToolWindowBut Environment.T oolWindowButtonDown tonDown

Foreground (Glyph)

Environment.ToolWindowBut Environment.T oolWindowButtonDownInacti tonDownInactiveGlyph veGlyph

Border

Environment.ToolWindowBut Environment.T oolWindowButtonDownBorder tonDownBorder


Tool window tabs Use … anywhere you are creating UI that you want to match tool window tabs. Do not use … 




Selected tab State

Component

Focused

Element


Background

Environment.ToolWindowTab Environment.T oolWindowTabSelectedTab SelectedTab

Foreground (Text) Environment.T Environment.ToolWindowTab oolWindowTabSelectedActive SelectedActiveText Text Border Unfocused

Background

Environment.ToolWindowTab Environment.T oolWindowTabSelectedBorder SelectedBorder Set to same color as background.

Environment.ToolWindowTab Environment.T oolWindowTabSelectedTab SelectedTab

Foreground (Text) Environment.T Environment.ToolWindowTab oolWindowTabSelectedText SelectedText Border

Environment.ToolWindowTab Environment.T oolWindowTabSelectedBorder SelectedBorder Set to same color as background.


Component

Element


Environment.ToolWindowTab Environment.T oolWindowTabGradientBegin GradientBegin

Default Background

Gradient stops set to the same color value in VS 2013.

Environment.ToolWindowTab Environment.T oolWindowTabGradientEnd GradientEnd Gradient stops set to the same color value in VS 2013.

Foreground (Text)

Environment.ToolWindowTabText

Border

Environment.ToolWindowTabBorder Environment.ToolWindowTab Environment.T oolWindowTabMouseOverBa MouseOverBackgroundBeg ckgroundBegin in

Hover Background

Gradient stops set to the same color value in VS 2013.

Environment.ToolWindowTab Environment.T oolWindowTabMouseOverBack MouseOverBackgroundEnd groundEnd Foreground (Text) Border

Environment.ToolWindowTabMouseOverText Environment.ToolWindowTab MouseOverText Environment.ToolWindowTab Environment.T oolWindowTabMouseOverBord MouseOverBorder er Set to same color as background.


Auto-hide tabs Use … anywhere you are creating UI that you want to match auto-hidden tool window tabs. Do not use … 



State Default

Hover

Component


Element Background


Environment.AutoHideTabBa Environment.A utoHideTabBackgroundBegin ckgroundBegin Gradient stops for this token not used in themed UI.

Foreground (Text)

Environment.AutoHideTabText

Border

Environment.AutoHideTabBorder

Background

Environment.AutoHideTabMo Environment.A utoHideTabMouseOverBackgr useOverBackgroundBegin oundBegin Gradient stops for this token not used in themed UI.

Foreground (Text)

Environment.AutoHideTa Environment.A utoHideTabMouseOverTex bMouseOverText t

Border

Environment.AutoHideTabMo Environment.A utoHideTabMouseOverBorder useOverBorder


Common shared controls When you use a standard Visual Studio command bar in your feature, you will have access to styled shell controls, and you should not re-template these common controls. However, if you need to build a custom command bar, you might need to build custom controls as well. In that case, make sure to use the correct token names for each of the following controls so that your UI is consistent with the rest of Visu al Studio.

Search box Whenever possible, use the common search control provided by the Visual Studio environment. Search box colors are found in the “SearchControl” category in the ShellColors.pkgdef file, which contains token names for the input field, action button, drop-down button, and drop-down menu. A search box can be one of several states, some of which are mutually exclusive:    

“Focused” or “unfocused” refers to whether the cursor is in the text box. “Active” or “inactive” refers to whether the user has input a search query in the text box. “Hover” means that the user has moused over the search box (this state overrides all other states). “Disabled” means that search functionality is turned off for the curr ent context. Use … 

when you are designing a custom search box.


State

Component

Focused

Input field

Element


Background

Separator

SearchControl.FocusedBackground SearchControl.FocusedBackground SearchControl.FocusedBorder SearchControl.FocusedDro SearchControl .FocusedDropDownSeparato pDownSeparator r

Background

None


Action button

Foreground (Search glyph) Foreground (Stop glyph) Foreground (Clear glyph)

Drop-down button

SearchControl.StopGlyph SearchControl.ClearGlyph N/A

Background

SearchControl.FocusedDropDownButton SearchControl.FocusedDro pDownButton SearchControl.FocusedDro SearchControl .FocusedDropDownButton pDownButtonGlyph Glyph SearchControl.FocusedDro SearchControl .FocusedDropDownButtonBo pDownButtonBorder rder

Foreground (Glyph)

Background

Active input field

SearchControl.SearchGlyph

Border

Border Unfocused

for anything that is not a search box. for anything that you do not want to always match the search box UI.

Foreground (Text) Border Separator

SearchControl.SearchActiveBackground SearchControl.SearchActi veBackground SearchControl.SearchActi SearchControl .SearchActiveBackground veBackground SearchControl.UnfocusedBorder SearchControl.DropDownSeparator Visual Studio UX Guidelines: Colors and Styling 53

EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].

State

Component

Unfocused

Inactive input field

Element


Background

SearchControl.Unfocused SearchControl.Unfocused

Foreground (Text) Separator

SearchControl.UnfocusedBorder SearchControl.DropDownSeparator

Background

N/A

Foreground (Search

SearchControl.SearchGlyph

Border

Action button

glyph) Foreground (Stop

SearchControl.StopGlyph

glyph) Foreground (Clear

SearchControl.ClearGlyph

glyph)

Drop-down button

Border

N/A

Background

SearchControl.UnfocusedDropDownButton SearchControl.UnfocusedD ropDownButton SearchControl.UnfocusedD SearchControl .UnfocusedDropDownButton ropDownButtonGlyp Glyp h SearchControl.UnfocusedD SearchControl .UnfocusedDropDownButton ropDownButtonBord Bord er

Foreground (Glyph) Border

Hover Input field

Action button

Drop-down button

Background

SearchControl.MouseOverB SearchControl .MouseOverBackground ackground

Foreground (Text)

SearchControl.MouseOverB SearchControl .MouseOverBackground ackground

Border

SearchControl.MouseOverBorder

Separator

SearchControl.MouseOverD SearchControl .MouseOverDropDownSepara ropDownSeparator tor

Background

SearchControl.ActionButt SearchControl .ActionButtonMouseOver onMouseOver

Foreground (Glyph)

SearchControl.ActionButt SearchControl .ActionButtonMouseOverGl onMouseOverGlyph yph

Border

SearchControl.ActionButt SearchControl .ActionButtonMouseOverBor onMouseOverBorder der

Background

SearchControl.MouseOverD SearchControl .MouseOverDropDownButton ropDownButton

Foreground (Glyph)

SearchControl.MouseOverDropDownButton SearchControl.MouseOverD ropDownButtonGlyp Glyp h SearchControl.MouseOverD SearchControl .MouseOverDropDownButton ropDownButtonBord Bord er

Border Pressed

Action button

Drop-down button

Background

SearchControl.ActionButt SearchControl .ActionButtonMouseDown onMouseDown

Foreground (Glyph)

SearchControl.ActionButt SearchControl .ActionButtonMouseOverGl onMouseOverGlyph yph

Border

SearchControl.ActionButt SearchControl .ActionButtonMouseDownBo onMouseDownBorder rder

Background

SearchControl.MouseDownD SearchControl .MouseDownDropDownButton ropDownButton

Foreground (Glyph)

SearchControl.MouseDownDropDownButtonG SearchControl.MouseDownD ropDownButtonGlyp lyp h SearchControl.MouseDownD SearchControl .MouseDownDropDownButton ropDownButtonBord Bord er

Border Highlighted (Text only)

Input field

Background

SearchControl.Selection

Foreground (Text)

SearchControl.FocusedBackground

Border

None

Separator

SearchControl.FocusedDro SearchControl .FocusedDropDownSeparato pDownSeparator r


State

Component

Disabled

Input field

Action button

Drop-down button

Element


Background

SearchControl.Disabled

Foreground (Text)

SearchControl.Disabled

Border

SearchControl.DisabledBorder

Separator

SearchControl.DropDownSeparator

Background

None

Foreground (Glyph)

SearchControl.ActionButt SearchControl .ActionButtonDisabledG onDisabledGlyph lyph

Border

None

Background

None

Foreground (Glyph)

SearchControl.DisabledDo SearchControl .DisabledDownButtonGlyph wnButtonGlyph

Border

None

Search drop-down lists The search box drop-down menu has the potential to be slightly more complex than other drop-down menus in Visual Studio. The “suggested searches” and “search options” sections can appear alone or together in the menu and each one is colored separately. A line also separates these two sections when they appear together and a border surrounds the entire drop-down menu. Use … when you are creating a custom search s earch drop-down list. the correct token names for the correct list components. Do not use … 



 

for drop-down lists that appear in other contexts. in any background/foreground combination other than specified.

State

Element


Default

Border

SearchControl.PopupBorder

(No other

Separator

SearchControl.PopupSectionH SearchControl .PopupSectionHeaderSeparato eaderSeparator r

Shadow

Environment.DropShadowBackground

states)

State

Component

Default

Element Background


SearchControl.PopupItemsLis SearchControl .PopupItemsListBackgroundGr tBackgroundGradientBegin adientBegin Gradient stops for this token not used in themed UI.

Foreground (Text) SearchControl.PopupItemText

Suggested searches


State

Component

Default

Element Background Foreground

Search options (check box)

(Check box text) Foreground (Link text)

Search options (link)


SearchControl.PopupSectionB SearchControl .PopupSectionBackgroundGrad ackgroundGradientBegin ientBegin Gradient stops for this token not used in themed UI.

SearchControl.PopupCheckboxText SearchControl.PopupButtonText

Header

SearchControl.PopupSectionH SearchControl .PopupSectionHeaderGradient eaderGradientBegin Begin

background


Foreground (Header text) Hover Background

SearchControl.PopupSectionH SearchControl .PopupSectionHeaderText eaderText SearchControl.PopupControlMouseOverBac SearchControl.PopupControlM ouseOverBackgroundGra kgroundGradien dien tBegin Gradient stops for this token not used in themed UI.

Suggested searches

Foreground (Text) SearchControl SearchControl.PopupMouseOve .PopupMouseOverItemText rItemText Border

Background


(Check box text) Foreground (Link text)

SearchControl.PopupButtonMo SearchControl .PopupButtonMouseDownText useDownText SearchControl.PopupControlM SearchControl .PopupControlMouseOverBorde ouseOverBorder r

Check box

SearchControl.PopupControlMouseDownBackg SearchControl.PopupControlM ouseDownBackgroundGradien roundGradien tBegin SearchControl.PopupControlM SearchControl .PopupControlMouseDownBackg ouseDownBackgroundGradien roundGradien tEnd

background


Foreground (Check box text)


SearchControl.PopupCheckbox SearchControl .PopupCheckboxMouseDownText MouseDownText

Border Pressed


SearchControl.PopupControlMouseOverBackg SearchControl.PopupControlM ouseOverBackgroundGradien roundGradien tBegin SearchControl.PopupControlM SearchControl .PopupControlMouseOverBackg ouseOverBackgroundGradien roundGradien tEnd Gradient stops for this token not used in themed UI.

Foreground


SearchControl.PopupControlM SearchControl .PopupControlMouseOverBorde ouseOverBorder r

Link background

SearchControl.PopupCheckbox SearchControl .PopupCheckboxMouseDownText MouseDownText SearchControl.PopupButtonMouseDownBackgr SearchControl.PopupButtonMo useDownBackgroundGradient oundGradient Begin Gradient stops for this token not used in themed UI.

Foreground (Link text)

SearchControl.PopupButtonMo SearchControl .PopupButtonMouseDownText useDownText


Hyperlink The hyperlink is one control that does not have a foreground/background foreground/background pair. In all cases, use the foreground hyperlink color, which will appear correctly on dark, gray and white backgrounds. If you do not use the color token for t he hyperlink control, you will see the default system color for “pressed,” which will flash red. That is the signal that the con trol is not no t using the correct environment color token. Use … when you need to use a hyperlink. Do not use … 



State

Component

Default Hover Pressed Disabled

for anything that is not a hyperlink.

Element


Foreground (Text)

Environment.PanelHyperlink

Foreground (Text)

Environment.PanelHyperlinkHover

Foreground (Text)

Environment.PanelHyperlinkPressed

Foreground (Text)

Environment.PanelHyperlink Environment.P anelHyperlinkDisabled Disabled

Infobar Infobars are used to provide more information about a given context and always appear at the top of a document window or tool window. Use … when creating custom infobars. Do not use … 



State Default

Component

for UI elements that are not similar to an infobar.

Element


Background

Environment.InfoBackground Environment.InfoText Environment.ToolWindowBorder



Scrollbar Scrollbars are styled by the Visual Studio environment, and will not need to be themed. However, you might decide that you want to leverage the colors used in scrollbars so that your UI always appears consistent with this this part of the Visual Studio environment. Use … when you are creating UI that you want to match Visual Studio scrollbars. Do not use… 



State

Component

Default

Scrollbar

Element


Scrollbar

Environment.ScrollBarBackground

Foreground (Thumb) Background

Scrollbar arrow

Hover

Scrollbar

Environment.ScrollBarArrow Environment.S crollBarArrowBackground Background Set to same color as scrollbar.

Environment.ScrollBarArrowGlyph

Scrollbar


Foreground

Background

Scrollbar arrow

Scrollbar

Environment.ScrollBarThumb Environment.S crollBarThumbBackground Background

Foreground (Glyph)

(Thumb)

Pressed

for anything you don't want to always match scrollbar UI.

Environment.ScrollBarThumb Environment.S crollBarThumbMouseOverBackg MouseOverBackground round Environment.ScrollBarArrow Environment.S crollBarArrowMouseOverB MouseOverBackground ackground Set to same color as scrollbar.

Foreground (Glyph)

Environment.ScrollBarArrow Environment.S crollBarArrowGlyphMouseOver GlyphMouseOver

Scrollbar


Foreground (Thumb) Background

Scrollbar arrow Foreground (Glyph)

Environment.ScrollBarThumb Environment.S crollBarThumbPressedBackgro PressedBackground und Environment.ScrollBarArrow Environment.S crollBarArrowPressedBackgro PressedBackground und Set to same color as scrollbar.

Environment.ScrollBarArrow Environment.S crollBarArrowGlyphPressed GlyphPressed


Tree view Several tool windows, including the Solution Explorer, Server Explorer, and Class View, implement i mplement a hierarchical organizational scheme whose colors are controlled by color names in the TreeView category. All items in a tree view have background and text colors. Items that have nested child elements also have glyphs that indicate whether the item is expanded or collapsed. Use … 

anywhere you need to implement a hierarchical organizational view.


for anything that is not similar to a tree view. in any background/foreground combination other than specified.

State

Component

Default

Hover

Drag over

Selected

Focused

Unfocused

Element


Background

TreeView.Background

Foreground (Text)

TreeView.Background

Foreground (Glyph)

TreeView.Glyph

Border

None

Background

TreeView.Background

Foreground (Text)

TreeView.Background

Foreground (Glyph)

TreeView.GlyphMouseOver

Border

None

Background

TreeView.DragOverItem

Foreground (Text)

TreeView.DragOverItem

Foreground (Glyph)

TreeView.DragOverItemGlyph

Border

None

Background

TreeView.SelectedItemActive

Foreground (Text)


Foreground (Glyph)

TreeView.SelectedItemActiveGlyph

Border

TreeView.FocusVisualBorder

Background

TreeView.SelectedItemInactive

Foreground (Text)


Foreground (Glyph)

TreeView.SelectedItemInact TreeView.Sele ctedItemInactiveGlyph iveGlyph

Border

None


State

Component

Hover over selected

Focused

Unfocused

Element


Background


Foreground (Text)


Foreground (Glyph)

TreeView.SelectedItemActiv TreeView.Sele ctedItemActiveGlyphMouseOv eGlyphMouseOver er

Border

TreeView.FocusVisualBorder

Background


Foreground (Text)


Foreground (Glyph)

TreeView.SelectedItemActiv TreeView.Sele ctedItemActiveGlyphMouseOve eGlyphMouseOver r

Border

None

Button controls Use … for buttons in the document well that you want to integrate with Visual Studio themes (Light, Dark, Blue, or a system High Contrast theme). Do not use … 



State Default

Disabled

Hover

Pressed

Focused

Component

for buttons that will display against a custom background that is not part of a Visual Studio theme.

Element


Button

CommonControls.Button

Button border

CommonControls.ButtonBorder

Button

CommonControls.ButtonDisabled

Button border

CommonControls.ButtonBord CommonControl s.ButtonBorderDisabled erDisabled

Button

CommonControls.ButtonHover

Button border

CommonControls.ButtonBorderHover

Button

CommonControls.ButtonPressed

Button border

CommonControls.ButtonBord CommonControl s.ButtonBorderPressed erPressed

Button

CommonControls.ButtonFocused

Button border

CommonControls.ButtonBo CommonControl s.ButtonBorderFocused rderFocused


Check box controls

Use … 

for check box controls contained within the document well.

Do not use … 

for any UI that is not a check box control.

State Default

Disabled

Hover

Pressed

Focused

Component

Element


Background

CommonControls.CheckBox CommonControl s.CheckBoxBackground Background

Border

CommonControls.CheckBoxBorder

Text

CommonControls.CheckBoxText

Glyph

CommonControls.CheckBoxGlyph

Background

CommonControls.CheckBoxBa CommonControl s.CheckBoxBackgroundDisab ckgroundDisabled led

Border

CommonControls.CheckBoxBo CommonControl s.CheckBoxBorderDisabled rderDisabled

Text

CommonControls.CheckBoxTe CommonControl s.CheckBoxTextDisabled xtDisabled

Glyph

CommonControls.CheckBoxGl CommonControl s.CheckBoxGlyphDisabled yphDisabled

Background

CommonControls.CheckBoxBa CommonControl s.CheckBoxBackgroundHover ckgroundHover

Border

CommonControls.CheckBoxBo CommonControl s.CheckBoxBorderHover rderHover

Text

CommonControls.CheckBoxTextHover

Glyph

CommonControls.CheckBoxG CommonControl s.CheckBoxGlyphHover lyphHover

Background

CommonControls.CheckBoxBa CommonControl s.CheckBoxBackgroundPress ckgroundPressed ed

Border

CommonControls.CheckBoxBo CommonControl s.CheckBoxBorderPressed rderPressed

Text

CommonControls.CheckBoxTe CommonControl s.CheckBoxTextPressed xtPressed

Glyph

CommonControls.CheckBoxGl CommonControl s.CheckBoxGlyphPressed yphPressed

Background

CommonControls.CheckBoxB CommonControl s.CheckBoxBackgroundFo ackgroundFocused cused

Border

CommonControls.CheckBoxBo CommonControl s.CheckBoxBorderFocused rderFocused

Text

CommonControls.CheckBoxTe CommonControl s.CheckBoxTextFocused xtFocused

Glyph

CommonControls.CheckBoxGl CommonControl s.CheckBoxGlyphFocused yphFocused


Drop-down/combo Drop-down/com bo box controls

Use … 

for drop-downs and combo boxes that are part of the document w ell.


for any UI that is not a drop-down or combo box. for command bar drop-downs or combo boxes.

State Default

Component

Element


Background

CommonControls.ComboBoxBa CommonControl s.ComboBoxBackground ckground

Border

CommonControls.ComboBoxBorder

Text

CommonControls.ComboBoxText

Separator

CommonControls.ComboBoxSeparator

Glyph

CommonControls.ComboBoxGlyph

Glyph background CommonControl CommonControls.ComboBoxGl s.ComboBoxGlyphBackgrou yphBackground nd Disabled

Background

CommonControls.ComboBoxBa CommonControl s.ComboBoxBackgroundDis ckgroundDisabled abled

Border

CommonControls.ComboBoxBo CommonControl s.ComboBoxBorderDisable rderDisabled d

Text

CommonControls.ComboBoxTe CommonControl s.ComboBoxTextDisabled xtDisabled

Separator

CommonControls.ComboBoxSe CommonControl s.ComboBoxSeparatorDisa paratorDisabled bled

Glyph

CommonControls.ComboBoxGl CommonControl s.ComboBoxGlyphDisabled yphDisabled

Glyph background CommonControl CommonControls.ComboBoxGl s.ComboBoxGlyphBackgrou yphBackgroundDisabled ndDisabled Hover

Background

CommonControls.ComboBoxBa CommonControl s.ComboBoxBackgroundHov ckgroundHover er

Border

CommonControls.ComboBoxBo CommonControl s.ComboBoxBorderHover rderHover

Text

CommonControls.ComboBoxTextHover

Separator

CommonControls.ComboBoxSe CommonControl s.ComboBoxSeparatorHove paratorHover r

Glyph

CommonControls.ComboBoxGl CommonControl s.ComboBoxGlyphHover yphHover

Glyph background CommonControl CommonControls.ComboBoxGl s.ComboBoxGlyphBackgrou yphBackgroundHover ndHover Pressed

Background

CommonControls.ComboBoxBa CommonControl s.ComboBoxBackgroundPre ckgroundPressed ssed

Border

CommonControls.ComboBoxBo CommonControl s.ComboBoxBorderPressed rderPressed

Text

CommonControls.ComboBoxTe CommonControl s.ComboBoxTextPressed xtPressed

Separator

CommonControls.ComboBoxSe CommonControl s.ComboBoxSeparatorPres paratorPressed sed

Glyph

CommonControls.ComboBoxGl CommonControl s.ComboBoxGlyphPressed yphPressed

Glyph background CommonControl CommonControls.ComboBoxGl s.ComboBoxGlyphBackgrou yphBackgroundPressed ndPressed


State

Component

Focused

Element


Background

CommonControls.ComboBoxBa CommonControl s.ComboBoxBackgroundFoc ckgroundFocused used

Border

CommonControls.ComboBoxBo CommonControl s.ComboBoxBorderFocused rderFocused

Text

CommonControls.ComboBoxTex CommonControl s.ComboBoxTextFocused tFocused

Separator

CommonControls.ComboBoxSe CommonControl s.ComboBoxSeparatorFocu paratorFocused sed

Glyph

CommonControls.ComboBoxGl CommonControl s.ComboBoxGlyphFocused yphFocused

Glyph background CommonControl CommonControls.ComboBoxGl s.ComboBoxGlyphBackgrou yphBackgroundFocused ndFocused Text input

Highlight

CommonControls.ComboBoxTe CommonControl s.ComboBoxTextInputSele xtInputSelection ction

selection Pressed – List item

Background

view

Border

Item text

Background shadow

CommonControls.ComboBoxListBackground CommonControls.ComboBoxLis tBackground CommonControls.ComboBoxLis CommonControl s.ComboBoxListBackground tBackgroundHover Hover CommonControls.ComboBoxListItemBackgroundPress ed CommonControls.ComboBoxListItemBackgroundFocus ed CommonControls.ComboBoxListBorder CommonControls.ComboBoxLis CommonControl s.ComboBoxListBorderHove tBorderHover r CommonControls.ComboBoxLis CommonControl s.ComboBoxListBorderPres tBorderPressed sed CommonControls.ComboBoxLis CommonControl s.ComboBoxListBorderFocu tBorderFocused sed CommonControls.ComboBoxLis CommonControl s.ComboBoxListItemText tItemText CommonControls.ComboBoxLis CommonControl s.ComboBoxListItemTextHo tItemTextHover ver CommonControls.ComboBoxLis CommonControl s.ComboBoxListItemTextPr tItemTextPressed essed CommonControls.ComboBoxLis CommonControl s.ComboBoxListItemTextFo tItemTextFocused cused CommonControls.ComboBoxLis CommonControl s.ComboBoxListBackground tBackgroundShadow Shadow

Tabular data (grid) controls Tabular data controls, also known as grid controls, are common controls for Visual Studio 2015 that can be used to present large amounts of data in multiple columns. Standard tabular data controls can be found in multiple places within Visual Studio 2015: the Error List tool window, IntelliTrace reports, and memory heap view, among others. You should always use the standard tabular data controls provided by the Visual Studio platform team. However, in some rare instances, you might not have access to the standard tabular data controls. In these situations, use the following token names to ensure that your UI is consistent with other tabular data controls in Visual Studio.

Use … 

Do not use … for tabular or grid controls.

for any UI that is not a tabular or grid control.


Column headers Column headers consist of a background, a border, the title text, and an optional glyph usually used when a grid is sorted by that column. State

Element


Default

Background

Header.Default

Foreground (Text)


Foreground (Glyph)

Environment.CommandBarDragHandle

Border

Header.SeparatorLine

Background

Header.MouseOver

Foreground (Text)


Foreground (Glyph)

Header.MouseOverGlyph

Border

Header.SeparatorLine

Background

CommonControls.CheckBoxBac CommonControl s.CheckBoxBackgroundPres kgroundPressed sed

Foreground (Text)

CommonControls.CheckBoxBor CommonControl s.CheckBoxBorderPressed derPressed

Foreground (Glyph)

CommonControls.CheckBoxTex CommonControl s.CheckBoxTextPressed tPressed

Border

CommonControls.CheckBoxGly CommonControl s.CheckBoxGlyphPressed phPressed

Hover

Pressed

List view items List view items consist of a background and the content. The content can be text, an icon, or both. State

Element


Default

Background

Transparent

Foreground (Text)


Border

None

Background


Foreground (Text)

TreeView.SelectedItemActiveText

Border

None

Background


Foreground (Text)

TreeView.SelectedItemInact TreeView.Sele ctedItemInactiveText iveText

Border

None

Selected (active)

Selected (inactive)


Designer: Manifest Designer The manifest designer was designed as a way to make it easier to edit the .manifest file in Windows8 and Windows Phone 8 projects. While there is not a shared framework available for consumption it may be appropriate for you to match the design layout and colors of the orientation/navigation tabs and overall structure. Fo r more information about layout details see the topic on Spacing guidelines (detailed further in 8: Layout).

Use …  

for designers that are similar to the Manifest Designer. in place of using common tab controls at the top of an editor within the document well.


if you have more than 6 tabs. for any UI that is not structured like the Manifest Designer.

State Default (selected)

Component Tab Description pane Content page

Element


Background

ManifestDesigner.TabActive

Border

None

Background

ManifestDesigner.DescriptionPane

Background

ManifestDesigner.Background

Dialog helper text

ManifestDesigner.Watermark

Non-selected

Tab

Background

ManifestDesigner.TabInactive

Hover

Tab

Background

ManifestDesigner.TabMouseOver


Tagging Visual Studio supports tagging, which allows a user to declare searchable keywords fo r tracking purposes. For example, project managers and developers can use Team Foundation Server (TFS) to tag work items. The tables below give color names for both the tag itself and the “close icon” glyph that appears in hover and selected states. Hex values for TFS tagging can be found in the Color value reference topic.

Use … for UI that supports tagging. Do not use … 



for any other type of UI.

Background

Glyph/Close Text

Tag State

Component

Default

Hover

Pressed

Selected

Element

Category.Color name

Background

Tag.Background

Foreground (Text)

Tag.Background

Background

Tag.HoverBackground

Foreground (Text)

Tag.HoverBackgroundText

Background

Tag.PressedBackground

Foreground (Text)

Tag.PressedBackgroundText

Background

Tag.SelectedBackground

Foreground (Text)

Tag.SelectedBackgroundText

Glyph (close icon) State

Component

Default

Default (tag default) Hover

Hover (tag default)

Element

Category.Color name

Background

N/A

Foreground (Glyph)

Tag.TagHoverGlyph

Background

Tag.TagHoverGlyphHoverBackground

Foreground (Glyph)

Tag.TagHoverGlyphHover

Border

Tag.TagHoverGlyphHoverBorder


State

Component

Pressed

Pressed (tag default)

Tag selected/

Element

Category.Color name

Background

Tag.TagHoverGlyphPressedBa Tag.TagHoverG lyphPressedBackground ckground

Foreground (Glyph)

Tag.TagHoverGlyphPressed

Border

Tag.TagHoverGlyphPressedBorder

Background

N/A

Foreground (Glyph)

Tag.TagSelectedGlyph

Background

Tag.TagSelectedGlyphHoverB Tag.TagSelect edGlyphHoverBackground ackground

Foreground (Glyph)

Tag.TagSelectedGlyphHover

Border

Tag.TagSelectedGlyphHoverBorder

Background

Tag.TagSelectedGlyphPresse Tag.TagSelect edGlyphPressedBackground dBackground

glyph default

Default (tag selected) Tag selected/ glyph hover

Hover (tag selected)

Tag selected/ glyph pressed

Foreground (Glyph)

Pressed (tag selected)

(on select AND press) Border (on select AND press)

Tag.TagSelectedGlyphPressed Tag.TagSelecteGlyphPressedBorder


Shell Background The environment background consists of two layers. The bottom layer is a solid color that covers the entire integrated development environment (IDE). The top layer fits under the command shelf and between the tool window auto-hide channels on the left and right edges of the IDE. As of Visual Studio 2013, the top and bottom background layers are set to the same color in the light and dark themes.

Use ... for places that you want to match the background of the Visual Studio environment. Do not use ... 





as a fill for places that are not background surfaces. as a background on which you wish to place foreground elements.

Component

Element

Category.Color name

Bottom layer

Background

Environment.EnvironmentB Environment.E nvironmentBackground ackground

Top layer

Background

Environment.EnvironmentB Environment.E nvironmentBackgroundGradi ackgroundGradientBegin entBegin

Gradient stops set to the

Environment.EnvironmentB Environment.E nvironmentBackgroundGradi ackgroundGradientEnd entEnd

same color value in Visual Studio 2013 Light and Dark themes.

Environment.EnvironmentB Environment.E nvironmentBackgroundGradi ackgroundGradientMiddle1 entMiddle1 Environment.EnvironmentB Environment.E nvironmentBackgroundGradi ackgroundGradientMiddle2 entMiddle2


Command shelf Two sets of token names are used for the command shelf backgrounds: one set for where the menu bar sits and one for where the command bars sit. An individual command bar group has its own o wn background color values, which are discussed in more detail in the command bar section.

Use ...  

for areas where you place menus or toolbars. with the correct background/foreground token name combination.

Do not use ... 

for areas that are not similar to a command shelf.

State

Element

Category.Color name

Menu bar

Background

Environment.CommandShelfH Environment.C ommandShelfHighlightGradi ighlightGradientBegin entBegin


Environment.CommandShelfH Environment.C ommandShelfHighlightGradi ighlightGradientMiddle entMiddle

same color value in Visual

Command bar

Studio 2013.

Environment.CommandShelfH Environment.C ommandShelfHighlightGradi ighlightGradientEnd entEnd

Background

Environment.CommandShelfB Environment.C ommandShelfBackgroundGrad ackgroundGradientBegin ientBegin


Environment.CommandShelfB Environment.C ommandShelfBackgroundGrad ackgroundGradientMiddle ientMiddle

same color value in Visual Studio 2013.

Environment.CommandShelfB Environment.C ommandShelfBackgroundGrad ackgroundGradientEnd ientEnd


Toolbox The toolbox is one of the common tool windows that is most frequently used in Visual Studio. It is essentially a tree control with a special theme and styling applied. Use … when you are designing a tool window that you want to always be consistent with the shell toolbox. Do not use … 



State

Component

for anything that is not similar to the toolbox UI, or if you are unsure whether your UI will have problems if the shell toolbox colors change.

Element

Category.Color name

Environment.ToolboxContent

Default

Headings

Background

OR

Environment.ToolWindowBackground Parent node

Child node Hover (Child node only)

Individual items, or entire window if no a vailable controls

Border

None

Foreground (Glyph)

Environment.ToolboxContent

Foreground (Text) Environment.ToolboxContent Background Border Foreground (Text)

Selected

Background

Focused parent node

Border Foreground (Glyph)

Focused child node

Foreground (Text) Background

Unfocused parent node

Unfocused child node

Environment.ToolboxContent Environment.T oolboxContentMouseOver MouseOver Individual items only

None

Environment.ToolboxContent Environment.T oolboxContentMouseOver MouseOver Individual items only

TreeView.SelectedItemActive From TreeView category

TreeView.FocusVisualBorder From TreeView category



TreeView.SelectedItemInactive From TreeView category

Border

None

Foreground (Glyph)

From TreeView category

Foreground (Text)

TreeView.SelectedItemInactive TreeView.SelectedItemInactive From TreeView category


Colors and Styling: Creating new color tokens IMPORTANT: Before creating new color tokens, check to confirm that there is no shared color that already exists. If there is a shared color defined for the same type of element and usage, then use the shared color. Custom color entries are needed for interface elements, elements, such as when you want a color c olor to be specific to an individual feature or group of features, or when an element does not have colors defined in the current common shared color set. This article gives you implementation information about how to edit a .pkgdef file using the Visual Studio Theme Editor tool. The tool allows you to define the color tokens for your UI elements and verify that new color hues will work well inside Visual Studio.

Package definition files Package definition (.pkgdef) files are the files that define themes. The colors themselves are stored in theme color .xml files, which are compiled into a .pkgdef file for a given area. The .pkgdef files are deployed by Visual Studio s etup, processed at runtime, and merged together to define themes. When you create new color tokens, you might be editing your own category in ShellColors.xml or the theme colors .x ml file used by your feature(s). If your feature does not have a theme colors .xml file to edit, you will need to create a new empty .xml file, edit it with ThemeEditor to add new colors, and use CompileColor target in your project file to compile the .xml file into a .pkgdef file. The .pkgdef file will have to be deployed with your component, so additional setup authoring changes might be required.

The Visual Studio Theme Editor Start by installing the most current internal Visual Studio Theme Editor. This application should not be confused with the Visual Studio 2013 Color Theme Editor available from MSDN. Developers can use the tool from MSDN to customize the color themes Visual Studio uses, but b ut cannot use it to create new color tokens. There are several theme editors available, and if you have one already installed installed that won’t work with Visual Studio 2013, then you do not have the most current version. After installing the Visual Studio Theme Editor, open the theme colors .xml file used u sed by your feature/team, or ShellColors.xml if you have a category of colors in that environment file. The Visual Studio Theme Editor will open .pkgdef and .xml files. Visual Studio themes (.vstheme files) should have their extension renamed to .xml to be opened in the Visual Studio Theme Editor.

Color tokens A color token is made up of four elements: 





Category name: a logical grouping for a set of colors. Use an existing category name if you already have colors that are specific to your UI element, or group of UI elements. Token name: a descriptive name for your color token and token sets. S ets include background and foreground (text) token names as well as all their states, and these should be named so that it is easy to identify the pairs and the states that they apply to. Color values (or hues): needed for each colored theme. Always create background and text color values in pairs. Colors are paired for background/foreground so that the text (foreground) color is always readable against the Visual Studio UX Guidelines: Colors and Styling 71

EARLY PARTNER PREVIEW OF 2015 GUIDELINES. SUBJECT TO CHANGE. FOR QUESTIONS OR FEEDBACK, EMAIL [email protected].



background color on which it is drawn. These colors are linked and will be used together in your UI. If the background is not intended for use with text, you do not need to define a foreground color. System color name: for use in High Contrast displays.

Example of a pair of color token definitions showing values for three color themes and a High Contrast theme

Creating new color tokens You can create custom colors using the Visual Studio Theme Editor by following these steps: 1. 2. 3. 4. 5.

Determine the category and token names that you will give your new tokens. Choose the hues that your UI element will use for each theme and the system color. Use the theme editor to create your new tokens. Use the colors in your code. Test the changes in Visual Studio. S tudio.

Step 1: Determine your token category and name The preferred naming scheme for a VSColor is [Category] [UI type] [State] . Do not use the word “color” in your VSColor names as it is redundant.

Creating good categories Category names provide logical groupings, and should be defined as narrowly as possible. For example, the name of a single tool window could be a category name, but the name of an entire business unit or project team is not. Grouping entries into categories helps prevent confusion between colors with the same name. In the Shell Colors package definition file, you will notice that many core shared colors are part of the same category. This is for backwards compatibility reasons only, and is not considered a best practice.

Naming conventions for token names A token name must clearly clearly indicate the element type and the situations, or “state,” at which the color will be applied. For example, an active data tip's [UI type] could be named "DataTipActive". Since data tips have text, both a foreground and a background color need to be defined. By using background/foreground pairing, the theme editor will automatically create the colors "DataTipActive" for the background and "DataTipActiveText" for the foreground. If the piece of UI has only one state, st ate, the [State] part of the name can be omitted. For example, if a search box has a border and there is no state change that would affect the border's color, then the name for the border’s color token toke n can be merely "SearchBoxBorder." Some common state names include:      

Active Inactive MouseOver MouseDown Selected Focused

Examples of a few token names for parts of a list item control:   

ListItem ListItemBorder ListItemMouseOver


    

ListItemMouseOverBorder ListItemSelected ListItemSelectedBorder ListItemDisabled ListItemDisabledBorder

Step 2: Choose appropriate color values To help choose color values for your themes, refer to Color value reference, reference , which gives examples of existing UI and the color hues that they use. Because those color sets have already been implemented, you can be reasonably sure that they will look appropriate and behave correctly in all themes if you use them in a similar way in your own UI. To help you choose system colors for a High Contrast theme, refer to Choosing High Contrast colors. colors.

Step 3: Create new color tokens in the theme editor Once you have determined the category, name, and colors for a color entry, map the entry into the Visual Studio Theme Editor. Launch the theme editor and open the theme colors .xml file you are using to store your colors.

Add a new color entry Select “New “New Color” Color” from the toolbar. This opens a dialog where you can specify the category and one or more names for color entries within that category:

Select an existing category or select “New “ New Category” Category” to create a new category. Another dialog will open and you can assign your new category name:

Your category will then become become available in the “New Color” category drop-down drop-down menu.


After you have a category chosen, enter one or more names for your new color tokens, as shown at right:

Once you have created your new color token(s), an entry for each token you entered will appe ar in the theme editor’s color list. Your new token will not have predefined values, so you can then input color values for each theme.

New color tokens showing “None” before color values have been defined for the themes.

Adding or editing color values To add or edit a color token, select a color entry for the theme (column) of that token. Add the color value by either typing a hex color value in 8-digit ARGB format, entering a system color name into the cell, or using the drop-down menu to select the desired color via a set of color sliders or a list of system colors.

Color value custom color sliders

Color value system colors drop-down selector

For components that do not need to display text, enter only one color value: the background color. Otherwise , enter values for both background and text color, separated by a forward slash.


When entering values for High Contrast, you must enter valid Windows system color colo r names. Do not enter hardcoded ARGB values. You can view a list of valid system color names by selecting “Background: System” or “Foreground: System” from the color value drop-down menus. As always, when creating elements that have text components, you must use the correct background/text system color pair or your text might be unreadable. Saving your work after adding or changing color values will write the new color entries back to the package definition file.

Step 4: Use the colors in Visual Studio After defining your new color token, make a reference to it in your project file. For more information on color tokens, see The VSColor service. service.

Step 5: Test the changes in Visual Studio You can use the theme editor to see a temporary view of live changes to colors without rebuilding your package. To see a temporary view of your changes, click the Apply this theme to running Visual Studio windows button located on the header of each theme column. This temporary theme will go away the next time you start Visual Studio. To make the changes permanent, rebuild and redeploy your Visual Studio package after adding new colors to the package definition file and writing code that will use those colors. Rebuilding your Visual Studio package will merge the registry values for your new colors into the rest of th e themes. Then relaunch Visual Studio, view your UI, and verify that the new colors you defined are showing up.


Colors and Styling: Color value reference This topic is intended for use as a reference for creating new color tokens. You can leverage the work that has been done for existing UI in designing color choices for all the themes and the system color name for that element. When using this reference guide, remember: 





elemen t Always copy both foreground and background hues together. Don’t choose a fo reground from one UI element and a background from another just because you like the hues. You cannot use the actual color token names of these UI elements because you cannot control how they might be changed in the future, which is why the token names are not listed here. Instead, create tokens within your own category and use the hue values shown in the tables. You will get best results if you pair color sets with UI that is similar to the example use.

Color value reference categories Window; Control elements within the Property Grid Properties window: Control elements within the Properties Window; Control

CodeLens UI Grid control Manifest Designer TFS tagging Button controls Check box controls Drop-down/combo box controls theme; Dark theme; Blue theme; Blue theme Color palettes: Light theme; Dark

Visualization surfaces Charts


Properties window Here is what the Properties window looks like in all three themes:

Light theme

Dark theme

Blue theme

Control elements within the Properties window Component

Part

Element

Light

Dark

Blue

High Contrast

Default

FFEEEEF2

FF2D2D30

FFEEEEF2

ControlDark

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Hover

FF007ACC

FF007ACC

FF007ACC FF007ACC

HighlightText

Default

FFF5F5F5

FF252526

FFF6F6F6

Window

Hover

FFC9DEF5

FF3E3E40

FFFFFCF4

Highlight

Default

FFF5F5F5

FF252526

FFF6F6F6

Window

Hover

FFC9DEF5

FF3E3E40

FFE5C365

WindowFrame

Foreground

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Background

Default

FFE7E8EC

FF1B1B1C

FFE7E8EC

Control

Border

Default

FFE7E8EC

FF1B1B1C

FFE7E8EC

WindowFrame

Foreground

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Background

Default

FFE7E8EC

FF1B1B1C

FFE7E8EC

Highlight

Border

Default

FFE7E8EC

FF1B1B1C

FFE7E8EC

WindowFrame

Foreground

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Divider Lines Expander Glyph

Foreground Background Border

Embedded tab control

Embedded tab control

Body

Active tab

State


Component

Part

Inactive

Element

State

Light

Dark

Blue

High Contrast

Hover

FF1E1E1E

FFF1F1F1

FF1E1E1E

HighlightText

Disabled

FFA2A4A5

FF656565

FFA2A4A5

GrayText

Default

FFF5F5F5

FF252526

FFF6F6F6

Control

Hover

FFC9DEF5

FF3E3E40

FFFEFEFE

Highlight

Disabled

FFF5F5F5

FF252526

FFF6F6F6

Control

Default

FFF5F5F5

FF252526

FFF6F6F6

WindowFrame

Hover

FFC9DEF5

FF3E3E40 FF3E3E40

FFFEFEFE

WindowFrame

Disabled

FFF5F5F5

FF252526

FFF6F6F6

WindowFrame

Default

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

ControlText

Hover

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

HighlightText

Default

FFEEEEF2

FF292929

FFEFEFF2

Control

Hover

FFC9DEF5 FFC9DEF5

FF3E3E40

FFFFFCF4

Highlight

Default

None

None

None

None

Hover

FFC9DEF5 FFC9DEF5

FF3E3E40

FFE5C365

WindowFrame

Foreground

Default

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

ControlText

Background

Default

FFF5F5F5

FF252526

FFF6F6F6

Control

Default

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

WindowText

Hover

FF007ACC

FF007ACC

FF007ACC

WindowText

Default

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

WindowText

Hover

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

HighlightText

Selected

FF1E1E1E

FFF1F1F1 FFF1F1F1

FF1E1E1E

HighlightText

Disabled

FFA2A4A5

FF656565

FFA2A4A5

GrayText

Default

FFF5F5F5 FFF5F5F5

FF252526

FFF6F6F6

Window

Hover

FFC9DEF5 FFC9DEF5

FF3E3E40

FFFFFCF4

Highlight

Selected

FFF5F5F5 FFF5F5F5

FF252526

FFFDF4BF

Highlight

Disabled

FFF5F5F5

FF252526

FFF6F6F6

Window

Default

FFCCCEDB FFCCCEDB

FF3F3F46

FFCCCEDB

Window

Hover

FFC9DEF5 FFC9DEF5

FF3E3E40

FFE5C365

WindowFrame

Selected

FF007ACC

FF007ACC

FFE5C365

WindowFrame

Disabled

FFF5F5F5

FF252526

FFF6F6F6

WindowFrame

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Disabled

FFA2A4A5

FF656565

FFA2A4A5

GrayText

Default

FFFFFFFF

FF333337

FFFCFCFC

Control

Disabled

FFF5F5F5

FF252526

FFF6F6F6

Control

Default

FFCCCEDB

FF434346

FFDBDDE6

ControlDark

Disabled

FFCCCEDB

FF434346

FFC6C6C6

ControlDark

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Hover

FF1E1E1E

FFF1F1F1

FF1E1E1E

HighlightText

Selected

FFFFFFFF

FFFFFFFF

FFFFFFFF

HighlightText

Disabled

FFA2A4A5

FF656565

FFA2A4A5

GrayText

Hover

FFC9DEF5

72555555

FFFDF4BF

Highlight

Background

tabs Border

Section header


Category group

Body Glyph

Foreground

Toggle buttons Foreground

Background

Border

Input fields


List items Foreground List items Background


Component

Part

Element

State

Border Command buttons

Foreground

Background

Border

Light

Dark

Blue

High Contrast

Selected

FF3399FF

FF3399FF

FF3399FF

Highlight

Hover

FFC9DEF5

72555555

FFFDF4BF

WindowFrame

Selected

FFCCCEDB

FF3399FF

FF3399FF

WindowFrame

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

WindowText

Hover

FF1E1E1E

FFF1F1F1

FF1E1E1E

HighlightText

Selected

FFFFFFFF

FFFFFFFF

FFFFFFFF

HighlightText

Disabled

FFA2A4A5

FF656565

FFA2A4A5

GrayText

Hover

FFC9DEF5

FF3E3E40

FFFEFEFE

Highlight

Pressed

FF007ACC

FF007ACC

FF007ACC FF007ACC

Highlight

Disabled

FFF5F5F5 FFF5F5F5

FF252526

FFF6F6F6

Window

Hover

FFC9DEF5

FF3E3E40 FF3E3E40

FFFEFEFE

HighlightText

Pressed

FF007ACC

FF007ACC

FF007ACC FF007ACC

HighlightText

Disabled

FFCCCEDB FFCCCEDB

FF434346

FFC6C6C6

WindowFrame

Control elements within the Properties grid

Light theme Component

Dark theme Element

Light

Dark

Blue

High Contrast

Default

FF1E1E1E

FFF1F1F1

FF000000

WindowText

Selected, focused

FFFFFFFF

FFFFFFFF

FFFFFFFF

HighlightText

Selected, unfocused

FF1E1E1E

FFF1F1F1

FF000000

WindowText

Default

FFF5F5F5

FF252526

FFFFFFFF

Control

Selected, focused

FF3399FF

FF3399FF

FF3399FF

Highlight

Selected, unfocused

FFEEEEF2

FF2D2D30

FFEEEEF2

ControlDark

Divider lines

Default

FFEEEEF2

FF2D2D30

FFEEEEF2

ControlDark

Foreground

Default

FF1E1E1E

FFF1F1F1

FF000000

WindowText

Background

Default

FFEEEEF2

FF2D2D30

FFEEEEF2

ControlDark

Content Foreground

Background

Header

State

Blue theme


CodeLens UI

CodeLens UI colors are the same for Light, Dark, and Blue themes. Component

Element

State

Body

Foreground

Hyperlink

All themes

High Contrast

Default

FF1E1E1E

WindowText

Foreground

Selected

FFFFFFFF

HighlightText

Background

Default

FFFCFCFC

Window

Background

Selected

FF3399FF

Highlight

Background

Highlighted

FFFDFBAC

HotTrack

Border

Default

FF6DC2E9

WindowFrame

Foreground

Default

FF0E70C0 FF0E70C0

HotTrack

Default

FF9C9C9C

Separator


Grid control

Light theme

Dark theme

Blue theme

Component

Part

Body

Sub-section header

Grid lines

Element

State

Light

Dark

Blue

High Contrast

Foreground

Default

FF1E1E1E

FFF1F1F1

FF000000

WindowText

Selected

FFFFFFFF

FFFFFFFF

FFFFFFFF FFFFFFFF

HighlightText

Foreground

Default

FF717171 FF717171

FF999999

FF6D6D6D FF6D6D6D

GrayText

Background

Default

FFF5F5F5

FF252526

FFFFFFFF

Window

Selected

FF3399FF

FF3399FF

FF3399FF

Highlight

Items

Foreground

Default

FFF0F0F0

FF000000

FFF0F0F0

ScrollBar

Header

Foreground

Default

FFE0E3E6

FF333337

FFBEC3CB

ControlDark


Manifest Designer

Light theme

Dark theme

Blue theme

Component

Part

Body

Active tab

Element

State

Light

Dark

Blue

High Contrast

Foreground

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Background

Default

FFF5F5F5

FF252526

FFF6F6F6

Control

Foreground

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ActiveCaptionText

Background

Default

FFF5F5F5

FF252526

FFF6F6F6

ActiveCaption

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

InactiveCaptionText

Hover

FF1E1E1E

FFF1F1F1

FF1E1E1E

InactiveCaption

Default

FFFEFEFE

FF333337

FFFEFEFE

HighlightText

Hover

FFCCCEDB

FF3F3F46

FFCCCEDB

Highlight

Foreground

Default

FF717171

FF999999

FF717171

GrayText

Background

Default

FFF5F5F5

FF252526

FFF6F6F6

Control

Foreground

Default

FF1E1E1E

FFF1F1F1

FF1E1E1E

ControlText

Background

Default

FFFFFFFF

FF252526

FFFFFFFF

Control

Foreground Inactive tabs Background

Watermark text

Description pane


TFS tagging

Light theme Category.Color name

Dark theme

Blue theme

Light

Dark

Blue

High Contrast

Background

FFE1E6F1/ FF1E1E1E

FF424242/ FFFFFFFF

FFE9ECEE/ FF1E1E1E

Active Caption/ Active Caption Text

HoverBackground

FFC9DEF5

FF606060

FFFDF4BF

Highlight

HoverBackgroundText

FF1E1E1E

FFFFFFFF

FF1E1E1E

Highlight Text

PressedBackground

FF3399FF

FF3399FF

FF3399FF

Highlight

PressedBackgroundText

FFFFFFFF

FFFFFFFF

FFFFFFFF

Highlight Text

SelectedBackground

FF3399FF

FF3399FF

FF3399FF

Highlight

SelectedBackgroundText

FFFFFFFF

FFFFFFFF

FFFFFFFF

Highlight Text

TagHoverGlyph

FF1E1E1E

FFFFFFFF

FF1E1E1E

Highlight Text

TagHoverGlyphHover

FF1E1E1E

FFFFFFFF

FF1E1E1E

Highlight

TagHoverGlyphHoverBackground TagHoverGlyphHoverBack ground

FFF7F7F9

FF393939

FFFFFCF4

Highlight Text

TagHoverGlyphHoverBorderr TagHoverGlyphHoverBorde

FFF7F7F9

FF393939

FFE5C365

Highlight Text

TagHoverGlyphPressed

FFFFFFFF

FFFFFFFF

FFFFFFFF

Highlight

TagHoverGlyphPressedBackground

FF0E6198

FF007ACC

FFFDF4BF

Highlight Text

TagHoverGlyphPressedBorder

FF0E6198

FF007ACC

FFE5C365

Highlight Text

TagSelectedGlyph

FFFFFFFF

FFFFFFFF

FFFFFFFF

Highlight Text

TagSelectedGlyphHover TagSelectedGlyphHover

FFFFFFFF

FFFFFFFF

FFFFFFFF

Highlight

TagSelectedGlyphHoverBackground TagSelectedGlyphHoverBackground

FF52B0EF

FF52B0EF

FF52B0EF

Highlight Text

TagSelectedGlyphHoverBorder TagSelectedGlyphHoverBorder

FF52B0EF

FF52B0EF

FF52B0EF

Highlight Text

TagSelectedGlyphPressed

FFFFFFFF

FFFFFFFF

FFFFFFFF

Highlight

TagSelectedGlyphPressedBackground TagSelectedGlyphPressedBackgrou nd

FF0E6198

FF0E6198

FF0E6198

Highlight Text

TagSelectedGlyphPressedBorder

FF0E6198

FF0E6198

FF0E6198

Highlight Text


Button controls State

Element

Light

Dark

Blue

High Contrast

Foreground

1E1E1E

F1F1F1

1E1E1E

ControlText

Background

ECECF0

3F3F46

ECECF0

Control

Border

CCCEDB

555555

CCCEDB

ControlDark

Foreground

A2A4A5

656565

A2A4A5

InactivecaptionText InactivecaptionText

Background

F5F5F5

2D2D30

F5F5F5

Inactivecaption

Border

CCCEDB

3F3F46

CCCEDB

InactiveBorder

Foreground

1E1E1E

F1F1F1

1E1E1E

ActiveCaptionText

Background

C9DEF5

3F3F46

C9DEF5

ActiveCaption

Border

3399FF

007ACC

3399FF

ActiveBorder

Foreground

FFFFFF

F1F1F1

FFFFFF

HighlightText

Background

007ACC

007ACC

007ACC

Highlight

Border

007ACC

007ACC

007ACC

HighlightText

Foreground

1E1E1E

F1F1F1

1E1E1E

ActiveCaptionText

Background

C9DEF5

3F3F46

C9DEF5

ActiveCaption

Border

3399FF

007ACC

3399FF

ActiveBorder

Default

Disabled

Hover

Pressed

Focused


Check box controls State

Element

Light

Dark

Blue

High Contrast

Background

FEFEFE

252526

FEFEFE

Control

Border

717171

999999

717171

ControlDark

Text

1E1E1E

F1F1F1

1E1E1E

ControlText

Glyph

1E1E1E

F1F1F1

1E1E1E

ControlText

Background

F6F6F6

2D2D30

F6F6F6

InactiveCaption

Border

C6C6C6

434346

C6C6C6

InactiveBorder

Text

A2A4A5

656565

A2A4A5

InactiveCaption

Glyph

A2A4A5

656565

A2A4A5

InactiveCaptionText InactiveCaptionText

Background

F3F9FF

1F1F20

FDF4BF

Highlight

Border

3399FF

007ACC

E5C365

HighlightText

Text

1E1E1E

F1F1F1

1E1E1E

HighlightText

Glyph

1E1E1E

F1F1F1

424242

HighlightText

Background

007ACC

007ACC

E5C365

Highlight

Border

007ACC

007ACC

E5C365

HighlightText

Text

1E1E1E

F1F1F1

1E1E1E

HighlightText

Glyph

FFFFFF

F1F1F1

1E1E1E

HighlightText

Background

F3F9FF

1F1F20

FDF4BF

Highlight

Border

3399FF

007ACC

E5C365

HighlightText

Text

3399FF

F1F1F1

1E1E1E

HighlightText

Glyph

1E1E1E

F1F1F1

424242

HighlightText

Default

Disabled

Hover

Pressed

Focused


Drop-down/combo Drop-down/com bo box controls Drop-down/combo box State

Element

Light

Dark

Blue

High Contrast

Background

007ACC

333337

FCFCFC

Control

Border

CCCEDB

434346

8591A2

ControlLight

Text

1E1E1E

F1F1F1

000000

ControlText

Separator

FFFFFFF

333337

FCFCFC

ControlLight

Glyph

717171

999999

1B293E

ControlText

Glyph background

FFFFFF

333337

FCFCFC

Control

Background

EEEEF2

2D2D30

DFE7F3

InactiveCaption

Border

CCCEDB

434346

A4ADBA

InactiveBorder

Text

A2A4A5

656565

A2A4A5


Separator

EEEEF2

2D2D30

D5DCE8

InactiveBorder

Glyph

CCCEDB

656565

A2A4A5


Glyph background

EEEEF2

2D2D30

D5DCE8

InactiveCaption

Background

007ACC

3F3F46

FCFCFC

Highlight

Border

007ACC

007ACC

E5C365

HighlightText

Text

1E1E1E

007ACC

000000

HighlightText

Separator

007ACC

007ACC

E5C365

HighlightText

Glyph

1E1E1E

007ACC

000000

HighlightText

Glyph background

C9DEF5

1F1F20

FDF4BF

Highlight

Background

FFFFFF

3F3F46

FCFCFC

Highlight

Border

007ACC

007ACC

E5C365

HighlightText

Text

1E1E1E

FFFFFF

000000

HighlightText

Separator

007ACC

007ACC

E4C365

HighlightText

Glyph

FFFFFF

FFFFFF

000000

HighlightText

Glyph background

007ACC

007ACC

E5C365

Highlight

Background

FFFFFF

3F3F46

FCFCFC

Highlight

Border

007ACC

007ACC

E5C365

HighlightText

Text

1E1E1E

FFFFFF

000000

HighlightText

Separator

007ACC

007ACC

E5C365

HighlightText

Glyph

1E1E1E

007ACC

000000

HighlightText

Glyph background

C9DEF5

3F3F46

FCFCFC

Highlight

Default

Disabled

Hover

Pressed

Focused


Drop-down/combo box list (appears on press) State

Element

Light

Dark

Blue

High Contrast

Background

F6F6F6

1B1B1C

EFEFEF

Menu

Border

CCCEDB

3F3F46

9BA7B7

MenuText

Text

1E1E1E

FFFFFF

000000

MenuText

Background shadow

1900000

1900000

1900000

ControlDark

Background

C9DEF5

3F3F46

FDF4BF

Highlight

Border

C9DEF5

3F3F46

FDF4BF

HighlightText

Text

1E1E1E

FFFFFF

000000

HighlightText

Light

Dark

Blue

High Contrast

66007ACC

66007ACC

66007ACC

HighlightText

Default

Hover

Drop-down/combo box text input selection State

Element

Default Text input selection


Color palettes Light theme Color (hex) #FF0E6198

Swatch

Used for… Tool window buttons and selected document window buttons: backgrounds and borders on mouse down

#FF0E70C0

Hover over auto-hide tab text Tool window selected tab text

#FF007ACC

Most borders and separators on mouse down and hover Drop-down button and command bar button backgrounds on mouse down Focused tool window title bar and document window tab background and border

#FF1C97EA

Background document tabs: background and border on hover Scrollbar arrow glyphs on hover

#FF3399FF

Selected items: backgrounds and/or borders

#FF52B0EF

Active tool and document window buttons: backgrounds on hover

#FFC9DEF5

Most backgrounds and borders on hover Search drop-down menu items: background and border on hover, some items on mouse down

#FF442359

Provisional document tab buttons, selected or background: background on mouse down

#FF68217A

VS logo Active provisional document tab background and border

#FF9B4F96

Selected, focused provisional document tab buttons: background on hover

#FFB064AB

Unselected provisional document tab buttons: background on hover

#FFE51400

Stop, error

#FF1E1E1E

Most text Drop-down list, combo box, and search control drop-down glyphs on hover

#FF444444

Auto-hide tab text, unfocused tool window title bar text, and tool window tab text

#FF525252

Title bar text for main window and floating document windows

#FF6A6A6A

Scrollbar thumb: background and border on mouse down

#FF717171

Default glyphs Some instances of unfocused text

#FF888888

Scrollbar thumb: background and border on hover

#FF999999

Drag handles (toolbar and tool window)

#FFA2A4A5

Disabled text

#FFB7B9C5

Selected, unfocused document and provisional tab buttons: background on mouse down

#FFCCCEDB

Default borders and command bar separators Selected, unfocused tree view background

#FFE0E3E6

Menu bar menu group separators

#FFE6E7ED

Selected, unfocused document and provisional tab buttons: background and border on hover


Color (hex)

Swatch

#FFEEEEF2

Used for… IDE background Command shelf, menu bar, and command bar backgrounds

#FFF5F5F5

Tool window and scrollbar backgrounds Dock target button and glyph background and border

#FFF6F6F6

Drop-down list and combo box drop-down menu backgrounds

#FFF7F7F9

Unfocused tool window buttons: background on hover

#FFFFFFFF

Drop-down list, combo box, and unfocused search box selection/input field: default, hover, and mouse down backgrounds Combo box and some drop-down list menu items: background on hover and mouse down Default editor background Status bar, selected, and active text Glyphs that appear against dark surfaces

Dark theme Color (hex)

Swatch

Used for…

#FF0E6198

Tool window and selected document window buttons: backgrounds and borders on mouse down

#FF007ACC

Most borders and separators on mouse down and hover Drop-down list, combo box, search control, menu and submenu glyphs on hover Drop-down button and command bar button backgrounds on mouse d own Focused tool window title bar and document window tab background and border

#FF0097FB

Hover over auto-hide tab text Tool window selected tab text

#FF1C97EA

Background document tabs: background and border on hover Scrollbar arrow glyphs on hover

#FF3399FF


#FF52B0EF

Active tool and document window buttons: backgrounds on hover

#FF55AAFF

Tool window unselected tab text on hover

#FF442359

Provisional document tab buttons, selected or background: background on mouse down

#FF68217A

Active provisional document tab background and border

#FF9B4F96

Selected, focused provisional document tab buttons: background on hover

#FFB064AB

Unselected provisional document tab buttons: background on hover

#FFE51400

Stop, error

#FF1B1B1C

Drop-down list and combo box drop-down menu background Selected, unfocused document and provisional tab buttons: background on mouse down Dock target background

#FF1F1F20

Drop-down list and combo box drop-down buttons: background on hover Focused combo box drop-down button background

#FF222222

Command bar separator


Color (hex)

Swatch

#FF252526

Used for… Tool window backgrounds Dock target button and glyph background and border

#FF2D2D30

IDE, command shelf, menu bar, and command bar backgrounds

#FF333334

Menu items: background on hover Drop-down list, combo box, and unfocused search box selection/input field: default background

#FF333337

Separators: menu bar menu group, split button, and search control drop-down menu section Dock target border

#FF393939

Unfocused tool window buttons: background on hover

#FF3E3E40

Most backgrounds and borders on hover

#FF3E3E42

Scrollbar and scrollbar arrows: default, disabled, hover, and mouse down backgrounds Drop-down list, combo box, and search control drop-down menu: background on hover and

#FF3F3F46

mouse down Selected, unfocused tree view background Default drop-down list and combo box selection/input field border

#FF434346

Drop-down list selection field: border on hover and mouse down Combo box, drop-down list, search control, and text box: disabled border Drag handles (toolbar and tool window)

#FF46464A

Command bar separator

#FF555555

Selected, unfocused document and provisional tabs: background and border on hover

#FF656565

Disabled text

#FF686868

Scrollbar thumb: default background and border Title bar text for main window and floating document windows

#FF999999

Default menu and submenu glyphs

#FF9E9E9E

Scrollbar thumb: background and border on hover

#FFD0D0D0

Auto-hide tab text, unfocused tool window title bar text, and tool window tab text

#FFEFEBEF

Scrollbar thumb: background and border on mouse down Most text

#FFF1F1F1

Default command bar glyphs VS logo Default editor background

#FFFFFFFF

Status bar, selected, and active text Tool window and document tab buttons: default, hover, and mouse down glyphs Command bar options: background on hover

#72555555

Search drop-down menu items: background and border on hover and mouse down Main window and rafted window buttons: background and border on hover

Blue theme Color (hex) #FFE5C365

Swatch

Used for… Most borders and separators on mouse down and hover Drop-down buttons: background on mouse down

#FFFFE8A6

Tool window and selected document window buttons: background and border on mouse down

#FFFFF29D

Command bar buttons: background on mouse down


Color (hex)

Swatch

Used for… Tool window title bars and document window tabs: focused background and border

#FFFDF4BF

Command bar buttons, menu items, drop-down buttons, combo box items, and action buttons: background on hover Search control drop-down button: focused background

#FFFFFCF4

Selected icons: background on hover Focused and unfocused tool window and document window buttons: background on hover

#FF0E70C0

Search control "clear" glyph Drop-down menu link text

#FF007ACC

Default status bar background Scrollbar arrows: glyph on mouse down Tree view: default or selected, unfocused glyph on hover

#FF1C97EA

Scrollbar arrows: glyph on hover

#FF3399FF


#FF1B293E

Combo box, drop-down list, menu, and split button: default glyphs Command bar options: default, hover and mouse down glyph Menu: mouse down glyph Command bar text, drop-down and combo box menu item text

#FF293955

IDE and unselected preview tab backgrounds Auto-hide tab default and hover backgrounds

#FF35496A

IDE background gradient

#FF364E6F

Unselected document window tab background

#FF465A7D

Auto-hide tab border

#FF4B5C74

Tool window unselected tab: separator and default and hover background and border

#FF4D6082

Unfocused document tab, preview tab, and tool window title bar background and border Title bar drag handle

#FF5B7199

Background document tabs: background and border on hover

#FF8E9BBC

Tool window border

#FFCFD6E5

Toolbar background

#FFD5DCE8

Combo box, drop-down, and text box disabled backgrounds

#FFD6DBE9

Title bar, menu bar, and command bar backgrounds

#FFDCE0EC

Toolbar options background Toolbar border

#FFEAF0FF

Default menu background

#FFF2F4FE

Menu icon channel background

#FF000000

Tool window selected tab and command bar: hover, mouse down, and selected text Document control, drop-down button, and menu glyphs on hover

#FF6A6A6A

Pressed scrollbar thumb

#FF808080

Inactive command bar and menu text

#FF888888

Hover scrollbar thumb


Visualization surfaces The Visualization Surface Colors represent and differentiate objects on visualization surfaces in Visual Studio. This set is color-accessible. The three major types of color blindness are accounted for, so users can distinguish objects through contrast and value. Each color set consists of a Light, Medium, and Dark value. Gradient fills should use the light and medium values, values, while solid fills should use the light value. Dark values should only be used for outlines and borders. The two supplemental colors can be used to extend the base seven colors when more distinct objects are needed, though there remains a limit of seven simultaneously displayed colors. These colors have accessibility conflicts that should be noted:  

Steel Blue should not appear with Plum Red should not appear with Plum, Green, or Brown

Fill colors

Outline/border colors

High Contrast: These colors map map to the system color “Window”

High Contrast: These colors map to the system color “WindowText”

Hex

RGB

Hex

RGB

Hex

RGB

Hex

RGB

#FFA1C7E7

161,199,231

#FFE2E432

226,228,66

#FF5386BF

83,134,191

#FFCAB22D

202,178,45

#FFB9D4EE

185,212,238

#FFFBF7C8

251,247,200

#FFB8CCD7

184,204,215

#FFA19667

161,150,103

#FF779AB6

119,154,182

#FF705829

112,88,41

#FFC6D4DF

198,212,223

#FFB0A781

176,167,129

#FFCB98B6

203,152,182

#FF8E5478

142,84,120

#FFE2B1CD

226,177,205

Secondary supplemental

Secondary supplemental

colors

colors

Hex

RGB

#FF9FB861

159,184,97

#FF89ABBD

137,171,189

#FFB1C97B

177,201,123

#FFA0B7C7

160,183,201

#FFBFC749

191,199,73

#FFFF7971

255,121,113

#FFD0D4B7

208,212,183

#FFFF9F99

255,159,153

Hex

RGB

#FF5D8039

93,128,57

#FF427094

66,112,148

#FFA79432

167,148,50

#FFAD1C2B

173,28,43


Charts

Charting colors on timeline graph

These colors were designed for use with charts in Visual Studio. The palette is accessible for the major types of color blindness, and the colors can be differentiated even when used as very narrow slices of color. You can use these colors in any combination for any type of chart or graph in your UI. You do not need to use all seven colors if you do not need that many distinct colors. Do not change these colors or introduce new colors without first talking to a UX designer. These colors were not designed to be used with any foreground elements, so do not place text or glyphs on top of these colors without first talking to a UX designer. Fill colors Hex

RGB

#71B252

113,178,82

#BF3F00

191,63,0

#FCB714

252,183,20

#903F8B

144,63,139

#117AD1

17,122,209

#79D7F2

121,215,242

#B5B5B5

181,181,181


Colors and Styling: Choosing High Contrast colors Windows uses several high-contrast systemlevel themes that increase the color contrast of text, backgrounds, and images, making elements appear more distinct on the screen. For accessibility reasons, it is important that Visual Studio interface elements respond correctly when users switch to a High Contrast theme. Only a handful of system colors can be used for High Contrast themes. When choosing your system color names, remember the following tips: 1.

2.

3.

Choose system colors that have the same semantic meaning as the element that you are coloring. For instance, if you are choosing a high-contrast color for text within a window, use WindowText and not ControlText. Choose foreground/background pairs together or you will not be confident that your color choice will work in all High Contrast themes. Determine which parts of your UI are the most important and ensure that content areas will stand out. You will lose a lot of detail that subtle differences in color hue would normally distinguish, so the use of strong border colors is common to define content areas, because there are no color variants for different content areas.

From the Windows Presentation Foundation Team blog


System color set The table at right indicates the complete set of system color names, and the corresponding hues displayed in each theme: When applying this limited set of colors to your UI, it is expected that you will lose l ose subtle details that were pr esent in the “normal” themes.

On the following page is an example of UI with subtle gray colors that are used to distinguish areas within a tool window. When paired with the same window displayed in High Contrast mode, you can see that all the backgrounds are the same hue and the borders of those areas are indicated by border alone.

Example of how subtle details are lost in High Contrast mode


Choosing text colors in an editor Colorized text is used in an editor or on a design surface to indicate meaning, such as allowing for easy identification of groups of similar items. In a High Contrast theme, however, you do not have the ability to differentiate between more than three text colors. WindowText, GrayText and HotTrackText are the only colors available on WindowBackground surfaces. Since you cannot use more than three colors, carefully choose the most important differences that you want to display when in High Contrast mode.

Hues for each of the token names allowed on an editor surface, as they appear in each High Contrast theme

Example of the editor surface in the Blue theme

The same surface in the High Contrast #1 theme


Usage patterns Many common UI elements already have high-contrast colors defined. You can reference these usage patterns when choosing your own system color names, so that your UI elements are consistent with similar components. System color

ActiveCaption

Usage   

ActiveCaptionText

 

Control



  

ControlDark

Active IDE and rafted window button glyphs on hover and press Title bar background for IDE and rafted windows Default status bar background Active IDE and rafted windows for title bar foreground (text and glyphs) Background and border of active window buttons on hover and press Combo box, drop-down list, and search control default and disabled background, including drop-down button Dock target button background Command bar background Tool window background



IDE background Menu and command bar separators Command bar border Menu shadows Tool window tab default and hover border and separator Document well overflow button background Dock target glyph border

ControlDarkDark



Unfocused, selected document window tab

ControlLight



     



Auto-hide tab border Combo box and drop-down list border Dock target background and border

ControlLightLight



Selected, focused provisional tab border

ControlText







GrayText



  

Highlight





HighlightText

     

HotTrack

 

InactiveCaption

  

Combo box and drop-down list glyph Tool window unselected tab text Combo box and drop-down list disabled border, drop-down glyph, text, and menu item text Disabled menu text Search control 'search options' header text Search control section separator All hover and pressed backgrounds and borders, except combo box drop-down button background and document well overflow button border Selected item backgrounds All hover and pressed foregrounds (text and glyphs) Focused tool window and document tab window control foreground Focused tool window title bar border Focused, selected provisional tab foreground Document well overflow button border on hover and press Selected icon border Scrollbar thumb background and border on press Scrollbar arrow glyph on press Inactive IDE and rafted window button glyphs on hover Title bar background for IDE and rafted windows Disabled search control background


System color

InactiveCaptionText

Usage    

Menu

 

MenuText

Inactive IDE and rafted windows title bar foreground (text and glyphs) Inactive window buttons background and border on hover Unfocused tool window button background and border Disabled search control foreground Drop-down menu background Checked and disabled checkmark background



Drop-down menu border Checkmark check Menu glyphs Drop-down menu text Selected icon border

Scrollbar



Scrollbar and scrollbar arrow background, all states

Window



   



Auto-hide tab background Menu bar and command shelf background Unfocused or unselected document window tab background and document border, for both open and provisional tabs Unfocused tool window title bar background Tool window tab background, both selected and unselected

WindowFrame



IDE border

WindowText



 



 

  

Auto-hide tab foreground Selected tool window tab foreground Unfocused document window tab and unfocused or unselected provisional tab foreground Tree view default foreground and hover over unselected glyph Tool window selected tab border Scrollbar thumb background, border, and glyph


Colors and Styling: Using themed controls WPF Most tool windows will be themed automatically through style inheritance from the main and/or floating windows. Style inheritance works by walking up the parent element chain looking for styles matching the given key. (For styles with a TargetType, the default key is the type itself.) Most WPF-based tool windows find their ScrollBar / ScrollViewer ScrollViewer styles in the resources of a shell-provided WPF element at the root of the tool window UI h ierarchy (GenericPaneContentPresenter). For WPF elements for which scrollbar theming doesn't "just work," the preferred way of controlling theming is by use of the ImageThemingUtilities.ThemeScrollBarsProperty attached property. It controls the theming of scrollbars for the element it is attached to, as well as any elements contained therein. From XAML: < Grid Name Name="grid1" ="grid1" vs vs: :ImageThemingUtilities.ThemeScrollBars ="True"> >

From code: // theme the scrollbars all elements within grid1 ImageThemingUtilities .SetThemeScrollBars(grid1, true true); );

Styles If you want more control over scrollbar theming (for instance, you want to define your own scrollbar style based on Visual Studio style), the following Visual Studio-specific scrollbar styles are available in the application's resource dictionary: Type

Themed style key

Unthemed style key

ScrollBar

VsResourceKeys.ScrollBarStyleKey VsResourceKeys .ScrollBarStyleKey

VsResourceKeys.UnthemedScrollBarStyleKey VsResourceKeys .UnthemedScrollBarStyleKey

VsResourceKeys.ScrollViewerStyleKey .ScrollViewerStyleKey ScrollViewer VsResourceKeys

GridView

VsResourceKeys.CustomGridViewScrollViewerStyleKey VsResourceKeys .CustomGridViewScrollViewerStyleKey

VsResourceKeys.UnthemedScrollViewerStyleKey VsResourceKeys .UnthemedScrollViewerStyleKey VsResourceKeys.UnthemedGridViewScrollViewerStyleKey VsResourceKeys .UnthemedGridViewScrollViewerStyleKey

Note: The unthemed styles are dynamic resources that could change at runtime if the Windows theme is changed (for example, from Aero to Windows Classic).


Native Theming for an HWND is controlled by the value of a particular Windows property (fo r example, SetProp / GetProp GetProp) on the window:

enum __VSNativeScrollbarTh __VSNativeScrollbarThemeMode emeMode { NSTM_Undefined NSTM_Undefined = 0, // Theme mode isn't defined yet NSTM_All = 1, // Theme all descendants NSTM_None = 2, // No theming of descendants NSTM_OnlyTopLevel NSTM_OnlyTopLevel = 3, // Theme scrollbars on the window to which this is applied, but not descendants }; For controlling this at an IVsWindowFrame level, you can use this window frame property:

VSFPROPID_NativeScrollbarTh VSFPROPID_NativeScrollbarThemeMode emeMode = -5026, (I4) This property uses values from __VSNativeScrollbarThemeMode to indicate whether the native (in this case, Win32) scrollbars on child windows of this frame should have theming applied. This property only has an effect on frames whose pane meets one the following criteria: 1.

The pane is created with IVsWindowPane.CreatePaneWindow, or

2.

The pane is created with IVsUIElementPane.CreateUIElementPane and CreateUIElementPane returns

IVsUIWin32Element. If the frame's pane is created with CreateUIElementPane returning either a FrameworkElement or IVsUIWpfElement and you wish to control the theming of hosted Win32 scrollbars, you will need to call the Windows ::SetProp function for each

HwndHost you need to control, using the following parameters: 

hwnd: HwndHost.Handle



VSSPROPID_NativeScrollbarThemeModePropName shell property lpString: the string returned by the VSSPROPID_NativeScrollbarThemeModePropName



__VSNativeScrollbarThemeMode, Mode, but not NSTM_Undefined hData: a value from __VSNativeScrollbarTheme

This value is initialized to NSTM_Undefined. Until the time IVsWindowPane.CreatePa IVsWindowPane.CreatePaneWindow neWindow or IVsUIElementPane.CreateUIElementPane IVsUIElementPane.CreateUIElementPane returns, the value can be set to another value from __VSNativeScrollbarThemeMode, __VSNativeScrollbarThemeMod e, but once set, the value cannot be changed. If this value is NSTM_Undefined when IVsWindowPane.CreatePaneWindow or IVsUIElementPane.CreateUIElementPane returns, it will be set to NSTM_All. For more granular control, anyone (internal or external) can apply the property directly to any HWND. They can find out the property name by querying for this shell property:

VSSPROPID_NativeScrollbarTh VSSPROPID_NativeScrollbarThemeModePropN emeModePropName ame = -9071, (BSTR, Read-only.) The string to be used with ::SetProp/::RemoveProp to control theming of native scrollbars. When calling ::SetProp, the property value provided should be one of the values in the __VSNativeScrollbarThemeMode enumeration.


HTML (CSS) Basic scrollbar theming for MSHTML-based web browser components is possible via a set of CSS attributes. As an example, this matches the Visual Studio “Light” theme:

body { body { scrollbar-3dlight-color: #EFEFEF #EFEFEF; ; /*[{Enviro /*[{EnvironmentColor nmentColors.ScrollBarBackg s.ScrollBarBackgroundColorKey roundColorKey}]*/ }]*/ scrollbar-darkshadow-color: #EFEFEF #EFEFEF; ; /*[{EnvironmentColors.ScrollBarBackgroundColorKey}]*/ scrollbar-highlight-color: #EFEFEF #EFEFEF; ; /*[{EnvironmentColors.ScrollBarBackgroundColorKey}]*/ scrollbar-shadow-color: scrollbar-shadow-color : #EFEFEF #EFEFEF; ; /*[{EnvironmentColors.ScrollBarBackgroundColorKey}]*/ scrollbar-track-color: #EFEFEF #EFEFEF; ; /*[{EnvironmentColors.ScrollBarBackgroundColorKey}]*/ scrollbar-arrow-color: #606060 #606060; ; /*[{EnvironmentColors.ScrollBarArrowGlyphColorKey}]*/ scrollbar-face-color: scrollbar-face-color : #CCCCCC #CCCCCC; ; /*[{EnvironmentColors.ScrollBarThumbBackgroundColorKey}]*/ scrollbar-base-color: scrollbar-base-color : red red; ; /*IE no longer uses this property */ } This styling is restricted to color and is based on legacy schemes. By default, the scrollbars will use styling to match the OS, so Windows 8 would get Modern-themed scrollbars and Windows 7 would get classic scrollbars. Also note th at there is no distinct color for the arrow glyph background: it uses the scrollbar face on Windows 7 and the track color on Windows 8. In order to dynamically update these colors, you can subscribe to the Visual Studio theme change event and update the relevant property values.


Colors and Styling: Exposing colors for end users Sometimes you will want to allow the end user to customize your U I, such as when you are creating a code editor or design surface. The most common way to do this is by using the Tools > Options dialog. Unless you have highly specialized UI that requires special controls, the easiest way to present the customization is through the Fonts and Colors page within the Environment section of the dialog. For each element that you expose for customization, the user can choose to change the foreground color, background color, or both.

Building a VSPackage for your customizable colors A VSPackage can control the fonts and colors through custom categories and display items on the Fonts and Colors property page. When using this mechanism, VSPackages must i mplement the IVsFontAndColorDefaultsProvider interface and its associated interfaces. In principle, this mechanism can be used to modify all existing display items and the categories that contain them. However, it should not be used to modify the Text Editor category or its display items. For more information on the Text Editor category, see Font and Color Overview. Overview. To implement custom categories or display Items, a VSPackage must: 



 

Create or identify categories in the registry. The IDE's implementation of the Fonts and Colors property page uses this information to correctly query for the service supporting a given category. Create or identify groups in the registry (optional). It might be useful to define a group, which represents the union of two or more categories. If a group is defined, the IDE automatically merges subcategories and distributes display items within the group. Implement IDE support. Handle font and color changes.

For more detailed information, see the MSDN article Accessing Stored Font and Color Settings. Settings .

To create or identify categories Construct a special type of category registry entry under [HKLM\SOFTWARE\Microsoft \Visual Studio\\FontAndColors\]. version>\FontAndColors\]. is the non-localized name of the t he Category. Populate the registry with two values: Name

Type

Data

Description

Category

REG_SZ

GUID

A GUID created to identify the category

Package

REG_SZ

GUID

The GUID of the VSPackage service that supports the category

The service specified in the registry must provide an implementation of IVsFontAndColorDefaults for the corresponding category.


To create or identify groups Construct a special type of category registry entry under [HKLM\SOFTWARE\Microsoft \Visual Studio\\FontAndColors\]. is the non-localized name of the group. Populate the registry with two values: Name

Type

Data

Description

Category

REG_SZ

GUID

A GUID created to identify the group

Package

REG_SZ

GUID

The GUID of the service that supports the category

The service specified in the registry must provide an implementation of

T:Microsoft.VisualStudio.Shell.Interop.IVsFontAndColorGroup for the corresponding group.

To implement IDE support Implement GetObject GetObject,, which returns either an IVsFontAndColorDefaults interface or an

T:Microsoft.VisualStudio.Shell.Interop.IVsFontAndColorGroup interface to the IDE for each category or group GUID supplied. For every category it supports, a VSPackage implements a separate instance of the IVsFontAndColorDefaults interface. The methods implemented through IVsFontAndColorDefaults must provide the IDE with:   

Lists of display items in the category Localizable names for display items Display information for each member of the category

Note: Every category must contain at least one display item. The IDE uses the T:Microsoft.VisualStudio.Shell.Interop.IVsFontAndColorGroup interface to define a union of several categories. Its implementation provides the IDE with:   

A list of the Categories that make up a given group Access to instances of IVsFontAndColorDefaults of IVsFontAndColorDefaults supporting each Category within the group Localizable group names

Updating the IDE The IDE caches information about Font and Color settings. Therefore, after any modification of the IDE Font and Color configuration, ensuring that the cache is up to date is a best practice. Updating the cache is done through the IvsFontAndColorCacheManager interface and can be performed globally or just on selected items.


Handling font and color changes To properly support the colorization of text that a VSPackage displays, the colorization service supporting the VSPackage must respond to the user-initiated changes made through the Fonts and Colors properties page. To do this, a VSPackage must: 

handle IDE-generated events by implementing the IVsFontAndColorEvents interface. The IDE calls the appropriate method following user modifications of the Fonts and Colors page. For example, it calls the OnFontChanged method if a new font is selected. OR



poll the IDE for changes. This can be done through the system-implemented IVsFontAndColorStorage interface. Although primarily for support of persistence, the GetItem method can obtain font and color information for Display Items. For more information on font and color settings, see the MS DN article Accessing Stored Font and Color Settings. Settings.

Note: To ensure that polling results are correct, use the IVsFontAndColorCacheManager interface to determine if a cache flush and update are needed prior to calling the retrieval methods of the IVsFontAndColorStorage interface.

Registering custom font and color Category without implementing interfaces The following code sample demonstrates how to register the custom font and color Category without implementing interfaces:

HKEY_LOCAL_MACHINE\SOFTWAR HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Vi E\Microsoft\VisualStudio\8 sualStudio\8.0Exp\FontAn .0Exp\FontAndColors\CShar dColors\CSharp p Tool Window] "Package"="{F5E7E71D-1401-1 "Package"="{F5E7E71D-1401-11D1-883B-0000 1D1-883B-0000F87579D2}" F87579D2}" "Category"="{9FF46859-A47E-4 "Category"="{9FF46859-A47E-47bf-8AC5-EC3 7bf-8AC5-EC3DBE69D1FE}" DBE69D1FE}" "ToolWindowPackage"="{725 "ToolWindowPackage"="{7259e420-6241-4e0d9e420-6241-4e0d-b535-5b82067 b535-5b820671d183}" 1d183}" "NameID"=dword:00000064 Note:   

“NameID” = the resource ID of the localized category name in your package. “ToolWindowPackage” = Package GUID. "Category"="{9FF46859-A47E-47bf-8AC5-EC3DBE69D1FE}" "Category"="{9FF46859-A4 7E-47bf-8AC5-EC3DBE69D1FE}" is just an example and the actual value can be a new GUID provided by the implementer.


Set the font and color property Category GUID The code sample below demonstrates how to set Category GUIDs:

// m_pView is your IVsTextView IVsTextEditorPropertyCatego IVsTextEditorPropertyCategoryContainer ryContainer spPropCatContainer spPropCatContainer = (IVsTextEditorPropertyCateg (IVsTextEditorPropertyCategoryContainer) oryContainer)m_pView; m_pView; if (spPropCatContainer != null) { IVsTextEditorPropertyContai IVsTextEditorPropertyContainer ner spPropContainer; spPropContainer; Guid GUID_EditPropCategor GUID_EditPropCategory_View_Mast y_View_MasterSettings erSettings = new Guid("{D1756E7C-B7FD-49a8Guid("{D1756E7C-B7FD-49a8-B48E-87B14A B48E-87B14A55655A}"); 55655A}"); hr = spPropCatContainer.G spPropCatContainer.GetPropertyC etPropertyCategory( ategory( ref GUID_EditPropCategory GUID_EditPropCategory_View_Maste _View_MasterSettings, rSettings, out spPropContainer); spPropContainer); if(hr == 0) { hr = spPropContainer.SetProperty( VSEDITPROPID.VSEDITPROPID_V VSEDITPROPID.VSEDITPROPID_ViewGeneral_Fo iewGeneral_FontCategory, ntCategory, catGUID); hr = spPropContainer.SetProperty( VSEDITPROPID.VSEDITPROPID_V VSEDITPROPID.VSEDITPROPID_ViewGeneral_Co iewGeneral_ColorCategory, lorCategory, catGUID); } }


Colors and Styling: Daytona and web UI “Daytona” is a set of APIs, tools, and services that enable a user to create plugins with HTML, CSS, and JavaScript that can be used in a variety of hosts, such as Visual Studio or F12. Plugins are composed of a portable component, wh ich is written in HTML, CSS and JavaScript, and optional host-specific components. Each Daytona host can have its own set of UI conventions, either implicit or explicit, that a plugin must conform to in order to appear native to it s environment. Some hosts, such as Visual Studio, allow end users to make changes to the default “theme” so that the host’s visual aspects cannot be statically targeted when authoring a style sheet. This poses a challenge to developers building portable plugins. This topic explains how to author web UI in Visual S tudio using the Daytona host in a way that properly supports both theming and High Contrast.

Daytona theming mechanism The Daytona runtime provides a set of services that abstracts the UI conventions and theming capabilities of the host. These services ensure that plugins automatically conform to the visual expectations of the user based on the environment they are hosted in. This behavior is provided by three primary features: 1.

A runtime-injected runtime-injected style sheet (plugin.css) that transparently applies a set of CSS rules to a p lugin’s UI and styles the default set of HTML controls (for example, HTMLInputElement and HTMLButtonElement)

2.

A set of host-provided tokens that can be used to s tyle UI elements using values that are theme-based instead of hardcoded

3.

a.

a declarative syntax for accessing these tokens with CSS

b.

an API for programmatically accessing theme tokens from JavaScript

Notification of theme changes

Runtime-injected style sheet The Daytona runtime coordinates with the host to inject a style sheet that automatically themes the standard UI elements of a plugin. This includes styling for the following concepts:       

Environment font Background colors Hyperlinks Form controls (for example: ,

2015 Visual Studio User Experience Guidelines RC Preview

Recommend Documents