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

Question

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?

Answer 1

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.

Answer 2

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",