Dark/Light Theme Syncing with OS
- Matt Birtch
In-progress
Important Links
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