Update content in Themes doc page (microsoft#15846)

xugao · Feb 4, 2021 · a0fe6ee · a0fe6ee
1 parent 3e5a734
commit a0fe6ee
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 71 deletions.
diff --git a/...lic-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md b/...lic-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md
@@ -5,9 +5,9 @@ These can be used separately, or together, as shown in the example below.
 The overrides can include any property from [`IRawStyle`](#/controls/web/references/irawstyle).
 
 ```tsx
-import { loadTheme } from '@fluentui/react';
+import { createTheme } from '@fluentui/react';
 
-loadTheme({
+const appTheme = createTheme({
   defaultFontStyle: { fontFamily: 'Monaco, Menlo, Consolas', fontWeight: 'regular' },
   fonts: {
     small: {

diff --git a/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json b/change/@fluentui-public-docsite-2021-02-03-15-40-08-theming-doc.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update content in Themes doc page.",
+  "packageName": "@fluentui/public-docsite",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-03T23:39:43.990Z"
+}
diff --git a/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json b/change/@fluentui-react-examples-2021-02-03-15-40-08-theming-doc.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Update content in Themes doc page.",
+  "packageName": "@fluentui/react-examples",
+  "email": "xgao@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-03T23:40:08.905Z"
+}
diff --git a/packages/react-examples/src/react/Theme/docs/ThemesOverview.md b/packages/react-examples/src/react/Theme/docs/ThemesOverview.md
@@ -1,69 +1 @@
-The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually. To do this, you must call `loadTheme()` with a custom theme object at app startup.
-
-### Using themes
-
-To use themes, an application must call `loadTheme()` immediately at app startup before any app code executes.
-Here is an example:
-
-```tsx
-import { loadTheme } from '@fluentui/react';
-
-loadTheme({
-  palette: {
-    themePrimary: '#0078d4',
-    themeLighterAlt: '#eff6fc',
-    themeLighter: '#deecf9',
-    themeLight: '#c7e0f4',
-    themeTertiary: '#71afe5',
-    themeSecondary: '#2b88d8',
-    themeDarkAlt: '#106ebe',
-    themeDark: '#005a9e',
-    themeDarker: '#004578',
-    neutralLighterAlt: '#f8f8f8',
-    neutralLighter: '#f4f4f4',
-    neutralLight: '#eaeaea',
-    neutralQuaternaryAlt: '#dadada',
-    neutralQuaternary: '#d0d0d0',
-    neutralTertiaryAlt: '#c8c8c8',
-    neutralTertiary: '#c2c2c2',
-    neutralSecondary: '#858585',
-    neutralPrimaryAlt: '#4b4b4b',
-    neutralPrimary: '#333333',
-    neutralDark: '#272727',
-    black: '#1d1d1d',
-    white: '#ffffff',
-  },
-});
-```
-
-### Customization
-
-You can also add some of your own customizations to the default theme.
-For example, you can set the `defaultFontStyle` property to modify every font variant
-(small, medium, large, etc.), or you can target specific variants through the `fonts` property.
-These can be used separately, or together, as shown in the example below.
-The overrides can include any property from [`IRawStyle`](#/controls/web/references/irawstyle).
-
-```tsx
-import { loadTheme } from '@fluentui/react';
-
-loadTheme({
-  defaultFontStyle: { fontFamily: 'Monaco, Menlo, Consolas', fontWeight: 'regular' },
-  fonts: {
-    small: {
-      fontSize: '11px',
-    },
-    medium: {
-      fontSize: '13px',
-    },
-    large: {
-      fontSize: '20px',
-      fontWeight: 'semibold',
-    },
-    xLarge: {
-      fontSize: '22px',
-      fontWeight: 'semibold',
-    },
-  },
-});
-```
+Fluent UI React components are themeable. We provide a set of sensible defaults, but you can override [colors](https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots) or [fonts](https://developer.microsoft.com/en-us/fluentui#/styles/web/typography) individually. See [this wiki](https://github.com/microsoft/fluentui/wiki/How-to-apply-theme-to-Fluent-UI-React-components) for more details.