本文整理匯總了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
});
示例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;
示例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,示例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'
}
})示例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);