dark mode mostly done

src/config.js

@@ -148,3 +148,7 @@ export const SELF_AVATAR_URI = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS
 
 // Toast display duration, milliseconds.
 export const TOAST_DURATION = 3_000;
+
+// Initial/default color scheme.
+export const DEFAULT_COLOR_SCHEME = 'light dark';
+

src/i18n/ar.json

@@ -1738,5 +1738,40 @@
     "description": "Menu item [Unpin] for un-pinning the message.",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/de.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "Dark",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": false,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "Light",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": false,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "System default",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "Theme:",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": false,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "Appearance",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -211,6 +211,18 @@
     "defaultMessage": "Code does not match",
     "description": "Error message when the credential validation code is incorrect."
   },
+  "color_schema_dark": {
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema"
+  },
+  "color_schema_light": {
+    "defaultMessage": "Light",
+    "description": "Name of the color schema"
+  },
+  "color_schema_system": {
+    "defaultMessage": "System default",
+    "description": "Name of the color schema"
+  },
   "contacts_not_found": {
     "defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
     "description": "HTML message shown in ContactList when no contacts are found"
@@ -394,6 +406,10 @@
     "defaultMessage": "Client:",
     "description": "Label for a client version"
   },
+  "label_color_schema": {
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings"
+  },
   "label_content_type": {
     "defaultMessage": "Content type:",
     "description": "Label for file content type (mime)"
@@ -868,6 +884,10 @@
     "defaultMessage": "Account Settings",
     "description": "Sidepanel title for AccountSettingsView."
   },
+  "sidepanel_title_appearance": {
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView."
+  },
   "sidepanel_title_archive": {
     "defaultMessage": "Archived Chats",
     "description": "Sidepanel title for ContactsView-Archive."

src/i18n/fr.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/th.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/uk.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1738,5 +1738,40 @@
     "description": "Notification that text has been copied to clipboard",
     "missing": false,
     "obsolete": false
+  },
+  "color_schema_dark": {
+    "translation": "",
+    "defaultMessage": "Dark",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_light": {
+    "translation": "",
+    "defaultMessage": "Light",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "color_schema_system": {
+    "translation": "",
+    "defaultMessage": "System default",
+    "description": "Name of the color schema",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_color_schema": {
+    "translation": "",
+    "defaultMessage": "Theme:",
+    "description": "Label for selecting color scheme (dark, light) in Settings",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_appearance": {
+    "translation": "",
+    "defaultMessage": "Appearance",
+    "description": "Sidepanel title for AccAppearanceView.",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/acc-notifications-view.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import CheckBox from '../widgets/checkbox.jsx';
 
-export default class EditAccountView extends React.PureComponent {
+export default class AccNotificationsView extends React.PureComponent {
   constructor(props) {
     super(props);
 

src/views/account-settings-view.jsx

@@ -148,6 +148,10 @@ export default class AccountSettingsView extends React.Component {
         </div>
         <div className="hr" />
         <div className="panel-form-column">
+          <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('appearance');}}>
+            <i className="material-icons">tune</i>&nbsp;<FormattedMessage id="sidepanel_title_appearance"
+              defaultMessage="Appearance" description="Sidepanel title for AccAppearanceView." />
+          </a>
           <a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('notif');}}>
             <i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
               defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />

src/views/messages-view.jsx

@@ -1673,7 +1673,7 @@ class MessagesView extends React.Component {
                 onClick={this.goToLatestMessage}>
                 <i className="material-icons">arrow_downward</i>
               </button>
-              <div id="messages-panel" ref={this.handleScrollReference}>
+              <div id="messages-panel" ref={this.handleScrollReference} color-scheme={this.props.colorSchema}>
                 <ul id="scroller" className={chatBoxClass}>
                   {messageNodes}
                 </ul>

src/views/sidepanel-view.jsx

@@ -9,6 +9,7 @@ import TopicCommonView from './topic-common-view.jsx';
 const AccountSettingsView = React.lazy(_ => import('./account-settings-view.jsx'));
 import ContactsView from './contacts-view.jsx';
 const CreateAccountView = React.lazy(_ => import('./create-account-view.jsx'));
+import AccAppearanceView from './acc-appearance-view.jsx';
 import AccNotificationsView from './acc-notifications-view.jsx';
 import AccSecurityView from './acc-security-view.jsx';
 import AccSupportView from './acc-support-view.jsx';
@@ -60,6 +61,11 @@ const messages = defineMessages({
     description: 'Sidepanel title for AccNotificationsView.',
     defaultMessage: 'Notifications'
   },
+  appearance: {
+    id: 'sidepanel_title_appearance',
+    description: 'Sidepanel title for AccAppearanceView.',
+    defaultMessage: 'Appearance'
+  },
   support: {
     id: 'sidepanel_title_acc_support',
     description: 'Sidepanel title for AccSupportView.',
@@ -200,6 +206,13 @@ class SidepanelView extends React.PureComponent {
             onUpdateTagsRequest={this.props.onUpdateAccountTags}
             onError={this.props.onError} /> :
 
+          view === 'appearance' ?
+          <AccAppearanceView
+            colorSchema={this.props.colorSchema}
+            textSize={this.props.textSize}
+            onChangeColorSchema={this.props.onChangeColorSchema}
+            onChangeTextSize={this.props.onChangeTextSize} /> :
+
           view === 'notif' ?
           <AccNotificationsView
             messageSounds={this.props.messageSounds}

src/views/tinode-web.jsx

@@ -18,8 +18,8 @@ import InfoView from './info-view.jsx';
 import MessagesView from './messages-view.jsx';
 import SidepanelView from './sidepanel-view.jsx';
 
-import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH, LOGGING_ENABLED,
+import { API_KEY, APP_NAME, DEFAULT_COLOR_SCHEME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH,
-  MEDIA_BREAKPOINT, WAKE_UP_TICK, WAKE_UP_TIMEOUT } from '../config.js';
+  LOGGING_ENABLED, MEDIA_BREAKPOINT, WAKE_UP_TICK, WAKE_UP_TIMEOUT } from '../config.js';
 import { CALL_STATE_NONE, CALL_STATE_OUTGOING_INITATED,
          CALL_STATE_INCOMING_RECEIVED, CALL_STATE_IN_PROGRESS,
          CALL_HEAD_STARTED }  from '../constants.js';
@@ -134,6 +134,8 @@ class TinodeWeb extends React.Component {
     this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);
     this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
     this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);
+    this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);
+    this.handleChangeTextSize = this.handleChangeTextSize.bind(this);
     this.handleSettings = this.handleSettings.bind(this);
     this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
     this.handleShowArchive = this.handleShowArchive.bind(this);
@@ -213,6 +215,8 @@ class TinodeWeb extends React.Component {
       // "On" is the default, so saving the "off" state.
       messageSounds: !settings.messageSoundsOff,
       incognitoMode: false,
+      colorSchema: settings.colorSchema || DEFAULT_COLOR_SCHEME, // default: system default
+      textSize: settings.textSize || 10, // default size: 10pt
       // Persistent request to enable alerts.
       desktopAlerts: persist && !!settings.desktopAlerts,
       // Enable / disable checkbox.
@@ -293,6 +297,8 @@ class TinodeWeb extends React.Component {
     window.addEventListener('offline', this.handleOnlineOff);
     window.addEventListener('hashchange', this.handleHashRoute);
 
+    document.documentElement.style.colorScheme = this.state.colorSchema;
+
     // Process background notifications from the service worker.
     if (typeof BroadcastChannel == 'function') {
       const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
@@ -517,7 +523,7 @@ class TinodeWeb extends React.Component {
 
     if (hash.path && hash.path.length > 0) {
       // Left-side panel selector.
-      if (['register','settings','edit','notif','security','support','general','crop',
+      if (['register','settings','edit','notif','appearance','security','support','general','crop',
           'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
         newState.sidePanelSelected = hash.path[0];
       } else {
@@ -1204,6 +1210,18 @@ class TinodeWeb extends React.Component {
     });
   }
 
+  handleChangeColorSchema(scheme) {
+    this.setState({colorSchema: scheme});
+    LocalStorageUtil.updateObject('settings', {colorSchema: scheme});
+    document.documentElement.style.colorScheme = scheme;
+  }
+
+  handleChangeTextSize(size) {
+    this.setState({textSize: size | 0});
+    LocalStorageUtil.updateObject('settings', {textSize: size});
+    document.documentElement.style.fontSize = `${size}pt`;
+  }
+
   handleUpdateAccountTagsRequest(_, tags) {
     this.tinode.getMeTopic().setMeta({tags: tags})
       .catch(err => this.handleError(err.message, 'err'));
@@ -1316,7 +1334,7 @@ class TinodeWeb extends React.Component {
   handleSidepanelCancel() {
     const parsed = HashNavigation.parseUrlHash(window.location.hash);
     let path = '';
-    if (['security','support','general','notif'].includes(parsed.path[0])) {
+    if (['security','support','general','notif','appearance'].includes(parsed.path[0])) {
       path = 'edit';
     } else if ('crop' == parsed.path[0]) {
       path = 'general';
@@ -1470,6 +1488,9 @@ class TinodeWeb extends React.Component {
       firebaseDelToken(this.fcm);
     }
 
+    // Reset color scheme.
+    document.documentElement.style.colorScheme = DEFAULT_COLOR_SCHEME;
+
     clearInterval(this.reconnectCountdown);
 
     let cleared;
@@ -2059,6 +2080,8 @@ class TinodeWeb extends React.Component {
             secureConnection={this.state.secureConnection}
             serverVersion={this.state.serverVersion}
             reqCredMethod={this.state.reqCredMethod}
+            textSize={this.state.textSize}
+            colorSchema={this.state.colorSchema}
 
             onGlobalSettings={this.handleGlobalSettings}
             onSignUp={this.handleNewAccount}
@@ -2073,6 +2096,8 @@ class TinodeWeb extends React.Component {
             onTogglePushNotifications={this.toggleFCMToken}
             onToggleMessageSounds={this.handleToggleMessageSounds}
             onToggleIncognitoMode={this.handleToggleIncognitoMode}
+            onChangeColorSchema={this.handleChangeColorSchema}
+            onChangeTextSize={this.handleChangeTextSize}
             onCredAdd={this.handleCredAdd}
             onCredDelete={this.handleCredDelete}
             onCredConfirm={this.handleCredConfirm}
@@ -2114,6 +2139,7 @@ class TinodeWeb extends React.Component {
             serverVersion={this.state.serverVersion}
             serverAddress={this.state.serverAddress}
             applicationVisible={this.state.applicationVisible}
+            colorSchema={this.state.colorSchema}
 
             forwardMessage={this.state.forwardMessage}
             onCancelForwardMessage={this.handleHideForwardDialog}

umd/index.dev.js

@@ -7022,6 +7022,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   BROKEN_IMAGE_SIZE: function() { return /* binding */ BROKEN_IMAGE_SIZE; },
 /* harmony export */   CHANNEL_ACCESS_MODE: function() { return /* binding */ CHANNEL_ACCESS_MODE; },
 /* harmony export */   CLICKABLE_URL_SCHEMES: function() { return /* binding */ CLICKABLE_URL_SCHEMES; },
+/* harmony export */   DEFAULT_COLOR_SCHEME: function() { return /* binding */ DEFAULT_COLOR_SCHEME; },
 /* harmony export */   DEFAULT_HOST: function() { return /* binding */ DEFAULT_HOST; },
 /* harmony export */   DEFAULT_P2P_ACCESS_MODE: function() { return /* binding */ DEFAULT_P2P_ACCESS_MODE; },
 /* harmony export */   EDIT_PREVIEW_LENGTH: function() { return /* binding */ EDIT_PREVIEW_LENGTH; },
@@ -7120,6 +7121,7 @@ const WAKE_UP_TICK = 1000;
 const MIN_SWIPE_DISTANCE = REM_SIZE * 3;
 const SELF_AVATAR_URI = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZpZXdCb3g9IjAgMCAxNyAxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMy41NjIgMXYxNS40NTlsNC42ODYtMy4yNyA0Ljc1MiAzLjI2di0xNS40NDloLTkuNDM4ek0xMiAxNC41NTFsLTMuNzU2LTIuNTc4LTMuNjgxIDIuNTY4di0xMi41NDFoNy40Mzd2MTIuNTUxeiIgZmlsbD0iIzU1NTU1NSIgLz48L3N2Zz4=';
 const TOAST_DURATION = 3_000;
+const DEFAULT_COLOR_SCHEME = 'light dark';
 
 /***/ }),
 
@@ -8453,15 +8455,15 @@ const PACKAGE_VERSION = "0.24.0";
 
 /***/ }),
 
-/***/ "./src/views/acc-notifications-view.jsx":
+/***/ "./src/views/acc-appearance-view.jsx":
-/*!**********************************************!*\
+/*!*******************************************!*\
-  !*** ./src/views/acc-notifications-view.jsx ***!
+  !*** ./src/views/acc-appearance-view.jsx ***!
-  \**********************************************/
+  \*******************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ EditAccountView; }
+/* harmony export */   "default": function() { return /* binding */ AccAppearanceView; }
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -8471,7 +8473,126 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-class EditAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+class AccAppearanceView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+  constructor(props) {
+    super(props);
+    this.state = {
+      colorSchema: props.colorSchema || 'light dark'
+    };
+    this.handleColorSchemaSelected = this.handleColorSchemaSelected.bind(this);
+  }
+  handleColorSchemaSelected(e) {
+    this.setState({
+      colorSchema: e.currentTarget.value
+    });
+    this.props.onChangeColorSchema(e.currentTarget.value);
+  }
+  render() {
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      id: "settings-form",
+      className: "scrollable-panel"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-row"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      className: "small"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "label_color_schema",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Theme:"
+      }]
+    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-row"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+      className: "quoted"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+      key: "system"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+      type: "radio",
+      id: "system",
+      name: "color-scheme-select",
+      value: "light dark",
+      checked: this.state.colorSchema === 'light dark',
+      onChange: this.handleColorSchemaSelected
+    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      htmlFor: "system"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "color_schema_system",
+      defaultMessage: [{
+        "type": 0,
+        "value": "System default"
+      }]
+    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+      src: "../img/routine.svg",
+      style: {
+        verticalAlign: 'top',
+        width: '1.6rem',
+        height: '1.6rem'
+      }
+    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+      key: "light"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+      type: "radio",
+      id: "light",
+      name: "color-scheme-select",
+      value: "light",
+      checked: this.state.colorSchema === 'light',
+      onChange: this.handleColorSchemaSelected
+    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      htmlFor: "light"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "color_schema_light",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Light"
+      }]
+    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons orange large"
+    }, "light_mode"))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+      key: "dark"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+      type: "radio",
+      id: "dark",
+      name: "color-scheme-select",
+      value: "dark",
+      checked: this.state.colorSchema === 'dark',
+      onChange: this.handleColorSchemaSelected
+    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      htmlFor: "dark"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "color_schema_dark",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dark"
+      }]
+    }), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons blue large"
+    }, "dark_mode"))))));
+  }
+}
+;
+
+/***/ }),
+
+/***/ "./src/views/acc-notifications-view.jsx":
+/*!**********************************************!*\
+  !*** ./src/views/acc-notifications-view.jsx ***!
+  \**********************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": function() { return /* binding */ AccNotificationsView; }
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
+/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _widgets_checkbox_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../widgets/checkbox.jsx */ "./src/widgets/checkbox.jsx");
+
+
+
+class AccNotificationsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
   constructor(props) {
     super(props);
     this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
@@ -11511,7 +11632,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           className: "material-icons"
         }, "arrow_downward")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
           id: "messages-panel",
-          ref: this.handleScrollReference
+          ref: this.handleScrollReference,
+          "color-scheme": this.props.colorSchema
         }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
           id: "scroller",
           className: chatBoxClass
@@ -12010,13 +12132,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _widgets_side_navbar_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../widgets/side-navbar.jsx */ "./src/widgets/side-navbar.jsx");
 /* harmony import */ var _topic_common_view_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./topic-common-view.jsx */ "./src/views/topic-common-view.jsx");
 /* harmony import */ var _contacts_view_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./contacts-view.jsx */ "./src/views/contacts-view.jsx");
-/* harmony import */ var _acc_notifications_view_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./acc-notifications-view.jsx */ "./src/views/acc-notifications-view.jsx");
+/* harmony import */ var _acc_appearance_view_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./acc-appearance-view.jsx */ "./src/views/acc-appearance-view.jsx");
-/* harmony import */ var _acc_security_view_jsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./acc-security-view.jsx */ "./src/views/acc-security-view.jsx");
+/* harmony import */ var _acc_notifications_view_jsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./acc-notifications-view.jsx */ "./src/views/acc-notifications-view.jsx");
-/* harmony import */ var _acc_support_view_jsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./acc-support-view.jsx */ "./src/views/acc-support-view.jsx");
+/* harmony import */ var _acc_security_view_jsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./acc-security-view.jsx */ "./src/views/acc-security-view.jsx");
-/* harmony import */ var _login_view_jsx__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./login-view.jsx */ "./src/views/login-view.jsx");
+/* harmony import */ var _acc_support_view_jsx__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./acc-support-view.jsx */ "./src/views/acc-support-view.jsx");
-/* harmony import */ var _new_topic_view_jsx__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./new-topic-view.jsx */ "./src/views/new-topic-view.jsx");
+/* harmony import */ var _login_view_jsx__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./login-view.jsx */ "./src/views/login-view.jsx");
-/* harmony import */ var _settings_view_jsx__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./settings-view.jsx */ "./src/views/settings-view.jsx");
+/* harmony import */ var _new_topic_view_jsx__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./new-topic-view.jsx */ "./src/views/new-topic-view.jsx");
-/* harmony import */ var _validation_view_jsx__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./validation-view.jsx */ "./src/views/validation-view.jsx");
+/* harmony import */ var _settings_view_jsx__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./settings-view.jsx */ "./src/views/settings-view.jsx");
+/* harmony import */ var _validation_view_jsx__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./validation-view.jsx */ "./src/views/validation-view.jsx");
 
 
 
@@ -12031,6 +12154,7 @@ const CreateAccountView = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ =>
 
 
 
+
 const PasswordResetView = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_libphonenumber-js_examples_mobile_json_js-node_modules_libphonenumber-js-7e28c7"), __webpack_require__.e("src_views_password-reset-view_jsx")]).then(__webpack_require__.bind(__webpack_require__, /*! ./password-reset-view.jsx */ "./src/views/password-reset-view.jsx")));
 
 
@@ -12091,6 +12215,13 @@ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
       "value": "Notifications"
     }]
   },
+  appearance: {
+    id: "sidepanel_title_appearance",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Appearance"
+    }]
+  },
   support: {
     id: "sidepanel_title_acc_support",
     defaultMessage: [{
@@ -12182,7 +12313,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       onClearError: this.props.onError
     }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_load_spinner_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
       show: this.props.loadSpinnerVisible
-    }), view === 'login' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_login_view_jsx__WEBPACK_IMPORTED_MODULE_10__["default"], {
+    }), view === 'login' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_login_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
       login: this.props.login,
       disabled: this.props.loginDisabled,
       persist: this.props.persist,
@@ -12205,7 +12336,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       onCreateAccount: this.props.onCreateAccount,
       onCancel: this.props.onCancel,
       onError: this.props.onError
-    })) : view === 'settings' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_settings_view_jsx__WEBPACK_IMPORTED_MODULE_12__["default"], {
+    })) : view === 'settings' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_settings_view_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
       transport: this.props.transport,
       serverAddress: this.props.serverAddress,
       secureConnection: this.props.secureConnection,
@@ -12240,7 +12371,12 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       onUpdateTopicDesc: this.props.onUpdateAccountDesc,
       onUpdateTagsRequest: this.props.onUpdateAccountTags,
       onError: this.props.onError
-    }) : view === 'notif' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_notifications_view_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    }) : view === 'appearance' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_appearance_view_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
+      colorSchema: this.props.colorSchema,
+      textSize: this.props.textSize,
+      onChangeColorSchema: this.props.onChangeColorSchema,
+      onChangeTextSize: this.props.onChangeTextSize
+    }) : view === 'notif' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_notifications_view_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
       messageSounds: this.props.messageSounds,
       desktopAlerts: this.props.desktopAlerts,
       desktopAlertsEnabled: this.props.desktopAlertsEnabled,
@@ -12248,7 +12384,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       onTogglePushNotifications: this.props.onTogglePushNotifications,
       onToggleMessageSounds: this.props.onToggleMessageSounds,
       onToggleIncognitoMode: this.props.onToggleIncognitoMode
-    }) : view === 'security' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_security_view_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
+    }) : view === 'security' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_security_view_jsx__WEBPACK_IMPORTED_MODULE_9__["default"], {
       tinode: this.props.tinode,
       onUpdateAccountDesc: this.props.onUpdateAccountDesc,
       onUpdatePassword: this.props.onUpdatePassword,
@@ -12256,7 +12392,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       onDeleteAccount: this.props.onDeleteAccount,
       onShowAlert: this.props.onShowAlert,
       onShowBlocked: this.props.onShowBlocked
-    }) : view === 'support' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_support_view_jsx__WEBPACK_IMPORTED_MODULE_9__["default"], {
+    }) : view === 'support' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_acc_support_view_jsx__WEBPACK_IMPORTED_MODULE_10__["default"], {
       serverAddress: this.props.serverAddress,
       serverVersion: this.props.serverVersion
     }) : view === 'contacts' || view == 'archive' || view == 'blocked' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contacts_view_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
@@ -12270,14 +12406,14 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
       showContextMenu: this.props.showContextMenu,
       onTopicSelected: this.props.onTopicSelected,
       onShowArchive: this.props.onShowArchive
-    }) : view === 'newtpk' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_new_topic_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
+    }) : view === 'newtpk' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_new_topic_view_jsx__WEBPACK_IMPORTED_MODULE_12__["default"], {
       tinode: this.props.tinode,
       searchResults: this.props.searchResults,
       onInitFind: this.props.onInitFind,
       onSearchContacts: this.props.onSearchContacts,
       onCreateTopic: this.props.onCreateTopic,
       onError: this.props.onError
-    }) : view === 'cred' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_validation_view_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
+    }) : view === 'cred' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_validation_view_jsx__WEBPACK_IMPORTED_MODULE_14__["default"], {
       credCode: this.props.credCode,
       credMethod: this.props.credMethod,
       credToken: this.props.credToken,
@@ -12489,6 +12625,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);
     this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
     this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);
+    this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);
+    this.handleChangeTextSize = this.handleChangeTextSize.bind(this);
     this.handleSettings = this.handleSettings.bind(this);
     this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
     this.handleShowArchive = this.handleShowArchive.bind(this);
@@ -12555,6 +12693,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       serverVersion: "no connection",
       messageSounds: !settings.messageSoundsOff,
       incognitoMode: false,
+      colorSchema: settings.colorSchema || _config_js__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_COLOR_SCHEME,
+      textSize: settings.textSize || 10,
       desktopAlerts: persist && !!settings.desktopAlerts,
       desktopAlertsEnabled: ((0,_lib_host_name_js__WEBPACK_IMPORTED_MODULE_16__.isSecureConnection)() || (0,_lib_host_name_js__WEBPACK_IMPORTED_MODULE_16__.isLocalHost)()) && typeof firebase_app__WEBPACK_IMPORTED_MODULE_2__.initializeApp != 'undefined' && typeof navigator != 'undefined' && typeof FIREBASE_INIT != 'undefined',
       firebaseToken: persist ? _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].getObject('firebase-token') : null,
@@ -12615,6 +12755,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     };
     window.addEventListener('offline', this.handleOnlineOff);
     window.addEventListener('hashchange', this.handleHashRoute);
+    document.documentElement.style.colorScheme = this.state.colorSchema;
     if (typeof BroadcastChannel == 'function') {
       const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
       serviceWorkerChannel.addEventListener('message', this.handlePushMessage);
@@ -12822,7 +12963,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       newTopicTabSelected: hash.params.tab
     };
     if (hash.path && hash.path.length > 0) {
-      if (['register', 'settings', 'edit', 'notif', 'security', 'support', 'general', 'crop', 'cred', 'reset', 'newtpk', 'archive', 'blocked', 'contacts', ''].includes(hash.path[0])) {
+      if (['register', 'settings', 'edit', 'notif', 'appearance', 'security', 'support', 'general', 'crop', 'cred', 'reset', 'newtpk', 'archive', 'blocked', 'contacts', ''].includes(hash.path[0])) {
         newState.sidePanelSelected = hash.path[0];
       } else {
         console.warn("Unknown sidepanel view", hash.path[0]);
@@ -13397,6 +13538,24 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       this.handleError(err.message, 'err');
     });
   }
+  handleChangeColorSchema(scheme) {
+    this.setState({
+      colorSchema: scheme
+    });
+    _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].updateObject('settings', {
+      colorSchema: scheme
+    });
+    document.documentElement.style.colorScheme = scheme;
+  }
+  handleChangeTextSize(size) {
+    this.setState({
+      textSize: size | 0
+    });
+    _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].updateObject('settings', {
+      textSize: size
+    });
+    document.documentElement.style.fontSize = `${size}pt`;
+  }
   handleUpdateAccountTagsRequest(_, tags) {
     this.tinode.getMeTopic().setMeta({
       tags: tags
@@ -13510,7 +13669,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
   handleSidepanelCancel() {
     const parsed = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_18__["default"].parseUrlHash(window.location.hash);
     let path = '';
-    if (['security', 'support', 'general', 'notif'].includes(parsed.path[0])) {
+    if (['security', 'support', 'general', 'notif', 'appearance'].includes(parsed.path[0])) {
       path = 'edit';
     } else if ('crop' == parsed.path[0]) {
       path = 'general';
@@ -13665,6 +13824,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     if (this.state.firebaseToken) {
       (0,firebase_messaging__WEBPACK_IMPORTED_MODULE_3__.deleteToken)(this.fcm);
     }
+    document.documentElement.style.colorScheme = _config_js__WEBPACK_IMPORTED_MODULE_12__.DEFAULT_COLOR_SCHEME;
     clearInterval(this.reconnectCountdown);
     let cleared;
     if (this.tinode) {
@@ -14176,6 +14336,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       secureConnection: this.state.secureConnection,
       serverVersion: this.state.serverVersion,
       reqCredMethod: this.state.reqCredMethod,
+      textSize: this.state.textSize,
+      colorSchema: this.state.colorSchema,
       onGlobalSettings: this.handleGlobalSettings,
       onSignUp: this.handleNewAccount,
       onSettings: this.handleSettings,
@@ -14189,6 +14351,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       onTogglePushNotifications: this.toggleFCMToken,
       onToggleMessageSounds: this.handleToggleMessageSounds,
       onToggleIncognitoMode: this.handleToggleIncognitoMode,
+      onChangeColorSchema: this.handleChangeColorSchema,
+      onChangeTextSize: this.handleChangeTextSize,
       onCredAdd: this.handleCredAdd,
       onCredDelete: this.handleCredDelete,
       onCredConfirm: this.handleCredConfirm,
@@ -14224,6 +14388,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       serverVersion: this.state.serverVersion,
       serverAddress: this.state.serverAddress,
       applicationVisible: this.state.applicationVisible,
+      colorSchema: this.state.colorSchema,
       forwardMessage: this.state.forwardMessage,
       onCancelForwardMessage: this.handleHideForwardDialog,
       callTopic: this.state.callTopic,

umd/src_views_account-settings-view_jsx.dev.js

@@ -215,6 +215,21 @@ class AccountSettingsView extends (react__WEBPACK_IMPORTED_MODULE_0___default().
     }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-column"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+      href: "#",
+      className: "flat-button",
+      onClick: e => {
+        e.preventDefault();
+        this.props.onNavigate('appearance');
+      }
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      className: "material-icons"
+    }, "tune"), "\xA0", react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
+      id: "sidepanel_title_appearance",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Appearance"
+      }]
+    })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
       className: "flat-button",
       onClick: e => {