@fluentui/theme

What is @fluentui/theme?

@fluentui/theme is a package that provides theming capabilities for Fluent UI components. It allows developers to define and apply custom themes, including colors, fonts, and other design tokens, to ensure a consistent look and feel across their applications.

What are @fluentui/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/theme');

const myTheme = 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 Themes

This feature allows you to apply a custom theme to your application. The `loadTheme` function takes a theme object and applies it globally, ensuring that all Fluent UI components use the defined theme.

const { loadTheme } = require('@fluentui/theme');

const myTheme = 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'
  }
});

loadTheme(myTheme);

Font Customization

This feature allows you to customize the fonts used in your application. The `createTheme` function can take a `fonts` object where you can define different font styles for various text sizes.

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

const myTheme = createTheme({
  fonts: {
    small: {
      fontSize: '10px',
      fontWeight: 'normal'
    },
    medium: {
      fontSize: '14px',
      fontWeight: 'semibold'
    },
    large: {
      fontSize: '18px',
      fontWeight: 'bold'
    }
  }
});

Other packages similar to @fluentui/theme

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components. Unlike @fluentui/theme, which is specifically for Fluent UI components, styled-components can be used with any React component.

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and flexible styling capabilities with a focus on performance. Similar to styled-components, Emotion can be used with any React component, whereas @fluentui/theme is tailored for Fluent UI components.

theme-ui

theme-ui is a library for creating themeable user interfaces based on constraint-based design principles. It provides a set of tools for defining and applying themes in React applications. While @fluentui/theme is specific to Fluent UI, theme-ui offers a more general approach to theming.

README

@fluentui/theme

Basic building blocks for Fluent UI React Themes

Define your own theme based on an existing theme:

import { createTheme, Theme, FontWeights } from '@fluentui/theme';

export const MyTheme: Theme = createTheme({
  components: {
    Button: {
      variants: {
        fontWeight: FontWeights.semibold,
        paddingLeft: '24px',
        paddingRight: '24px',
      },
    },
  },
});