在sourecode中，是否有可能像主题生成器那样基于主颜色创建一个完整的主题调色板？

Question

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

我希望能够将一个主题应用到我的Office织物应用程序中，它具有Office主题应该具有的所有不同颜色，而不必自己定义每个颜色。我想要定义的唯一东西是主主题颜色，正文颜色和身体背景颜色。这正是Office UI Fabric网站上的主题生成器所做的。

因此，重点是:在任何Office应用程序中是否可以使用主题生成器的功能？

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

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

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

那么，是否有一种简单的(正式的)方法来做到这一点，或者主题创建者的资源是否可以在某个地方获得？

Answer 1

因此，在对Office存储库中的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，因为我并没有努力去理解在那里发生的一切。