Возможно ли в sourecode создать полную палитру темы на основе основного цвета, как это делает строитель темы? - PullRequest
Новая
       10

Возможно ли в sourecode создать полную палитру темы на основе основного цвета, как это делает строитель темы?

0 голосов
/ 04 апреля 2019

Так как заголовок пытается ответить на каждую часть моего вопроса, что очень сложно, мне нужно немного прояснить:

Я хочу иметь возможность применять тему к моему приложению Fabric 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);

Увы, это был не тот случай. Применяются только указанные свойства.

Так есть ли простой (официальный) способ сделать это или источники создателя темы где-нибудь доступны?

1 Ответ

0 голосов
/ 08 апреля 2019

Итак, после некоторого исследования ColorPage.tsx из репозитория Office UI Fabric я обнаружил недостающие фрагменты, чтобы достичь этого самостоятельно. Приведенный ниже код просто очень прост в использовании этого механизма, который удовлетворяет моим потребностям. На данный момент я не хочу, чтобы пользователь изменял основной фон или цвета переднего плана, отсюда и упрощения. Используйте и расширяйте его на свой страх и риск, но не стесняйтесь спрашивать меня, если что-то не понятно. Но я думаю, довольно ясно, что здесь происходит. 

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 в официальном репо, поскольку я не стремился понять все, что там происходит.

...