npmpackage.info

@fluentui/react-theme-provider

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

0.18.5

18,800

NOASSERTION

TypeScript

13.00 kB

2,780,164 6.4

Installations

npm install @fluentui/react-theme-provider

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.18.4

NPM Version

6.14.6 Score

88.3

Supply Chain

94.8

Quality

82.7

Maintenance

100

Vulnerability

License

Pull Requests

Open

154

Total

19,452

Closed

2,777

Merged

16,521

Issues

Open

472

Total

13,088

Closed

12,616

Releases

18,175

@fluentui/react-monaco-editor v1.7.288

@fluentui/react-monaco-editor_v1.7.288

Published on 31 Jan 2025

@fluentui/react-docsite-components v8.13.170

@fluentui/react-docsite-components_v8.13.170

Published on 31 Jan 2025

@fluentui/react-charting v5.23.50

@fluentui/react-charting_v5.23.50

Published on 31 Jan 2025

@fluentui/react-monaco-editor v1.7.287

@fluentui/react-monaco-editor_v1.7.287

Published on 30 Jan 2025

@fluentui/react-docsite-components v8.13.169

@fluentui/react-docsite-components_v8.13.169

Published on 30 Jan 2025

@fluentui/react-charting v5.23.49

@fluentui/react-charting_v5.23.49

Published on 30 Jan 2025

View all 18,175 releases

Contributors

897

View all 897 contributors

Languages

TypeScript

JavaScript

MDX

SCSS

HTML

CSS

Shell

EJS

Handlebars

Dockerfile

TypeScript (95.72%)

JavaScript (1.81%)

MDX (1.6%)

SCSS (0.51%)

HTML (0.2%)

CSS (0.15%)

Shell (0.01%)

EJS (0.01%)

Developer

microsoft

Download Statistics

Total Downloads

2,780,164

Last Day

2,473

Last Week

10,924

Last Month

49,266

Last Year

739,144

GitHub Statistics

18,800 Stars

18,997 Commits

2,762 Forks

289 Watching

95 Branches

897 Contributors

Bundle Size

38.43 kB

Minified

13.00 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.18.5

Package Id

@fluentui/react-theme-provider@0.18.5

Size

6.38 MB

NPM Version

6.14.6

Node Version

12.18.4

Publised On

26 Feb 2021

Total Downloads

Cumulative downloads

Total Downloads

2,780,164

Last day

-4.4%

2,473

Compared to previous day

Last week

-18.8%

10,924

Compared to previous week

Last month

4.3%

49,266

Compared to previous month

Last year

-9.4%

739,144

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

@fluentui/react-theme-provider

React theming component and hook for Fluent UI React

Installation

1yarn add @fluentui/react-theme-provider

Example usage

Use the theme with Fluent UI by wrapping content within the provider. If theme is not provided, default (Fluent) theme will be provided:

1import { ThemeProvider } from '@fluentui/react-theme-provider';
2
3export const App = () => (
4  <ThemeProvider>
5    <>...app</>
6  </ThemeProvider>
7);

You can also customize your own theme:

1import { ThemeProvider, PartialTheme } from '@fluentui/react-theme-provider';
2
3const appTheme: PartialTheme = {
4  palette: {
5    themePrimary: 'red'
6    ...
7  }
8};
9
10export const App = () => (
11  <ThemeProvider theme={appTheme}>
12    App content ...
13  </ThemeProvider>
14);

You can also nest ThemeProviders:

1import { ThemeProvider, PartialTheme } from '@fluentui/react-theme-provider';
2
3const appTheme: PartialTheme = {
4  palette: {
5    themePrimary: 'red'
6    ...
7  }
8};
9
10const headerTheme: PartialTheme = {
11  palette: {
12    themePrimary: 'orange'
13    ...
14  }
15};
16
17export const App = () => (
18  <ThemeProvider theme={appTheme}>
19    <ThemeProvider theme={headerTheme}>
20      <MyHeader />
21    </ThemeProvider>
22
23    App content ...
24  </ThemeProvider>
25);

You can apply component-level styles:

1import { Checkbox } from '@fluentui/react';
2import { ThemeProvider, createTheme } from '@fluentui/react-theme-provider';
3
4export const App = () => (
5  <ThemeProvider
6    theme={{
7      components: { Checkbox: { styles: { root: { background: 'red' } } } },
8    }}
9  >
10    <Checkbox />
11  </ThemeProvider>
12);

Accessing theme

useTheme

Theme can be accessed using useTheme hook. If you are specifically accessing theme to create classes/styles, you can use makeStyles described below.

1import { useTheme } from '@fluentui/react-theme-provider';
2
3const Content = () => {
4  const theme = useTheme();
5  ...
6};
7
8export const App = () => (
9  <ThemeProvider>
10    <Content />
11  </ThemeProvider>
12);

ThemeContext.Consumer

Theme can be accessed in Class Component using ThemeContext.Consumer.

1import { Theme, ThemeContext } from '@fluentui/react-theme-provider';
2
3class Content extends React.Component {
4  public render() {
5    return (
6      <ThemeContext.Consumer>
7        {(theme: Theme | undefined) => {
8          ...
9        }}
10      </ThemeContext.Consumer>
11    );
12  }
13}
14
15export const App = () => (
16  <ThemeProvider>
17    <Content />
18  </ThemeProvider>
19);

Create classes for React components based on theme

Theme can be accessed using the makeStyles hook. This hook abstracts rendering css given the theme object:

1import { makeStyles } from '@fluentui/react-theme-provider';
2
3const useFooStyles = makeStyles(theme => ({
4    root: {
5      background: theme.semanticColors.bodyBackground,
6      ':hover': {
7        background: theme.semanticColors.bodyBackgroundHovered
8    },
9}));
10
11const Foo = props => {
12  const classes = useFooStyles();
13
14  return <div className={classes.root} />;
15};

How does this change other existing ways of theming Fluent UI components?

Customizer

Customizer is now deprecated and you should replace it with ThemeProvider. CustomizerContext is now deprecated and you should replace it with ThemeContext or useTheme hook.

Deprecations remain to be functional as is but they will be removed in Fluent UI v9 release.

Replace settings prop

Before:

1<Customizer settings={{ theme }} />

After:

1<ThemeProvider theme={theme} />

Replace scopedSettings prop

Before:

1<Customizer
2  scopedSettings={{
3    Checkbox: {
4      styles: CheckboxStyles,
5    },
6  }}
7/>

After:

1<ThemeProvider
2  theme={{
3    components: { Checkbox: { styles: CheckboxStyles } },
4  }}
5/>

Replace CustomizerContext

Before:

1  <CustomizerContext.Consumer>
2    {(parentContext: ICustomizerContext) => {
3      const theme = parentContext.customizations.settings;
4      ...
5    }
6  </CustomizerContext.Consumer>

After: See options in Accessing theme.

loadTheme

loadTheme remains to work as is. However, you are recommended to replace loadTheme with ThemeProvider. That way, your application consistently has one way of providing theme.

To do that, instead of calling loadTheme(your_theme), you will simply wrap the root component of your React application once with ThemeProvider:

1<ThemeProvider theme={your_theme}>
2  <App />
3</ThemeProvider>

One caveat here is that if you app has styles which relies on @microsoft/load-themed-styles, ThemeProvider won't be able to replace loadTheme in this case.

Fabric component

Instead of using Fabric component, you can now replace it fully with ThemeProvider. Here is how to replace each prop usage:

Fabric	ThemeProvider
`componentRef`	`ref`
`as`	`as`
`theme`	`theme`
`styles`	Not longer support `styles` prop. If you need to style the root element, you can do that using (inline) style or className prop. Setting arbitrary styles for document body is no longer supported.
`applyTheme`	This is now applied by default, or by setting `applyTo="element"`. If you don't want any body styles to be applied on root element, you can set `applyTo="none"`.
`applyThemeToBody`	`applyTo="body"`
`dir`	set `rtl` in `theme` prop

Other call-outs

ThemeProvider by default sets background-color for the root element using theme.semanticColors.bodyBackground. If you find the background color being incorrect after switching to ThemeProvider, the right fix is likely that you need to update your theme definition to have the correct bodyBackground. Or, if you don't want any default stylings applied to the root element, you can set applyTo prop to "none".
ThemeProvider does not set font-family: inherit on all native button, input, textArea elements. If you find any Fluent UI component having incorrect fonts after switching to ThemeProvider, please report an issue.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

5

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/actions-mention-to-teams.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/actions-mention-to-teams.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:116: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:137: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:148: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:158: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:169: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:144: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:150: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:182: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:5: pin your Docker image by updating mcr.microsoft.com/vscode/devcontainers/javascript-node to mcr.microsoft.com/vscode/devcontainers/javascript-node@sha256:28d382643a2f24b421c5ae65661cb8dec3f4735fdb7427be1634d20aa12466f4
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

Score

6.4

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @fluentui/react-theme-provider

@fluentui/react-theme-sass

9.0.0-alpha.28

SASS variables referencing react-theme design tokens injected to DOM by react-provider.

@fluentui-contrib/react-themeless-provider

0.1.0

This package provides `ThemelessFluentProvider`, a replacement for `FluentProvider` when the provider needs to be rendered inside shadow DOM.

@fluentui/react-theme-provider

Installations

Developer Guide

No

CommonJS

12.18.4

6.14.6

Score

Pull Requests

154

19,452

2,777

16,521

Issues

472

13,088

12,616

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

38.43 kB

13.00 kB

Maintainers

Package Meta Information

Total Downloads

2,780,164

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@fluentui/react-theme-provider

Installation

Example usage

Accessing theme

useTheme

ThemeContext.Consumer

Create classes for React components based on theme

How does this change other existing ways of theming Fluent UI components?

Customizer

Replace settings prop

Replace scopedSettings prop

Replace CustomizerContext

loadTheme

Fabric component

Other call-outs

10

10

10

10

10

10

9

8

5

0

0

0

0

6.4

/10

Other packages similar to @fluentui/react-theme-provider