Azure DevOps Extension - user theme and FluentUI components

Question

I am developing Extension for Azure DevOps mostly using components from azure-devops-ui (Forumula Design system) which automatically takes theme from user settings. I also use some compoenents from FluentUI (former office-ui-fabric-react) but I am struggling with making them use the theme as well. Eg. when switched to dark theme, FluenUI components remains white.

Did anyone make this work?

Do I have to specify all the styling manually? But how to then obtain information about current DevOps theme user is using?

Answer 1

//vss-extension.json

"scopes": [ "vso.settings" ]

//vss-web-extension-sdk

import * as SettingsServices from "VSS/Settings/Services";
var entries = service.getEntriesAsync("WebPlatform", SettingsServices.SettingsUserScope.Me); //https://dev.azure.com/{org}/_apis/Settings/Entries/me/WebPlatform

//response body:

{"count":2,"value":{"Theme":"ms.vss-web.vsts-theme-dark","Navigation/ProjectMRU":[{"projectId":"4ba0eb7f-64c0-4612-ad43-23055e664faa"},{"projectId":"a7037c27-f23a-4c14-9497-633b7e611bbb"}]}}

Answer 2

Calling this api and get the value of WebPlatform/Theme:

https://dev.azure.com/{org}/_apis/Settings/Entries/globalme