Question

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

我希望能够将主题与Office UI Fabric主题应具有的所有不同颜色阴影一起应用于我的Office UI Fabric应用程序，而不必自己定义每个阴影。我要定义的唯一内容是主主题颜色，正文文本颜色和正文背景颜色。 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);

A，不是这样。仅应用提供的属性。

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

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自己，因为我并没有努力了解其中的所有情况。

是否可以像主题构建器一样，以sourecode方式基于原色创建完整的主题调色板？

1 个答案: