Detect theme setting in Bot Framework, ie Dark, High Contrast, Default

When building a Teams extension with the Microsofts Bot Framework SDK, does anyone know how to detect a user's theme setting to produce visually appealing adaptive card layouts?

I am finding that some images will look good when in light mode / default, but look bad in dark mode.

To resolve this, I'd like to set images in the adaptive cards conditionally. However, to do that I'd need the current theme info.

I've searched context and activity and cannot find a way.

I'm hoping to do something like this in the adaptive card (note the if statement)


{
    "items": [
        {
            "type": "Image",
            "url": "${if(theme == 'dark', images.whiteCat, images.blackCat)}",
            "size": "Small"
        }
    ]
}

Using the teams-js api, I do see that it is possible to get the current theme from the context object, but I cannot find a way to do this within the botbuilder-js library (on the server). It seems strange because botbuilder emits information about the device and language in the TeamsActivityHandler, but I cannot find anything about the theme.

Is it possible to detect a teams theme using botbuilder (at the latest version)?

I'd appreciate it greatly if anyone can offer tips or suggestions for placing images in adaptive cards, given that Teams offers three different theme settings (default, dark and high contrast).

Solution

I don't think there's anything in the payload that shows the theme, but actually I'd recommend -against- doing this anyway. In a tab, this work's because you get an initial theme (on the context object) as well as the ability to subscribe to a theme change event. That means you're always able to respond to the relevant current theme. With bots, it's different because once you've sent a message, it basically stays permanently in the chat history. If the user changes their theme later on, that same message will be there, and might not fit that theme any more. (technically it's possible to update or delete a previous message, but that's not really practical for -all- messages ever sent, and you wouldn't not if the theme changes anyway as there's no event sent to the bot for this). As a result, you'd need to send messages that work in both themes.

Perhaps using light transparency could work, depending on the image.