@fluentui/react-theme
TypeScript icon, indicating that this package has built-in type declarations

9.1.19 • Public • Published

@fluentui/react-theme

React Theme for Fluent UI React

Usage

Import a theme and tokens:

import { webLightTheme, tokens } from '@fluentui/react-components';

Pass the theme to the FluentProvider:

<FluentProvider theme={webLightTheme}>
  <App />
</FluentProvider>

Use the tokens in your styles:

const useStyles = makeStyles({
  root: {
    color: tokens.colorNeutralForeground1,
  },
});

Using a custom brand ramp

To use a theme based on a custom brand ramp, use the createXXXTheme function:

import { createWebLightTheme } from '@fluentui/react-components';

const customBrandRamp: BrandVariants = {
  10: `#2b2b40`,
  // ...
  160: `#e8ebfa`,
};

const customTheme = createWebLightTheme(customBrandRamp);

Contributing

Updating colors in the theme

The color tokens are generated by token pipeline. Do not edit colors directly. Instead, update the token pipeline first and once the changes are merged there, run:

yarn token-pipeline

Adding new color tokens

To add a new color token, besides updating the token pipeline, you also need to update corresponding typings and the tokens object in src/tokens.ts.

Updating other tokens

To update any tokens not related to colors, update the values directly in this package.

Readme

Keywords

none

Package Sidebar

Install

npm i @fluentui/react-theme

Weekly Downloads

118,093

Version

9.1.19

License

MIT

Unpacked Size

49.1 kB

Total Files

9

Last publish

Collaborators

  • sopranopillow
  • microsoft1es
  • justslone
  • chrisdholt
  • miroslavstastny
  • levithomason
  • uifabricteam
  • uifrnbot
  • dzearing
  • layershifter
  • ling1726
  • travisspomer