From bd3d78cccad0b21878a66f4a371f0952484fa314 Mon Sep 17 00:00:00 2001
From: Alexey Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 5 Jun 2025 18:24:01 +0300
Subject: [PATCH] [common] Transfer skeleton variables in index for modern dark
 theme

---
 apps/common/main/lib/controller/Themes.js     | 21 ---------
 apps/documenteditor/main/index.html           | 36 +++++++++++++++
 apps/documenteditor/main/index.html.deploy    | 36 +++++++++++++++
 apps/pdfeditor/main/index.html                | 36 +++++++++++++++
 apps/pdfeditor/main/index.html.deploy         | 36 +++++++++++++++
 apps/presentationeditor/main/index.html       | 36 +++++++++++++++
 .../presentationeditor/main/index.html.deploy | 36 +++++++++++++++
 apps/spreadsheeteditor/main/index.html        | 44 ++++++++++++++++++-
 apps/spreadsheeteditor/main/index.html.deploy | 44 ++++++++++++++++++-
 .../main/index_internal.html                  | 11 +++++
 .../main/index_internal.html.deploy           | 11 +++++
 apps/visioeditor/main/index.html              | 36 +++++++++++++++
 apps/visioeditor/main/index.html.deploy       | 36 +++++++++++++++
 13 files changed, 396 insertions(+), 23 deletions(-)

diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js
index 1c31216872..9cee2ec99a 100644
--- a/apps/common/main/lib/controller/Themes.js
+++ b/apps/common/main/lib/controller/Themes.js
@@ -182,27 +182,6 @@ define([
                 source: 'static',
                 icons: {
                     cls: 'mod2',
-                },
-                skeleton: {
-                    css: `.theme-night .loadmask, .theme-type-dark .loadmask {
-                                --sk-height-toolbar-controls: 84px; --sk-layout-padding-toolbar: 0 10px;
-                                --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); --sk-border-radius-toolbar: 8px;
-                                --sk-background-toolbar-header-word: #222222; --sk-background-toolbar-header-pdf: #222222;
-                                --sk-background-toolbar-header-slide: #222222;--sk-background-toolbar-header-cell: #222222;
-                                --sk-background-toolbar-header-visio: #222222; 
-                                --sk-background-toolbar: #222222; --sk-background-toolbar-controls: #404040;
-                                --sk-background-toolbar-tab: #585858; --sk-background-toolbar-button: #555;
-                                --sk-layout-padding-toolbar-controls: 0 8px; --sk-layout-padding-header: 0 10px;
-                                --sk-canvas-background: #222222; --sk-canvas-content-background: #fff;
-                                --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05);
-                                --sk-height-formula: 38px; --sk-padding-formula: 10px 10px 4px 10px;
-                                --sk-border-style-formula: none; --sk-gap-formula-field: 28px;
-                                --sk-border-radius-formula-field: 3px;
-                            }
-                            .content-theme-dark {
-                                --sk-canvas-content-background: #3a3a3a;
-                                --sk-canvas-page-border: #616161; --sk-canvas-line: rgba(255,255,255,.05);
-                            }`
                 }
             },
         }
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 7357c13b7a..8da99c40fa 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -28,6 +28,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-word: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         /*.theme-dark .loadmask, .theme-type-dark .loadmask {*/
         /*    !*--toolbar-header-document: #2a2a2a;*!*/
         /*    --sk-background-toolbar-header-word: #2a2a2a;*/
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index dca77772a6..773eb1c824 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -30,6 +30,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-word: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;
diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html
index 8fc6c9d540..b5c4ca2bea 100644
--- a/apps/pdfeditor/main/index.html
+++ b/apps/pdfeditor/main/index.html
@@ -28,6 +28,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-pdf: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         /* .theme-dark, .theme-type-dark {
             --toolbar-header-pdf: #2a2a2a;
             --background-toolbar: #404040;
diff --git a/apps/pdfeditor/main/index.html.deploy b/apps/pdfeditor/main/index.html.deploy
index 0051b693be..8e7d207f9d 100644
--- a/apps/pdfeditor/main/index.html.deploy
+++ b/apps/pdfeditor/main/index.html.deploy
@@ -29,6 +29,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-pdf: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index 36f957de1f..12a818e94c 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -27,6 +27,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-slide: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         /* .theme-dark, .theme-type-dark {
             --toolbar-header-presentation: #2a2a2a;
             --background-toolbar: #404040;
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index a6f39361fa..22067ca3b9 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -29,6 +29,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-slide: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 317cda9fd1..bf603d6557 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -31,6 +31,48 @@
             --sk-border-radius-formula-field: 3px;
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-cell: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+            
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+
+            --sk-height-formula: 38px;
+            --sk-padding-formula: 10px 10px 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
+        }
+
         /* .theme-dark, .theme-type-dark {
             --toolbar-header-spreadsheet: #2a2a2a;
             --background-toolbar: #404040;
@@ -206,7 +248,7 @@
             display: inline-block;
             box-sizing: border-box;
             background: #fff;
-            background: var(--background-normal, #fff);
+            background: var(--sk-background-toolbar-controls, #fff);
             border-left: 1px solid #cbcbcb; 
             border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
             border-radius: 0px;
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index fad784f4f9..5f29313eee 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -34,6 +34,48 @@
             --sk-border-radius-formula-field: 3px;
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-cell: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+            
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+
+            --sk-height-formula: 38px;
+            --sk-padding-formula: 10px 10px 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
@@ -181,7 +223,7 @@
             display: inline-block;
             box-sizing: border-box;
             background: #fff;
-            background: var(--background-normal, #fff);
+            background: var(--sk-background-toolbar-controls, #fff);
             border-left: 1px solid #cbcbcb; 
             border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); 
             border-radius: 0px;
diff --git a/apps/spreadsheeteditor/main/index_internal.html b/apps/spreadsheeteditor/main/index_internal.html
index f28959a3b5..30331cbb76 100644
--- a/apps/spreadsheeteditor/main/index_internal.html
+++ b/apps/spreadsheeteditor/main/index_internal.html
@@ -25,6 +25,17 @@
             --sk-border-radius-formula-field: 3px;
         }
 
+        .theme-night .loadmask {
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            --sk-height-formula: 38px;
+            --sk-padding-formula: 10px 10px 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
+        }
+
         .loadmask {
             left: 0;
             top: 0;
diff --git a/apps/spreadsheeteditor/main/index_internal.html.deploy b/apps/spreadsheeteditor/main/index_internal.html.deploy
index aef1d85a7c..7f9147b33b 100644
--- a/apps/spreadsheeteditor/main/index_internal.html.deploy
+++ b/apps/spreadsheeteditor/main/index_internal.html.deploy
@@ -32,6 +32,17 @@
             z-index: 1001;
         }
 
+        .theme-night .loadmask {
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            --sk-height-formula: 38px;
+            --sk-padding-formula: 10px 10px 4px 10px;
+            --sk-border-style-formula: none;
+            --sk-gap-formula-field: 28px;
+            --sk-border-radius-formula-field: 3px;
+        }
+
         .loadmask ul {
             margin: 0;
             padding: 0;
diff --git a/apps/visioeditor/main/index.html b/apps/visioeditor/main/index.html
index 2c586c44ad..06666d97fe 100644
--- a/apps/visioeditor/main/index.html
+++ b/apps/visioeditor/main/index.html
@@ -50,6 +50,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-pdf: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;
diff --git a/apps/visioeditor/main/index.html.deploy b/apps/visioeditor/main/index.html.deploy
index 2ba4909cc0..425e039574 100644
--- a/apps/visioeditor/main/index.html.deploy
+++ b/apps/visioeditor/main/index.html.deploy
@@ -29,6 +29,42 @@
             --sk-canvas-line: rgba(0,0,0,.05);
         }
 
+        .theme-night .loadmask {
+            --sk-height-toolbar-controls: 84px; 
+            --sk-layout-padding-toolbar: 0 10px;
+            --sk-border-radius-toolbar: 8px;
+
+            /* --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) */
+            --sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar-header-pdf: #222222;
+
+            /* --toolbar-header-document: #222222 */
+            --sk-background-toolbar: #222222;
+
+            /* --background-toolbar: #404040; */
+            --sk-background-toolbar-controls: #404040;
+
+            /* --highlight-header-button-hover: #585858; */
+            --sk-background-toolbar-tab: #585858;
+
+            /* --highlight-button-hover: #585858 */
+            --sk-background-toolbar-button: #585858;
+
+            --sk-layout-padding-toolbar-controls: 0 8px;
+            --sk-layout-padding-header: 0 10px;
+
+            /* --canvas-background: #222222; */
+            --sk-canvas-background: #222222;
+
+            /* --canvas-content-background: #fff; */
+            --sk-canvas-content-background: #fff;
+
+            --sk-canvas-page-border: #555;
+            --sk-canvas-line: rgba(0,0,0,.05);
+        }
+
         .loadmask {
             left: 0;
             top: 0;