Documentation to move from old to new theme provider (#911)
* Add missing pages to index * Documentation for theme provider converstion * Update some paths * Address feedback
This commit is contained in:
Родитель
5849d234f1
Коммит
e22376782a
|
@ -53,7 +53,7 @@ For more information about customizing themes, take a look at [Custom Themes](./
|
|||
You can use the `useTheme()` hook to get the current theme inside a component.
|
||||
|
||||
```tsx
|
||||
import { useTheme } from '@fluentui-react-native/theme-types';
|
||||
import { useTheme } from '@fluentui-react-native/framework';
|
||||
|
||||
export const Component = () => {
|
||||
const theme = useTheme();
|
||||
|
|
|
@ -21,7 +21,7 @@ You can create a theme using information from Office by calling `createOfficeThe
|
|||
```tsx
|
||||
import { ThemeProvider } from '@fluentui-react-native/theme';
|
||||
import { createOfficeTheme } from '@fluentui-react-native/win32-theme';
|
||||
import { useTheme } from '@fluentui-react-native/theme-types';
|
||||
import { useTheme } from '@fluentui-react-native/framework';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
const AppWithOfficeTheme = () => {
|
||||
|
|
|
@ -9,7 +9,7 @@ Defining a themed `StyleSheet` is similar to creating a RN `StyleSheet`, but it
|
|||
```ts
|
||||
// Component.styles.ts
|
||||
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
||||
import { Theme } from '@fluentui-react-native/theme-types';
|
||||
import { Theme } from '@fluentui-react-native/framework';
|
||||
|
||||
export const getThemedStyles = themedStyleSheet((theme: Theme) => {
|
||||
return {
|
||||
|
@ -28,7 +28,7 @@ You can use a themed `StyleSheet` as you would an RN `StyleSheet` that's generat
|
|||
```ts
|
||||
// Component.ts
|
||||
import { getThemedStyles } from './Component.styles.ts';
|
||||
import { useTheme } from '@fluentui-react-native/theme-types';
|
||||
import { useTheme } from '@fluentui-react-native/framework';
|
||||
|
||||
export const Component = () => {
|
||||
const styles = getThemedStyles(useTheme());
|
||||
|
|
|
@ -0,0 +1,84 @@
|
|||
# Moving from old to new `ThemeProvider`
|
||||
|
||||
We have a deprecated ThemeProvider which takes in a `ThemeRegistry`. The new ThemeProvider takes in the `ThemeReference`. This page provides guidance on how to move from the deprecated to the newer system.
|
||||
|
||||
## `ThemeRegistry` to `ThemeReference`
|
||||
|
||||
The new `ThemeProvider` takes in a different object as its value, a `ThemeReference`, so you'll need to convert your `ThemeRegistry` into a `ThemeReference` in order to use the new `ThemeProvider`.
|
||||
|
||||
If you were using `createPlatformThemeRegistry(<paletteName>)` to create your `ThemeRegistry`, you can get an equivalent `ThemeReference` by calling `createOfficeTheme({ paletteName: <paletteName> })` instead. Details on `createOfficeTheme` can be found [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md#integration-with-office).
|
||||
|
||||
The gist is that what used to be the `ProcessTheme` function passed into the `ThemeRegistry`'s `setTheme` can now be turned into a `ThemeRecipe` passed into the `ThemeReference`. So where a `ThemeRegistry` might have had:
|
||||
|
||||
```ts
|
||||
import { createThemeRegistry, Theme, PartialTheme, resolvePartialTheme } from '@uifabricshared/theming-react-native';
|
||||
|
||||
const registry = createThemeRegistry(baseTheme, resolvePartialTheme);
|
||||
registry.setTheme((parentTheme: Theme) => {
|
||||
return { colors: { background: theme.colors.themeDarker } };
|
||||
});
|
||||
```
|
||||
|
||||
the `ThemeReference` would have:
|
||||
|
||||
```ts
|
||||
import { ThemeReference } from '@fluentui-react-native/theme';
|
||||
import { Theme, PartialTheme } from '@fluentui-react-native/framework';
|
||||
|
||||
const themeRef = new ThemeReference(
|
||||
baseTheme,
|
||||
(parentTheme: Theme): PartialTheme => {
|
||||
return { colors: { background: theme.colors.themeDarker } };
|
||||
}, // no resolver needed, automatically deeply merged into baseTheme
|
||||
);
|
||||
```
|
||||
|
||||
`ThemeReferences` can also take advantage of our [default themes](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md). Learn how to create custom themes [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/CustomTheme.md).
|
||||
|
||||
## Importing `ThemeProvider` from the new package
|
||||
|
||||
The new `ThemeProvider` resides in a different package and takes in the `ThemeReference` instead. You'll want to change which package you import the `ThemeProvider` from, and then take the theme you converted and pass it into the new `ThemeProvider`:
|
||||
|
||||
```ts
|
||||
import { ThemeProvider } from @uifabricshared/theming-react-native;
|
||||
|
||||
const App = () => {
|
||||
const themeRegistry = getThemeRegistry();
|
||||
|
||||
return (
|
||||
<ThemeProvider registry={themeRegistry}>
|
||||
<AppContent />
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```ts
|
||||
import { ThemeProvider } from @fluentui-react-native/theme;
|
||||
|
||||
const App = () => {
|
||||
const themeRef = getThemeReference();
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={themeRef}>
|
||||
<AppContent />
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Accessing the theme in components
|
||||
|
||||
The new ThemeProvider uses the same context as the old one, so accessing the theme still uses the same `useTheme()` hook - no functional change is needed to access the theme with the new `ThemeProvider`. The only change you'll want to make is to import `useTheme()` from the newer package:
|
||||
|
||||
```ts
|
||||
import { useTheme } from @uifabricshared/theming-react-native;
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```ts
|
||||
import { useTheme } from @fluentui-react-native/framework;
|
||||
```
|
|
@ -19,6 +19,8 @@
|
|||
|
||||
- [Basics](./Theming/Basics.md)
|
||||
- [Platform Default and Office Themes](./Theming/DefaultThemes.md)
|
||||
- [Customizing themes](./Theming/CustomTheme.md)
|
||||
- [Using Themed Stylesheets](./Theming/ThemedStylesheet.md)
|
||||
|
||||
## Utilities
|
||||
|
||||
|
@ -26,6 +28,10 @@
|
|||
- [FocusZone](./Utilities/FocusZone.mdx)
|
||||
- [Stack](./Utilities/Stack.mdx)
|
||||
|
||||
## Upgrade Guides
|
||||
|
||||
- [Moving to newer `ThemeProvder`](./UpgradeGuides/ThemeProvder.md)
|
||||
|
||||
## Contributing Docs Template
|
||||
|
||||
> ```
|
||||
|
|
Загрузка…
Ссылка в новой задаче