diff --git a/apps/api/documents/api.js b/apps/api/documents/api.js
index 860f1097a..56edaaab0 100644
--- a/apps/api/documents/api.js
+++ b/apps/api/documents/api.js
@@ -862,6 +862,9 @@
         if (config.parentOrigin)
             params += "&parentOrigin=" + config.parentOrigin;
 
+        if (config.editorConfig && config.editorConfig.customization && config.editorConfig.customization.uiTheme )
+            params += "&uitheme=" + config.editorConfig.customization.uiTheme;
+
         return params;
     }
 
diff --git a/apps/common/main/lib/controller/ExternalDiagramEditor.js b/apps/common/main/lib/controller/ExternalDiagramEditor.js
index d74983b0b..3fb29f3b4 100644
--- a/apps/common/main/lib/controller/ExternalDiagramEditor.js
+++ b/apps/common/main/lib/controller/ExternalDiagramEditor.js
@@ -56,6 +56,7 @@ define([
 
 
         var createExternalEditor = function() {
+            !!customization && (customization.uiTheme = Common.localStorage.getItem("uitheme", "theme-light"));
             externalEditor = new DocsAPI.DocEditor('id-diagram-editor-placeholder', {
                 width       : '100%',
                 height      : '100%',
@@ -242,6 +243,15 @@ define([
                 }
             },
 
+            showExternalEditor: function () {
+                if ( externalEditor ) {
+                    var value = Common.localStorage.getItem("uitheme", "theme-light");
+                    externalEditor.serviceCommand('theme:change', value);
+                }
+
+                this.diagramEditorView.show();
+            },
+
             warningTitle: 'Warning',
             warningText: 'The object is disabled because of editing by another user.',
             textClose: 'Close',
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index f103c8820..0693247d1 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -189,6 +189,9 @@ define([
                         case '2': this.api.SetFontRenderingMode(2); break;
                     }
 
+                    value = Common.localStorage.getItem("uitheme", "theme-light");
+                    me.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat");
+
                     this.api.asc_registerCallback('asc_onError',                    _.bind(this.onError, this));
                     this.api.asc_registerCallback('asc_onDocumentContentReady',     _.bind(this.onDocumentContentReady, this));
                     this.api.asc_registerCallback('asc_onOpenDocumentProgress',     _.bind(this.onOpenDocument, this));
@@ -1119,12 +1122,19 @@ define([
                 $('#header-logo').children(0).click(e => {
                     e.stopImmediatePropagation();
 
-                    $(':root').toggleClass('theme-dark');
-                    // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
-
-                    if (AscCommon.GlobalSkin.Name == 'flat')
+                    var value = Common.localStorage.getItem("uitheme", "theme-light");
+                    var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
+                    document.documentElement.className = classname;
+                    if ( value != "theme-dark" ) {
                         me.api.asc_setSkin('flatDark');
-                    else me.api.asc_setSkin("flat");
+                        $(':root').addClass('theme-dark');
+                        Common.localStorage.setItem("uitheme", "theme-dark");
+                    } else {
+                        me.api.asc_setSkin("flat");
+                        Common.localStorage.setItem("uitheme", "theme-light");
+                    }
+
+                    // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
                 })
             },
 
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 5fac11458..b86b8c340 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -2056,12 +2056,14 @@ define([
 
                 Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             } else {
+                var controller = this.getApplication().getController('Common.Controllers.ExternalDiagramEditor');
                 if (!this.diagramEditor)
-                    this.diagramEditor = this.getApplication().getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
+                    this.diagramEditor = controller.getView('Common.Views.ExternalDiagramEditor');
 
                 if (this.diagramEditor && me.api) {
                     this.diagramEditor.setEditMode(false);
-                    this.diagramEditor.show();
+                    // this.diagramEditor.show();
+                    controller.showExternalEditor();
 
                     chart = me.api.asc_getChartObject(type);
                     if (chart) {
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 033f6c1e3..b1b175c42 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -204,6 +204,11 @@
         window.frameEditorId = params["frameEditorId"];
         window.parentOrigin = params["parentOrigin"];
 
+        var ui_theme_name = params.uitheme || localStorage.getItem("uitheme");
+        if ( !!ui_theme_name ) {
+            document.documentElement.classList.add(ui_theme_name);
+        }
+
         if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
             document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
     </script>
diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
index 9ac6fda7b..cecfcbde6 100644
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@@ -170,6 +170,9 @@ define([
                     Common.Utils.InternalSettings.set("pe-settings-fontrender", value);
                     this.api.SetFontRenderingMode(parseInt(value));
 
+                    value = Common.localStorage.getItem("uitheme", "theme-light");
+                    me.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat");
+
                     this.api.asc_registerCallback('asc_onError',                    _.bind(this.onError, this));
                     this.api.asc_registerCallback('asc_onDocumentContentReady',     _.bind(this.onDocumentContentReady, this));
                     this.api.asc_registerCallback('asc_onOpenDocumentProgress',     _.bind(this.onOpenDocument, this));
@@ -843,12 +846,17 @@ define([
                 $('#header-logo').children(0).click(e => {
                     e.stopImmediatePropagation();
 
-                    $(':root').toggleClass('theme-dark');
-                    // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
-
-                    if (AscCommon.GlobalSkin.Name == 'flat')
+                    var value = Common.localStorage.getItem("uitheme", "theme-light");
+                    var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
+                    document.documentElement.className = classname;
+                    if ( value != "theme-dark" ) {
                         me.api.asc_setSkin('flatDark');
-                    else me.api.asc_setSkin("flat");
+                        $(':root').addClass('theme-dark');
+                        Common.localStorage.setItem("uitheme", "theme-dark");
+                    } else {
+                        me.api.asc_setSkin("flat");
+                        Common.localStorage.setItem("uitheme", "theme-light");
+                    }
                 })
             },
 
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index b8d706261..24629fc9b 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -232,6 +232,11 @@
         window.frameEditorId = params["frameEditorId"];
         window.parentOrigin = params["parentOrigin"];
 
+        var ui_theme_name = params.uitheme || localStorage.getItem("uitheme");
+        if ( !!ui_theme_name ) {
+            document.documentElement.classList.add(ui_theme_name);
+        }
+
         if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
             document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
     </script>
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index e96020b8d..485c1189e 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -176,6 +176,9 @@ define([
                 Common.Utils.InternalSettings.set("sse-settings-fontrender", value);
                 this.api.asc_setFontRenderingMode(parseInt(value));
 
+                value = Common.localStorage.getItem("uitheme", "theme-light");
+                this.api.asc_setSkin(value == "theme-dark" ? 'flatDark' : "flat");
+
                 this.api.asc_registerCallback('asc_onOpenDocumentProgress',  _.bind(this.onOpenDocument, this));
                 this.api.asc_registerCallback('asc_onEndAction',             _.bind(this.onLongActionEnd, this));
                 this.api.asc_registerCallback('asc_onError',                 _.bind(this.onError, this));
@@ -908,7 +911,16 @@ define([
                 $('#header-logo').children(0).click(e => {
                     e.stopImmediatePropagation();
 
-                    $(':root').toggleClass('theme-dark');
+                    document.documentElement.className = document.documentElement.className.replace(/theme-\w+\s?/, '');
+                    if ( "theme-dark" != Common.localStorage.getItem("uitheme", "theme-light") ) {
+                        me.api.asc_setSkin('flatDark');
+                        $(':root').addClass('theme-dark');
+                        Common.localStorage.setItem("uitheme", "theme-dark");
+                    } else {
+                        me.api.asc_setSkin("flat");
+                        Common.localStorage.setItem("uitheme", "theme-light");
+                    }
+
                     // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
                 })
             },
@@ -2042,6 +2054,11 @@ define([
                     case 'processmouse':
                         this.onProcessMouse(data.data);
                         break;
+                    case 'theme:change':
+                        document.documentElement.className =
+                            document.documentElement.className.replace(/theme-\w+\s?/, data.data);
+                        this.api.asc_setSkin(data.data == "theme-dark" ? 'flatDark' : "flat");
+                        break;
                     }
                 }
             },
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 1f0df81ad..6b4cd55b2 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -232,6 +232,11 @@
         window.frameEditorId = params["frameEditorId"];
         window.parentOrigin = params["parentOrigin"];
 
+        var ui_theme_name = params.uitheme || localStorage.getItem("uitheme");
+        if ( !!ui_theme_name ) {
+            document.documentElement.classList.add(ui_theme_name);
+        }
+
         if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
             document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
     </script>
diff --git a/apps/spreadsheeteditor/main/index_internal.html b/apps/spreadsheeteditor/main/index_internal.html
index 72175b2c0..55273445e 100644
--- a/apps/spreadsheeteditor/main/index_internal.html
+++ b/apps/spreadsheeteditor/main/index_internal.html
@@ -162,6 +162,10 @@
         window.frameEditorId = params["frameEditorId"];
         window.parentOrigin = params["parentOrigin"];
 
+        if ( !!params.uitheme ) {
+            document.documentElement.classList.add(params.uitheme);
+        }
+
         if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent))
             document.write('<script src="../../common/main/lib/util/fix-ie-compat.js"><\/script>');
     </script>