|
| 1 | +--- |
| 2 | +title: Making Quick View compatible with dark mode in mobile devices |
| 3 | +description: Making Adaptive Card Extension Quick View compatible for both dark and light mode by using different resources for both scenarios. |
| 4 | +ms.date: 08/08/2023 |
| 5 | +ms.localizationpriority: high |
| 6 | +--- |
| 7 | +# Making Quick View compatible with dark mode in mobile devices |
| 8 | + |
| 9 | +> [!IMPORTANT] |
| 10 | +> The following tutorial is targeted specifically for Quick View in Mobile for Viva Connections iOS and Android. |
| 11 | +
|
| 12 | +To adapt to the dark mode release in Viva Connections Mobile, which is scheduled for early Q4 of CY23, make sure that your card contents look compatible with both light and dark mode. |
| 13 | + |
| 14 | +An API ([context.hostContext.theme](/javascript/api/sp-adaptive-card-extension-base/ihostcontext)) will be available in SPFx 1.18.0 package to get the information about the theme of the mobile app. This helps with using associated assets like images compliant to the theme. If you want to use two different sets of data while keeping the existing view style, follow these steps: |
| 15 | + |
| 16 | +- Let’s create a basic card with an image in Quick View. Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/quickView/template/QuickViewTemplate.json**. |
| 17 | +- Replace the contents of this file with the following JSON: |
| 18 | + |
| 19 | + ```json |
| 20 | + { |
| 21 | + "type": "AdaptiveCard", |
| 22 | + "body": [ |
| 23 | + { |
| 24 | + "type": "TextBlock", |
| 25 | + "weight": "Bolder", |
| 26 | + "text": "${title}" |
| 27 | + }, |
| 28 | + { |
| 29 | + "type": "ColumnSet", |
| 30 | + "columns": [ |
| 31 | + { |
| 32 | + "type": "Column", |
| 33 | + "items": [ |
| 34 | + { |
| 35 | + "type": "Image", |
| 36 | + "url": "${imageUrl}" |
| 37 | + }, |
| 38 | + { |
| 39 | + "type": "TextBlock", |
| 40 | + "weight": "Bolder", |
| 41 | + "text": "${subTitle}", |
| 42 | + "wrap": true, |
| 43 | + "horizontalAlignment": "Center" |
| 44 | + } |
| 45 | + ], |
| 46 | + "width": "stretch" |
| 47 | + } |
| 48 | + ] |
| 49 | + } |
| 50 | + ], |
| 51 | + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", |
| 52 | + "version": "1.3" |
| 53 | + } |
| 54 | + ``` |
| 55 | + |
| 56 | +- Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts**. |
| 57 | +- Add a variable **imageUrl** to the existing interface **IQuickViewData** and add **imageUrl value** to **data()** function. |
| 58 | + |
| 59 | +```typescript |
| 60 | +import { ISPFxAdaptiveCard, BaseAdaptiveCardView } from '@microsoft/sp-adaptive-card-extension-base'; |
| 61 | +import { ITestCardDmAdaptiveCardExtensionProps, ITestCardDmAdaptiveCardExtensionState } from '../TestCardDmAdaptiveCardExtension'; |
| 62 | +import * as strings from 'TestCardDmAdaptiveCardExtensionStrings'; |
| 63 | + |
| 64 | +export interface IQuickViewData { |
| 65 | + subTitle: string; |
| 66 | + title: string; |
| 67 | + imageUrl: string; |
| 68 | +} |
| 69 | + |
| 70 | +export class QuickView extends BaseAdaptiveCardView< |
| 71 | + ITestCardDmAdaptiveCardExtensionProps, |
| 72 | + ITestCardDmAdaptiveCardExtensionState, |
| 73 | + IQuickViewData |
| 74 | +> { |
| 75 | + public get data(): IQuickViewData { |
| 76 | + return { |
| 77 | + subTitle: strings.SubTitle, |
| 78 | + title: strings.Title, |
| 79 | + imageUrl: require('../assets/LightModeImage.png') |
| 80 | + }; |
| 81 | + } |
| 82 | + |
| 83 | + public get template(): ISPFxAdaptiveCard { |
| 84 | + return require('./template/QuickViewTemplate.json'); |
| 85 | + } |
| 86 | +} |
| 87 | +``` |
| 88 | + |
| 89 | +- Quick View in mobile iOS looks like this: |
| 90 | + |
| 91 | +:::image type="content" source="../../../images/viva-design/img_quickview_tutorial_light.png" alt-text="Screenshot that shows how an image in quick view viewed on mobile appears in light mode."::: |
| 92 | + |
| 93 | +- When we switch to dark mode, the image conflicts with the background. |
| 94 | + |
| 95 | +:::image type="content" source="../../../images/viva-design/img_quickview_tutorial_dark.png" alt-text="Screenshot that shows how the same image in quick view viewed on mobile appears in dark mode."::: |
| 96 | + |
| 97 | +- To avoid this issue, we can assign different images for light and dark theme in **QuickView.ts**. Replace the existing code in the **data()** function with this snippet: |
| 98 | + |
| 99 | +```typescript |
| 100 | +public get data(): IQuickViewData { |
| 101 | + const isDarkTheme = (this.context.hostContext.theme === 'dark') ? true : false; |
| 102 | + return { |
| 103 | + subTitle: strings.SubTitle, |
| 104 | + title: strings.Title, |
| 105 | + imageUrl: isDarkTheme ? require('../assets/DarkModeImage.png') : require('../assets/LightModeImage.png') |
| 106 | + } |
| 107 | +} |
| 108 | +``` |
| 109 | + |
| 110 | +- Now when we switch to dark mode, on opening the same Quick View we see for light and dark theme respectively. |
| 111 | + |
| 112 | +:::image type="content" source="../../../images/viva-design/img_quickview_tutorial_light_and_dark.png" alt-text="Screenshot that shows how a card quick view viewed on mobile appears in light mode and dark mode with different images assigned."::: |
| 113 | + |
| 114 | +Similarly, we can customize our icons, images, and other elements of Quick View to support both light and dark theme. |
| 115 | + |
| 116 | +> [!NOTE] |
| 117 | +> Please note that the value for ‘this.context.hostContext.theme’ is undefined for web and Teams app as they do not support dark theme and is only available for Viva Connections Mobile iOS and Android. |
0 commit comments