Add support for light/dark themes

components/root/root.jsx

@@ -264,12 +264,20 @@ export default class Root extends React.PureComponent {
             BrowserStore.setLandingPageSeen(true);
         }
 
-        Utils.applyTheme(this.props.theme);
+        if (this.props.theme.type === 'system') {
+            Utils.toggleColorScheme(window.matchMedia('(prefers-color-scheme: dark)'));
+        } else {
+            Utils.applyTheme(this.props.theme);
+        }
     }
 
     componentDidUpdate(prevProps) {
         if (!deepEqual(prevProps.theme, this.props.theme)) {
-            Utils.applyTheme(this.props.theme);
+            if (this.props.theme.type === 'system') {
+                Utils.toggleColorScheme(window.matchMedia('(prefers-color-scheme: dark)'));
+            } else {
+                Utils.applyTheme(this.props.theme);
+            }
         }
         if (this.props.location.pathname === '/') {
             if (this.props.noAccounts) {

components/user_settings/display/user_settings_theme/user_settings_theme.jsx

@@ -102,6 +102,7 @@ export default class ThemeSetting extends React.PureComponent {
         this.props.setRequireConfirm(themeChanged);
 
         this.setState({theme});
+        localStorage.setItem('mm-theme-name', theme.type);
         Utils.applyTheme(theme);
     };
 

packages/mattermost-redux/src/constants/preferences.ts

@@ -63,6 +63,34 @@ const Preferences = {
 
     CATEGORY_THEME: 'theme',
     THEMES: {
+        system: {
+            type: 'System',
+            sidebarBg: '#1e325c',
+            sidebarText: '#ffffff',
+            sidebarUnreadText: '#ffffff',
+            sidebarTextHoverBg: '#28427b',
+            sidebarTextActiveBorder: '#5d89ea',
+            sidebarTextActiveColor: '#ffffff',
+            sidebarHeaderBg: '#192a4d',
+            sidebarHeaderTextColor: '#ffffff',
+            sidebarTeamBarBg: '#14213e',
+            onlineIndicator: '#3db887',
+            awayIndicator: '#ffbc1f',
+            dndIndicator: '#d24b4e',
+            mentionBg: '#ffffff',
+            mentionBj: '#ffffff',
+            mentionColor: '#1e325c',
+            centerChannelBg: '#ffffff',
+            centerChannelColor: '#3f4350',
+            newMessageSeparator: '#cc8f00',
+            linkColor: '#386fe5',
+            buttonBg: '#1c58d9',
+            buttonColor: '#ffffff',
+            errorTextColor: '#d24b4e',
+            mentionHighlightBg: '#ffd470',
+            mentionHighlightLink: '#1b1d22',
+            codeTheme: 'github',
+        },
         denim: {
             type: 'Denim',
             sidebarBg: '#1e325c',

root.jsx

@@ -19,9 +19,16 @@ import {AnnouncementBarTypes} from 'utils/constants';
 import store from 'stores/redux_store.jsx';
 import App from 'components/app';
 
+import * as Utils from './utils/utils';
+
 // This is for anything that needs to be done for ALL react components.
 // This runs before we start to render anything.
 function preRenderSetup(callwhendone) {
+    if (window.matchMedia) {
+        const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        prefersDarkColorScheme.addEventListener('change', Utils.toggleColorScheme);
+    }
+
     window.onerror = (msg, url, line, column, stack) => {
         if (msg === 'ResizeObserver loop limit exceeded') {
             return;

utils/utils.tsx

@@ -1981,3 +1981,14 @@ export function numberToFixedDynamic(num: number, places: number): string {
     }
     return str.slice(0, indexToExclude);
 }
+
+export const toggleColorScheme = (prefersDark: MediaQueryList) => {
+    const name = localStorage.getItem('mm-theme-name');
+    if (name === 'System') {
+        if (prefersDark.matches) {
+            applyTheme(Preferences.THEMES.onyx);
+        } else {
+            applyTheme(Preferences.THEMES.denim);
+        }
+    }
+};