Dark/Light Theme Syncing with OS

In-progress

https://mattermost.atlassian.net/browse/MM-24952

https://mattermost.atlassian.net/browse/MM-23853 (Webapp)

Figma Design File

Theming Authentication Screens

Since these screens are viewed prior to authenticating, we don’t know the user’s preferences for theming. So we will use the following themes based on the user’s OS settings:

Light Mode: Uses the ‘Sapphire’ theme (formerly ‘default’)

Dark mode: Uses the ‘Midnight’ theme (formerly ‘Windows Dark’)

Server Screen - Light Mode

Server Screen - Dark Mode

 

Sync with OS appearance setting

For users who are authenticated, we will have a new setting called “Sync with OS appearance” in Settings → Display → Theme

On this screen, we will be adding a new toggle at the top for ‘Sync with OS appearance’.

Off

If ‘Sync with OS appearance’ is off, themes show in one group, and users select one theme which displays regardless of the OS settings.

On

If ‘Sync with OS appearance’ is on, themes are shown in 2 categories and users select one from each of the ‘Light’ and ‘Dark’ categories.

Switching the setting on and off with Custom Themes

Whenever Sync is switched from ON to OFF, remember the custom light and dark themes.

  • If ‘Sync with OS appearance’ is switched from ON to OFF, then only one theme can be selected and it will default to the currently applied theme at the time of the switch. If two custom themes were previously selected, save both themes, then choose the currently applied custom theme at the time of the switch as the default.

  • In the case where ‘Sync with OS appearance’ is switched from OFF to ON when a custom theme is selected, we detect whether the custom theme is a light or dark them (based on the center channel background color) and apply the custom theme appropriately, overwriting the appropriate custom theme (if there was one stored)

Defaults

The default settings for ‘Sync with OS appearance’:

  • existing users with custom theme → OFF (retain existing theme)

  • existing users with standard theme → ON

  • new users → ON

Default themes are:

  • Default Light Theme → “Sapphire” (formerly “Mattermost’”)

  • Default Dark Theme → “Midnight” (formerly “Windows Dark”)

Other Notes

Custom themes are currently not editable in mobile, but if a custom theme is chosen in the webapp, a ‘Custom theme’ row will appear checked below the theme group.

For details on the webapp implementation, reference this ticket.

Updated Themes

The design team is in the middle of updating the default theme colors. Along with that will come new names (as noted above):

  • Mattermost Default → Sapphire

  • Organization → Steel

  • Mattermost Dark → Dusk

  • Windows Dark → Midnight