Mattermost-server: Support dark mode and light mode syncing with OS theme setting

Created on 15 Oct 2020 · 4Comments · Source: mattermost/mattermost-server

Summary

Introduces a new setting "Sync with OS appearance settings"
- If this setting is on, it will sync the user’s theme with the OS dark/light mode settings with the selected dark and light themes
- If this setting is off, it will always use the one selected theme regardless of the OS settings
Existing themes will need to now be defined as light or dark in the theme definition somehow
- Ensure there are no breaking changes for users using existing themes
- Will need a solution to migrate custom themes
Group the ‘Copy Theme Colors’ function and JSON code in to another collapsable element within the Display settings called ‘Advanced Theme Editing’
- “See other themes” and “Import theme colors from Slack” has also been moved to this section
Dark and Light Themes can each be Custom themes - so users will now be able have two custom themes when Sync is turned on and each will have its own set of collapsable rows for customization.
Detailed notes in Figma Design File

Other things to consider

If the browser doesn’t support syncing with OS settings, don’t show this setting
What limitations might there be for Windows/Android? Which version of the OS supports this and therefore which should we set the default to TRUE for?
Custom theme generator: https://avasconcelos114.github.io/mattermost-themes/
- already has light and dark themes categorized

Prototypes

Design File

Technical implementation notes:

When renaming the themes, we'll only change the display name, not the internal name. That's already supported since we renamed the themes in the past at some point ("Default" -> "Mattermost", "Windows 10" -> "Windows Dark")
Internally, the themes should be stored in preferences named "theme" (the light theme) and "dark_theme" since this makes compatibility much easier between
Syncing with the OS theme will be account-wide. If the user wants to turn off light/dark theme on a specific device, they'd likely disable the automatic switching of OS themes on that device.
Syncing with the OS theme will apply to all teams.
Is this available on web? What does the desktop app require for this? This might work:

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

AreEnd User Feature Hard Help Wanted TecGo TecReactJS Up For Grabs

Source