时间戳

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

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

问题描述

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

我希望能够将主题应用到我的 Office UI Fabric 应用程序，其中包含 Office UI Fabric 主题应具有的所有不同颜色阴影，而无需自己定义每个阴影。我要定义的唯一内容是主主题颜色、正文文本颜色和正文背景颜色。这正是Office UI Fabric 网站上的主题生成器所做的。

所以直截了当地说：是否可以在任何 Office UI Fabric 应用程序中使用主题生成器的功能？

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

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

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

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

标签： office-ui-fabric

解决方案

因此，在对 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官方 repo 中的你自己，因为我没有努力理解那里发生的一切。

推荐阅读