Share via

How to apply dark mode on dialogs for outlook addin on the web

Marcel Suzuki 0 Reputation points
2024-05-13T12:20:39.2966667+00:00

Hello,

I am developing an Outlook add-in on the web with a taskpane and modal dialogs.

In dark mode, we are trying to display the taskpane and dialogs in dark colors, but on the dialogs(in iframe), content has dark colors with custom css and html of the add-in, but the borders have white frames (border), which is out of our hands.

Isn't it supposed to show the dialog frames in dark color in dark mode for outlook?

Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
3,599 questions
Outlook Management
Outlook Management
Outlook: A family of Microsoft email and calendar products.Management: The act or process of organizing, handling, directing or controlling something.
4,959 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Marcel Suzuki 0 Reputation points
    2024-05-20T07:34:23.72+00:00

    User's image

    Yes, this is the screenshot of the dialog. As you can see, the content inside it, is in dark mode, and the browser and outlook also are in dark colors, but not the dialog borders. Thanks.

    0 comments
  2. Rick Kirkham 261 Reputation points Microsoft Employee
    2024-05-20T16:54:40.8+00:00

    I had a similar problem with the task pane. I worked around it by setting the margins of the background to a negative number. In my case, -8. Try something like that. 

    minHeight: "100vh",

minWidth: "100vw",

// The next five lines are to counteract the fact that Office adds

// a margin of 8 px just inside the margins of the task pane.

// This area is always white, even when the Office theme is dark.

// It looks bad. So we have to add a background color and

// extend the add-in page's margins out to cover the area

// with negative margin values.

backgroundColor: tokens.colorNeutralStrokeOnBrand,

marginTop: "-8px",

marginLeft: "-8px",

marginBottom: "-8px",

marginRight: "-8px",