Fixed Theming in Outlook/Office.com

samples/react-fluentui-9/config/package-solution.json

@@ -36,6 +36,12 @@
         "id": "233521d9-d6d8-41ed-a43d-d30bb942c370",
         "version": "1.0.1.0"
       }
+    ],
+    "webApiPermissionRequests": [
+      {
+        "resource": "Microsoft Graph",
+        "scope": "User.Read.All"
+      }
     ]
   },
   "paths": {

samples/react-fluentui-9/src/webparts/fluentUi9Demo/FluentUi9DemoWebPart.ts

@@ -39,7 +39,8 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
         isDarkTheme: this._isDarkTheme,
         hasTeamsContext: !!this.context.sdks.microsoftTeams,
         userDisplayName: this.context.pageContext.user.displayName,
-        context: this.context
+        context: this.context,
+        appMode: this._appMode
       }
     );
 
@@ -49,7 +50,9 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
       {
         theme: this._appMode === AppMode.Teams || this._appMode === AppMode.TeamsLocal ?
           this._isDarkTheme ? teamsDarkTheme : teamsLightTheme :
-          this._isDarkTheme ? webDarkTheme : this._theme
+          this._appMode === AppMode.SharePoint || this._appMode === AppMode.SharePointLocal ?
+            this._isDarkTheme ? webDarkTheme : this._theme :
+            this._isDarkTheme ? webDarkTheme : webLightTheme
       },
       element
     );
@@ -60,7 +63,6 @@ export default class FluentUi9DemoWebPart extends BaseClientSideWebPart<{}> {
   protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
     if (!currentTheme) return;
     this._isDarkTheme = !!currentTheme.isInverted;
-
     //if the app mode is sharepoint, adjust the fluent ui 9 web light theme to use the sharepoint theme color, teams/dark mode should be fine on default
     if (this._appMode === AppMode.SharePoint || this._appMode === AppMode.SharePointLocal) {
       this._theme = createv9Theme(currentTheme, webLightTheme);

samples/react-fluentui-9/src/webparts/fluentUi9Demo/components/FluentUi9Demo.tsx

@@ -7,16 +7,31 @@ import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui
 import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
 import { ArrowReplyRegular, ShareRegular, DocumentText24Regular } from '@fluentui/react-icons';
 import { ResponseType } from "@microsoft/microsoft-graph-clientv1";
+import { AppMode } from '../FluentUi9DemoWebPart';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default function FluentUi9Demo(props: IFluentUi9DemoProps): React.ReactElement<IFluentUi9DemoProps> {
-  const { isDarkTheme, hasTeamsContext, userDisplayName } = props;
+  const { isDarkTheme, hasTeamsContext, userDisplayName, appMode } = props;
   const [tab, setTab] = React.useState<string | unknown>("buttons");
   const [me, setMe] = React.useState<string | undefined>();
   const outlineId = useId('input-outline');
   const underlineId = useId('input-underline');
 
+  const am = (): string => {
+    switch (appMode) {
+      case AppMode.Office: return "Office";
+      case AppMode.OfficeLocal: return "Office Local";
+      case AppMode.Outlook: return "Outlook";
+      case AppMode.OutlookLocal: return "Outlook Local";
+      case AppMode.SharePoint: return "SharePoint";
+      case AppMode.SharePointLocal: return "SharePoint Local";
+      case AppMode.Teams: return "Teams";
+      case AppMode.TeamsLocal: return "Teams Local";
+    }
+    return "unknown";
+  }
+
   React.useEffect(() => {
     props.context.msGraphClientFactory.getClient("3").then(async (client) => {
       await client
@@ -38,6 +53,7 @@ export default function FluentUi9Demo(props: IFluentUi9DemoProps): React.ReactEl
       <div className={styles.welcome}>
         <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
         <h2>Well done, {escape(userDisplayName)}!</h2>
+        <div>This app is running in {am()}</div>
       </div>
       <div>
         <h3>Welcome to SharePoint Framework!</h3>

samples/react-fluentui-9/src/webparts/fluentUi9Demo/components/IFluentUi9DemoProps.ts

@@ -1,8 +1,10 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { AppMode } from "../FluentUi9DemoWebPart";
 
 export interface IFluentUi9DemoProps {
   isDarkTheme: boolean;
   hasTeamsContext: boolean;
   userDisplayName: string;
   context: WebPartContext;
+  appMode: AppMode
 }