diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less
index 640fd04d7..08c4d00d2 100644
--- a/apps/common/forms/resources/less/common.less
+++ b/apps/common/forms/resources/less/common.less
@@ -217,7 +217,7 @@
 .brand-logo {
     display: block;
     width: 100px;
-    height: 24px;
+    height: 20px;
     background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat;
 }
 
diff --git a/apps/documenteditor/forms/app.js b/apps/documenteditor/forms/app.js
index 39125c57e..6ac4557d2 100644
--- a/apps/documenteditor/forms/app.js
+++ b/apps/documenteditor/forms/app.js
@@ -150,6 +150,7 @@ require([
                 'documenteditor/forms/app/view/ApplicationView',
                 'common/main/lib/util/utils',
                 'common/main/lib/util/LocalStorage',
+                'common/main/lib/controller/Themes',
                 'common/forms/lib/view/modals'
             ], function() {
                 app.start();
diff --git a/apps/documenteditor/forms/app/controller/ApplicationController.js b/apps/documenteditor/forms/app/controller/ApplicationController.js
index cc8d62a24..4691d3ca5 100644
--- a/apps/documenteditor/forms/app/controller/ApplicationController.js
+++ b/apps/documenteditor/forms/app/controller/ApplicationController.js
@@ -58,6 +58,8 @@ define([
                 'embedded' : true
             });
 
+            Common.UI.Themes.init(this.api);
+
             $(window).on('resize', this.onDocumentResize.bind(this));
 
             this.boxSdk = $('#editor_sdk');
diff --git a/apps/documenteditor/forms/app_dev.js b/apps/documenteditor/forms/app_dev.js
index 82741e502..33aa736fc 100644
--- a/apps/documenteditor/forms/app_dev.js
+++ b/apps/documenteditor/forms/app_dev.js
@@ -140,6 +140,7 @@ require([
                 'documenteditor/forms/app/view/ApplicationView',
                 'common/main/lib/util/utils',
                 'common/main/lib/util/LocalStorage',
+                'common/main/lib/controller/Themes',
                 'common/forms/lib/view/modals'
             ], function() {
                 window.compareVersions = true;
diff --git a/apps/documenteditor/forms/index.html b/apps/documenteditor/forms/index.html
index 8cdaae471..509c5a462 100644
--- a/apps/documenteditor/forms/index.html
+++ b/apps/documenteditor/forms/index.html
@@ -14,6 +14,23 @@
     <!-- splash -->
 
     <style type="text/css">
+        .theme-dark {
+            --background-toolbar: #404040;
+            --border-toolbar: #2a2a2a;
+            --highlight-button-hover: #555;
+            --canvas-background: #555;
+        }
+
+        .theme-classic-light {
+        }
+
+        .theme-light {
+            --background-toolbar: #f7f7f7;
+            --border-toolbar: #cbcbcb;
+            --highlight-button-hover: #e0e0e0;
+            --canvas-background: #eee;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -22,7 +39,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background-color: #e2e2e2;
+            background-color: var(--canvas-background, #e2e2e2);
             z-index: 1001;
         }
 
@@ -31,8 +49,11 @@
             position: absolute;
             height: 48px;
             background-color: #F7F7F7;
-            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb;
-            box-shadow: inset 0 -1px 0 #dbdbdb;
+            background-color: var(--background-toolbar, #F7F7F7);
+            -webkit-box-shadow: inset 0 -1px 0 #cbcbcb;
+            box-shadow: inset 0 -1px 0 #cbcbcb;
+            -webkit-box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
+            box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
         }
 
         .loadmask > .brendpanel > div {
@@ -43,7 +64,7 @@
 
         .loadmask > .brendpanel .loading-logo {
             max-width: 200px;
-            height: 24px;
+            height: 20px;
             margin-left: 10px;
             text-align: center;
         }
@@ -60,8 +81,8 @@
 
         .loadmask > .brendpanel .circle {
             vertical-align: middle;
-            width: 24px;
-            height: 24px;
+            width: 20px;
+            height: 20px;
             border-radius: 12px;
             margin: 4px 10px;
             background: rgba(255, 255, 255, 0.2);
@@ -77,7 +98,7 @@
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px;
-            background: #e2e2e2;
+            background: rgba(0,0,0,.05);
             overflow: hidden;
             position: relative;
 
@@ -112,7 +133,6 @@
     <!--[if lt IE 9]>
       <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
     <![endif]-->
-      <script src="../../common/main/lib/util/themeinit.js"></script>
   </head>
 
   <body class="embed-body">
diff --git a/apps/documenteditor/forms/index.html.deploy b/apps/documenteditor/forms/index.html.deploy
index 93b9af5fd..4761b52e0 100644
--- a/apps/documenteditor/forms/index.html.deploy
+++ b/apps/documenteditor/forms/index.html.deploy
@@ -20,7 +20,8 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background-color: #e2e2e2;
+            background-color: var(--canvas-background, #e2e2e2);
             z-index: 1001;
         }
 
@@ -29,8 +30,11 @@
             position: absolute;
             height: 48px;
             background-color: #F7F7F7;
-            -webkit-box-shadow: inset 0 -1px 0 #dbdbdb;
-            box-shadow: inset 0 -1px 0 #dbdbdb;
+            background-color: var(--background-toolbar, #F7F7F7);
+            -webkit-box-shadow: inset 0 -1px 0 #cbcbcb;
+            box-shadow: inset 0 -1px 0 #cbcbcb;
+            -webkit-box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
+            box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
         }
 
         .loadmask > .brendpanel > div {
@@ -41,7 +45,7 @@
 
         .loadmask > .brendpanel .loading-logo {
             max-width: 200px;
-            height: 24px;
+            height: 20px;
             margin-left: 10px;
             text-align: center;
         }
@@ -58,8 +62,8 @@
 
         .loadmask > .brendpanel .circle {
             vertical-align: middle;
-            width: 24px;
-            height: 24px;
+            width: 20px;
+            height: 20px;
             border-radius: 12px;
             margin: 4px 10px;
             background: rgba(255, 255, 255, 0.2);
@@ -75,7 +79,7 @@
         .loadmask > .placeholder > .line {
             height: 15px;
             margin: 30px;
-            background: #e2e2e2;
+            background: rgba(0,0,0,.05);
             overflow: hidden;
             position: relative;