@fluentui-react-native/theme

Code support for working with the themes defined in @fluentui-react-native/theme-types. This includes a ThemeReference class and a ThemeProvider implementation that works with the references.

ThemeReference

A class that constructs a Theme based upon a either another fully built Theme or a parent ThemeReference, then layers in PartialTheme fragments, or ThemeTransform functions. It then provides the ability to invalidate, the ability to update the fragments, and the ability to listen to changes for the theme.

Creating a ThemeReference

A reference is created by combination a base with zero or more recipes.

• Base - either a Theme or another ThemeReference
• Recipe - either a PartialTheme or a function of the form (parent: Theme) => PartialTheme

The ThemeReference supports the following methods:

• theme - get the built theme, implemented as a getter to dynamically create it when queried
• invalidate() - let the reference know something has changed, this will replay the recipies to generate a new theme
• update(...recipes) - update the recipes used to build the theme, will also invalidate the reference
• addOnThemeChanged(listener) - add a listener to be notified of theme changes
• removeOnThemeChanged(listener) - remove the listener

In practice this can be used to implement a theme, that has some values coming from external calls (maybe to a native module), and rebuilds itself when those values change. This might look something like:

import { defaultFluentTheme } from '@fluentui-react-native/default-theme';
import { ThemeReference } from '@fluentui-react-native/theme';

// in this case wrapping the reference in a function makes it easy to encapsulate the invalidating
export const createMyCustomTheme = () => {
  // create the reference
  const themeRef = new ThemeReference(
    // base it on the default fluent theme
    defaultFluentTheme,
    // mix in some constant values to override
    {
      colors: {
        // stuff here
      },
    },
    // make some outside calls to get some values
    () => {
      // query a body background from somewhere else
      const bodyBackground = checkSomeOutsideValue();
      return {
        colors: {
          bodyBackground,
        },
      };
    },
  );
  // register a change handler that invalidates the reference
  listenForOutsideValueChange(() => {
    themeRef.invalidate();
  });
  return themeRef;
};

ThemeProvider

This is a standard context provider that takes theme references as inputs for the theme prop.

Change Log - @fluentui-react-native/theme

0.11.2

Thu, 12 Jun 2025 03:17:19 GMT

Patches

• Add support for React Native 0.74 (4123478+tido64@users.noreply.github.com)

0.11.1

Wed, 29 Jan 2025 23:43:54 GMT

Patches

• fix tsconfig for jest types (sanajmi@microsoft.com)

0.11.0

Thu, 11 Apr 2024 18:08:39 GMT

Minor changes

• Update to RN 0.73 (30809111+acoates-ms@users.noreply.github.com)

0.10.8

Fri, 01 Mar 2024 20:39:12 GMT

Patches

• Use workspace for version of local package (ruaraki@microsoft.com)

0.10.7

Thu, 22 Feb 2024 23:27:43 GMT

Patches

• Rework package json version notation (rofang@microsoft.com)

0.10.6

Mon, 22 Jan 2024 22:09:17 GMT

Patches

• Fix theme state not changing when themeRef passed into provider is changed (winlarry@microsoft.com)

0.10.5

Thu, 04 Jan 2024 21:06:26 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.38.0

0.10.4

Thu, 04 Jan 2024 01:35:42 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.37.0

0.10.3

Wed, 03 Jan 2024 00:15:20 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.36.0

0.10.2

Thu, 21 Dec 2023 01:31:00 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.35.0

0.10.1

Wed, 20 Dec 2023 00:05:24 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.34.0

0.10.0

Thu, 09 Nov 2023 02:39:11 GMT

Minor changes

• Update to react-native 0.72 (30809111+acoates-ms@users.noreply.github.com)
• Bump @fluentui-react-native/theme-types to v0.33.0

0.9.4

Tue, 07 Nov 2023 20:20:35 GMT

Patches

• Manually bump packages stuck in the pipeline (safreibe@microsoft.com)
• Bump @fluentui-react-native/theme-types to v0.32.3

0.9.2

Mon, 30 Oct 2023 21:26:06 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.32.1

0.9.1

Wed, 09 Aug 2023 22:02:15 GMT

Patches

• Bump @fluentui-react-native/immutable-merge to v1.2.1

0.9.0

Mon, 05 Jun 2023 19:26:25 GMT

Minor changes

• Upgrade to React Native 0.71 (sanajmi@microsoft.com)
• Bump @fluentui-react-native/immutable-merge to v1.2.0
• Bump @fluentui-react-native/theme-types to v0.32.0

0.8.5

Tue, 30 May 2023 20:34:15 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.31.2

0.8.4

Wed, 03 May 2023 07:08:52 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.31.1

0.8.3

Tue, 14 Mar 2023 20:50:45 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.31.0

0.8.2

Fri, 03 Mar 2023 06:47:26 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.30.4

0.8.1

Fri, 24 Feb 2023 20:39:59 GMT

Patches

• Order imports (78454019+lyzhan7@users.noreply.github.com)
• Bump @fluentui-react-native/theme-types to v0.30.3

0.8.0

Fri, 03 Feb 2023 01:49:36 GMT

Minor changes

• Revert "Change default theme from a const object to a function that returns the object #2483" (78454019+lyzhan7@users.noreply.github.com)

0.7.21

Thu, 02 Feb 2023 01:29:38 GMT

Patches

• Add eslint to packages missing a config (30809111+acoates-ms@users.noreply.github.com)

0.7.20

Wed, 01 Feb 2023 22:33:17 GMT

Patches

• Bump @fluentui-react-native/immutable-merge to v1.1.8
• Bump @fluentui-react-native/theme-types to v0.30.2

0.7.19

Mon, 30 Jan 2023 07:12:38 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.30.1

0.7.18

Wed, 25 Jan 2023 21:31:18 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.30.0

0.7.17

Wed, 18 Jan 2023 01:55:11 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.29.1

0.7.16

Tue, 10 Jan 2023 20:17:18 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.29.0

0.7.15

Fri, 06 Jan 2023 12:26:31 GMT

Patches

• Change default theme const to a method (78454019+lyzhan7@users.noreply.github.com)

0.7.14

Thu, 29 Dec 2022 03:47:47 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.28.0

0.7.13

Tue, 27 Dec 2022 22:21:15 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.27.1

0.7.12

Thu, 15 Dec 2022 14:50:50 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.27.0

0.7.11

Fri, 09 Dec 2022 05:23:38 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.26.0

0.7.10

Tue, 06 Dec 2022 00:46:41 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.25.0

0.7.9

Thu, 01 Dec 2022 03:12:20 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.24.0

0.7.8

Fri, 04 Nov 2022 14:36:23 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.23.1

0.7.7

Thu, 27 Oct 2022 11:09:35 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.23.0

0.7.6

Wed, 12 Oct 2022 21:54:15 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.22.0

0.7.5

Tue, 11 Oct 2022 22:41:44 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.21.0

0.7.4

Fri, 30 Sep 2022 08:04:44 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.20.0

0.7.3

Fri, 30 Sep 2022 00:54:36 GMT

Patches

• Update react-native to 0.68 (krsiler@microsoft.com)
• Bump @fluentui-react-native/theme-types to v0.19.2

0.7.2

Wed, 21 Sep 2022 21:00:40 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.19.1

0.7.1

Fri, 16 Sep 2022 01:53:06 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.19.0

0.7.0

Thu, 14 Jul 2022 18:09:49 GMT

Minor changes

• Update to React Native 0.66 (sanajmi@microsoft.com)
• Bump @fluentui-react-native/theme-types to v0.18.0

0.6.11

Wed, 25 May 2022 18:43:09 GMT

Patches

• beachball sync (krsiler@microsoft.com)
• Version bump for packages to attempt to fix NPM publish pipeline (krsiler@microsoft.com)
• Bump @fluentui-react-native/theme-types to v0.17.0

0.6.9

Sat, 21 May 2022 01:47:58 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.15.0

0.6.8

Thu, 28 Apr 2022 19:09:51 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.14.3

0.6.7

Wed, 27 Apr 2022 19:30:38 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.14.2

0.6.6

Thu, 31 Mar 2022 07:27:48 GMT

Patches

• Bump @fluentui-react-native/immutable-merge to v1.1.7
• Bump @fluentui-react-native/theme-types to v0.14.1

0.6.5

Thu, 03 Mar 2022 20:20:09 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.14.0

0.6.4

Fri, 14 Jan 2022 01:00:03 GMT

Patches

• fix disabled button (email not defined)
• Bump @fluentui-react-native/theme-types to v0.13.3

0.6.3

Thu, 06 Jan 2022 23:14:38 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.13.2

0.6.2

Mon, 20 Dec 2021 22:56:01 GMT

Patches

• Add repository property to all package.json files (ruaraki@microsoft.com)
• Bump @fluentui-react-native/immutable-merge to v1.1.6
• Bump @fluentui-react-native/theme-types to v0.13.1

0.6.1

Sat, 18 Dec 2021 04:15:05 GMT

Patches

• Bump @fluentui-react-native/immutable-merge to v1.1.5

0.6.0

Wed, 17 Nov 2021 19:28:07 GMT

Minor changes

• Update to react-native 0.64 (afoxman@microsoft.com)

Patches

• Bump @fluentui-react-native/theme-types to v0.13.0 (afoxman@microsoft.com)
• Bump @fluentui-react-native/test-tools to v0.1.1 (afoxman@microsoft.com)

0.5.23

Mon, 01 Nov 2021 18:53:37 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.12.4 (ruaraki@microsoft.com)

0.5.22

Mon, 25 Oct 2021 19:24:43 GMT

Patches

• Bump @fluentui-react-native/immutable-merge to v1.1.4 (ruaraki@microsoft.com)

0.5.21

Tue, 28 Sep 2021 21:08:25 GMT

Patches

• Delete NativeButton (67026167+chiuam@users.noreply.github.com)

0.5.20

Tue, 21 Sep 2021 16:32:12 GMT

Patches

• adding an adapter for macOS (67026167+chiuam@users.noreply.github.com)

0.5.19

Thu, 09 Sep 2021 20:03:01 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.12.1 (ruaraki@microsoft.com)

0.5.18

Thu, 26 Aug 2021 21:02:08 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.12.0 (ruaraki@microsoft.com)

0.5.17

Thu, 26 Aug 2021 04:48:40 GMT

Patches

• fix text truncation for radio button (67026167+chiuam@users.noreply.github.com)

0.5.16

Wed, 18 Aug 2021 23:00:57 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.11.2 (ruaraki@microsoft.com)

0.5.15

Fri, 13 Aug 2021 16:12:26 GMT

Patches

• Fix icons in experimental button and add fab (t-lindaweng@microsoft.com)

0.5.14

Thu, 12 Aug 2021 17:23:44 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.11.0 (ruaraki@microsoft.com)

0.5.13

Tue, 10 Aug 2021 21:12:30 GMT

Patches

• Bump @fluentui-react-native/theme-types to v0.10.0 (ruaraki@microsoft.com)

0.5.12

Wed, 04 Aug 2021 06:26:25 GMT

Patches

• radio group on macOS (67026167+chiuam@users.noreply.github.com)

0.5.11

Tue, 27 Jul 2021 22:17:20 GMT

Patches

• add compressible utility and a snapshot test / demo to framework (jasonmo@microsoft.com)

0.5.10

Mon, 26 Jul 2021 20:41:04 GMT

Patches

• add new use-slot package, move framework to consume that package (jasonmo@microsoft.com)

0.5.7

Wed, 21 Jul 2021 22:55:40 GMT

Patches

• expose use-tokens in framework package (jasonmo@microsoft.com)

0.5.3

Fri, 18 Jun 2021 00:38:19 GMT

Patches

• Apply prettier to libraries core and theming, run (ruaraki@microsoft.com)

0.5.1

Mon, 15 Mar 2021 06:53:17 GMT

Patches

• Public source files that are needed for source map (30809111+acoates-ms@users.noreply.github.com)

0.5.0

Sat, 06 Mar 2021 00:20:05 GMT

Minor changes

• Update to react-native 0.63 (30809111+acoates-ms@users.noreply.github.com)

Patches

• Fixed a typo (saadnajmi2@gmail.com)

0.4.0

Fri, 23 Oct 2020 22:27:37 GMT

Minor changes

• RNIcon feature (warleu@microsoft.com)

0.3.0

Mon, 12 Oct 2020 04:09:31 GMT

Minor changes

• added semantic colors for button (email not defined)

0.2.0

Mon, 28 Sep 2020 20:32:21 GMT

Minor changes

• add more host colors (aliciakds88@gmail.com)

0.1.4

Sun, 27 Sep 2020 04:08:27 GMT

Patches

• add light and dark awareness to default themes (jasonmo@microsoft.com)

0.1.2

Fri, 25 Sep 2020 18:01:57 GMT

Patches

• add experimental theme package (jasonmo@microsoft.com)