diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index 183eb4510..e96020b8d 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -904,6 +904,13 @@ define([
                 } else checkWarns();
 
                 Common.Gateway.documentReady();
+
+                $('#header-logo').children(0).click(e => {
+                    e.stopImmediatePropagation();
+
+                    $(':root').toggleClass('theme-dark');
+                    // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
+                })
             },
 
             onLicenseChanged: function(params) {
diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
index 16eb9d8c5..9936afa21 100644
--- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js
+++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
@@ -51,14 +51,22 @@ define([
         el: '#left-panel-spellcheck',
 
         template: _.template([
-            '<div id="spellcheck-box" class="layout-ct vbox active" style="padding: 20px 15px 0; width: 100%; position: relative;overflow: hidden;">',
-            '<div id="spellcheck-header" style="font-size: 14px; padding-bottom: 16px;"><%= scope.txtSpelling %></div>',
-            '<div style="display: flex; width: 100%; padding-bottom: 8px;"><div id="spellcheck-current-word" style="vertical-align: top; width: 100%; display: inline-block;"></div><div id="spellcheck-next" style="display: inline-block;"></div></div>',
-            '<div id="spellcheck-suggestions-list" style="width: 100%; height: 116px; background-color: #fff; margin-bottom: 8px;"></div>',
-            '<div id="spellcheck-change" style="display: inline-block; padding-bottom: 16px;"></div><div id="spellcheck-ignore" class="padding-large" style="margin-left: 9px; display: inline-block;"></div>',
-            '<button class="btn btn-text-default auto" id="spellcheck-add-to-dictionary" style="min-width: 110px; display: block; margin-bottom: 16px;"><%= scope.txtAddToDictionary %></button>',
-            '<label class="header" style=" display: block;"><%= scope.txtDictionaryLanguage %></label><div id="spellcheck-dictionary-language" style="margin-top: 3px; padding-bottom: 16px;display: flex;"></div>',
-            '<div id="spellcheck-complete" style="display: flex;" class="hidden"><i class="img-commonctrl img-complete" style="display: inline-block;margin-right: 10px;"></i><%= scope.txtComplete %></div>',
+            '<div id="spellcheck-box" class="layout-ct vbox active">',
+                '<div id="spellcheck-header" style="font-size: 14px; padding-bottom: 16px;"><%= scope.txtSpelling %></div>',
+                '<div style="display: flex; width: 100%; padding-bottom: 8px;">',
+                    '<div id="spellcheck-current-word"></div>',
+                    '<div id="spellcheck-next" style=""></div>',
+                '</div>',
+                '<div id="spellcheck-suggestions-list"></div>',
+                '<div id="spellcheck-change" style=""></div>',
+                '<div id="spellcheck-ignore" class="padding-large"></div>',
+                '<button class="btn btn-text-default auto" id="spellcheck-add-to-dictionary"><%= scope.txtAddToDictionary %></button>',
+                '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
+                '<div id="spellcheck-dictionary-language"></div>',
+                '<div id="spellcheck-complete" class="hidden">',
+                    '<i class="img-commonctrl img-complete" style="display: inline-block;margin-right: 10px;"></i>',
+                    '<%= scope.txtComplete %>' ,
+                '</div>',
             '</div>'
         ].join('')),
 
diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less
index d0b4e1f00..671ed44c0 100644
--- a/apps/spreadsheeteditor/main/resources/less/app.less
+++ b/apps/spreadsheeteditor/main/resources/less/app.less
@@ -10,6 +10,7 @@
 // Bootstrap overwrite
 @import "../../../../common/main/resources/less/variables.less";
 @import "../../../../common/main/resources/less/colors-table.less";
+@import "../../../../common/main/resources/less/colors-table-dark.less";
 
 //
 // Bootstrap
@@ -131,6 +132,7 @@
 @import "celleditor.less";
 @import "formuladialog.less";
 @import "filterdialog.less";
+@import "spellcheck.less";
 
 @import "sprites/iconssmall@1x";
 @import "sprites/iconsbig@1x";
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
new file mode 100644
index 000000000..a86131602
--- /dev/null
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -0,0 +1,50 @@
+
+#spellcheck-box {
+    padding: 20px 15px 0;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+#spellcheck-current-word {
+    vertical-align: top;
+    width: 100%;
+    display: inline-block;
+}
+
+#spellcheck-next {
+    display: inline-block;
+}
+
+#spellcheck-suggestions-list {
+    width: 100%;
+    height: 116px;
+    background-color: @background-normal;
+    margin-bottom: 8px;
+}
+
+#spellcheck-change {
+    display: inline-block;
+    padding-bottom: 16px;
+}
+
+#spellcheck-ignore {
+    margin-left: 9px;
+    display: inline-block;
+}
+
+#spellcheck-add-to-dictionary {
+    min-width: 110px;
+    display: block;
+    margin-bottom: 16px;
+}
+
+#spellcheck-dictionary-language {
+    margin-top: 3px;
+    padding-bottom: 16px;
+    display: flex;
+}
+
+#spellcheck-complete {
+    display: flex;
+}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/resources/less/variables.less b/apps/spreadsheeteditor/main/resources/less/variables.less
index 5e97db181..65d0a2b3b 100644
--- a/apps/spreadsheeteditor/main/resources/less/variables.less
+++ b/apps/spreadsheeteditor/main/resources/less/variables.less
@@ -1,6 +1,7 @@
 //
 // Variables
 // --------------------------------------------------
+@header-background-color: var(--toolbar-header-spreadsheet);
 
 // Active color
 // -------------------------