@fluentui-react-native/design

Core design system concepts, utilities, and types for Fluent UI React Native: theme sources and providers, ready-made Fluent and Flex themes, structured light, dark, high-contrast, and elevated appearance, Flex semantic tokens, themed style factories, and an opt-in runtime color library. Legacy theme and token packages re-export their APIs from here.

Quick start

Wrap a scene in ThemedRoot (or ThemeProvider) and read Flex tokens with useThemeState:

import { Text } from 'react-native';
import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';

const theme = new FlexThemeReference({ appearance: { colorScheme: 'system' } });

const Title = () => {
  const { tokens } = useThemeState();
  return <Text style={{ color: tokens.color.foregroundNeutralPrimary.rest, fontSize: tokens.fontSize.functionalTitleSmall }}>Hello</Text>;
};

export const App = () => (
  <ThemedRoot theme={theme} style={{ flex: 1 }}>
    <Title />
  </ThemedRoot>
);

Existing ThemeReference themes and useTheme consumers keep working under the same provider; the theming reference explains both authoring models and how they interoperate.

Fluent's own light, dark, and high-contrast themes ship in the themes entry point, and fluentTheme follows the system appearance, including high contrast:

import { ThemedRoot } from '@fluentui-react-native/design';
import { fluentTheme } from '@fluentui-react-native/design/themes';

export const App = () => (
  <ThemedRoot theme={fluentTheme} style={{ flex: 1 }}>
    <Title />
  </ThemedRoot>
);

Use fluentLightTheme or fluentDarkTheme when you need one fixed Theme object, or fluentHcTheme to always use high contrast.

The same entry point ships the x3 Flex defaults as flexCoolTheme and flexWarmTheme, independently bundleable descriptions covering light and dark. flexTheme includes both and switches palettes with appearance.colorTone. Use one as a FlexThemeReference base:

import { FlexThemeReference } from '@fluentui-react-native/design';
import { flexWarmTheme } from '@fluentui-react-native/design/themes';

const theme = new FlexThemeReference({ base: flexWarmTheme, appearance: { colorScheme: 'system' } });

Without an explicit theme or inherited boundary, ThemedRoot and the theme hooks use flexCoolTheme.

Documentation

| Topic | Covers | | ---------------------------------------------- | --------------------------------------------------------------------- | | Theming | Theme references, providers, appearance, hooks, and legacy projection | | Flex colors | Authoring and reading Flex colors, and migrating from flat colors | | Tokens | Token sources and Flex token mapping maintenance | | Styling | Themed style caches and state or color style factories | | Color library | Raw color-lib algorithms and the Flex interaction-color policy | | Testing helpers | Test-only fixtures and contrast validation | | Entry points | Every subpath and the legacy compatibility packages | | Contributing | Source ownership, generated files, tests, and validation | | Remaining work | Open theming and appearance work |

The reference index lists every reference by ID. Agents working in this package start from AGENTS.md.