{"id":1849,"date":"2018-10-04T09:53:59","date_gmt":"2018-10-04T09:53:59","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=1849"},"modified":"2018-10-04T09:53:59","modified_gmt":"2018-10-04T09:53:59","slug":"mvp-article-using-theme-colors-in-list-formatting","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/mvp-article-using-theme-colors-in-list-formatting\/","title":{"rendered":"MVP Article – Using Theme Colors in List Formatting"},"content":{"rendered":"

List formatting for modern list views is an incredibly powerful tool that allows you to quickly and easily add instant meaning, visual appeal, and dynamic visualizations directly to your lists. With some simple column formats<\/a>, a view format<\/a>, or maybe even a combination \u2013 power users can take advantage of all the power of the modern list view while adding visual semantics that bring contextual meaning and dramatically increases the value for end users.<\/p>\n

Awesome! But how do you make sure your formats don\u2019t clash with the rest of the site?<\/p>\n

List formatting allows you to specify inline styles for your custom elements including attributes like color, background-color, and more. Using these directly ensures you always get the chosen color. This is great when that\u2019s what you want, but what happens when a user changes the site\u2019s theme or a site is associated with a hub site that provides its own set of colors?<\/p>\n

\"\"<\/p>\n

Fortunately, list formatting also allows you to specify classes for your custom elements. In addition to the predefined classes<\/a>, like the sp-field-severity<\/em> classes, you can take advantage of many of the Office UI Fabric classes to ensure your colors always match the theme (even custom themes<\/a>).<\/p>\n

Theme Colors<\/h2>\n

The Office UI Fabric<\/a> provides 9 theme colors and 11 neutral colors in addition to the 23 named colors. Each of these can be combined with prefixes to apply to an element\u2019s text, border, or background. There are also hover versions of each! This gives you well over 250 classes just for applying colors.<\/p>\n

\"\"<\/p>\n

You specify how you want the color applied by using the following naming conventions:<\/p>\n

ms-[location]-[color]<\/em><\/p>\n

ms-[location]-[color]–hover<\/em><\/p>\n

Here\u2019s a handy table with examples:<\/p>\n\n\n\n\n\n\n\n\n\n
Location<\/strong><\/td>\nExample<\/strong><\/td>\n<\/tr>\n
Text<\/td>\nms-fontColor-neutralPrimary<\/em><\/td>\n<\/tr>\n
Text Hover<\/td>\nms-fontColor-neutralSecondary–hover<\/em><\/td>\n<\/tr>\n
Background<\/td>\nms-bgColor-themePrimary<\/em><\/td>\n<\/tr>\n
Background Hover<\/td>\nms-bgColor-themeLight–hover<\/em><\/td>\n<\/tr>\n
Border<\/td>\nms-borderColor-tealDark<\/em><\/td>\n<\/tr>\n
Border Hover<\/td>\nms-borderColor-magenta<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Keep in mind these only apply colors and that you\u2019ll still need to specify other properties (such as border style<\/em>\/width<\/em>) via individual style attributes. In these cases, don\u2019t use rollup styles like border<\/em> since this will override the color. Use the individual border-width<\/em>, border-left-style<\/em>, etc. attributes.<\/p>\n

Using these classes is also the only way to apply hover styles within List Formatting.<\/p>\n

Finally, unlike the other named colors (like ms-bgColor-yellow<\/em>), white and black are theme sensitive and will swap values when used on light or dark themes.<\/p>\n

Typography<\/h2>\n

Just like with colors, List Formatting lets you specify font sizes and weights using inline styles. However, you can ensure you match the rest of SharePoint by taking advantage of the typography classes<\/a> provided by the Office UI Fabric.<\/p>\n

The 10 base classes (ms-font<\/em>) allow you to match size and weight together in a single class and represent the recommendations laid out in the Office Design Language. However, there are also 10 size classes (ms-fontSize<\/em>) that only affect font-size that you can combine with the 4 weight classes (ms-fontWeight<\/em>) that change the text\u2019s boldness.<\/p>\n

Resources<\/h2>\n

Exploring the Office UI Fabric site will let you know what classes are already available as you design your formats so that you can focus on your customizations while ensuring you match the overall style and colors of your SharePoint site (even as they change).<\/p>\n

Additionally, SharePoint Patterns and Practices (PnP)<\/a> provides several column and view formatting samples<\/a> to inspire you and help you get started. PnP also provides List Formatter<\/a>, a free tool that makes creating and updating your formats simpler than ever!<\/p>\n

The theme sensitive formats shown in the animation above can all be found here:<\/p>\n