@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

Readme

Source

@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',
      },
    },
  },
});

FAQs

What is @fluentui/theme?

Is @fluentui/theme popular?

Is @fluentui/theme well maintained?

Last updated on 25 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install