diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 1c2ab5ebe..bb2bb0771 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -10,6 +10,16 @@
     <!-- splash -->
 
     <style type="text/css">
+        .theme-dark {
+            --toolbar-header-document: #2a2a2a;
+            --background-toolbar: #404040;
+            --border-toolbar: #2a2a2a;
+            --highlight-button-pressed: #606060;
+            --canvas-background: #666666;
+            /*--canvas-content-background: #fff;*/
+            --canvas-page-border: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -18,14 +28,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #e2e2e2;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             min-height: 28px;
-            background: #446995;
+            background: var(--toolbar-header-document, #446995);
         }
 
         .loadmask > .brendpanel > div {
@@ -61,8 +71,8 @@
         }
 
         .loadmask > .sktoolbar {
-            background: #f1f1f1;
-            border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf;
+            background: var(--background-toolbar, #f7f7f7);
+            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -76,7 +86,7 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #e2e2e2;
+            background: var(--highlight-button-pressed, #ccc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -100,11 +110,11 @@
         }
 
         .loadmask > .placeholder {
-            background: #fbfbfb;
+            background: var(--canvas-content-background, #fff);
             width: 794px;
             margin: 46px auto;
             height: 100%;
-            border: var(--scaled-one-px-value, 1px) solid #bebebe;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
             padding-top: 50px;
         }
 
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 0137bb8c8..5b76ec8ec 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -19,7 +19,7 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background: #e2e2e2;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
@@ -27,6 +27,7 @@
             width: 100%;
             min-height: 28px;
             background: #446995;
+            background: var(--toolbar-header-document, #446995);
         }
 
         .loadmask > .brendpanel > div {
@@ -62,8 +63,8 @@
         }
 
         .loadmask > .sktoolbar {
-            background: #f1f1f1;
-            border-bottom: var(--scaled-one-px-value, 1px) solid #cfcfcf;
+            background: var(--background-toolbar, #f7f7f7);
+            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -77,7 +78,7 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #e2e2e2;
+            background: var(--highlight-button-pressed, #ccc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -101,11 +102,11 @@
         }
 
         .loadmask > .placeholder {
-            background: #fbfbfb;
+            background: var(--canvas-content-background, #fff);
             width: 794px;
             margin: 46px auto;
             height: 100%;
-            border: var(--scaled-one-px-value, 1px) solid #bebebe;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
             padding-top: 50px;
         }
 
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index 4a1a11cfd..7449fe472 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -9,6 +9,16 @@
 
     <!-- splash -->
     <style type="text/css">
+        .theme-dark {
+            --toolbar-header-presentation: #2a2a2a;
+            --background-toolbar: #404040;
+            --border-toolbar: #2a2a2a;
+            --highlight-button-pressed: #606060;
+            --canvas-background: #666666;
+            /*--canvas-content-background: #fff;*/
+            --canvas-page-border: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -17,14 +27,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #e2e2e2;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             min-height: 28px;
-            background: #aa5252;
+            background: var(--toolbar-header-presentation, #aa5252);
         }
 
         .loadmask > .brendpanel > div {
@@ -60,8 +70,8 @@
         }
 
         .loadmask > .sktoolbar {
-            background: #f1f1f1;
-            border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb;
+            background: var(--background-toolbar, #f7f7f7);
+            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -75,7 +85,7 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ececec;
+            background: var(--highlight-button-pressed, #ccc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -136,8 +146,8 @@
             position: absolute;
             height: 100%;
             width: 100%;
-            background: #fbfbfb;
-            border: var(--scaled-one-px-value, 1px) solid #dfdfdf;
+            background: var(--canvas-content-background, #fff);
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 01eca0778..1f0ffa82e 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -19,14 +19,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #e2e2e2;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             min-height: 28px;
-            background: #aa5252;
+            background: var(--toolbar-header-presentation, #aa5252);
         }
 
         .loadmask > .brendpanel > div {
@@ -62,8 +62,8 @@
         }
 
         .loadmask > .sktoolbar {
-            background: #f1f1f1;
-            border-bottom: var(--scaled-one-px-value, 1px) solid #cbcbcb;
+            background: var(--background-toolbar, #f7f7f7);
+            border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -77,7 +77,7 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #ececec;
+            background: var(--highlight-button-pressed, #ccc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -138,8 +138,8 @@
             position: absolute;
             height: 100%;
             width: 100%;
-            background: #fbfbfb;
-            border: var(--scaled-one-px-value, 1px) solid #dfdfdf;
+            background: var(--canvas-content-background, #fff);
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/presentationeditor/main/index.reporter.html b/apps/presentationeditor/main/index.reporter.html
index d458bf252..23426fb45 100644
--- a/apps/presentationeditor/main/index.reporter.html
+++ b/apps/presentationeditor/main/index.reporter.html
@@ -11,6 +11,13 @@
     <!-- splash -->        
 
     <style>
+        .theme-dark {
+            --toolbar-header-presentation: #2a2a2a;
+            --canvas-background: #666666;
+            /*--canvas-content-background: #fff;*/
+            --canvas-page-border: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -19,14 +26,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 10000;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             height: 56px;
-            background: #aa5252;
+            background: var(--toolbar-header-presentation, #aa5252);
         }
 
         .loadmask > .brendpanel > div {
@@ -82,8 +89,8 @@
             position: absolute;
             height: 100%;
             width: 100%;
-            background: #fbfbfb;
-            border: 1px solid #dfdfdf;
+            background: var(--canvas-content-background, #fff);
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/presentationeditor/main/index.reporter.html.deploy b/apps/presentationeditor/main/index.reporter.html.deploy
index 6690da3ed..ddf1d66a4 100644
--- a/apps/presentationeditor/main/index.reporter.html.deploy
+++ b/apps/presentationeditor/main/index.reporter.html.deploy
@@ -19,14 +19,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 10000;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             height: 56px;
-            background: #aa5252;
+            background: var(--toolbar-header-presentation, #aa5252);
         }
 
         .loadmask > .brendpanel > div {
@@ -82,8 +82,8 @@
             position: absolute;
             height: 100%;
             width: 100%;
-            background: #fbfbfb;
-            border: 1px solid #dfdfdf;
+            background: var(--canvas-content-background, #fff);
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
             -moz-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index b117371d5..8341112ef 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -8,6 +8,17 @@
 
     <!-- splash -->
     <style type="text/css">
+        .theme-dark {
+            --toolbar-header-document: #2a2a2a;
+            --background-toolbar: #404040;
+            --background-normal: #333;
+            --border-toolbar: #2a2a2a;
+            --highlight-button-pressed: #606060;
+            --canvas-background: #666666;
+            /*--canvas-content-background: #fff;*/
+            --canvas-page-border: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -16,14 +27,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             min-height: 28px;
-            background: #40865c;
+            background: var(--toolbar-header-document, #40865c);
         }
 
         .loadmask > .brendpanel > div {
@@ -59,7 +70,7 @@
         }
 
         .loadmask > .sktoolbar {
-            background: #f1f1f1;
+            background: var(--background-toolbar, #f7f7f7);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -73,7 +84,7 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #e2e2e2;
+            background: var(--highlight-button-pressed, #ccc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -98,7 +109,7 @@
 
         .loadmask > .skformula {
             height: 24px;
-            background: #f1f1f1;
+            background: var(--background-toolbar, #f7f7f7);
         }
 
         .loadmask > .skformula ul {
@@ -107,7 +118,7 @@
             box-sizing: border-box;
             border-style: solid;
             border-width: var(--scaled-one-px-value, 1px);
-            border-color: #e1e1e1 transparent;
+            border-color: var(--border-toolbar, #cbcbcb) transparent;
         }
 
         .loadmask > .skformula li {
@@ -116,10 +127,10 @@
             height: 19px;
             width: 100%;
             margin-left: 20px;
-            background: #f7f7f7;
+            background: var(--background-normal, #fff);
             border-style: solid;
             border-width: var(--scaled-one-px-value, 1px);
-            border-color: transparent #e1e1e1;
+            border-color: transparent var(--border-toolbar, #cbcbcb);
         }
 
         .loadmask > .skformula li:first-child {
@@ -128,11 +139,11 @@
         }
 
         .loadmask > .placeholder {
-            background: #fbfbfb;
+            background: var(--canvas-content-background, #fff);
             width: 100%;
             height: 100%;
             font-size: 0;
-            border: 1px solid #dfdfdf;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 41aea0da2..0346525c8 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -18,14 +18,14 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
         .loadmask > .brendpanel {
             width: 100%;
             min-height: 28px;
-            background: #40865c;
+            background: var(--toolbar-header-document, #40865c);
         }
 
         .loadmask > .brendpanel > div {
@@ -61,7 +61,7 @@
         }
 
         .loadmask > .sktoolbar {
-            background: #f1f1f1;
+            background: var(--background-toolbar, #f7f7f7);
             height: 46px;
             padding: 10px 6px;
             box-sizing: content-box;
@@ -75,7 +75,7 @@
         }
 
         .loadmask > .sktoolbar li {
-            background: #e2e2e2;
+            background: var(--highlight-button-pressed, #ccc);
             border-radius: 3px;
             width: 20px;
             height: 20px;
@@ -100,7 +100,7 @@
 
         .loadmask>.skformula {
             height: 24px;
-            background: #f1f1f1;
+            background: var(--background-toolbar, #f7f7f7);
         }
 
         .loadmask>.skformula ul {
@@ -109,7 +109,7 @@
             box-sizing: border-box;
             border-style: solid;
             border-width: var(--scaled-one-px-value, 1px);
-            border-color: #e1e1e1 transparent;
+            border-color: var(--border-toolbar, #cbcbcb) transparent;
         }
 
         .loadmask>.skformula li {
@@ -118,10 +118,10 @@
             height: 19px;
             width: 100%;
             margin-left: 20px;
-            background: #f7f7f7;
+            background: var(--background-normal, #fff);
             border-style: solid;
             border-width: var(--scaled-one-px-value, 1px);
-            border-color: transparent #e1e1e1;
+            border-color: transparent var(--border-toolbar, #cbcbcb);
         }
 
         .loadmask>.skformula li:first-child {
@@ -130,7 +130,7 @@
         }
 
         .loadmask > .placeholder {
-            background: #fbfbfb;
+            background: var(--canvas-content-background, #fff);
             width: 100%;
             height: 100%;
             font-size: 0;
diff --git a/apps/spreadsheeteditor/main/index_internal.html b/apps/spreadsheeteditor/main/index_internal.html
index d00a9b5c4..f9be3f59a 100644
--- a/apps/spreadsheeteditor/main/index_internal.html
+++ b/apps/spreadsheeteditor/main/index_internal.html
@@ -8,6 +8,15 @@
 
     <!-- splash -->
     <style type="text/css">
+        .theme-dark {
+            --background-toolbar: #404040;
+            --background-normal: #333;
+            --border-toolbar: #2a2a2a;
+            --canvas-background: #666666;
+            --canvas-content-background: #fff;
+            --canvas-page-border: #555;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -16,7 +25,7 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
@@ -29,7 +38,7 @@
 
         .loadmask > .skformula {
             height: 24px;
-            background: #f1f1f1;
+            background: var(--background-toolbar, #f7f7f7);
         }
 
         .loadmask > .skformula ul {
@@ -37,8 +46,8 @@
             font-size: 0;
             box-sizing: border-box;
             border-style: solid;
-            border-width: 1px;
-            border-color: #e1e1e1 transparent;
+            border-width: var(--scaled-one-px-value, 1px);
+            border-color: var(--border-toolbar, #cbcbcb) transparent;
         }
 
         .loadmask > .skformula li {
@@ -47,10 +56,10 @@
             height: 19px;
             width: 100%;
             margin-left: 20px;
-            background: #f7f7f7;
+            background: var(--background-normal, #fff);
             border-style: solid;
-            border-width: 1px;
-            border-color: transparent #e1e1e1;
+            border-width: var(--scaled-one-px-value, 1px);
+            border-color: transparent var(--border-toolbar, #cbcbcb);
         }
 
         .loadmask > .skformula li:first-child {
@@ -59,11 +68,11 @@
         }
 
         .loadmask > .placeholder {
-            background: #fbfbfb;
+            background: var(--canvas-content-background, #fff);
             width: 100%;
             height: 100%;
             font-size: 0;
-            border: 1px solid #dfdfdf;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/spreadsheeteditor/main/index_internal.html.deploy b/apps/spreadsheeteditor/main/index_internal.html.deploy
index fe915e9e5..23de40b03 100644
--- a/apps/spreadsheeteditor/main/index_internal.html.deploy
+++ b/apps/spreadsheeteditor/main/index_internal.html.deploy
@@ -18,7 +18,7 @@
             width: 100%;
             overflow: hidden;
             border: none;
-            background-color: #f4f4f4;
+            background: var(--canvas-background, #f0f0f0);
             z-index: 1001;
         }
 
@@ -31,7 +31,7 @@
 
         .loadmask>.skformula {
             height: 24px;
-            background: #f1f1f1;
+            background: var(--background-toolbar, #f7f7f7);
         }
 
         .loadmask>.skformula ul {
@@ -39,8 +39,8 @@
             font-size: 0;
             box-sizing: border-box;
             border-style: solid;
-            border-width: 1px;
-            border-color: #e1e1e1 transparent;
+            border-width: var(--scaled-one-px-value, 1px);
+            border-color: var(--border-toolbar, #cbcbcb) transparent;
         }
 
         .loadmask>.skformula li {
@@ -49,10 +49,10 @@
             height: 19px;
             width: 100%;
             margin-left: 20px;
-            background: #f7f7f7;
+            background: var(--background-normal, #fff);
             border-style: solid;
-            border-width: 1px;
-            border-color: transparent #e1e1e1;
+            border-width: var(--scaled-one-px-value, 1px);
+            border-color: transparent var(--border-toolbar, #cbcbcb);
         }
 
         .loadmask>.skformula li:first-child {
@@ -65,7 +65,7 @@
             width: 100%;
             height: 100%;
             font-size: 0;
-            border: 1px solid #dfdfdf;
+            border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
             white-space: nowrap;
 
             -webkit-animation: flickerAnimation 2s infinite ease-in-out;