diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index ca260c340..94e23ae39 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -9,7 +9,7 @@
     <!-- splash -->
     <style type="text/css">
         .theme-dark {
-            --toolbar-header-document: #2a2a2a;
+            --toolbar-header-spreadsheet: #2a2a2a;
             --background-toolbar: #404040;
             --background-normal: #333;
             --border-toolbar: #2a2a2a;
@@ -36,7 +36,7 @@
             width: 100%;
             min-height: 28px;
             background: #40865c;
-            background: var(--toolbar-header-document, #40865c);
+            background: var(--toolbar-header-spreadsheet, #40865c);
         }
 
         .loadmask > .brendpanel > div {
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 338d9c4d4..28a758460 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -27,7 +27,7 @@
             width: 100%;
             min-height: 28px;
             background: #40865c;
-            background: var(--toolbar-header-document, #40865c);
+            background: var(--toolbar-header-spreadsheet, #40865c);
         }
 
         .loadmask > .brendpanel > div {