diff --git a/data/web/telegram.org/js/telegram-web-app.js b/data/web/telegram.org/js/telegram-web-app.js
index e82a3918d3..13726d539d 100644
--- a/data/web/telegram.org/js/telegram-web-app.js
+++ b/data/web/telegram.org/js/telegram-web-app.js
@@ -395,12 +395,19 @@
   function parseColorToHex(color) {
     color += '';
     var match;
-    if (/^#([0-9a-f]){6}$/i.test(color)) {
-      return color.toLowerCase();
+    if (match = /^\s*#([0-9a-f]{6})\s*$/i.exec(color)) {
+      return '#' + match[1].toLowerCase();
     }
-    else if (match = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(color)) {
+    else if (match = /^\s*#([0-9a-f])([0-9a-f])([0-9a-f])\s*$/i.exec(color)) {
       return ('#' + match[1] + match[1] + match[2] + match[2] + match[3] + match[3]).toLowerCase();
     }
+    else if (match = /^\s*rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)\s*$/.exec(color)) {
+      var r = parseInt(match[1]), g = parseInt(match[2]), b = parseInt(match[3]);
+      r = (r < 16 ? '0' : '') + r.toString(16);
+      g = (g < 16 ? '0' : '') + g.toString(16);
+      b = (b < 16 ? '0' : '') + b.toString(16);
+      return '#' + r + g + b;
+    }
     return false;
   }
 
@@ -450,11 +457,6 @@
     return s;
   }
 
-  var windowOpen = window.open;
-  window.open = function(url) {
-    WebApp.openLink(url);
-  };
-
   var BackButton = (function() {
     var isVisible = false;
 
@@ -487,7 +489,9 @@
     function buttonCheckVersion() {
       if (!versionAtLeast('6.1')) {
         console.warn('[Telegram.WebApp] BackButton is not supported in version ' + webAppVersion);
+        return false;
       }
+      return true;
     }
 
     function updateButton() {
@@ -501,6 +505,9 @@
     }
 
     function setParams(params) {
+      if (!buttonCheckVersion()) {
+        return backButton;
+      }
       if (typeof params.is_visible !== 'undefined') {
         isVisible = !!params.is_visible;
       }
@@ -509,21 +516,21 @@
     }
 
     backButton.onClick = function(callback) {
-      buttonCheckVersion();
-      onWebViewEvent('backButtonClicked', callback);
+      if (buttonCheckVersion()) {
+        onWebViewEvent('backButtonClicked', callback);
+      }
       return backButton;
     };
     backButton.offClick = function(callback) {
-      buttonCheckVersion();
-      offWebViewEvent('backButtonClicked', callback);
+      if (buttonCheckVersion()) {
+        offWebViewEvent('backButtonClicked', callback);
+      }
       return backButton;
     };
     backButton.show = function() {
-      buttonCheckVersion();
       return setParams({is_visible: true});
     };
     backButton.hide = function() {
-      buttonCheckVersion();
       return setParams({is_visible: false});
     };
     return backButton;
@@ -685,7 +692,7 @@
         } else {
           var color = parseColorToHex(params.color);
           if (!color) {
-            console.error('[Telegram.WebApp] Main button color format is invalid', color);
+            console.error('[Telegram.WebApp] Main button color format is invalid', params.color);
             throw Error('WebAppMainButtonParamInvalid');
           }
           buttonColor = color;
@@ -698,7 +705,7 @@
         } else {
           var text_color = parseColorToHex(params.text_color);
           if (!text_color) {
-            console.error('[Telegram.WebApp] Main button text color format is invalid', text_color);
+            console.error('[Telegram.WebApp] Main button text color format is invalid', params.text_color);
             throw Error('WebAppMainButtonParamInvalid');
           }
           buttonTextColor = text_color;
@@ -764,6 +771,10 @@
     var hapticFeedback = {};
 
     function triggerFeedback(params) {
+      if (!versionAtLeast('6.1')) {
+        console.warn('[Telegram.WebApp] HapticFeedback is not supported in version ' + webAppVersion);
+        return hapticFeedback;
+      }
       if (params.type == 'impact') {
         if (params.impact_style != 'light' &&
             params.impact_style != 'medium' &&
@@ -786,14 +797,11 @@
         console.error('[Telegram.WebApp] Haptic feedback type is invalid', params.type);
         throw Error('WebAppHapticFeedbackTypeInvalid');
       }
-      if (!versionAtLeast('6.1')) {
-        console.warn('[Telegram.WebApp] HapticFeedback is not supported in version ' + webAppVersion);
-      }
       WebView.postEvent('web_app_trigger_haptic_feedback', false, params);
       return hapticFeedback;
     }
 
-    hapticFeedback.impactOccupped = function(style) {
+    hapticFeedback.impactOccurred = function(style) {
       return triggerFeedback({type: 'impact', impact_style: style});
     };
     hapticFeedback.notificationOccurred = function(type) {
@@ -868,6 +876,22 @@
     value: HapticFeedback,
     enumerable: true
   });
+  WebApp.setHeaderColor = function(color_key) {
+    if (color_key != 'bg_color' &&
+        color_key != 'secondary_bg_color') {
+      console.error('[Telegram.WebApp] Header color key should be one of \'bg_color\', \'secondary_bg_color\'', color_key);
+      throw Error('WebAppHeaderColorKeyInvalid');
+    }
+    WebView.postEvent('web_app_set_header_color', false, {color_key: color_key});
+  };
+  WebApp.setBackgroundColor = function(color) {
+    var bg_color = parseColorToHex(color);
+    if (!bg_color) {
+      console.error('[Telegram.WebApp] Background color format is invalid', color);
+      throw Error('WebAppBackgroundColorInvalid');
+    }
+    WebView.postEvent('web_app_set_background_color', false, {color: color});
+  };
   WebApp.isVersionAtLeast = function(ver) {
     return versionAtLeast(ver);
   };
@@ -899,7 +923,7 @@
     if (versionAtLeast('6.1')) {
       WebView.postEvent('web_app_open_link', false, {url: url});
     } else {
-      windowOpen(url, '_blank');
+      window.open(url, '_blank');
     }
   };
   WebApp.openTelegramLink = function (url) {
diff --git a/data/web/webappcontent.telegram.org/cafe.html b/data/web/webappcontent.telegram.org/cafe.html
index cbf688bde0..c421bb4ff9 100644
--- a/data/web/webappcontent.telegram.org/cafe.html
+++ b/data/web/webappcontent.telegram.org/cafe.html
@@ -9,7 +9,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex, nofollow" />
-    <script src="https://tg.dev/js/telegram-web-app.js?11"></script>
+    <script src="https://tg.dev/js/telegram-web-app.js?13"></script>
     <script>
       function setThemeClass() {
         document.documentElement.className = Telegram.WebApp.colorScheme;
@@ -17,7 +17,7 @@
       Telegram.WebApp.onEvent('themeChanged', setThemeClass);
       setThemeClass();
     </script>
-    <link href="/css/cafe.css?17" rel="stylesheet">
+    <link href="/css/cafe.css?18" rel="stylesheet">
   </head>
   <body style="display:none">
     <section class="cafe-page cafe-items">
@@ -441,7 +441,7 @@
 </div>
     <script src="https://tg.dev/js/jquery.min.js"></script>
     <script src="https://tg.dev/js/tgsticker.js?27"></script>
-    <script src="/js/cafe.js?21"></script>
+    <script src="/js/cafe.js?22"></script>
     <script>Cafe.init({"apiUrl":"\/cafe\/api","userId":0,"userHash":null});</script>
   </body>
 </html>
diff --git a/data/web/webappcontent.telegram.org/css/cafe.css b/data/web/webappcontent.telegram.org/css/cafe.css
index 66a99470c4..08d361898f 100644
--- a/data/web/webappcontent.telegram.org/css/cafe.css
+++ b/data/web/webappcontent.telegram.org/css/cafe.css
@@ -38,7 +38,10 @@ html.dark body {
   --hint-color: #64666d;
   --placeholder-color: #5d6163;
 }
-body.order-mode {
+html.order-mode {
+  background-color: var(--bg-color);
+}
+html.order-mode body {
   background-color: var(--bg-color);
 }
 
@@ -69,7 +72,7 @@ body.closed .cafe-page {
   transition: max-height var(--page-animation), opacity var(--page-animation);
   background-color: var(--block-bg-color);
 }
-body.order-mode .cafe-items {
+html.order-mode .cafe-items {
   max-height: 0 !important;
   opacity: 0 !important;
 }
@@ -290,7 +293,7 @@ button,
   transition: opacity var(--page-animation);
   opacity: 0;
 }
-body.order-mode .cafe-order-overview {
+html.order-mode .cafe-order-overview {
   opacity: 1;
 }
 .cafe-order-header-wrap {
diff --git a/data/web/webappcontent.telegram.org/demo.html b/data/web/webappcontent.telegram.org/demo.html
index 68fac31ef0..d9b28ac4a5 100644
--- a/data/web/webappcontent.telegram.org/demo.html
+++ b/data/web/webappcontent.telegram.org/demo.html
@@ -8,7 +8,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex,nofollow" />
-    <script src="https://telegram.org/js/telegram-web-app.js?11"></script>
+    <script src="https://telegram.org/js/telegram-web-app.js?13"></script>
     <script>
       function setThemeClass() {
         document.documentElement.className = Telegram.WebApp.colorScheme;
@@ -400,6 +400,7 @@ function setViewportData() {
   $('.viewport_border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportHeight, 2));
   $('.viewport_stable_border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) + ' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
 }
+Telegram.WebApp.setHeaderColor('bg_color');
 Telegram.WebApp.onEvent('viewportChanged', setViewportData);
 setViewportData();
 
diff --git a/data/web/webappcontent.telegram.org/js/cafe.js b/data/web/webappcontent.telegram.org/js/cafe.js
index 5e397dd553..d68f6cd523 100644
--- a/data/web/webappcontent.telegram.org/js/cafe.js
+++ b/data/web/webappcontent.telegram.org/js/cafe.js
@@ -35,6 +35,7 @@ var Cafe = {
       text_color: '#fff'
     }).onClick(Cafe.mainBtnClicked);
     Telegram.WebApp.BackButton.onClick(Cafe.backBtnClicked);
+    Telegram.WebApp.setHeaderColor('bg_color');
     initRipple();
   },
   initLotties: function() {
@@ -150,6 +151,11 @@ var Cafe = {
     }
     return s.join(dec)
   },
+  updateBackgroundColor: function() {
+    var style = window.getComputedStyle(document.body);
+    var bg_color = parseColorToHex(style.backgroundColor || '#fff');
+    Telegram.WebApp.setBackgroundColor(bg_color);
+  },
   updateMainButton: function() {
     var mainButton = Telegram.WebApp.MainButton;
     if (Cafe.modeOrder) {
@@ -220,7 +226,7 @@ var Cafe = {
       });
       $('.cafe-order-overview').show();
       $('.cafe-items').css('maxHeight', height).redraw();
-      $('body').addClass('order-mode');
+      $('html').addClass('order-mode');
       $('.js-order-comment-field').each(function() {
         autosize.update(this);
       });
@@ -235,7 +241,7 @@ var Cafe = {
       $('.js-item-lottie').each(function() {
         RLottie.setVisible(this, false);
       });
-      $('body').removeClass('order-mode');
+      $('html').removeClass('order-mode');
       setTimeout(function() {
         $('.cafe-items').css('maxHeight', '');
         $('.cafe-order-overview').hide();
@@ -245,6 +251,7 @@ var Cafe = {
       }, anim_duration);
       Telegram.WebApp.BackButton.hide();
     }
+    Cafe.updateBackgroundColor();
     Cafe.updateMainButton();
   },
   toggleLoading: function(loading) {
@@ -333,6 +340,25 @@ var Cafe = {
   }
 };
 
+function parseColorToHex(color) {
+  color += '';
+  var match;
+  if (match = /^\s*#([0-9a-f]{6})\s*$/i.exec(color)) {
+    return '#' + match[1].toLowerCase();
+  }
+  else if (match = /^\s*#([0-9a-f])([0-9a-f])([0-9a-f])\s*$/i.exec(color)) {
+    return ('#' + match[1] + match[1] + match[2] + match[2] + match[3] + match[3]).toLowerCase();
+  }
+  else if (match = /^\s*rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)\s*$/.exec(color)) {
+    var r = parseInt(match[1]), g = parseInt(match[2]), b = parseInt(match[3]);
+    r = (r < 16 ? '0' : '') + r.toString(16);
+    g = (g < 16 ? '0' : '') + g.toString(16);
+    b = (b < 16 ? '0' : '') + b.toString(16);
+    return '#' + r + g + b;
+  }
+  return false;
+}
+
 /*!
   Autosize 3.0.20
   license: MIT