@fluentui/react-theme

What is @fluentui/react-theme?

@fluentui/react-theme is a package that provides theming capabilities for Fluent UI React components. It allows developers to define and apply custom themes to their applications, ensuring a consistent look and feel across all components.

What are @fluentui/react-theme's main functionalities?

Custom Theme Creation

This feature allows you to create a custom theme by defining a palette of colors. The `createTheme` function takes an object with color definitions and returns a theme object that can be applied to Fluent UI components.

const { createTheme } = require('@fluentui/react-theme');

const myCustomTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
    themeLighterAlt: '#eff6fc',
    themeLighter: '#deecf9',
    themeLight: '#c7e0f4',
    themeTertiary: '#71afe5',
    themeSecondary: '#2b88d8',
    themeDarkAlt: '#106ebe',
    themeDark: '#005a9e',
    themeDarker: '#004578',
    neutralLighterAlt: '#faf9f8',
    neutralLighter: '#f3f2f1',
    neutralLight: '#edebe9',
    neutralQuaternaryAlt: '#e1dfdd',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c6c4',
    neutralTertiary: '#a19f9d',
    neutralSecondary: '#605e5c',
    neutralPrimaryAlt: '#3b3a39',
    neutralPrimary: '#323130',
    neutralDark: '#201f1e',
    black: '#000000',
    white: '#ffffff'
  }
});

Applying a Theme

This feature allows you to apply a custom theme to your application using the `ThemeProvider` component. By wrapping your application or specific components with `ThemeProvider` and passing the custom theme, you ensure that the theme is applied consistently.

const { ThemeProvider } = require('@fluentui/react-theme-provider');
const { myCustomTheme } = require('./myCustomTheme');

const App = () => (
  <ThemeProvider theme={myCustomTheme}>
    <YourComponent />
  </ThemeProvider>
);

Using Theme Tokens

This feature allows you to access the current theme within your components using the `useTheme` hook. You can then use the theme tokens, such as colors, to style your components dynamically based on the active theme.

const { useTheme } = require('@fluentui/react-theme');

const ThemedComponent = () => {
  const theme = useTheme();
  return (
    <div style={{ backgroundColor: theme.palette.themePrimary }}>
      Themed Content
    </div>
  );
};

Other packages similar to @fluentui/react-theme

styled-components

styled-components is a popular library for styling React applications using tagged template literals. It allows for defining component-level styles and supports theming through a ThemeProvider. Compared to @fluentui/react-theme, styled-components offers more flexibility in defining styles but does not come with a predefined set of UI components.

emotion

Emotion is a performant and flexible CSS-in-JS library that allows for writing styles with JavaScript. It supports theming through a ThemeProvider and offers a similar API to styled-components. Emotion is more focused on providing low-level styling capabilities, whereas @fluentui/react-theme is tailored for theming Fluent UI components.

material-ui

Material-UI is a popular React UI framework that follows Google's Material Design guidelines. It provides a comprehensive set of components and theming capabilities. While @fluentui/react-theme is specific to Fluent UI components, Material-UI offers a broader range of components and a different design language.

README

@fluentui/react-theme

React Theme components for Fluent UI React

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.