@fluentui/react-theme

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>
  );
};