Merge pull request #827 from ONLYOFFICE/feature/classic-light-theme

Feature/classic light theme

apps/common/main/lib/controller/Themes.js

@@ -7,23 +7,22 @@ define([
 ], function () {
     'use strict';
 
-    Common.UI.Themes = new (function() {
+    Common.UI.Themes = new (function(locale) {
-        var sdk_themes_alias = {
+        !locale && (locale = {});
-            'theme-light': 'flat',
+        var id_default_theme = 'theme-classic-light';
-            'theme-dark': 'flatDark'
-        };
-
         var themes_map = {
-            'theme-light': 'light',
+            'theme-light': {
-            'theme-dark': 'dark'
+                text: locale.txtThemeLight || 'Light',
-        }
+                type: 'light'
-
+            },
-        sdk_themes_alias.contains = function (name) {
+            'theme-classic-light': {
-            return !!this[name];
+                text: locale.txtThemeClassicLight || 'Classic Light',
-        }
+                type: 'light'
-
+            },
-        themes_map.contains = function (name) {
+            'theme-dark': {
-            return !!this[name];
+                text: locale.txtThemeDark || 'Dark',
+                type: 'dark'
+            },
         }
 
         var name_colors = [
@@ -126,34 +125,78 @@ define([
             return out_object;
         }
 
-        var refresh_sdk_colors = function () {
+        var create_colors_css = function (id, colors) {
-            if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) {
+            if ( !!colors && !!id ) {
-                var style = getComputedStyle(document.body);
+                var _css_array = [':root .', id, '{'];
-                if ( !!window.DE ) {
+                for (var c in colors) {
-                    var color_background_normal = style.getPropertyValue('--background-normal');
+                    _css_array.push('--', c, ':', colors[c], ';');
-                    this.api.asc_setSkin({
-                        "RulerOutline": style.getPropertyValue('--border-toolbar'),
-                        "RulerMarkersFillColor": color_background_normal,
-                        "RulerMarkersFillColorOld": color_background_normal,
-                        "RulerTableColor1": color_background_normal,
-                        "RulerLight": style.getPropertyValue("--canvas-ruler-background"),
-                        "RulerDark": style.getPropertyValue("--canvas-ruler-margins-background"),
-                        "RulerTextColor": style.getPropertyValue("--canvas-ruler-mark"),
-                        "RulerTableColor2": style.getPropertyValue("--canvas-ruler-handle-border"),
-                        "RulerTableColor2Old": style.getPropertyValue("--canvas-ruler-handle-border-disabled"),
-                        "RulerTabsColor": style.getPropertyValue("--canvas-high-contrast"),
-                        "RulerTabsColorOld": style.getPropertyValue("--canvas-high-contrast-disabled"),
-                    });
                 }
+
+                _css_array.push('}');
+                return _css_array.join('');
             }
         }
-        return {
-            THEME_LIGHT_ID: 'theme-light',
-            THEME_DARK_ID: 'theme-dark',
 
+        var write_theme_css = function (css) {
+            if ( !!css ) {
+                var style = document.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = css;
+                document.getElementsByTagName('head')[0].appendChild(style);
+            }
+        }
+
+        var parse_themes_object = function (obj) {
+            if ( !!obj.themes && obj.themes instanceof Array ) {
+                obj.themes.forEach(function (item) {
+                    if ( !!item.id ) {
+                        themes_map[item.id] = {text: item.name, type: item.type};
+                        write_theme_css(create_colors_css(item.id, item.colors));
+                    } else
+                    if ( typeof item == 'string' ) {
+                        get_themes_config(item)
+                    }
+                });
+            } else
+            if ( obj.id ) {
+                themes_map[obj.id] = {text: obj.name, type: obj.type};
+                write_theme_css( create_colors_css(obj.id, obj.colors) );
+            }
+        }
+
+        var get_themes_config = function (url) {
+            fetch(url, {
+                method: 'get',
+                headers: {
+                    'Accept': 'application/json',
+                },
+            }).then(function(response) {
+                if (!response.ok) {
+                    throw new Error('server error');
+                }
+                return response.json();
+            }).then(function(response) {
+                if ( response.then ) {
+                    // return response.json();
+                } else {
+                    parse_themes_object(response);
+
+                    /* to break promises chain */
+                    throw new Error('loaded');
+                }
+            }).catch(function(e) {
+                if ( e.message == 'loaded' ) {
+                } else console.log('fetch error: ' + e);
+            });
+        }
+
+        var on_document_ready = function (el) {
+            // get_themes_config('../../common/main/resources/themes/themes.json')
+        }
+
+        return {
             init: function (api) {
                 var me = this;
-                refresh_sdk_colors = refresh_sdk_colors.bind(this);
 
                 $(window).on('storage', function (e) {
                     if ( e.key == 'ui-theme' ) {
@@ -162,7 +205,7 @@ define([
                 })
 
                 this.api = api;
-                var theme_name = Common.localStorage.getItem('ui-theme', 'theme-light');
+                var theme_name = Common.localStorage.getItem('ui-theme', id_default_theme);
 
                 if ( !$('body').hasClass(theme_name) ) {
                     $('body').addClass(theme_name);
@@ -173,49 +216,58 @@ define([
                 obj.name = theme_name;
                 api.asc_setSkin(obj);
 
-                // app.eventbus.addListeners({
+                Common.NotificationCenter.on('document:ready', on_document_ready.bind(this));
-                //    'FileMenu': {
-                //         'settings:apply': function (menu) {
-                //         }
-                //     }
-                // }, {id: 'Themes'});
-
-                // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
             },
 
             available: function () {
                 return !Common.Utils.isIE;
             },
 
-            current: function () {
+            map: function () {
-                return Common.localStorage.getItem('ui-theme') || 'theme-light';
+                return themes_map
+            },
+
+            get: function (id) {
+                return themes_map[id]
+            },
+
+            currentThemeId: function () {
+                return Common.localStorage.getItem('ui-theme') || id_default_theme;
+            },
+
+            defaultThemeId: function () {
+                return id_default_theme;
+            },
+
+            defaultTheme: function () {
+                return themes_map[id_default_theme]
             },
 
             isDarkTheme: function () {
                 return themes_map[this.current()] == 'dark';
             },
 
-            setTheme: function (name) {
+            setTheme: function (id) {
-                if ( themes_map.contains(name) ) {
+                if ( !!themes_map[id] ) {
                     var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
                     document.body.className = classname;
 
-                    $('body').addClass(name);
+                    $('body').addClass(id);
 
                     var obj = get_current_theme_colors(name_colors);
-                    obj.type = themes_map[name];
+                    obj.type = themes_map[id].type;
-                    obj.name = name;
+                    obj.name = id;
 
                     this.api.asc_setSkin(obj);
 
-                    Common.localStorage.setItem('ui-theme', name);
+                    Common.localStorage.setItem('ui-theme', id);
-                    Common.NotificationCenter.trigger('uitheme:changed', name);
+                    Common.NotificationCenter.trigger('uitheme:changed', id);
                 }
             },
 
             toggleTheme: function () {
-                this.setTheme(this.current() == 'theme-dark' ? 'theme-light' : 'theme-dark');
+                this.setTheme(this.current() == 'theme-dark' ? id_default_theme : 'theme-dark');
             }
         }
-    })();
+    })(Common.UI.Themes);
 });

apps/common/main/lib/view/Header.js

@@ -782,7 +782,6 @@ define([
             textAdvSettings: 'Advanced Settings',
             tipViewSettings: 'View Settings',
             textRemoveFavorite: 'Remove from Favorites',
-            textDarkTheme: 'Dark theme',
             textAddFavorite: 'Mark as favorite'
         }
     }(), Common.Views.Header || {}))

apps/common/main/resources/less/buttons.less

@@ -77,6 +77,8 @@
     &.active:not(.disabled){
         .caret {
             transform: rotate(45deg);
+            border-color: @icon-normal-pressed-ie;
+            border-color: @icon-normal-pressed;
         }
     }
 
@@ -356,8 +358,8 @@
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        color: @text-normal-ie;
+        color: @text-normal-pressed-ie;
-        color: @text-normal;
+        color: @text-normal-pressed;
         background-color: @highlight-button-pressed-ie;
         background-color: @highlight-button-pressed;
     }

apps/common/main/resources/less/colors-table-classic.less

@@ -0,0 +1,121 @@
+
+:root {
+    .theme-classic-light {
+        --toolbar-header-document: #446995;
+        --toolbar-header-spreadsheet: #40865c;
+        --toolbar-header-presentation: #aa5252;
+
+        --background-normal: #fff;
+        --background-toolbar: #f1f1f1;
+        --background-toolbar-additional: #f1f1f1;
+        --background-primary-dialog-button: #7d858c;
+        --background-tab-underline: #444;
+        --background-notification-popover: #fcfed7;
+        --background-notification-badge: #ffd112;
+        --background-scrim: fade(#000, 20%);
+        --background-loader: fade(#000, 65%);
+
+        --highlight-button-hover: #d8dadc;
+        --highlight-button-pressed: #7d858c;
+        --highlight-button-pressed-hover: #7d858c;
+        --highlight-primary-dialog-button-hover: #666d73;
+        --highlight-header-button-hover: fade(#fff, 20%);
+        --highlight-header-button-pressed: fade(#000, 20%);
+        --highlight-toolbar-tab-underline: #444;
+        --highlight-text-select: #3494fb;
+
+        --border-toolbar: #cbcbcb;
+        --border-divider: #cbcbcb;
+        --border-regular-control: #cfcfcf;
+        --border-toolbar-button-hover: #d8dadc;
+        --border-preview-hover: #cfcfcf;
+        --border-preview-select: #848484;
+        --border-control-focus: #848484;
+        --border-color-shading: fade(#000, 20%);
+        --border-error: #d9534f;
+
+        --text-normal: #444;
+        --text-normal-pressed: #fff;
+        --text-secondary: #a5a5a5;
+        --text-tertiary: #a5a5a5;
+        --text-link: #acbfff;
+        --text-inverse: #fff;
+        --text-toolbar-header: #fff;
+        --text-contrast-background: #fff;
+
+        --icon-normal: #444;
+        --icon-normal-pressed: #fff;
+        --icon-inverse: #444;
+        --icon-toolbar-header: fade(#fff, 80%);
+        --icon-notification-badge: #000;
+        --icon-contrast-popover: #fff;
+        --icon-success: #5b9f27;
+
+        // Canvas colors
+        --canvas-background: #e2e2e2;
+        --canvas-content-background: #fff;
+        --canvas-page-border: #555;
+
+        --canvas-ruler-background: #555;
+        --canvas-ruler-margins-background: #444;
+        --canvas-ruler-mark: #b2b2b2;
+        --canvas-ruler-handle-border: #b2b2b2;
+        --canvas-ruler-handle-border-disabled: #717171;
+
+        --canvas-high-contrast: #fff;
+        --canvas-high-contrast-disabled: #888;
+
+        --canvas-cell-border: fade(#000, 10%);
+        --canvas-cell-title-border: #757575;
+        --canvas-cell-title-border-hover: #858585;
+        --canvas-cell-title-border-selected: #9e9e9e;
+        --canvas-cell-title-hover: #787878;
+        --canvas-cell-title-selected: #939393;
+
+        --canvas-dark-cell-title: #111;
+        --canvas-dark-cell-title-hover: #000;
+        --canvas-dark-cell-title-selected: #333;
+        --canvas-dark-cell-title-border: #282828;
+        --canvas-dark-cell-title-border-hover: #191919;
+        --canvas-dark-cell-title-border-selected: #474747;
+
+        --canvas-scroll-thumb: #404040;
+        --canvas-scroll-thumb-hover: #999;
+        --canvas-scroll-thumb-pressed: #adadad;
+        --canvas-scroll-thumb-border: #2a2a2a;
+        --canvas-scroll-thumb-border-hover: #2a2a2a;
+        --canvas-scroll-thumb-border-pressed: #2a2a2a;
+        --canvas-scroll-arrow: #999;
+        --canvas-scroll-arrow-hover: #404040;
+        --canvas-scroll-arrow-pressed: #404040;
+        --canvas-scroll-thumb-target: #999;
+        --canvas-scroll-thumb-target-hover: #404040;
+        --canvas-scroll-thumb-target-pressed: #404040;
+
+        // Others
+
+        --button-small-normal-icon-offset-x: 0;
+        --button-small-active-icon-offset-x: -20px;
+        --button-large-normal-icon-offset-x: 0;
+        --button-large-active-icon-offset-x: -31px;
+        --button-huge-normal-icon-offset-x: 0;
+        --button-huge-active-icon-offset-x: -40px;
+        --button-xhuge-normal-icon-offset-x: 0;
+        --button-xhuge-active-icon-offset-x: -28px;
+        //--button-xhuge-normal-icon-offset-x: -37px;
+        //--button-xhuge-active-icon-offset-x: -37px;
+
+        --modal-window-mask-opacity: 0.6;
+        --image-border-types-filter: none;
+        --image-border-types-filter-selected: invert(100%) brightness(4);
+        --component-normal-icon-filter: invert(100%);
+
+        --component-normal-icon-opacity: .8;
+        --component-hover-icon-opacity: .8;
+        --component-active-icon-opacity: .8;
+        --component-active-hover-icon-opacity: .8;
+        --component-disabled-opacity: .3;
+
+        --menu-icon-item-checked-offset-x: -20px;
+    }
+}

apps/common/main/resources/less/dropdown-menu.less

@@ -46,8 +46,8 @@
             }
 
             &:hover {
-                color: @text-normal-pressed-ie;
+                color: @text-normal-ie;
-                color: @text-normal-pressed;
+                color: @text-normal;
                 background-color: @highlight-button-hover-ie;
                 background-color: @highlight-button-hover;
             }

apps/common/main/resources/less/treeview.less

@@ -40,6 +40,8 @@
     &.selected {
       background-color: @highlight-button-pressed-ie;
       background-color: @highlight-button-pressed;
+      color: @text-normal-pressed-ie;
+      color: @text-normal-pressed;
     }
 
     &.selected .empty {

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -464,10 +464,6 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                data        : [
-                    { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
-                    { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
-                ]
             });
 
             $markup.find('.btn.primary').each(function(index, el){
@@ -600,8 +596,16 @@ define([
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("de-settings-paste-button"));
 
-            item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()});
+            var data = [];
-            this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID);
+            for (var t in Common.UI.Themes.map()) {
+                data.push({value: t, displayValue: Common.UI.Themes.get(t).text});
+            }
+
+            if ( data.length ) {
+                this.cmbTheme.setData(data);
+                item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()});
+                this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId());
+            }
         },
 
         applySettings: function() {
@@ -730,8 +734,6 @@ define([
         strPasteButton: 'Show Paste Options button when content is pasted',
         txtProofing: 'Proofing',
         strTheme: 'Theme',
-        txtThemeLight: 'Light',
-        txtThemeDark: 'Dark',
         txtAutoCorrect: 'AutoCorrect options...'
     }, DE.Views.FileMenuPanels.Settings || {}));
 

apps/documenteditor/main/locale/en.json

@@ -192,6 +192,9 @@
   "Common.UI.Window.textInformation": "Information",
   "Common.UI.Window.textWarning": "Warning",
   "Common.UI.Window.yesButtonText": "Yes",
+  "Common.UI.Themes.txtThemeDark": "Dark",
+  "Common.UI.Themes.txtThemeLight": "Light",
+  "Common.UI.Themes.txtThemeClassicLight": "Classic Light",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
   "Common.Views.About.txtAddress": "address: ",
@@ -260,7 +263,7 @@
   "Common.Views.Header.textAdvSettings": "Advanced settings",
   "Common.Views.Header.textBack": "Open file location",
   "Common.Views.Header.textCompactView": "Hide Toolbar",
-  "Common.Views.Header.textDarkTheme": "Dark theme",
+  "del_Common.Views.Header.textDarkTheme": "Dark theme",
   "Common.Views.Header.textHideLines": "Hide Rulers",
   "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
   "Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
@@ -1720,8 +1723,8 @@
   "DE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking",
   "DE.Views.FileMenuPanels.Settings.txtStopMacros": "Disable All",
   "DE.Views.FileMenuPanels.Settings.txtStopMacrosDesc": "Disable all macros without a notification",
-  "DE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
+  "del_DE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
-  "DE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
+  "del_DE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
   "DE.Views.FileMenuPanels.Settings.txtWarnMacros": "Show Notification",
   "DE.Views.FileMenuPanels.Settings.txtWarnMacrosDesc": "Disable all macros with a notification",
   "DE.Views.FileMenuPanels.Settings.txtWin": "as Windows",

apps/documenteditor/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-classic.less";
 @import "../../../../common/main/resources/less/colors-table-dark.less";
 
 //

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -403,10 +403,6 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                data        : [
-                    { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
-                    { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
-                ]
             });
 
             $markup.find('.btn.primary').each(function(index, el){
@@ -529,8 +525,16 @@ define([
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("pe-settings-paste-button"));
 
-            item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()});
+            var data = [];
-            this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID);
+            for (var t in Common.UI.Themes.map()) {
+                data.push({value: t, displayValue: Common.UI.Themes.get(t).text});
+            }
+
+            if ( data.length ) {
+                this.cmbTheme.setData(data);
+                item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()});
+                this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId());
+            }
         },
 
         applySettings: function() {

apps/presentationeditor/main/locale/en.json

@@ -83,6 +83,9 @@
   "Common.UI.Window.textInformation": "Information",
   "Common.UI.Window.textWarning": "Warning",
   "Common.UI.Window.yesButtonText": "Yes",
+  "Common.UI.Themes.txtThemeDark": "Dark",
+  "Common.UI.Themes.txtThemeLight": "Light",
+  "Common.UI.Themes.txtThemeClassicLight": "Classic Light",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
   "Common.Views.About.txtAddress": "address: ",
@@ -148,7 +151,7 @@
   "Common.Views.Header.textAdvSettings": "Advanced settings",
   "Common.Views.Header.textBack": "Open file location",
   "Common.Views.Header.textCompactView": "Hide Toolbar",
-  "Common.Views.Header.textDarkTheme": "Dark theme",
+  "del_Common.Views.Header.textDarkTheme": "Dark theme",
   "Common.Views.Header.textHideLines": "Hide Rulers",
   "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
   "Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
@@ -1352,8 +1355,8 @@
   "PE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking",
   "PE.Views.FileMenuPanels.Settings.txtStopMacros": "Disable All",
   "PE.Views.FileMenuPanels.Settings.txtStopMacrosDesc": "Disable all macros without a notification",
-  "PE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
+  "del_PE.Views.FileMenuPanels.Settings.txtThemeDark": "Dark",
-  "PE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
+  "del_PE.Views.FileMenuPanels.Settings.txtThemeLight": "Light",
   "PE.Views.FileMenuPanels.Settings.txtWarnMacros": "Show Notification",
   "PE.Views.FileMenuPanels.Settings.txtWarnMacrosDesc": "Disable all macros with a notification",
   "PE.Views.FileMenuPanels.Settings.txtWin": "as Windows",

apps/presentationeditor/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-classic.less";
 @import "../../../../common/main/resources/less/colors-table-dark.less";
 
 //

apps/spreadsheeteditor/main/app/view/FileMenuPanels.js

@@ -1009,10 +1009,6 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                data        : [
-                    { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
-                    { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
-                ]
             });
 
             $markup.find('.btn.primary').each(function(index, el){
@@ -1175,8 +1171,16 @@ define([
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("sse-settings-paste-button"));
 
-            item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.current()});
+            var data = [];
-            this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.THEME_LIGHT_ID);
+            for (var t in Common.UI.Themes.map()) {
+                data.push({value: t, displayValue: Common.UI.Themes.get(t).text});
+            }
+
+            if ( data.length ) {
+                this.cmbTheme.setData(data);
+                item = this.cmbTheme.store.findWhere({value: Common.UI.Themes.currentThemeId()});
+                this.cmbTheme.setValue(item ? item.get('value') : Common.UI.Themes.defaultThemeId());
+            }
         },
 
         applySettings: function() {

apps/spreadsheeteditor/main/locale/en.json

@@ -84,6 +84,9 @@
   "Common.UI.Window.textInformation": "Information",
   "Common.UI.Window.textWarning": "Warning",
   "Common.UI.Window.yesButtonText": "Yes",
+  "Common.UI.Themes.txtThemeDark": "Dark",
+  "Common.UI.Themes.txtThemeLight": "Light",
+  "Common.UI.Themes.txtThemeClassicLight": "Classic Light",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
   "Common.Views.About.txtAddress": "address: ",
@@ -144,7 +147,7 @@
   "Common.Views.Header.textAdvSettings": "Advanced settings",
   "Common.Views.Header.textBack": "Open file location",
   "Common.Views.Header.textCompactView": "Hide Toolbar",
-  "Common.Views.Header.textDarkTheme": "Dark theme",
+  "del_Common.Views.Header.textDarkTheme": "Dark theme",
   "Common.Views.Header.textHideLines": "Hide Rulers",
   "Common.Views.Header.textHideStatusBar": "Hide Status Bar",
   "Common.Views.Header.textRemoveFavorite": "Remove from Favorites",
@@ -1938,8 +1941,8 @@
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtRunMacrosDesc": "Enable all macros without a notification",
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtStopMacros": "Disable All",
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtStopMacrosDesc": "Disable all macros without a notification",
-  "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeDark": "Dark",
+  "del_SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeDark": "Dark",
-  "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeLight": "Light",
+  "del_SSE.Views.FileMenuPanels.MainSettingsGeneral.txtThemeLight": "Light",
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWarnMacros": "Show Notification",
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWarnMacrosDesc": "Disable all macros with a notification",
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWin": "as Windows",

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-classic.less";
 @import "../../../../common/main/resources/less/colors-table-dark.less";
 
 //