wallpapers

src/config.js

@@ -157,3 +157,6 @@ export const DEFAULT_TEXT_SIZE = 10;
 
 // MIME type for the legacy Drafty form-response data.
 export const DRAFTY_FR_MIME_TYPE_LEGACY = 'application/json'; // Remove in 2026.
+
+// Path to wallpaper images.
+export const WALLPAPER_DEFAULTS = {type: 'patt', index: 0, path:'img/bkg/'};

src/i18n/ar.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/de.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1864,5 +1864,47 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "Wallpapers",
+    "defaultMessage": "Wallpapers",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": false,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "image",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": false,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "pattern",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": false,
+    "obsolete": false
+  },
+  "button_restore": {
+    "translation": "Restore default",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": false,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "Wallpapers",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": false,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "Blur:",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -107,6 +107,10 @@
     "defaultMessage": "Reset",
     "description": "Button [Reset]"
   },
+  "button_restore": {
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default"
+  },
   "button_security": {
     "defaultMessage": "Security",
     "description": "Navigaton button for security panel."
@@ -406,6 +410,10 @@
     "defaultMessage": "Alias",
     "description": "Label for editing user or topic alias"
   },
+  "label_blur_wallpaper": {
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount"
+  },
   "label_client": {
     "defaultMessage": "Client:",
     "description": "Label for a client version"
@@ -980,10 +988,18 @@
     "defaultMessage": "by id",
     "description": "Tab title Find topic by ID"
   },
+  "tabtitle_image": {
+    "defaultMessage": "image",
+    "description": "Tab title Image"
+  },
   "tabtitle_new_group": {
     "defaultMessage": "new group",
     "description": "Tab title New Group"
   },
+  "tabtitle_pattern": {
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern"
+  },
   "tags_editor_no_tags": {
     "defaultMessage": "Add some tags",
     "description": "Tag editor prompt when no tags are found."
@@ -1063,5 +1079,9 @@
   "user_not_found": {
     "defaultMessage": "Not found",
     "description": "In place of a user's full name when the user is not found."
+  },
+  "wallpapers": {
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers."
   }
 }

src/i18n/fr.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/it.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/th.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/uk.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1864,5 +1864,54 @@
     "description": "Count of group topic members",
     "missing": false,
     "obsolete": false
+  },
+  "label_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers:",
+    "description": "Label for selecting wallpapers in Settings",
+    "missing": true,
+    "obsolete": true
+  },
+  "tabtitle_image": {
+    "translation": "",
+    "defaultMessage": "image",
+    "description": "Tab title Image",
+    "missing": true,
+    "obsolete": false
+  },
+  "tabtitle_pattern": {
+    "translation": "",
+    "defaultMessage": "pattern",
+    "description": "Tab title Pattern",
+    "missing": true,
+    "obsolete": false
+  },
+  "sidepanel_title_wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Sidepanel title for WallpapersView.",
+    "missing": true,
+    "obsolete": true
+  },
+  "button_restore": {
+    "translation": "",
+    "defaultMessage": "Restore default",
+    "description": "Reset setting to default",
+    "missing": true,
+    "obsolete": false
+  },
+  "wallpapers": {
+    "translation": "",
+    "defaultMessage": "Wallpapers",
+    "description": "Link or title for working with wallpapers.",
+    "missing": true,
+    "obsolete": false
+  },
+  "label_blur_wallpaper": {
+    "translation": "",
+    "defaultMessage": "Blur:",
+    "description": "Label adjusting blur amount",
+    "missing": true,
+    "obsolete": false
   }
 }

src/index.js

@@ -29,6 +29,7 @@ const messageLoader = {
   'en': _ => import('./i18n.min/en.json'),
   'es': _ => import('./i18n.min/es.json'),
   'fr': _ => import('./i18n.min/fr.json'),
+  'it': _ => import('./i18n.min/it.json'),
   'ko': _ => import('./i18n.min/ko.json'),
   'ro': _ => import('./i18n.min/ro.json'),
   'ru': _ => import('./i18n.min/ru.json'),

src/lib/utils.js

@@ -1,6 +1,7 @@
 // Odds and ends
 
 import { Tinode } from 'tinode-sdk';
+import { WALLPAPER_DEFAULTS } from '../config.js';
 
 // Make shortcut icon appear with a green dot + show unread count in title.
 export function updateFavicon(count) {
@@ -248,3 +249,8 @@ export function cancelablePromise(promise) {
   };
 };
 
+export function defaultWallpaper() {
+  const wallpaperIndex = require('../../img/bkg/index.json');
+  const wp = wallpaperIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index];
+  return {name: `../${WALLPAPER_DEFAULTS.path}${wp.name}`, size: wp.size};
+}

src/views/acc-general-view.jsx

@@ -39,51 +39,61 @@ export default class AccGeneralView extends React.PureComponent {
   render() {
     return (
         <div id="settings-form" className="scrollable-panel">
-          <div className="panel-form-row">
-            <label className="small">
-              <FormattedMessage id="label_color_schema" defaultMessage="Theme:"
-                description="Label for selecting color scheme (dark, light) in Settings" />
-            </label>
-          </div>
-          <div className="panel-form-row">
-            <ul className="quoted">
-              <li key="system">
-                <input type="radio" id="system" name="color-scheme-select" value="light dark"
-                  checked={this.state.colorSchema == 'light dark'}
-                  onChange={this.handleColorSchemaSelected} />&nbsp;
-                <label htmlFor="system">
-                  <FormattedMessage id="color_schema_system" defaultMessage="System default" description="Name of the color schema"/>&nbsp;
-                  <img src="../img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
-                </label>
-              </li>
-              <li key="light">
-                <input type="radio" id="light" name="color-scheme-select" value="light"
-                  checked={this.state.colorSchema == 'light'}
-                  onChange={this.handleColorSchemaSelected} />&nbsp;
-                <label htmlFor="light">
-                  <FormattedMessage id="color_schema_light" defaultMessage="Light" description="Name of the color schema"/>&nbsp;
-                  <i className="material-icons orange large">light_mode</i>
-                </label>
-              </li>
-              <li key="dark">
-                <input type="radio" id="dark" name="color-scheme-select" value="dark"
-                  checked={this.state.colorSchema == 'dark'}
-                  onChange={this.handleColorSchemaSelected} />&nbsp;
-                <label htmlFor="dark">
-                  <FormattedMessage id="color_schema_dark" defaultMessage="Dark" description="Name of the color schema"/>&nbsp;
-                  <i className="material-icons blue large">dark_mode</i>
-                </label>
-              </li>
-            </ul>
+          <div className="panel-form-column">
+            <div className="panel-form-row">
+              <label className="small">
+                <FormattedMessage id="label_color_schema" defaultMessage="Theme:"
+                  description="Label for selecting color scheme (dark, light) in Settings" />
+              </label>
+            </div>
+            <div className="panel-form-row">
+              <ul className="quoted">
+                <li key="system">
+                  <input type="radio" id="system" name="color-scheme-select" value="light dark"
+                    checked={this.state.colorSchema == 'light dark'}
+                    onChange={this.handleColorSchemaSelected} />&nbsp;
+                  <label htmlFor="system">
+                    <FormattedMessage id="color_schema_system" defaultMessage="System default" description="Name of the color schema"/>&nbsp;
+                    <img src="img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
+                  </label>
+                </li>
+                <li key="light">
+                  <input type="radio" id="light" name="color-scheme-select" value="light"
+                    checked={this.state.colorSchema == 'light'}
+                    onChange={this.handleColorSchemaSelected} />&nbsp;
+                  <label htmlFor="light">
+                    <FormattedMessage id="color_schema_light" defaultMessage="Light" description="Name of the color schema"/>&nbsp;
+                    <i className="material-icons orange large">light_mode</i>
+                  </label>
+                </li>
+                <li key="dark">
+                  <input type="radio" id="dark" name="color-scheme-select" value="dark"
+                    checked={this.state.colorSchema == 'dark'}
+                    onChange={this.handleColorSchemaSelected} />&nbsp;
+                  <label htmlFor="dark">
+                    <FormattedMessage id="color_schema_dark" defaultMessage="Dark" description="Name of the color schema"/>&nbsp;
+                    <i className="material-icons blue large">dark_mode</i>
+                  </label>
+                </li>
+              </ul>
+            </div>
           </div>
           <div className="hr" />
-          <div className="panel-form-row">
-            <label className="small">
-              <FormattedMessage id="label_text_size" defaultMessage="Text size:"
-                description="Label adjusting text size" />
-            </label>
+          <div className="panel-form-row clean-clickable">
+            <a onClick={this.props.onSelectWallpapers} className="flat-button">
+              <i className="material-icons">wallpaper</i>&nbsp;
+              <FormattedMessage id="wallpapers" defaultMessage="Wallpapers"
+                  description="Link or title for working with wallpapers." />
+            </a>
           </div>
+          <div className="hr" />
           <div className="panel-form-column">
+            <div className="panel-form-row">
+              <label className="small">
+                <FormattedMessage id="label_text_size" defaultMessage="Text size:"
+                  description="Label adjusting text size" />
+              </label>
+            </div>
             <div className="panel-form-row">
               <input type="range" id="text_size" name="text_size" min="80" max="120" step="10"
                 list="text_size_options" value={this.state.textSize} onChange={this.handleTextSizeChanged} />

src/views/info-view.jsx

@@ -601,8 +601,8 @@ class InfoView extends React.Component {
                   <FormattedMessage id="label_topic_name" defaultMessage="Name"
                     description="Label for editing topic name" />
                 </label></div>
-                <div className="large ellipsized">{this.state.fullName}
-                {this.state.channel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}</div>
+                <div className="large ellipsized">{this.state.fullName}&nbsp;
+                {this.state.channel ? <i className="material-icons">podcasts</i> : null}</div>
               </div>
               {this.state.private ?
                 <div className="group">

src/views/new-topic-view.jsx

@@ -107,19 +107,19 @@ class NewTopicView extends React.Component {
     return (
       <div className="flex-column">
         <ul className="tabbar">
-          <li className={this.state.tabSelected === "find" ? "active" : null}>
+          <li className={this.state.tabSelected === 'find' ? 'active' : null}>
             <a href="#" data-id="find" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_find_user" defaultMessage="find"
                 description="Tab title Find" />
             </a>
           </li>
-          <li className={this.state.tabSelected === "grp" ? "active" : null}>
+          <li className={this.state.tabSelected === 'grp' ? 'active' : null}>
             <a href="#" data-id="grp" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_new_group" defaultMessage="new group"
                 description="Tab title New Group" />
             </a>
           </li>
-          <li className={this.state.tabSelected === "byid" ? "active" : null}>
+          <li className={this.state.tabSelected === 'byid' ? 'active' : null}>
             <a href="#" data-id="byid" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_group_by_id" defaultMessage="by id"
                 description="Tab title Find topic by ID" />

src/views/sidepanel-view.jsx

@@ -18,6 +18,7 @@ import NewTopicView from './new-topic-view.jsx';
 const PasswordResetView = React.lazy(_ => import('./password-reset-view.jsx'));
 import SettingsView from './settings-view.jsx';
 import ValidationView from './validation-view.jsx';
+const WallpapersView = React.lazy(_ => import('./wallpapers.jsx'));
 
 // Panel titles for translation.
 const messages = defineMessages({
@@ -95,6 +96,11 @@ const messages = defineMessages({
     id: 'sidepanel_title_blocked',
     description: 'Sidepanel title for ContactsView-Blocked.',
     defaultMessage: 'Blocked Chats'
+  },
+  wallpapers: {
+    id: 'wallpapers',
+    description: 'Link or title for working with wallpapers.',
+    defaultMessage: 'Wallpapers'
   }
 });
 
@@ -209,6 +215,7 @@ class SidepanelView extends React.PureComponent {
           view === 'acc_general' ?
           <AccGeneralView
             colorSchema={this.props.colorSchema}
+            onSelectWallpapers={this.props.onSelectWallpapers}
             textSize={this.props.textSize}
             sendOnEnter={this.props.sendOnEnter}
             onChangeColorSchema={this.props.onChangeColorSchema}
@@ -243,6 +250,14 @@ class SidepanelView extends React.PureComponent {
             serverAddress={this.props.serverAddress}
             serverVersion={this.props.serverVersion} /> :
 
+          view === 'wallpapers' ?
+          <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
+            defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
+            <WallpapersView
+              onWallpaperSelected={this.props.onWallpaperSelected}
+            />
+          </Suspense> :
+
           (view === 'contacts' || view == 'archive' || view == 'blocked') ?
           <ContactsView
             tinode={this.props.tinode}

src/views/tinode-web.jsx

@@ -29,7 +29,7 @@ import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/hos
 import LocalStorageUtil from '../lib/local-storage.js';
 import HashNavigation from '../lib/navigation.js';
 import { secondsToTime } from '../lib/strformat.js'
-import { updateFavicon } from '../lib/utils.js';
+import { defaultWallpaper, updateFavicon } from '../lib/utils.js';
 
 // Sound to play on message received.
 const POP_SOUND = new Audio('audio/msg.m4a');
@@ -108,6 +108,7 @@ class TinodeWeb extends React.Component {
     this.handleResize = this.handleResize.bind(this);
     this.handleHashRoute = this.handleHashRoute.bind(this);
     this.handleOnline = this.handleOnline.bind(this);
+    this.handleColorSchemeChange = this.handleColorSchemeChange.bind(this);
     this.checkForAppUpdate = this.checkForAppUpdate.bind(this);
     this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);
     this.handleError = this.handleError.bind(this);
@@ -137,6 +138,8 @@ class TinodeWeb extends React.Component {
     this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);
     this.handleChangeTextSize = this.handleChangeTextSize.bind(this);
     this.handleSendOnEnter = this.handleSendOnEnter.bind(this);
+    this.handleSelectWallpapers = this.handleSelectWallpapers.bind(this);
+    this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);
     this.handleSettings = this.handleSettings.bind(this);
     this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
     this.handleShowArchive = this.handleShowArchive.bind(this);
@@ -298,10 +301,23 @@ class TinodeWeb extends React.Component {
     this.handleOnlineOff = _ => { this.handleOnline(false); }
     window.addEventListener('offline', this.handleOnlineOff);
     window.addEventListener('hashchange', this.handleHashRoute);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.handleColorSchemeChange);
+
+    // Window/tab visible or invisible for pausing timers.
+    document.addEventListener('visibilitychange', this.handleVisibilityEvent);
 
     document.documentElement.style.colorScheme = this.state.colorSchema;
     document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);
 
+    const settings = LocalStorageUtil.getObject('settings') || {};
+    if (!settings.wallpaper) {
+      const wallpaper = defaultWallpaper();
+      settings.wallpaper = wallpaper.name || '';
+      settings.wallpaperSize = wallpaper.size || 0;
+      settings.wallpaperBlur = 0;
+    }
+    this.applyWallpaperSettings(settings.wallpaper, settings.wallpaperSize, settings.wallpaperBlur);
+
     // Process background notifications from the service worker.
     if (typeof BroadcastChannel == 'function') {
       const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
@@ -323,9 +339,6 @@ class TinodeWeb extends React.Component {
       this.lastWakeUpCheck = now;
     }, WAKE_UP_TICK);
 
-    // Window/tab visible or invisible for pausing timers.
-    document.addEventListener('visibilitychange', this.handleVisibilityEvent);
-
     this.setState({
       viewportWidth: document.documentElement.clientWidth,
       viewportHeight: document.documentElement.clientHeight
@@ -385,6 +398,7 @@ class TinodeWeb extends React.Component {
     window.removeEventListener('hashchange', this.handleHashRoute);
     window.removeEventListener('online', this.handleOnlineOn);
     window.removeEventListener('offline', this.handleOnlineOff);
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.handleColorSchemeChange);
     document.removeEventListener('visibilitychange', this.handleVisibilityEvent);
 
     clearInterval(this.wakeUpTicker);
@@ -526,8 +540,9 @@ class TinodeWeb extends React.Component {
 
     if (hash.path && hash.path.length > 0) {
       // Left-side panel selector.
-      if (['register','settings','edit','notif','acc_general','security','support','general','crop',
-          'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
+      if (['acc_general','archive','blocked','contacts','cred','crop','edit','general',
+          'newtpk','notif','register','reset','security','settings','support','wallpapers',
+          ''].includes(hash.path[0])) {
         newState.sidePanelSelected = hash.path[0];
       } else {
         console.warn("Unknown sidepanel view", hash.path[0]);
@@ -1235,12 +1250,40 @@ class TinodeWeb extends React.Component {
     });
   }
 
+  // Manual change of color scheme.
   handleChangeColorSchema(scheme) {
     this.setState({colorSchema: scheme});
     LocalStorageUtil.updateObject('settings', {colorSchema: scheme});
     document.documentElement.style.colorScheme = scheme;
   }
 
+  // System color scheme has changed.
+  handleColorSchemeChange(event) {
+    console.log("Color scheme change:", event.matches ? 'dark' : 'not dark');
+    // this.setState({colorSchema: event.matches ? 'dark' : 'light'});
+    // document.documentElement.style.setProperty('--wallpaper-invert', '0');
+  }
+
+  handleSelectWallpapers() {
+    this.handleError();
+    HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'wallpapers'));
+  }
+
+  applyWallpaperSettings(wallpaper, size, blur) {
+    console.log("Applying wallpaper settings:", wallpaper, size, blur);
+    document.documentElement.style.setProperty('--wallpaper-url', `url('${wallpaper}')`);
+    document.documentElement.style.setProperty('--wallpaper-repeat', size ? 'repeat' : 'no-repeat');
+    document.documentElement.style.setProperty('--wallpaper-blur', size ? '0px' : `${blur}px`);
+    document.documentElement.style.setProperty('--wallpaper-size', size ? `${size}px` : 'cover');
+    document.documentElement.style.setProperty('--wallpaper-position', size ? 'unset' : 'center');
+  }
+
+  handleWallpaperSelected(wallpaper, size, blur) {
+    this.handleError();
+    LocalStorageUtil.updateObject('settings', {wallpaper: wallpaper, wallpaperSize: size, wallpaperBlur: blur});
+    this.applyWallpaperSettings(wallpaper, size, blur);
+  }
+
   handleChangeTextSize(size) {
     this.setState({textSize: size | 0});
     LocalStorageUtil.updateObject('settings', {textSize: size});
@@ -1370,6 +1413,8 @@ class TinodeWeb extends React.Component {
       path = 'general';
     } else if ('blocked' == parsed.path[0]) {
       path = 'security';
+    } else if ('wallpapers' == parsed.path[0]) {
+      path = 'acc_general';
     } else if (this.state.myUserId) {
       path = 'contacts';
     }
@@ -2134,6 +2179,8 @@ class TinodeWeb extends React.Component {
             onChangeColorSchema={this.handleChangeColorSchema}
             onTextSizeChanged={this.handleChangeTextSize}
             onSendOnEnterChanged={this.handleSendOnEnter}
+            onSelectWallpapers={this.handleSelectWallpapers}
+            onWallpaperSelected={this.handleWallpaperSelected}
             onCredAdd={this.handleCredAdd}
             onCredDelete={this.handleCredDelete}
             onCredConfirm={this.handleCredConfirm}
@@ -2177,6 +2224,8 @@ class TinodeWeb extends React.Component {
             applicationVisible={this.state.applicationVisible}
             colorSchema={this.state.colorSchema}
             sendOnEnter={this.state.sendOnEnter}
+            wallpaper={this.state.wallpaper}
+
             forwardMessage={this.state.forwardMessage}
             onCancelForwardMessage={this.handleHideForwardDialog}
 

src/views/wallpapers.jsx

@@ -0,0 +1,120 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import HashNavigation from '../lib/navigation.js';
+import { WALLPAPER_DEFAULTS } from '../config.js';
+import imageIndex from '../../img/bkg/index.json';
+
+export default class WallpapersView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tab: WALLPAPER_DEFAULTS.type, // 'patt' | 'img'
+      wallpaper: imageIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index].name,
+      blur: 0,
+    };
+
+    this.blurValues = [0, 1, 2, 4, 8, 16];
+
+    this.handleTabClick = this.handleTabClick.bind(this);
+    this.handleWallpaperSelected = this.handleWallpaperSelected.bind(this);
+    this.handleBlurChanged = this.handleBlurChanged.bind(this);
+  }
+
+  handleTabClick(e) {
+    e.preventDefault();
+    HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'tab', e.currentTarget.dataset.id));
+    this.setState({tab: e.currentTarget.dataset.id});
+  }
+
+  handleWallpaperSelected(e) {
+    let index, type, blur
+    if (!e) {
+      // Restore default.
+      type = WALLPAPER_DEFAULTS.type;
+      index = WALLPAPER_DEFAULTS.index;
+      blur = 0;
+    } else {
+      e.preventDefault();
+      type = this.state.tab;
+      index = e.currentTarget.dataset.id;
+      blur = this.state.blur;
+    }
+    const fname = imageIndex[type][index].name;
+    const size = type == 'patt' ? imageIndex[type][index].size : 0;
+    this.setState({tab: type, wallpaper: fname, blur: 0});
+    this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
+  }
+
+  handleBlurChanged(e) {
+    e.preventDefault();
+    const blur = e.currentTarget.value;
+    this.setState({blur: blur});
+    // Path relative to CSS file.
+    this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
+  }
+
+  render() {
+    return (
+      <div className="flex-column">
+        <div className="panel-form-row clean-clickable">
+          <a className="flat-button" onClick={() => this.handleWallpaperSelected(null)}>
+            <i className="material-icons">undo</i>&nbsp;
+            <FormattedMessage id="button_restore" defaultMessage="Restore default" description="Reset setting to default"/>
+          </a>
+        </div>
+        <ul className="tabbar">
+          <li className={this.state.tab === 'patt' ? 'active' : null}>
+            <a href="#" data-id="patt" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_pattern" defaultMessage="pattern"
+                description="Tab title Pattern" />
+            </a>
+          </li>
+          <li className={this.state.tab === 'img' ? 'active' : null}>
+            <a href="#" data-id="img" onClick={this.handleTabClick}>
+              <FormattedMessage id="tabtitle_image" defaultMessage="image"
+                description="Tab title Image" />
+            </a>
+          </li>
+        </ul>
+        <div id="settings-form" className="scrollable-panel">
+        {this.state.tab === 'patt' ?
+          <div className="image-grid">
+            {imageIndex.patt.map((img, idx) => {
+              const selected = this.state.wallpaper === img.name ? ' selected' : '';
+              return <div key={idx} data-id={idx} className={`image-grid-cell${selected}`}
+                onClick={this.handleWallpaperSelected}>
+                <img src={WALLPAPER_DEFAULTS.path + img.name} alt={img.name}
+                  style={{ width: `${img.size}px`, height: `${img.size}px` }}/>
+              </div>
+            })}
+          </div> :
+          <>
+            <div className="panel-form-column">
+              <div className="panel-form-row">
+                <label className="small">
+                  <FormattedMessage id="label_blur_wallpaper" defaultMessage="Blur:"
+                    description="Label adjusting blur amount" />
+                </label>
+              </div>
+              <div className="panel-form-row">
+                <input type="range" id="blur" name="blur" min="0" max="5" step="1"
+                  value={this.state.blur} onChange={this.handleBlurChanged} />
+              </div>
+            </div>
+            <div className="image-grid">
+              {imageIndex.img.map((img, idx) => {
+                const selected = this.state.wallpaper === img.name ? ' selected' : '';
+                return <div key={idx} data-id={idx} className={`image-grid-cell${selected}`}
+                  onClick={this.handleWallpaperSelected}>
+                  <img src={WALLPAPER_DEFAULTS.path + img.pr} alt={img.name} style={{ width: '100%', height: '100%' }}/>
+                </div>
+              })}
+            </div>
+          </>
+        }</div>
+      </div>
+    );
+  }
+}

src/widgets/contact.jsx

@@ -136,7 +136,7 @@ class Contact extends React.Component {
         <div className="text-box">
           <div><span className={titleClass}>{title}</span>
             {this.props.isGroup ? <i className="material-icons as-badge">group</i> : null}
-            {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
+            {this.props.isChannel ? <i className="material-icons as-badge">podcasts</i> : null}
             {!self ? <ContactBadges badges={icon_badges} /> : null}
             {!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
           </div>

src/widgets/letter-tile.jsx

@@ -31,7 +31,7 @@ export default class LetterTile extends React.PureComponent {
       // If avatar image is invalid, show a placeholder.
       const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
       avatar = <img className={className} alt="avatar" src={url}
-        onError={e=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
+        onError={e=>{e.target.onerror = null; e.target.src="img/broken_image.png"}} />;
     } else {
       avatar = null;
     }