在源代码中，是否有可能像主题构建器那样基于原色创建完整的主题调色板？

Question

由于标题试图解决我问题的每个部分，这非常困难，我需要澄清一下：

我希望能够将主题应用于我的 Office UI Fabric 应用程序具有 Office UI Fabric 主题应该具有的所有不同色调，而不必自己定义每个色调。我唯一想定义的是主要主题颜色、body 文本颜色和 body 背景颜色。这正是 theme generator on the Office UI Fabric website 所做的。

所以进入正题：是否可以在任何 Office UI Fabric 应用程序中使用主题生成器的功能？

我天真的方法是使用 createTheme，因为它接受部分主题，我希望得到一个完整的主题：

const theme = createTheme({
  palette: { themePrimary: '#007610' },
  semanticColors: { bodyBackground: '#ffffff', bodyText: '#000000' },
});
loadTheme(theme);

唉，事实并非如此。仅应用提供的属性。

那么有没有一种简单的（官方）方法可以做到这一点，或者主题创建者的来源是否可以在某处获得？

Answer 1

因此，在对来自 Office UI Fabric 存储库的 ColorPage.tsx 进行一些调查后，我发现了自己实现此目标的缺失部分。下面的代码只是该机制的一个非常简单的用法，足以满足我的需要。现在，我不希望用户更改主要背景或前景色，因此进行了简化。使用和扩展它需要您自担风险，但如果有任何不清楚的地方，请随时问我。但我想这里发生的事情很清楚。

import { loadTheme } from '@uifabric/styling';
import {
  IThemeRules,
  ThemeGenerator,
  themeRulesStandardCreator,
} from 'office-ui-fabric-react/lib/ThemeGenerator';
import { getColorFromString } from 'office-ui-fabric-react/lib/utilities/color/getColorFromString';
import { IColor } from 'office-ui-fabric-react/lib/utilities/color/interfaces';

export default class ThemeProvider {
  private themeRules: IThemeRules;

  constructor() {
    const themeRules = themeRulesStandardCreator();
    ThemeGenerator.insureSlots(this.themeRules, false);
    ThemeGenerator.setSlot(themeRules.backgroundColor, getColorFromString('#ffffff'), false, true, true);
    ThemeGenerator.setSlot(themeRules.foregroundColor, getColorFromString('#000000'), false, true, true);
    this.themeRules = themeRules;
  }

  public loadThemeForColor(hexColor: string): void {
    const newColor: IColor = getColorFromString(hexColor);

    const themeRules = this.themeRules;
    ThemeGenerator.setSlot(themeRules.primaryColor, newColor.str, false, true, true);
    this.themeRules = themeRules;
    const theme = ThemeGenerator.getThemeAsJson(this.themeRules);
    loadTheme({
      ...{ palette: theme },
      isInverted: false,
    });
  }
}

要了解更多信息，请查看官方回购中的 ColorPage.tsx 你自己，因为我没有努力了解那里发生的一切。

在源代码中，是否有可能像主题构建器那样基于原色创建完整的主题调色板？

Is it possible, in sourecode, to create a complete theme palette based on a primary color like the theme builder does?

office-ui-fabric