Custom Brand Theming

Important links

• Figma Design

Overview

Enterprise customers need tools that can be suited to their organization. Having an experience that is tailored to their brand allows for:

• A consistent brand identity where mission-critical communication happens

• A more familiar environment for the team's virtual office

• A sense of ownership of the collaboration hub

• Reinforcement that the platform is an integral part of the organization’s infrastructure

The goal is to bring even greater value to our enterprise customers who choose Mattermost for their mission-critical collaboration.

System-wide custom theme configuration

For this project, we are proposing a new capability to create brand-specific themes that can then be leveraged throughout the system. Admins will be able to create multiple custom themes that will then be available for use by end users.

Open

Disabled by default

By default, custom brand themes are disabled (and collapsed).

Open

Once enabled, the section expands and fields are revealed.

NOTE: If previously enabled and fields entered, previous states should be preserved.

Default states when first enabled

When first enabled:

• the brand themes are empty with an Add a brand theme button.

• Enable theme selection field is On

• Allow customer themes is On

• Limit available themes has the default pre-packaged themes added to the input

• Default theme is set to Denim

Brand themes

This enables admins to create their own branded themes for use in the workspace.

Collapsed state

When collapsed, we show swatches for the following colors: sidebarBg, sidebarTextActiveBorder, centerChannelBg, centerChannelColor, buttonBg, dndIndicator, onlineIndicator, awayIndicator

Expanded state - initial proposal for selecting theme colors

For the initial phase of this work, it’s proposed to simply have name field and JSON field for creating a custom field. In the future, depending on need, we want to offer a much richer UI for updating themes.

Enable theme selection

This setting is currently on the Experimental > Features page in the system console. We propose to move this out of experimental and into the customization screen under ‘Custom brand themes’.

On (default)

When this is turned on, the Display > Theme option will show in the Settings modal so users can select their theme.

Off

When this is turned off, the Display > Theme option will be hidden in the user settings modal. Users will not be able to choose a theme.

In addition, when this setting is Off, the Allow Custom Themes and Limit available themes settings below will be hidden.

Allow users to create themes

This setting is currently on the Experimental > Features page in the system console. We propose to move this out of experimental and into the customization screen under ‘Custom brand themes’.

On (default)

When turned on, this shows the Custom Theme option in the Display > Theme section of settings.

Off

When turned off, this hides the Custom Theme option in the Display > Theme section of settings.

Limit available themes

This is a new setting that allows admins to choose which themes are available to end users. At least one theme must be selected here.

If no themes are added here, then all themes in the system will be available to users (including themes shipped with Mattermost).

Default themes added this input are: Denim, Sapphire, Quartz, Indigo, Onyx

Default theme

This setting is currently on the Experimental > Features page in the system console. We propose to move this out of experimental and into the customization screen under ‘Custom brand themes’.

This setting gives admins the option to choose which theme new users have by default. The options available in this field are based on the themes defined above in Limit available themes field above.

If only one option is provided in Limit available themes, this field is disabled and locked to the one single theme.

The initial default theme selected here is Denim.