React Theme for Fluent UI React
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,
},
});
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);
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
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
.
To update any tokens not related to colors, update the values directly in this package.