You can add or edit a theme to create a visual experience in the digital workplace that matches your organization's branding.
Considerations
- Accessibility: Due to color choice and contrast ratios with other colors, not all color combinations will meet WCAG's accessibility guidelines for visual impairments. You can check the contrast ratio by using an internet contrast checker.
Who can do this?
- Workplace administrators
Add a theme
- On the Top Bar, select
Admin Settings.
- Under Design in the left side panel, select
Themes.
- Select Add New Theme.
- You can review and change the settings in the Configuration side panel. For more details, see the Theme Settings section below.
- (Optional) Select Preview at the bottom of the Configuration side panel and navigate around the digital workplace to see a preview of the changes. Select Clear theme preview in the Configuration side panel or on the Theme page to clear the preview. See Preview a theme for more information.
- Select Create.
- (Optional) To apply the theme to the digital workplace, see Apply a theme.
Edit a theme
To edit an existing theme:
- On the Top Bar, select
- Under Design in the left side panel, select
- Next to the theme to be edited, select
Menu.
- You can review and change the settings in the Configuration side panel. For more details, see the Theme Settings section below.
- (Optional) Select Preview at the bottom of the Configuration side panel and navigate around the digital workplace to see a preview of the changes. Select Clear theme preview in the Configuration side panel or on the Theme page to clear the preview. See Preview a theme for more information.
- Select Update.
- (Optional) To apply the theme to the digital workplace, see Apply a theme.
Theme Settings
The following tables describe the settings used for configuring your digital workplace's theme.
Name
| Setting | Description |
|---|---|
| Name | Enter a name for the theme. |
Light and Dark Colors
| Setting | Description |
|---|---|
| Use Separate Dark/Light Colors |
Toggle to define separate color palettes for Dark and Light Modes in the digital workplace. By default, Light Mode is turned on for users in the digital workplace. However, individual users can turn Dark Mode on. |
| Primary Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the primary color in the digital workplace. To enter a hexadecimal color code, use the format: This setting affects:
|
| Secondary Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the secondary color in the digital workplace. To enter a hexadecimal color code, use the format: This setting affects:
|
| Text Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the text color in the digital workplace. To enter a hexadecimal color code, use the format: This setting affects:
|
| Background Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the background color of pages in the digital workplace. To enter a hexadecimal color code, use the format: This setting affects:
|
| Border Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the border color in the digital workplace. To enter a hexadecimal color code, use the format: This setting affects:
|
Components
| Setting | Description |
|---|---|
| Avatar Style |
Select a display style for user profile photos in the digital workplace from the dropdown. Options include:
This setting affects:
|
| Widget Border Style |
Select the border style for widgets in the digital workplace from the dropdown. Options include:
This setting affects:
|
| Widget Corner Style |
Select the corner style for widgets' borders in the digital workplace from the dropdown. Options include:
If Widget Border Style is set to None, this option will not be available. This setting affects:
|
Border Radius
| Setting | Description |
|---|---|
| Border Radius |
Drag the slider to the desired border radius for components in the digital workplace. Options range from 0px to 25px. The default value is 4px. This setting affects:
|
Light Link Style
| Setting | Description |
|---|---|
| Link Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code to be used for the link color in Light Mode. To enter a hexadecimal color code, use the format: This setting affects:
|
| Link Hover Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code to be used for the link hover color in Light Mode. To enter a hexadecimal color code, use the format: This setting affects:
|
| Light Link Styles |
Select an underlined style for hyperlinks in the digital workplace in Light Mode. Options include:
This setting affects:
|
Dark Link Style Settings
The Dark Link Style section is only visible if Use Separate Dark/Light Colors is toggled to On.
| Setting | Description |
|---|---|
| Link Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code to be used for the link color in Dark Mode. To enter a hexadecimal color code, use the format: This setting affects:
|
| Link Hover Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code to be used for the link hover color in Dark Mode. To enter a hexadecimal color code, use the format: This setting affects:
|
| Link Style |
Select an underlined style for hyperlinks in the digital workplace in Dark Mode. Options include:
This setting affects:
|
Global Widget Palette
| Setting | Description |
|---|---|
| Theme | Displays the Theme color palette, which includes the theme's current color choices. Users viewing the digital workplace in Light Mode will see colors from the theme's Light Colors. Alternatively, users viewing the digital workplace in Dark Mode will see colors from the theme's Dark Colors. |
| Accent | Select a color swatch from the color palette or enter the color's hexadecimal color code to add accent colors to the Global Color Palette that users can choose to use. |
| System |
Displays the System color palette, which includes all the currently available system colors users can choose to use from the Global Color Palette. The System palette is not displayed in the Rich Text Editor's color palettes. |
| Hide Hex and System Colors | Toggle to hide the System colors palette and the ability to enter a hexadecimal color code from all Global Palettes, including the Rich Text Editor's color palettes. |
Font Options Settings
| Setting | Description |
|---|---|
| Font | Select a font from the dropdown for text throughout the digital workplace. |
| Font Size | Drag the slider to the desired font size for text in the digital workplace. Options range from 8px to 25px. The default value is 14px. |
| Font Weight Light | Drag the slider to the desired relative weight for light-weighted text in the digital workplace. Options range from 100 to 1000 font weight. The default value is 300. |
| Font Weight Regular | Drag the slider to the desired relative weight for regular-weighted text in the digital workplace. Options range from 100 to 1000 font weight. The default value is 400. |
| Font Weight Medium | Drag the slider to the desired relative weight for medium-weighted text in the digital workplace. Options range from 100 to 1000 font weight. The default value is 500. |
| Font Weight Bold | Drag the slider to the desired relative weight for heavy-weighted text in the digital workplace. Options range from 100 to 1000 font weight. The default value is 700. |
Calendar Light Colors
| Setting | Description |
|---|---|
| My Events Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the background color of your events in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
| Calendar Background Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the Personal Calendar's background color in Light Mode. To enter a hexadecimal color code, use the format: |
| Event Text Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for text color for events in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
| Events Color 1 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the first displayed calendar's background color in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
| Events Color 2 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the second displayed calendar's background color in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
| Events Color 3 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the third displayed calendar's background color in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
| Events Color 4 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the fourth displayed calendar's background color in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
| Events Color 5 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the fifth displayed calendar's background color in the Personal Calendar in Light Mode. To enter a hexadecimal color code, use the format: |
Calendar Dark Colors
| Setting | Description |
|---|---|
| My Events Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the background color of your events in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |
| Calendar Background Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the Personal Calendar's background color in Dark Mode. To enter a hexadecimal color code, use the format: |
| Event Text Color |
Select a color swatch from the color palette or enter the color's hexadecimal color code for text color for events in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |
| Events Color 1 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the first displayed calendar's background color in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |
| Events Color 2 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the second displayed calendar's background color in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |
| Events Color 3 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the third displayed calendar's background color in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |
| Events Color 4 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the fourth displayed calendar's background color in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |
| Events Color 5 |
Select a color swatch from the color palette or enter the color's hexadecimal color code for the fifth displayed calendar's background color in the Personal Calendar in Dark Mode. To enter a hexadecimal color code, use the format: |