TypeScript office-ui-fabric-react.createTheme函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

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

示例1: createTheme

  statusInformationText: DarkSemanticColors.text.body,
  statusInformationIcon: CommonSemanticColors.icons.information,
  statusSuccessBackground: DarkSemanticColors.statusBar.okay,
  statusSuccessText: DarkSemanticColors.text.body,
  statusSuccessIcon: CommonSemanticColors.icons.okay,
  statusWarningBackground: DarkSemanticColors.statusBar.warning,
  statusWarningText: DarkSemanticColors.text.body,
  statusWarningIcon: CommonSemanticColors.icons.warning
};

export const AzureThemeDark: ITheme = createTheme({
  fonts: {
    medium: {
      fontFamily: StyleConstants.fontFamily,
      fontSize: FontSizes.size12
    }
  },
  palette: {
    themePrimary: DarkSemanticColors.controlOutlines.accent,
    neutralPrimary: DarkSemanticColors.text.body,
    neutralDark: DarkSemanticColors.text.body,
    neutralLighter: DarkSemanticColors.shimmer.secondary, // shimmer elements
    neutralLight: DarkSemanticColors.shimmer.primary, // shimmer elements
    neutralLighterAlt: DarkSemanticColors.item.hover, // nav highlight
    neutralQuaternaryAlt: DarkSemanticColors.item.select, // expand button on list controls
    neutralSecondary: DarkSemanticColors.text.label, // persona,
    white: DarkSemanticColors.background // shimmer elements
  },
  semanticColors: darkExtendedSemanticColors
});

开发者ID:OfficeDev，项目名称:office-ui-fabric-react，代码行数:30，代码来源:AzureThemeDark.ts

示例2: createTheme

import { createTheme, ITheme } from 'office-ui-fabric-react';
import { NeutralColors, CommunicationColors } from './FluentColors';

export const FluentTheme: ITheme = createTheme({
  palette: {
    black: NeutralColors.black,
    neutralDark: NeutralColors.gray190,
    neutralPrimary: NeutralColors.gray160,
    neutralPrimaryAlt: NeutralColors.gray150,
    neutralSecondary: NeutralColors.gray130,
    neutralTertiary: NeutralColors.gray90,
    neutralTertiaryAlt: NeutralColors.gray60,
    neutralQuaternary: NeutralColors.gray50,
    neutralQuaternaryAlt: NeutralColors.gray40,
    neutralLight: NeutralColors.gray30,
    neutralLighter: NeutralColors.gray20,
    neutralLighterAlt: NeutralColors.gray10,
    white: NeutralColors.white,
    themeDarker: CommunicationColors.shade30,
    themeDark: CommunicationColors.shade20,
    themeDarkAlt: CommunicationColors.shade10,
    themePrimary: CommunicationColors.primary,
    themeSecondary: CommunicationColors.tint10,
    themeLight: CommunicationColors.tint20,
    themeLighter: CommunicationColors.tint30,
    themeLighterAlt: CommunicationColors.tint40
  }
});

export default FluentTheme;

开发者ID:magellantoo，项目名称:office-ui-fabric-react，代码行数:30，代码来源:FluentTheme.ts

示例3: createTheme

import { createTheme, ICustomizations } from 'office-ui-fabric-react';
import { addVariants } from '@uifabric/variants';

export const WordCustomizations: ICustomizations = {
  settings: {
    theme: createTheme({
      palette: {
        themePrimary: '#2b579a',
        themeSecondary: '#366ec2'
      },
      semanticColors: {
        buttonBackground: 'white',
        buttonBackgroundHovered: 'rgb(240, 240, 240)',
        buttonBackgroundPressed: 'rgb(240, 240, 240)',
        buttonText: 'rgb(43, 87, 154)',
        buttonBorder: 'rgb(237, 235, 233)'
      }
    })
  },

  scopedSettings: {
    Button: {
      styleVariables: {
        baseVariant: {
          baseState: {
            borderWidth: 1,
            minHeight: 26,
            textSize: 13.5,
            lineHeight: 13.5,
            textWeight: 600,
            iconSize: 12,

开发者ID:atneik，项目名称:office-ui-fabric-react，代码行数:31，代码来源:WordCustomizations.ts

示例4: createTheme

    theme: createTheme({
      palette: {
        themePrimary: '#6061aa',
        themeLighterAlt: '#f7f7fc',
        themeLighter: '#e1e1f2',
        themeLight: '#c7c8e6',
        themeTertiary: '#9797cd',
        themeSecondary: '#6f70b5',
        themeDarkAlt: '#56579a',
        themeDark: '#494a82',
        themeDarker: '#363660',
        neutralLighterAlt: '#f8f8f8',
        neutralLighter: '#f4f4f4',
        neutralLight: '#eaeaea',
        neutralQuaternaryAlt: '#dadada',
        neutralQuaternary: '#d0d0d0',
        neutralTertiaryAlt: '#c8c8c8',
        neutralTertiary: '#b6b0b0',
        neutralSecondary: '#9f9797',
        neutralPrimaryAlt: '#877f7f',
        neutralPrimary: '#282424',
        neutralDark: '#585151',
        black: '#403b3b',
        white: '#fff'
      },
      semanticColors: {
        buttonBackground: 'transparent',
        buttonBackgroundHovered: '#bdbdbd',
        buttonBackgroundPressed: '#a7a7a7',

        buttonText: '#252424',
        buttonTextPressed: '#252424',
        buttonTextHovered: '#252424',

        buttonBorder: '#bdbdbd'
      }
    })

开发者ID:OfficeDev，项目名称:office-ui-fabric-react，代码行数:37，代码来源:TeamsCustomizations.ts

示例5: createTheme

import { createTheme, ICustomizations } from 'office-ui-fabric-react';
import { addVariants } from '@uifabric/variants';

export const DefaultCustomizations: ICustomizations = {
  settings: {
    theme: createTheme({})
  },
  scopedSettings: {}
};

addVariants(DefaultCustomizations.settings.theme);

开发者ID:OfficeDev，项目名称:office-ui-fabric-react，代码行数:11，代码来源:DefaultCustomizations.ts

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