Issue with Appearance Detection (dark, light, system) in Outlook Desktop (MacOS) Using Office Add-in API

Muhammad Umair 0 Reputation points
2024-12-27T09:32:52.9333333+00:00

Problem with Office.context.officeTheme Not Detecting Appearance Settings in Outlook Desktop (MacOS)

I am experiencing an issue with the Office.context.officeTheme API when trying to detect the theme (light or dark) in my Outlook add-in running on Outlook Desktop for MacOS. While the theme detection works perfectly in Outlook Online (Web), the same code does not appear to function as expected in the desktop app. Instead of detecting the Outlook Appearance settings, it seems to fall back to the system-level dark/light mode.

Here are the details of the issue:
Steps to Reproduce:

  1. Create an Office Add-in with the following setup:
  • Use Mailbox Requirement Set 1.14 to ensure support for the Office.context.officeTheme API.
    • Implement theme detection using the following code snippet:
             if (appState.isAppReady && Office.context.officeTheme) {
               const theme = Office.context.officeTheme;
           
               if (isDarkTheme(theme)) {
                 setDarkMode(true);
               } else {
                 setDarkMode(false);
               }
             }
      
      Add fallback detection using window.matchMedia("(prefers-color-scheme: dark)").matches. Test the add-in on the following platforms:
      - **Outlook Online**: The theme detection works perfectly and adapts to the Appearance settings (Light/Dark).
      
         - **Outlook Desktop (MacOS)**:
      
               - Appearance is set to **Dark Mode** in Outlook preferences.
      
                     - The add-in still detects the theme as **Light** (or falls back to system-level detection, which may not align with the Outlook-specific Appearance setting).
      

Manifest File:

Here is a relevant snippet from the manifest file:

xml
Copy code
<Requirements>

Expected Behavior:

The Office.context.officeTheme API should detect the Appearance settings (Light/Dark mode) configured in Outlook's preferences (not just system-level preferences) and return the corresponding bodyBackgroundColor or other properties.


Actual Behavior:

On Outlook Desktop (MacOS):

  • The Office.context.officeTheme.bodyBackgroundColor value is not consistent with the selected Appearance in Outlook settings.
    • It defaults to the system's dark/light mode instead.
    On Outlook Online:
    - The API works as expected, correctly detecting the Appearance settings.
    

Environment:

  • Outlook Version: Desktop (MacOS), Latest Build
  • Requirement Set: Mailbox 1.14
  • Operating System: MacOS Ventura (Version: X.X.X)
  • Add-in Type: Taskpane
  • Theme API Used: Office.context.officeTheme

Troubleshooting Steps Taken:

  1. Verified that the manifest supports Mailbox 1.14 and Office.Theme.
  2. Tested in Outlook Online, which works correctly.
  3. Used Safari Web Inspector to debug the add-in but could not identify issues.
  4. Implemented a fallback using window.matchMedia, but it only detects system-level preferences, not the Outlook-specific Appearance.
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
1,020 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.