Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@fluentui/react-theme

Package Overview
Dependencies
Maintainers
12
Versions
786
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-theme

Fluent UI themes

  • 0.0.0-nightly-20241202-0407.1
  • Source
  • npm
  • Socket score

Version published
Maintainers
12
Created

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

FAQs

Package last updated on 02 Dec 2024

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc