wallpapers in dark/light mode seem to work now

css/base.css

@@ -12,6 +12,7 @@
   --wallpaper-repeat: repeat;
   --wallpaper-blur: 0px;
   --wallpaper-invert: 0;
+  --wallpaper-brightness: 1;
   --wallpaper-size: contain;
   --wallpaper-position: center;
 
@@ -1786,19 +1787,22 @@ img.channel {
   background-repeat: var(--wallpaper-repeat);
   background-size: var(--wallpaper-size);
   background-position: var(--wallpaper-position);
-  filter: blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert));
+  filter: blur(var(--wallpaper-blur))
+    invert(var(--wallpaper-invert))
+    brightness(var(--wallpaper-brightness));
   pointer-events: none;
   z-index: 0;
 }
 
-/* Dark mode wallpaper adjustments: image wallpaper */
+/* Dark mode wallpaper adjustments: image wallpaper *
 #messages-container.dark.wpimg::before {
   filter: brightness(50%);
 }
-/* Dark mode wallpaper adjustments: pattern wallpaper */
+/* Dark mode wallpaper adjustments: pattern wallpaper *
 #messages-container.dark.wppatt::before {
   filter: invert(1);
 }
+*/
 
 /* Scrollable panel where the messages are shown */
 #messages-panel {
@@ -3622,6 +3626,10 @@ ul.phone-country-selector span.country {
   border: 1.5px solid var(--clr-secondary-accent);
 }
 
+img.inverted {
+  filter: invert(1);
+}
+
 div.toast {
   visibility: hidden;
   display: flex;

src/views/messages-view.jsx

@@ -1706,8 +1706,7 @@ class MessagesView extends React.Component {
           this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
 
         const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
-        const darkModeClass = this.props.colorSchema == 'dark' ? 'dark ' + this.props.wallpaperType : '';
+        const darkModeClass = this.props.colorSchema == 'dark' ? 'dark' : '';
-        console.log("colorSchema", this.props.colorSchema, '=>', darkModeClass);
 
         let messagesComponent = (
           <>

src/views/sidepanel-view.jsx

@@ -254,6 +254,7 @@ class SidepanelView extends React.PureComponent {
           <Suspense fallback={<div className="panel-form-row"><FormattedMessage id="loading_note"
             defaultMessage="Loading..." description="Message shown when component is loading"/></div>}>
             <WallpapersView
+              colorSchema={this.props.colorSchema !== 'auto' ? this.props.colorSchema : this.props.systemColorSchema}
               onWallpaperSelected={this.props.onWallpaperSelected}
             />
           </Suspense> :

src/views/tinode-web.jsx

@@ -226,10 +226,9 @@ class TinodeWeb extends React.Component {
       incognitoMode: false,
       // Manually selected color scheme. Default: 'system default' ('auto').
       colorSchema: settings.colorSchema || DEFAULT_COLOR_SCHEME,
-      systemColorScheme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+      systemColorSchema: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
       // Wallpaper settings.
       wallpaper: settings.wallpaper,
-      wallpaperType: settings.wallpaperSize == 0 ? 'wpimg' : 'wppatt',
       wallpaperSize: settings.wallpaperSize,
       wallpaperBlur: 0,
       // Text size in points. Default size: 10pt
@@ -320,14 +319,15 @@ class TinodeWeb extends React.Component {
     // Window/tab visible or invisible for pausing timers.
     document.addEventListener('visibilitychange', this.handleVisibilityEvent);
 
-    document.documentElement.style.colorScheme = this.state.colorSchema;
+    document.documentElement.style.colorScheme = this.state.colorSchema == 'auto' ? 'light dark' : this.state.colorSchema;
     document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);
 
-    this.applyWallpaperSettings(this.state.wallpaper, this.state.wallpaperSize, this.state.wallpaperBlur);
+    this.applyWallpaperSettings(this.state.wallpaper, this.state.wallpaperSize, this.state.wallpaperBlur,
+      this.state.colorSchema == 'auto' ? this.state.systemColorSchema : this.state.colorSchema);
 
     console.log("Wallpaper settings:", this.state.wallpaper, this.state.wallpaperSize, this.state.wallpaperBlur);
     console.log("Wallpaper type:", this.state.wallpaperSize == 0 ? 'wpimg' : 'wppatt');
-    console.log("System color scheme:", this.state.systemColorScheme);
+    console.log("System color scheme:", this.state.systemColorSchema);
 
     // Process background notifications from the service worker.
     if (typeof BroadcastChannel == 'function') {
@@ -1262,17 +1262,27 @@ class TinodeWeb extends React.Component {
   }
 
   // Manual change of color scheme: 'dark', 'light', 'auto'.
-  handleChangeColorSchema(scheme) {
+  handleChangeColorSchema(schema) {
-    console.log("User color scheme change:", scheme);
+    console.log("User color scheme change:", schema);
-    this.setState({colorSchema: scheme});
+    this.setState({colorSchema: schema});
-    LocalStorageUtil.updateObject('settings', {colorSchema: scheme});
+    LocalStorageUtil.updateObject('settings', {colorSchema: schema});
-    document.documentElement.style.colorScheme = scheme;
+    document.documentElement.style.colorScheme = schema == 'auto' ? 'light dark' : schema;
+    this.applyColorSchema(schema, this.state.systemColorSchema, this.state.wallpaperSize);
   }
 
   // System color scheme has changed.
   handleColorSchemeChange(event) {
-    console.log("System color scheme change:", event.matches ? 'dark' : 'not dark');
+    const systemSchema = event.matches ? 'dark' : 'light';
-    this.setState({systemColorScheme: event.matches ? 'dark' : 'light'});
+    console.log("System color scheme change:", systemSchema);
+    this.setState({systemColorSchema: systemSchema});
+    this.applyColorSchema(this.state.colorSchema, systemSchema, this.state.wallpaperSize);
+  }
+
+  applyColorSchema(schema, systemSchema, size) {
+    const effectiveSchema = schema == 'auto' ? systemSchema : schema;
+    console.log("applyColorSchema:", effectiveSchema);
+    document.documentElement.style.setProperty('--wallpaper-invert', effectiveSchema == 'dark' && size ? '1' : '0');
+    document.documentElement.style.setProperty('--wallpaper-brightness', effectiveSchema == 'dark' && !size ? '0.5' : '1');
   }
 
   handleSelectWallpapers() {
@@ -1280,20 +1290,22 @@ class TinodeWeb extends React.Component {
     HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'wallpapers'));
   }
 
-  applyWallpaperSettings(wallpaper, size, blur) {
+  applyWallpaperSettings(wallpaper, size, blur, effectiveSchema) {
     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');
-
+    document.documentElement.style.setProperty('--wallpaper-invert', effectiveSchema == 'dark' && size ? '1' : '0');
+    document.documentElement.style.setProperty('--wallpaper-brightness', effectiveSchema == 'dark' && !size ? '0.5' : '1');
   }
 
   handleWallpaperSelected(wallpaper, size, blur) {
     this.handleError();
     LocalStorageUtil.updateObject('settings', {wallpaper: wallpaper, wallpaperSize: size, wallpaperBlur: blur});
-    this.setState({wallpaper: wallpaper, wallpaperSize: size, wallpaperBlur: blur, wallpaperType: size == 0 ? 'wpimg' : 'wppatt'});
+    this.setState({wallpaper: wallpaper, wallpaperSize: size, wallpaperBlur: blur});
-    this.applyWallpaperSettings(wallpaper, size, blur);
+    this.applyWallpaperSettings(wallpaper, size, blur,
+      this.state.colorSchema == 'auto' ? this.state.systemColorSchema : this.state.colorSchema);
   }
 
   handleChangeTextSize(size) {
@@ -1576,7 +1588,7 @@ class TinodeWeb extends React.Component {
     }
 
     // Reset color scheme.
-    document.documentElement.style.colorScheme = DEFAULT_COLOR_SCHEME;
+    document.documentElement.style.colorScheme = DEFAULT_COLOR_SCHEME == 'auto' ? 'light dark' : DEFAULT_COLOR_SCHEME;
     document.documentElement.style.setProperty('--message-text-size', `${DEFAULT_TEXT_SIZE}pt`);
 
     clearInterval(this.reconnectCountdown);
@@ -2073,7 +2085,7 @@ class TinodeWeb extends React.Component {
   }
 
   render() {
-    const colorSchema = this.state.colorSchema !== 'auto' ? this.state.colorSchema : this.state.systemColorScheme;
+    const colorSchema = this.state.colorSchema !== 'auto' ? this.state.colorSchema : this.state.systemColorSchema;
     return (
       <div id="app-container" ref={this.selfRef}>
         {this.state.contextMenuVisible ?
@@ -2173,7 +2185,8 @@ class TinodeWeb extends React.Component {
             serverVersion={this.state.serverVersion}
             reqCredMethod={this.state.reqCredMethod}
             textSize={this.state.textSize}
-            colorSchema={colorSchema}
+            colorSchema={this.state.colorSchema}
+            systemColorSchema={this.state.systemColorSchema}
             sendOnEnter={this.state.sendOnEnter}
 
             onGlobalSettings={this.handleGlobalSettings}
@@ -2238,7 +2251,6 @@ class TinodeWeb extends React.Component {
             colorSchema={colorSchema}
             sendOnEnter={this.state.sendOnEnter}
             wallpaper={this.state.wallpaper}
-            wallpaperType={this.state.wallpaperType}
 
             forwardMessage={this.state.forwardMessage}
             onCancelForwardMessage={this.handleHideForwardDialog}

src/views/wallpapers.jsx

@@ -86,9 +86,10 @@ export default class WallpapersView extends React.PureComponent {
           <div className="image-grid">
             {imageIndex.patt.map((img, idx) => {
               const selected = this.state.wallpaper === img.name ? ' selected' : '';
+              const dark = this.props.colorSchema == 'dark' ? 'inverted' : null;
               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}
+                <img src={WALLPAPER_DEFAULTS.path + img.name} alt={img.name} className={dark}
                   style={{ width: `${img.size}px`, height: `${img.size}px` }}/>
               </div>
             })}

umd/827.prod.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,t,a){a.r(t),a.d(t,{default:function(){return d}});var l=a(1594),s=a.n(l),r=a(8181),n=a(7151),i=a(9027),c=a(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,selectedType:i.S.type,wallpaper:c[i.S.type][i.S.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(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let t,a,l;e?(e.preventDefault(),a=this.state.tab,t=e.currentTarget.dataset.id,l="patt"==a?0:this.state.blur):(a=i.S.type,t=i.S.index,l=0);const s=c[a][t].name,r="patt"==a?c[a][t].size:0;this.setState({tab:a,wallpaper:s,selectedType:a,blur:l}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const t=e.currentTarget.value;this.setState({blur:t}),"img"==this.state.selectedType&&this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[t])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
+"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,t,a){a.r(t),a.d(t,{default:function(){return d}});var l=a(1594),s=a.n(l),r=a(8181),n=a(7151),i=a(9027),c=a(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,selectedType:i.S.type,wallpaper:c[i.S.type][i.S.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(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let t,a,l;e?(e.preventDefault(),a=this.state.tab,t=e.currentTarget.dataset.id,l="patt"==a?0:this.state.blur):(a=i.S.type,t=i.S.index,l=0);const s=c[a][t].name,r="patt"==a?c[a][t].size:0;this.setState({tab:a,wallpaper:s,selectedType:a,blur:l}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const t=e.currentTarget.value;this.setState({blur:t}),"img"==this.state.selectedType&&this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[t])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"",l="dark"==this.props.colorSchema?"inverted":null;return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,className:l,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
 //# sourceMappingURL=827.prod.js.map

umd/index.dev.js

@@ -11157,8 +11157,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         const avatar = this.state.avatar || true;
         const online = this.state.deleted || topic.isSelfType() ? null : this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
         const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
-        const darkModeClass = this.props.colorSchema == 'dark' ? 'dark ' + this.props.wallpaperType : '';
+        const darkModeClass = this.props.colorSchema == 'dark' ? 'dark' : '';
-        console.log("colorSchema", this.props.colorSchema, '=>', darkModeClass);
         let messagesComponent = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
           id: "messages-container",
           className: darkModeClass
@@ -11964,6 +11963,7 @@ class SidepanelView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
         }]
       }))
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(WallpapersView, {
+      colorSchema: this.props.colorSchema !== 'auto' ? this.props.colorSchema : this.props.systemColorSchema,
       onWallpaperSelected: this.props.onWallpaperSelected
     })) : view === 'contacts' || view == 'archive' || view == 'blocked' ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contacts_view_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
       tinode: this.props.tinode,
@@ -12273,9 +12273,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       messageSounds: !settings.messageSoundsOff,
       incognitoMode: false,
       colorSchema: settings.colorSchema || _config_js__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_COLOR_SCHEME,
-      systemColorScheme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+      systemColorSchema: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
       wallpaper: settings.wallpaper,
-      wallpaperType: settings.wallpaperSize == 0 ? 'wpimg' : 'wppatt',
       wallpaperSize: settings.wallpaperSize,
       wallpaperBlur: 0,
       textSize: settings.textSize || _config_js__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_TEXT_SIZE,
@@ -12342,12 +12341,12 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     window.addEventListener('hashchange', this.handleHashRoute);
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.handleColorSchemeChange);
     document.addEventListener('visibilitychange', this.handleVisibilityEvent);
-    document.documentElement.style.colorScheme = this.state.colorSchema;
+    document.documentElement.style.colorScheme = this.state.colorSchema == 'auto' ? 'light dark' : this.state.colorSchema;
     document.documentElement.style.setProperty('--message-text-size', `${this.state.textSize}pt`);
-    this.applyWallpaperSettings(this.state.wallpaper, this.state.wallpaperSize, this.state.wallpaperBlur);
+    this.applyWallpaperSettings(this.state.wallpaper, this.state.wallpaperSize, this.state.wallpaperBlur, this.state.colorSchema == 'auto' ? this.state.systemColorSchema : this.state.colorSchema);
     console.log("Wallpaper settings:", this.state.wallpaper, this.state.wallpaperSize, this.state.wallpaperBlur);
     console.log("Wallpaper type:", this.state.wallpaperSize == 0 ? 'wpimg' : 'wppatt');
-    console.log("System color scheme:", this.state.systemColorScheme);
+    console.log("System color scheme:", this.state.systemColorSchema);
     if (typeof BroadcastChannel == 'function') {
       const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
       serviceWorkerChannel.addEventListener('message', this.handlePushMessage);
@@ -13145,32 +13144,43 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       this.handleError(err.message, 'err');
     });
   }
-  handleChangeColorSchema(scheme) {
+  handleChangeColorSchema(schema) {
-    console.log("User color scheme change:", scheme);
+    console.log("User color scheme change:", schema);
     this.setState({
-      colorSchema: scheme
+      colorSchema: schema
     });
     _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_16__["default"].updateObject('settings', {
-      colorSchema: scheme
+      colorSchema: schema
     });
-    document.documentElement.style.colorScheme = scheme;
+    document.documentElement.style.colorScheme = schema == 'auto' ? 'light dark' : schema;
+    this.applyColorSchema(schema, this.state.systemColorSchema, this.state.wallpaperSize);
   }
   handleColorSchemeChange(event) {
-    console.log("System color scheme change:", event.matches ? 'dark' : 'not dark');
+    const systemSchema = event.matches ? 'dark' : 'light';
+    console.log("System color scheme change:", systemSchema);
     this.setState({
-      systemColorScheme: event.matches ? 'dark' : 'light'
+      systemColorSchema: systemSchema
     });
+    this.applyColorSchema(this.state.colorSchema, systemSchema, this.state.wallpaperSize);
+  }
+  applyColorSchema(schema, systemSchema, size) {
+    const effectiveSchema = schema == 'auto' ? systemSchema : schema;
+    console.log("applyColorSchema:", effectiveSchema);
+    document.documentElement.style.setProperty('--wallpaper-invert', effectiveSchema == 'dark' && size ? '1' : '0');
+    document.documentElement.style.setProperty('--wallpaper-brightness', effectiveSchema == 'dark' && !size ? '0.5' : '1');
   }
   handleSelectWallpapers() {
     this.handleError();
     _lib_navigation_js__WEBPACK_IMPORTED_MODULE_17__["default"].navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_17__["default"].setUrlSidePanel(window.location.hash, 'wallpapers'));
   }
-  applyWallpaperSettings(wallpaper, size, blur) {
+  applyWallpaperSettings(wallpaper, size, blur, effectiveSchema) {
     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');
+    document.documentElement.style.setProperty('--wallpaper-invert', effectiveSchema == 'dark' && size ? '1' : '0');
+    document.documentElement.style.setProperty('--wallpaper-brightness', effectiveSchema == 'dark' && !size ? '0.5' : '1');
   }
   handleWallpaperSelected(wallpaper, size, blur) {
     this.handleError();
@@ -13182,10 +13192,9 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     this.setState({
       wallpaper: wallpaper,
       wallpaperSize: size,
-      wallpaperBlur: blur,
+      wallpaperBlur: blur
-      wallpaperType: size == 0 ? 'wpimg' : 'wppatt'
     });
-    this.applyWallpaperSettings(wallpaper, size, blur);
+    this.applyWallpaperSettings(wallpaper, size, blur, this.state.colorSchema == 'auto' ? this.state.systemColorSchema : this.state.colorSchema);
   }
   handleChangeTextSize(size) {
     this.setState({
@@ -13474,7 +13483,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_11__.DEFAULT_COLOR_SCHEME;
+    document.documentElement.style.colorScheme = _config_js__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_COLOR_SCHEME == 'auto' ? 'light dark' : _config_js__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_COLOR_SCHEME;
     document.documentElement.style.setProperty('--message-text-size', `${_config_js__WEBPACK_IMPORTED_MODULE_11__.DEFAULT_TEXT_SIZE}pt`);
     clearInterval(this.reconnectCountdown);
     let cleared;
@@ -13907,7 +13916,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     }
   }
   render() {
-    const colorSchema = this.state.colorSchema !== 'auto' ? this.state.colorSchema : this.state.systemColorScheme;
+    const colorSchema = this.state.colorSchema !== 'auto' ? this.state.colorSchema : this.state.systemColorSchema;
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "app-container",
       ref: this.selfRef
@@ -13992,7 +14001,8 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       serverVersion: this.state.serverVersion,
       reqCredMethod: this.state.reqCredMethod,
       textSize: this.state.textSize,
-      colorSchema: colorSchema,
+      colorSchema: this.state.colorSchema,
+      systemColorSchema: this.state.systemColorSchema,
       sendOnEnter: this.state.sendOnEnter,
       onGlobalSettings: this.handleGlobalSettings,
       onSignUp: this.handleNewAccount,
@@ -14050,7 +14060,6 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       colorSchema: colorSchema,
       sendOnEnter: this.state.sendOnEnter,
       wallpaper: this.state.wallpaper,
-      wallpaperType: this.state.wallpaperType,
       forwardMessage: this.state.forwardMessage,
       onCancelForwardMessage: this.handleHideForwardDialog,
       callTopic: this.state.callTopic,

umd/src_views_wallpapers_jsx.dev.js

@@ -125,6 +125,7 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
       className: "image-grid"
     }, _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__.patt.map((img, idx) => {
       const selected = this.state.wallpaper === img.name ? ' selected' : '';
+      const dark = this.props.colorSchema == 'dark' ? 'inverted' : null;
       return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         key: idx,
         "data-id": idx,
@@ -133,6 +134,7 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
       }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
         src: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path + img.name,
         alt: img.name,
+        className: dark,
         style: {
           width: `${img.size}px`,
           height: `${img.size}px`