Skip to content

Commit 03be628

Browse files
andrewconnellandrewconnell
committed
cleanup markdown
- closes SharePoint#4752
1 parent 78be3dc commit 03be628

File tree

1 file changed

+30
-40
lines changed

1 file changed

+30
-40
lines changed

‎docs/spfx/use-theme-colors-in-your-customizations.md

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
---
22
title: Use theme colors in your SharePoint Framework customizations
33
description: Use theme colors so that your customizations look like a part of the site by referring to the theme colors of the context site in your SharePoint Framework solution.
4-
ms.date: 01/24/2018
4+
ms.date: 10/22/2019
55
ms.prod: sharepoint
66
localization_priority: Priority
77
---
8-
9-
108
# Use theme colors in your SharePoint Framework customizations
119

1210
When building SharePoint Framework customizations, you should use theme colors so that your customizations look like a part of the site. This article explains how can you refer to the theme colors of the context site in your SharePoint Framework solution.
1311

14-
> [!NOTE]
12+
> [!NOTE]
1513
> Although this article uses a SharePoint Framework client-side web part as an example, the described techniques apply to all types of SharePoint Framework customizations.
1614
1715
## Fixed colors vs. theme colors
@@ -30,49 +28,45 @@ When working with fixed colors, you specify them in CSS properties, for example:
3028

3129
```css
3230
.button {
33-
background-color: #0078d7;
31+
background-color: #0078d7;
3432
}
3533
```
3634

37-
<br/>
38-
3935
To use a theme color instead, replace the fixed color with a theme token:
4036

4137
```css
4238
.button {
43-
background-color: "[theme: themePrimary, default: #0078d7]";
39+
background-color: "[theme: themePrimary, default: #0078d7]";
4440
}
4541
```
4642

47-
<br/>
48-
4943
When your SharePoint Framework customization is loading on the page, the **\@microsoft/load-themed-styles** package, which is a part of the SharePoint Framework, looks for theme tokens in CSS files and tries to replace them with the corresponding color from the current theme. If the value for the specified token is not available, SharePoint Framework uses the value specified by using the **default** parameter instead, which is why it's important that you always include it.
5044

5145
The following theme tokens are available for you to use:
5246

53-
Token|Default value on a modern team site using the red palette|Remarks
54-
-----|--------------------------------|-----------
55-
`backgroundImageUri`|`none`|
56-
`accent`|`#ee0410`|
57-
`themeDark`|`#b3030c`|Used for action icons in the command bar and as a hover color.
58-
`themeDarkAlt`|`#b3030c`|
59-
`themeDarker`|`#770208`|
60-
`themeLight`|`#fd969b`|
61-
`themeLightAlt`|`#fd969b`|
62-
`themeLighter`|`#fecacd`|
63-
`themeLighterAlt`|`#fecacd`|
64-
`themePrimary`|`#ee0410`|Primary theme color. Used for icons and default buttons.
65-
`themeSecondary`|`#fc6169`|
66-
`themeTertiary`|`#fd969b`|
67-
68-
> [!NOTE]
47+
| Token | Default value on a modern team site using the red palette | Remarks |
48+
| -------------------- | --------------------------------------------------------- | -------------------------------------------------------------- |
49+
| `backgroundImageUri` | `none` | |
50+
| `accent` | `#ee0410` | |
51+
| `themeDark` | `#b3030c` | Used for action icons in the command bar and as a hover color. |
52+
| `themeDarkAlt` | `#b3030c` | |
53+
| `themeDarker` | `#770208` | |
54+
| `themeLight` | `#fd969b` | |
55+
| `themeLightAlt` | `#fd969b` | |
56+
| `themeLighter` | `#fecacd` | |
57+
| `themeLighterAlt` | `#fecacd` | |
58+
| `themePrimary` | `#ee0410` | Primary theme color. Used for icons and default buttons. |
59+
| `themeSecondary` | `#fc6169` | |
60+
| `themeTertiary` | `#fd969b` | |
61+
62+
> [!NOTE]
6963
> There are more tokens registered with the SharePoint Framework. While all of them have values specified on classic sites, only the subset mentioned earlier has values on modern SharePoint sites. For the complete list of available tokens, see the value of the `window.__themeState__.theme` property by using the console in your web browser's developer tools.
7064
7165
## Use theme colors in your customizations
7266

7367
When you scaffold a new SharePoint Framework client-side web part, by default, it uses the fixed blue palette. The following steps describe the necessary adjustments to have the web part use theme colors instead.
7468

75-
> [!NOTE]
69+
> [!NOTE]
7670
> The following steps apply to a SharePoint Framework client-side web part named _HelloWorld_ built by using React. For web parts built using different libraries and other types of customizations, you might need to adjust the modifications accordingly.
7771
7872
### To use theme colors
@@ -81,35 +75,31 @@ When you scaffold a new SharePoint Framework client-side web part, by default, i
8175

8276
![The 'ms-bgColor-themeDark' class selected in Visual Studio Code editor](../images/themed-styles-ms-bgcolor-themedark-class.png)
8377

84-
2. In the same folder, open the **HelloWorld.module.scss** file. Change the `.row` selector to:
78+
1. In the same folder, open the **HelloWorld.module.scss** file. Change the `.row` selector to:
8579

8680
```css
8781
.row {
88-
padding: 20px;
89-
background-color: "[theme: themeDark, default: #005a9e]";
82+
padding: 20px;
83+
background-color: "[theme: themeDark, default: #005a9e]";
9084
}
9185
```
9286

93-
<br/>
94-
9587
![The .row selector extended with background color](../images/themed-styles-row-class.png)
9688

97-
3. In the `.button` selector, change the `background-color` and `border-color` properties to:
89+
1. In the `.button` selector, change the `background-color` and `border-color` properties to:
9890

9991
```css
10092
.button {
101-
/* ... */
102-
background-color: "[theme: themePrimary, default: #0078d7]";
103-
border-color: "[theme: themePrimary, default: #0078d7]";
104-
/* ... */
93+
/* ... */
94+
background-color: "[theme: themePrimary, default: #0078d7]";
95+
border-color: "[theme: themePrimary, default: #0078d7]";
96+
/* ... */
10597
}
10698
```
10799

108-
<br/>
109-
110100
![The .button selector updated with references to theme colors](../images/themed-styles-button-class.png)
111101

112-
4. When you add the web part to a site, the colors used by the web part automatically adapt to the theme colors used by the current site.
102+
1. When you add the web part to a site, the colors used by the web part automatically adapt to the theme colors used by the current site.
113103

114104
![Side-by-side view of the same web part displayed in two sites using different colors. The web part follows the color scheme of each website](../images/themed-styles-side-by-side.png)
115105

0 commit comments

Comments
 (0)