![\"Image](\"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-content\/uploads\/sites\/61\/2021\/02\/meme-justDoIt.jpg\")
<\/a><\/p>\n## Some exciting new features!<\/p>\n
### \ud83c\udd95 mgt-person-card [issue #528][3]<\/p>\n
Our redesign of Person Card presents many new sections of information centered around the person you are interested in connecting with. We kept the functionalities that allows you to email or send a Microsoft Teams chat directly from the card. We added new sections to show organization information, existing email threads that you both participated in, files you both have access to, and even skills and experiences the person has from the new [Profile API][4]! We are now on to the next step to make the Person Card extensible. So that you can add your own sections and additional information you would like to present.<\/p>\n
You can add the `mgt-person` and `mgt-person-card` components by including the following in your HTML: `<mgt-person person-query=”me” view=”twoLines” person-card=”hover”><\/mgt-person>`<\/p>\n ### \ud83c\udf1a Dark theme<\/p>\n What if your application is built with a dark theme? With v1 you would need to tweak each CSS custom property available for each component. Now you would be able to simply apply `class=\u201dmgt-dark\u201d` to the desired section of your HTML page. We will handle switching between light theme and dark theme for you! We have `mgt-people-picker` component with dark theme available in the preview package. But I will provide some examples below as how you can configure theming with different options.<\/p>\n **Example – regional theme**<\/p>\n <div class=”mgt-light”>\n<header class=”mgt-dark”>\n\/\/ login will have dark theme\n<mgt-login><\/mgt-login>\n<\/header>\n<article>\n\/\/ agenda will have light theme\n<mgt-agenda><\/mgt-agenda>\n<\/article>\n<\/div><\/p>\n **Example – global theme**<\/p>\n <body class=”mgt-light”>\n\/\/ everything will be light themed\n<header><mgt-login><\/mgt-login><\/header>\n<article><mgt-agenda><\/mgt-agend><\/article>\n<footer><\/footer>\n<\/body><\/p>\n **Example – per component theme**<\/p>\n <mgt-login class=”mgt-dark”><\/mgt-login><\/p>\n <\/p>\n ### \ud83d\uddc3 Caching of Microsoft Graph calls [issue #221][6]<\/p>\n Prior to v2, each component calls Microsoft Graph even if sometimes the information retrieved is the same. Think of getting a list of people to display in `mgt-people` and then showing subsets of these people in `mgt-agenda` for different meetings. The caching feature creates an optional and configurable service to cache common graph requests. This will improve the loading performance to help you create a pleasant user experience!<\/p>\n To configure cache, you will need to understand the static class `CacheService.config` object:<\/p>\n You can change the cache config as below:<\/p>\n And here is a comparasion of load time in the same view of an app before and after cache implementation:<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\n<\/code><\/pre>\n<\/code><\/pre>\n<\/code><\/pre>\n<\/code><\/pre>\n\r\n\r\n**Example - customized theming**\r\n .custom {\r\n --input-background-color: $custom-background-color;\r\n --input-border: $custom-input-border;\r\n }\r\n\r\n**Example - Modify specific colors in a theme**\r\n\r\n\r\n .custom { \r\n --input-background-color: $custom-background-color;\r\n }\r\n <\/code><\/pre>\nlet config = {\r\n defaultInvalidationPeriod: number,\r\n isEnabled: boolean,\r\n people: {\r\n invalidationPeriod: number,\r\n isEnabled: boolean\r\n },\r\n photos: {\r\n invalidationPeriod: number,\r\n isEnabled: boolean\r\n },\r\n users: {\r\n invalidationPeriod: number,\r\n isEnabled: boolean\r\n }\r\n};\r\n<\/code><\/pre>\nimport { CacheService } from '@microsoft\/mgt';\r\n\r\nCacheService.config.users.isEnabled = false;\r\nCacheService.config.photos.invalidationPeriod: 3600000; \/\/ 1 hour in milliseconds\r\n<\/code><\/pre>\n