Azure DevOps 扩展 - 用户主题和 FluentUI 组件答案

【问题标题】：Azure DevOps Extension - user theme and FluentUI componentsAzure DevOps 扩展 - 用户主题和 FluentUI 组件
【发布时间】：2020-04-07 08:31:48
【问题描述】：

我正在开发 Azure DevOps 扩展，主要使用来自 azure-devops-ui（论坛设计系统）的组件，该组件自动从用户设置中获取主题。我还使用了来自 FluentUI（以前的 office-ui-fabric-react）的一些组件，但我也在努力让它们也使用主题。例如。当切换到深色主题时，FluenUI 组件保持白色。

有人做过吗？

我必须手动指定所有样式吗？但是如何获取当前用户正在使用的 DevOps 主题的信息呢？

【问题讨论】：

当前主题可在网页source code."id":"ms.vss-web.vsts-theme","name":"Light"中抓取
由于扩展程序在 iframe 中运行，因此无法从扩展程序上下文访问此信息。
@Jan Serafin 没有获得您的最新信息，starian 的解决方法对您有帮助吗？或者，如果您有任何疑虑，请随时在此处分享。
@HughLin-MSFT 如果有简单的方法可以让 FluentUI 组件以与 azure-devops-ui 中的组件相同的方式加载当前主题，我更感兴趣的是获取信息。我找到了定义当前方案的 css 变量，但是通过这种方法，我必须重新设置使用的每个组件的样式。

标签： azure-devops-extensions office-ui-fabric-react

【解决方案1】：

调用这个api并获取WebPlatform/Theme的值：

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

【讨论】：

【解决方案2】：

//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

//响应正文：

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

【讨论】：