• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript Styling.createTheme函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中office-ui-fabric-react/lib/Styling.createTheme函数的典型用法代码示例。如果您正苦于以下问题:TypeScript createTheme函数的具体用法?TypeScript createTheme怎么用?TypeScript createTheme使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了createTheme函数的9个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: getVariant

export function getVariant(theme: IPartialTheme, variant: VariantThemeType): ITheme {
  switch (variant) {
    case VariantThemeType.Neutral:
      return getNeutralVariant(theme);
    case VariantThemeType.Soft:
      return getSoftVariant(theme);
    case VariantThemeType.Strong:
      return getStrongVariant(theme);
    default:
      return createTheme(theme);
  }
}
开发者ID:OfficeDev,项目名称:office-ui-fabric-react,代码行数:12,代码来源:variants.ts


示例2: getSoftVariant

export function getSoftVariant(theme: IPartialTheme): ITheme {
  const fullTheme = createTheme(theme);
  const p = fullTheme.palette;

  // commented lines are unchanged, but left in for tracking purposes
  // in a soft variant, most colors remain unchanged
  const partialPalette: Partial<IPalette> = {
    // theme - shifts a shade stronger to account for contrast against stronger background
    // themeDarker: '#004578', // can't go darker, stays the same
    themeDark: p.themeDarker,
    themeDarkAlt: p.themeDark,
    themePrimary: p.themeDarkAlt,
    themeSecondary: p.themePrimary,
    themeTertiary: p.themeSecondary,
    themeLight: p.themeTertiary,
    themeLighter: p.themeLight,
    themeLighterAlt: p.themeLighter,

    // foregrounds
    // black: '#000000',
    // neutralDark: '#212121',
    // neutralPrimary: '#333333',
    // neutralPrimaryAlt: '#3c3c3c',
    // neutralSecondary: '#666666',
    // neutralTertiary: '#a6a6a6',

    // backgrounds - page background starts at themeLighterAlt or themeLight, depending on inverted theme or not,
    // then gets steps stronger from there
    neutralTertiaryAlt: !fullTheme.isInverted ? p.themeDarkAlt : p.themeDarker,
    neutralQuaternary: !fullTheme.isInverted ? p.themePrimary : p.themeDark,
    neutralQuaternaryAlt: !fullTheme.isInverted ? p.themeSecondary : p.themeDarkAlt,
    neutralLight: !fullTheme.isInverted ? p.themeTertiary : p.themePrimary,
    neutralLighter: !fullTheme.isInverted ? p.themeLight : p.themeSecondary,
    neutralLighterAlt: !fullTheme.isInverted ? p.themeLighter : p.themeTertiary,
    white: !fullTheme.isInverted ? p.themeLighterAlt : p.themeLight
  };

  const partialSemantic: Partial<ISemanticColors> = {
    bodyBackground: !fullTheme.isInverted ? p.themeLighterAlt : p.themeLight,
    bodyFrameBackground: p.themeLighter, // this will always be the darker shade as compared to bodyBackground

    inputBorder: p.themeLighter,
    // inputBorderHovered: p.neutralPrimary,
    inputBackground: p.themeLighter,
    // inputBackgroundChecked: p.themePrimary,
    // inputBackgroundCheckedHovered: p.themeDarkAlt,
    inputForegroundChecked: p.themeLighter
    // inputFocusBorderAlt: p.themePrimary,
  };

  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
}
开发者ID:mikewheaton,项目名称:office-ui-fabric-react,代码行数:52,代码来源:variants.ts


示例3: makeThemeFromPartials

function makeThemeFromPartials(
  originalTheme: IPartialTheme,
  partialPalette: Partial<IPalette>,
  partialSemantic: Partial<ISemanticColors>
): ITheme {
  return createTheme({
    ...originalTheme,
    ...{
      palette: { ...originalTheme.palette, ...partialPalette },
      semanticColors: { ...originalTheme.semanticColors, ...partialSemantic }
    }
  });
}
开发者ID:mikewheaton,项目名称:office-ui-fabric-react,代码行数:13,代码来源:variants.ts


示例4: makeThemeFromPartials

function makeThemeFromPartials(
  originalTheme: ITheme,
  partialPalette: Partial<IPalette>,
  partialSemantic: Partial<ISemanticColors>
): ITheme {
  // Create variant palette
  let variantTheme = createTheme({ palette: { ...originalTheme.palette, ...partialPalette } });
  // Change semantic colors to use updated variant palette values
  variantTheme.semanticColors = { ...variantTheme.semanticColors, ...partialSemantic };
  // Fill in the rest of the theme
  variantTheme = { ...originalTheme, palette: variantTheme.palette, semanticColors: variantTheme.semanticColors };
  return variantTheme;
}
开发者ID:OfficeDev,项目名称:office-ui-fabric-react,代码行数:13,代码来源:variants.ts


示例5: getNeutralVariant

export function getNeutralVariant(theme: IPartialTheme): ITheme {
  const fullTheme = createTheme(theme);
  const p = fullTheme.palette;

  // commented lines are unchanged, but left in for tracking purposes
  // in a neutral variant, most colors remain unchanged
  const partialPalette: Partial<IPalette> = {
    // theme - shifts a shade stronger to account for contrast against stronger background
    // themeDarker: '#004578', // can't go darker, stays the same
    themeDark: p.themeDarker,
    themeDarkAlt: p.themeDark,
    themePrimary: p.themeDarkAlt,
    themeSecondary: p.themePrimary,
    themeTertiary: p.themeSecondary,
    themeLight: p.themeTertiary,
    themeLighter: p.themeLight,
    themeLighterAlt: p.themeLighterAlt,

    // foregrounds
    // black: '#000000',
    // neutralDark: '#212121',
    // neutralPrimary: '#333333',
    // neutralPrimaryAlt: '#3c3c3c',
    // neutralSecondary: '#666666',
    // neutralTertiary: '#a6a6a6',

    // backgrounds - background is still the same scale, just squish it a bit
    // neutralTertiaryAlt: '#c8c8c8',
    neutralQuaternary: p.neutralTertiaryAlt,
    neutralQuaternaryAlt: p.neutralQuaternary,
    neutralLight: p.neutralQuaternaryAlt,
    neutralLighter: p.neutralLight,
    neutralLighterAlt: p.neutralLight,
    white: p.neutralLighter
  };

  const partialSemantic: Partial<ISemanticColors> = {
    bodyBackground: p.neutralLighter,
    bodyFrameBackground: !fullTheme.isInverted ? p.neutralLight : p.neutralLighterAlt
  };

  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
}
开发者ID:mikewheaton,项目名称:office-ui-fabric-react,代码行数:43,代码来源:variants.ts


示例6: getStrongVariant

export function getStrongVariant(theme: IPartialTheme): ITheme {
  const fullTheme = createTheme(theme);
  const p = fullTheme.palette;

  // dirty algorithm:
  // in a tricolor theme, foreground doesn't get used?
  // theme colors -> background shades
  // foregrounds -> background shades
  // backgrounds -> theme colors
  const partialPalette: Partial<IPalette> = {
    // theme
    themeDarker: p.white,
    themeDark: p.neutralLighterAlt,
    themeDarkAlt: p.neutralLighterAlt,
    themePrimary: p.white,
    themeSecondary: p.neutralLighter,
    themeTertiary: p.neutralLight,
    themeLight: p.neutralQuaternaryAlt,
    themeLighter: p.neutralQuaternary,
    themeLighterAlt: p.neutralTertiaryAlt,

    // foregrounds
    black: p.neutralLighterAlt,
    neutralDark: p.neutralLighter,
    neutralPrimary: p.white,
    neutralPrimaryAlt: p.neutralLight,
    neutralSecondary: p.neutralQuaternaryAlt,
    neutralTertiary: p.neutralQuaternary,

    // backgrounds
    neutralTertiaryAlt: p.themeLighterAlt,
    neutralQuaternary: p.themeLighterAlt, // something needs to overlap here since we're out of slots
    neutralQuaternaryAlt: p.themeLighter,
    neutralLight: p.themeLight,
    neutralLighter: p.themeTertiary,
    neutralLighterAlt: p.themeSecondary,
    white: p.themePrimary
  };

  const partialSemantic: Partial<ISemanticColors> = {
    bodyBackground: p.themePrimary,
    bodyFrameBackground: !fullTheme.isInverted ? p.themeDarkAlt : p.themeSecondary,

    bodyText: p.white,
    bodySubtext: p.white,

    inputBorder: p.themeDark,
    // inputBorderHovered: p.neutralPrimary,
    inputBackground: p.themeDark,
    inputBackgroundChecked: p.white,
    // inputBackgroundCheckedHovered: p.themePrimary,
    inputForegroundChecked: p.themeDark
    // inputFocusBorderAlt: p.themePrimary,
  };

  // Strong variant is unique here, we've redefined the entire palette and are
  // effectively inverting the theme. Thus, do not mix in the original theme's value
  // for the palette and semanticColors, since they will not work well "inverted",
  // instead, use the new palette and then generate semanticColors from scratch.
  return createTheme({
    ...theme,
    ...{
      palette: partialPalette,
      semanticColors: partialSemantic,
      isInverted: !theme.isInverted
    }
  });
}
开发者ID:mikewheaton,项目名称:office-ui-fabric-react,代码行数:68,代码来源:variants.ts


示例7: getNeutralVariant

export function getNeutralVariant(theme: IPartialTheme): ITheme {
  const fullTheme = createTheme(theme);
  const p = fullTheme.palette;

  // commented lines are unchanged, but left in for tracking purposes
  // in a neutral variant, most colors remain unchanged
  const partialPalette: Partial<IPalette> = {
    // theme - shifts a shade stronger to account for contrast against stronger background
    // themeDarker: '#004578', // can't go darker, stays the same
    themeDark: p.themeDarker,
    themeDarkAlt: p.themeDark,
    themePrimary: p.themeDarkAlt,
    themeSecondary: p.themePrimary,
    themeTertiary: p.themeSecondary,
    themeLight: p.themeTertiary,
    themeLighter: p.themeLight,
    themeLighterAlt: p.themeLighterAlt,

    // foregrounds
    // black: '#000000',
    // neutralDark: '#212121',
    // neutralPrimary: '#333333',
    // neutralPrimaryAlt: '#3c3c3c',
    // neutralSecondary: '#666666',
    // neutralTertiary: '#a6a6a6',

    // backgrounds - background is still the same scale, just squish it a bit
    // neutralTertiaryAlt: '#c8c8c8',
    neutralQuaternary: p.neutralTertiaryAlt,
    neutralQuaternaryAlt: p.neutralQuaternary,
    neutralLight: p.neutralQuaternaryAlt,
    neutralLighter: p.neutralLight,
    neutralLighterAlt: p.neutralLight,
    white: p.neutralLighter
  };

  const partialSemantic: Partial<ISemanticColors> = {
    bodyBackground: p.neutralLighter,
    bodyStandoutBackground: p.neutralLight,
    bodyFrameBackground: !fullTheme.isInverted ? p.neutralLight : p.neutralLighter,
    bodyFrameDivider: !fullTheme.isInverted ? p.neutralLight : p.neutralQuaternaryAlt,
    bodyText: p.neutralPrimary,
    bodySubtext: p.neutralSecondary,
    bodyDivider: p.neutralQuaternaryAlt,
    focusBorder: p.neutralSecondary,
    variantBorder: p.neutralLight,
    variantBorderHovered: p.neutralTertiary,
    defaultStateBackground: p.neutralLight,

    actionLink: p.neutralPrimary,
    actionLinkHovered: p.neutralDark,
    link: p.themeDarkAlt,
    linkHovered: p.themeDarker,
    disabledBackground: !fullTheme.isInverted ? p.neutralLight : p.neutralLighter,
    disabledText: p.neutralTertiary,
    disabledBodyText: p.neutralTertiary,
    disabledBodySubtext: p.neutralTertiaryAlt,

    inputBorder: p.neutralTertiary,
    inputBorderHovered: p.neutralPrimary,
    inputBackground: p.white,
    inputFocusBorderAlt: p.themePrimary,
    inputText: p.neutralPrimary,
    inputTextHovered: p.neutralDark,
    inputPlaceholderText: p.neutralSecondary,

    buttonBackground: p.neutralQuaternaryAlt,
    buttonBackgroundHovered: p.neutralQuaternary,
    buttonBackgroundPressed: !fullTheme.isInverted ? p.neutralTertiary : p.neutralTertiaryAlt,
    buttonBackgroundDisabled: p.neutralLight,
    buttonBorder: 'transparent',
    buttonText: p.neutralPrimary,
    buttonTextHovered: p.neutralDark,
    buttonTextPressed: p.neutralDark,
    buttonTextDisabled: !fullTheme.isInverted ? p.neutralTertiary : p.neutralTertiaryAlt,
    buttonBorderDisabled: 'transparent',
    primaryButtonBackground: p.themePrimary,
    primaryButtonBackgroundHovered: p.themeDarkAlt,
    primaryButtonBackgroundPressed: p.themeDark,
    primaryButtonBorder: 'transparent',
    primaryButtonText: p.white,
    primaryButtonTextHovered: p.white,
    primaryButtonTextPressed: p.white,
    accentButtonBackground: p.accent,
    accentButtonText: p.white,

    menuBackground: p.white,
    menuDivider: p.neutralTertiaryAlt,
    menuItemBackgroundHovered: p.neutralLighter,
    menuItemBackgroundPressed: p.neutralLight,
    menuItemText: p.neutralPrimary,
    menuItemTextHovered: !fullTheme.isInverted ? p.neutralDark : p.neutralPrimary
  };

  return makeThemeFromPartials(fullTheme, partialPalette, partialSemantic);
}
开发者ID:OfficeDev,项目名称:office-ui-fabric-react,代码行数:96,代码来源:variants.ts


示例8: getStrongVariant

export function getStrongVariant(theme: IPartialTheme): ITheme {
  const fullTheme = createTheme(theme);
  const p = fullTheme.palette;

  // dirty algorithm:
  // in a tricolor theme, foreground doesn't get used?
  // theme colors -> background shades
  // foregrounds -> background shades
  // backgrounds -> theme colors
  const partialPalette: Partial<IPalette> = {
    // theme
    themeDarker: p.white,
    themeDark: p.neutralLighterAlt,
    themeDarkAlt: p.neutralLighterAlt,
    themePrimary: p.white,
    themeSecondary: p.neutralLighter,
    themeTertiary: p.neutralLight,
    themeLight: p.neutralQuaternaryAlt,
    themeLighter: p.neutralQuaternary,
    themeLighterAlt: p.neutralTertiaryAlt,

    // foregrounds
    black: p.neutralLighterAlt,
    neutralDark: p.neutralLighter,
    neutralPrimary: p.white,
    neutralPrimaryAlt: p.neutralLight,
    neutralSecondary: p.neutralQuaternaryAlt,
    neutralTertiary: p.neutralQuaternary,

    // backgrounds
    neutralTertiaryAlt: p.themeLighterAlt,
    neutralQuaternary: p.themeLighterAlt, // something needs to overlap here since we're out of slots
    neutralQuaternaryAlt: p.themeLighter,
    neutralLight: p.themeLight,
    neutralLighter: p.themeTertiary,
    neutralLighterAlt: p.themeSecondary,
    white: p.themePrimary
  };

  const partialSemantic: Partial<ISemanticColors> = {
    bodyBackground: p.themePrimary,
    bodyStandoutBackground: p.themeDarkAlt,
    bodyFrameBackground: !fullTheme.isInverted ? p.themeDarkAlt : p.themePrimary,
    bodyFrameDivider: !fullTheme.isInverted ? p.themeDarkAlt : p.themeTertiary,
    bodyText: p.white,
    bodySubtext: p.white,
    bodyDivider: p.themeTertiary,
    inputBorder: p.themeDarkAlt,
    inputBorderHovered: p.themeDarker,
    inputBackground: p.white,
    inputBackgroundChecked: p.white,
    inputBackgroundCheckedHovered: p.themePrimary,
    inputForegroundChecked: p.themeDark,
    inputFocusBorderAlt: p.themeTertiary,
    inputText: p.neutralPrimary,
    inputTextHovered: p.neutralDark,
    inputPlaceholderText: p.neutralSecondary,
    focusBorder: p.white,
    variantBorder: p.themeDarkAlt,
    variantBorderHovered: p.themeDarker,
    defaultStateBackground: p.neutralLighterAlt,

    actionLink: p.white,
    actionLinkHovered: p.white,
    link: p.white,
    linkHovered: p.white,
    disabledBackground: p.themeDarkAlt,
    disabledText: p.themeTertiary,
    disabledBodyText: p.neutralQuaternary,
    disabledBodySubtext: p.neutralTertiaryAlt,

    buttonBackground: p.themePrimary,
    buttonBackgroundHovered: p.themeDarkAlt,
    buttonBackgroundPressed: p.themeDark,
    buttonBackgroundDisabled: !fullTheme.isInverted ? p.themeLighter : p.themeLight,
    buttonBorder: p.white,
    buttonText: p.white,
    buttonTextHovered: p.white,
    buttonTextPressed: p.white,
    buttonTextDisabled: p.themeTertiary,
    buttonBorderDisabled: 'transparent',
    primaryButtonBackground: p.white,
    primaryButtonBackgroundHovered: !fullTheme.isInverted ? p.themeLighter : p.themeLight,
    primaryButtonBackgroundPressed: !fullTheme.isInverted ? p.themeLight : p.themeTertiary,
    primaryButtonBorder: 'transparent',
    primaryButtonText: !fullTheme.isInverted ? p.themePrimary : p.neutralPrimary,
    primaryButtonTextHovered: !fullTheme.isInverted ? p.themeDark : p.neutralDark,
    primaryButtonTextPressed: !fullTheme.isInverted ? p.themeDark : p.neutralDark,
    accentButtonBackground: p.white,
    accentButtonText: !fullTheme.isInverted ? p.themePrimary : p.neutralPrimary,

    menuBackground: p.white,
    menuDivider: p.neutralTertiaryAlt,
    menuItemBackgroundHovered: p.neutralLighter,
    menuItemBackgroundPressed: p.neutralLight,
    menuItemText: p.neutralPrimary,
    menuItemTextHovered: !fullTheme.isInverted ? p.neutralDark : p.neutralPrimary
  };

  // Strong variant is unique here, we've redefined the entire palette and are
//.........这里部分代码省略.........
开发者ID:OfficeDev,项目名称:office-ui-fabric-react,代码行数:101,代码来源:variants.ts


示例9: getSoftVariant

export function getSoftVariant(theme: IPartialTheme): ITheme {
  const fullTheme = createTheme(theme);
  const p = fullTheme.palette;

  // commented lines are unchanged, but left in for tracking purposes
  // in a soft variant, most colors remain unchanged
  const partialPalette: Partial<IPalette> = {
    // theme - shifts a shade stronger to account for contrast against stronger background
    // themeDarker: '#004578', // can't go darker, stays the same
    themeDark: p.themeDarker,
    themeDarkAlt: p.themeDark,
    themePrimary: p.themeDarkAlt,
    themeSecondary: p.themePrimary,
    themeTertiary: p.themeSecondary,
    themeLight: p.themeTertiary,
    themeLighter: p.themeLight,
    themeLighterAlt: p.themeLighter,

    // foregrounds
    // black: '#000000',
    // neutralDark: '#212121',
    // neutralPrimary: '#333333',
    // neutralPrimaryAlt: '#3c3c3c',
    // neutralSecondary: '#666666',
    // neutralTertiary: '#a6a6a6',

    // backgrounds - page background starts at themeLighterAlt or themeLight, depending on inverted theme or not,
    // then gets steps stronger from there
    neutralTertiaryAlt: !fullTheme.isInverted ? p.themeDarkAlt : p.themeDarker,
    neutralQuaternary: !fullTheme.isInverted ? p.themePrimary : p.themeDark,
    neutralQuaternaryAlt: !fullTheme.isInverted ? p.themeSecondary : p.themeDarkAlt,
    neutralLight: !fullTheme.isInverted ? p.themeTertiary : p.themePrimary,
    neutralLighter: !fullTheme.isInverted ? p.themeLight : p.themeSecondary,
    neutralLighterAlt: !fullTheme.isInverted ? p.themeLighter : p.themeTertiary,
    white: !fullTheme.isInverted ? p.themeLighterAlt : p.themeLight
  };

  const partialSemantic: Partial<ISemanticColors> = {
    bodyBackground: !fullTheme.isInverted ? p.themeLighterAlt : p.themeLight,
    bodyStandoutBackground: !fullTheme.isInverted ? p.themeLighter : p.themeTertiary,
    bodyFrameBackground: !fullTheme.isInverted ? p.themeLighter : p.themeLight,
    bodyFrameDivider: !fullTheme.isInverted ? p.themeLighter : p.themeTertiary,

    inputBorder: p.themeLighter,
    // inputBorderHovered: p.neutralPrimary,
    inputBackground: p.themeLighter,
    // inputBackgroundChecked: p.themePrimary,
    // inputBackgroundCheckedHovered: p.themeDarkAlt,
    inputForegroundChecked: p.themeLighter,
    // inputFocusBorderAlt: p.themePrimary,
    variantBorder: !fullTheme.isInverted ? p.neutralLight : p.neutralLighterAlt,
    variantBorderHovered: p.neutralTertiary,
    defaultStateBackground: !fullTheme.isInverted ? p.themeLight : p.themeTertiary,

    buttonBackground: !fullTheme.isInverted ? p.themeLighterAlt : p.themeLight,
    buttonBackgroundHovered: !fullTheme.isInverted ? p.themeLighter : p.themeTertiary,
    // buttonBackgroundHovered: !fullTheme.isInverted
    //   ? p.themeLighter
    // : updateA(getColorFromString(p.themeTertiary), 50).str,
    buttonBackgroundPressed: !fullTheme.isInverted ? p.themeLight : p.themeTertiary,
    buttonBorder: p.neutralSecondary,
    buttonText: !fullTheme.isInverted ? p.neutralPrimary : p.themePrimary,
    buttonTextHovered: !fullTheme.isInverted ? p.neutralDark : p.neutralPrimary,
    buttonTextPressed: !fullTheme.isInverted ? p.neutralDark : p.neutralPrimary,
    buttonTextDisabled: !fullTheme.isInverted ? p.themeLight : p.themeTertiary,
    buttonBorderDisabled: !fullTheme.isInverted ? p.themeLight : p.themeTertiary,
    primaryButtonBackground: p.themePrimary,
    primaryButtonBackgroundHovered: p.themeDarkAlt,
    primaryButtonBackgroundPressed: p.themeDark,
    primaryButtonBorder: 'transparent',
    primaryButtonText: p.white,
    primaryButtonTextHovered: p.white,
    primaryButtonTextPressed: p.white
  };

  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
}
开发者ID:magellantoo,项目名称:office-ui-fabric-react,代码行数:77,代码来源:variants.ts



注:本文中的office-ui-fabric-react/lib/Styling.createTheme函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript Styling.getFocusStyle函数代码示例发布时间:2022-05-25
下一篇:
TypeScript office-ui-fabric-react.createTheme函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap