added new dark mode api documentation changes (SharePoint#9257)

* added new dark mode api documentation changes

* added changes to make it more readable

* removed unnecessary code to make it more readable

* added the note

* changed the version of the mentioned spfx package

* updated the link for API

---------

Co-authored-by: Altaf Khan <[email protected]>

Author: Altafk960

docs/spfx/viva/design/designing-quick-view.md

@@ -93,7 +93,7 @@ Currently dark themes are not supported for quick views on iOS and Android mobil
 
 :::image type="content" source="../../../images/viva-design/img_quickview_ios_theme.jpg" alt-text="Screenshot that shows how a card viewed on mobile appears in light mode and dark mode.":::
 
-We plan to introduce dark theme support in Quick View in Viva Connections Mobile for both iOS and Android in early Q4 of CY23. The API ([context.hostContext.theme](/javascript/api/sp-adaptive-card-extension-base/ihostcontext)) to get the theme in which Quick View is rendered of the Quick View will be available in SPFx 1.18.0 package.
+We plan to introduce dark theme support in Quick View in Viva Connections Mobile for both iOS and Android in early Q4 of CY23. ([context.sdks.microsoftTeams.teamsJs.app.getContext()](/javascript/api/sp-adaptive-card-extension-base/ipartialsdks?view=sp-typescript-latest)) to get the theme in which Quick View is rendered of the Quick View will be available in SPFx 1.18.1 package.
 
 :::image type="content" source="../../../images/viva-design/img_quickview_new_ios_theme.png" alt-text="Screenshot that shows how a card quickview viewed on mobile will appear in light mode and dark mode.":::
 

docs/spfx/viva/get-started/making-quickview-compatable-darkmode-mobile.md

@@ -11,7 +11,7 @@ ms.localizationpriority: high
 
 To adapt to the dark mode release in Viva Connections Mobile, which is scheduled for early Q4 of Calender Year 23, make sure that your card contents look compatible with both light and dark mode.
 
-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:
+An API ([context.sdks.microsoftTeams.teamsJs.app.getContext()](/javascript/api/sp-adaptive-card-extension-base/ipartialsdks?view=sp-typescript-latest)) will be available in SPFx 1.18.1 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:
 
 - 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**. 
 - Replace the contents of this file with the following JSON:
@@ -53,7 +53,47 @@ An API ([context.hostContext.theme](/javascript/api/sp-adaptive-card-extension-b
     }
     ```
 
-- Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts**.
+- Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/helloWorldAdaptiveCardExtension.ts**.
+- Add a new state variable **theme** to the existing interface **IHelloWorldAdaptiveCardExtensionState**.Since the theme  API returns a promise, we need to use a state variable to determine the current theme.
+
+```typescript
+export interface IHelloWorldAdaptiveCardExtensionState {
+  theme: string;
+}
+```
+
+- For making the theme available to the card we are using API in the **onInit()** function.
+
+```typescript
+
+export default class helloWorldAdaptiveCardExtension extends BaseAdaptiveCardExtension<
+  IHelloWorldAdaptiveCardExtensionProps,
+  IHelloWorldAdaptiveCardExtensionState
+> {
+  // ...
+
+  public onInit(): Promise<void> {
+    this.state = {
+      theme: "light"
+    }
+    
+  this.context.sdks?.microsoftTeams?.teamsJs.app.getContext().then((context) => {
+    this.setState({
+      theme: context.app.appInfo.theme
+    });
+  });
+
+    // registers the card view to be shown in a dashboard
+  this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
+    // registers the quick view to open via QuickView action
+  this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
+
+  return Promise.resolve();
+  }
+  // ...
+}
+```
+
 - Add a variable **imageUrl** to the existing interface **IQuickViewData** and add **imageUrl value** to **data()** function.
 
 ```typescript
@@ -98,7 +138,8 @@ export class QuickView extends BaseAdaptiveCardView<
 
 ```typescript
 public get data(): IQuickViewData {
-    const isDarkTheme = (this.context.hostContext.theme === 'dark') ? true : false;
+  // only two options are available for theme: 'dark' and 'default' 
+    const isDarkTheme = this.state.theme === 'dark' ? true : false;
     return {
       subTitle: strings.SubTitle,
       title: strings.Title,
@@ -114,4 +155,4 @@ public get data(): IQuickViewData {
 Similarly, we can customize our icons, images, and other elements of Quick View to support both light and dark theme.
 
 > [!NOTE]
-> 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.
+> Please note that the value for ‘this.context.sdks.microsoftTeams.teamsJs.app.getContext()’ 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.