1

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?

Jan Serafin
  • 91
  • 2
  • The current theme can be captured in the web page [source code](https://i.stack.imgur.com/XMAqt.png).`"id":"ms.vss-web.vsts-theme","name":"Light"` –  Apr 09 '20 at 10:02
  • As the extension is running in iframe this information will not be accessible from extension context. – Jan Serafin Apr 11 '20 at 14:01
  • @Jan Serafin Not get your latest information, is starian's workaround helpful for you? Or if you have any concern, feel free to share it here. – Hugh Lin Apr 20 '20 at 02:16
  • @HughLin-MSFT I was more intrested in getting information if there is easy way how to make FluentUI components load current theme same way as components from azure-devops-ui do. I found the css variables defining current scheme but with this approach I have to restyle every component used. – Jan Serafin Apr 20 '20 at 12:01

2 Answers2

1

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

https://dev.azure.com/{org}/_apis/Settings/Entries/globalme
starian chen-MSFT
  • 33,174
  • 2
  • 29
  • 53
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"}]}}
Allen.Cai
  • 501
  • 6
  • 7