diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index b7a2430d3..3b3f6a3f1 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -13,10 +13,119 @@ define([ 'theme-dark': 'flatDark' }; + var themes_map = { + 'theme-light': 'light', + 'theme-dark': 'dark' + } + sdk_themes_alias.contains = function (name) { return !!this[name]; } + themes_map.contains = function (name) { + return !!this[name]; + } + + var name_colors = [ + "background-normal", + "background-toolbar", + "background-toolbar-additional", + "background-primary-dialog-button", + "background-tab-underline", + "background-notification-popover", + "background-notification-badge", + "background-scrim", + "background-loader", + + "highlight-button-hover", + "highlight-button-pressed", + "highlight-button-pressed-hover", + "highlight-primary-dialog-button-hover", + "highlight-header-button-hover", + "highlight-header-button-pressed", + "highlight-toolbar-tab-underline", + "highlight-text-select", + + "border-toolbar", + "border-divider", + "border-regular-control", + "border-toolbar-button-hover", + "border-preview-hover", + "border-preview-select", + "border-control-focus", + "border-color-shading", + "border-error", + + "text-normal", + "text-normal-pressed", + "text-secondary", + "text-tertiary", + "text-link", + "text-inverse", + "text-toolbar-header", + "text-contrast-background", + + "icon-normal", + "icon-normal-pressed", + "icon-inverse", + "icon-toolbar-header", + "icon-notification-badge", + "icon-contrast-popover", + "icon-success", + + "canvas-background", + "canvas-content-background", + "canvas-page-border", + + "canvas-ruler-background", + "canvas-ruler-margins-background", + "canvas-ruler-mark", + "canvas-ruler-handle-border", + "canvas-ruler-handle-border-disabled", + + "canvas-high-contrast", + "canvas-high-contrast-disabled", + + "canvas-cell-border", + "canvas-cell-title-border", + "canvas-cell-title-border-hover", + "canvas-cell-title-border-selected", + "canvas-cell-title-hover", + "canvas-cell-title-selected", + + "canvas-dark-cell-title", + "canvas-dark-cell-title-hover", + "canvas-dark-cell-title-selected", + "canvas-dark-cell-title-border", + "canvas-dark-cell-title-border-hover", + "canvas-dark-cell-title-border-selected", + + "canvas-scroll-thumb", + "canvas-scroll-thumb-hover", + "canvas-scroll-thumb-pressed", + "canvas-scroll-thumb-border", + "canvas-scroll-thumb-border-hover", + "canvas-scroll-thumb-border-pressed", + "canvas-scroll-arrow", + "canvas-scroll-arrow-hover", + "canvas-scroll-arrow-pressed", + "canvas-scroll-thumb-target", + "canvas-scroll-thumb-target-hover", + "canvas-scroll-thumb-target-pressed" + ]; + + var get_current_theme_colors = function (colors) { + var out_object = {}; + if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) { + var style = getComputedStyle(document.body); + colors.forEach(function (item, index) { + out_object[item] = style.getPropertyValue('--' + item).trim() + }) + } + + return out_object; + } + var refresh_sdk_colors = function () { if ( !(Common.Utils.isIE10 || Common.Utils.isIE11) ) { var style = getComputedStyle(document.body); @@ -54,13 +163,15 @@ define([ this.api = api; var theme_name = Common.localStorage.getItem('ui-theme', 'theme-light'); - api.asc_setSkin(sdk_themes_alias[theme_name]); if ( !$('body').hasClass(theme_name) ) { $('body').addClass(theme_name); } - refresh_sdk_colors(); + var obj = get_current_theme_colors(name_colors); + obj.type = themes_map[theme_name]; + obj.name = name; + api.asc_setSkin(obj); // app.eventbus.addListeners({ // 'FileMenu': { @@ -81,17 +192,21 @@ define([ }, isDarkTheme: function () { - return this.current() == 'theme-dark'; + return themes_map[this.current()] == 'dark'; }, setTheme: function (name) { - if ( sdk_themes_alias.contains(name) ) { + if ( themes_map.contains(name) ) { var classname = document.documentElement.className.replace(/theme-\w+\s?/, ''); document.body.className = classname; $('body').addClass(name); - this.api.asc_setSkin(sdk_themes_alias[name]); - refresh_sdk_colors(); + + var obj = get_current_theme_colors(name_colors); + obj.type = themes_map[name]; + obj.name = name; + + this.api.asc_setSkin(obj); Common.localStorage.setItem('ui-theme', name); Common.NotificationCenter.trigger('uitheme:changed', name); diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 46a6e81be..7331c5462 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -95,7 +95,7 @@ --canvas-scroll-thumb-pressed: #adadad; --canvas-scroll-thumb-border: #c0c0c0; --canvas-scroll-thumb-border-hover: #c0c0c0; - --canvas-scroll-thumb-border-pressed: #0%; + --canvas-scroll-thumb-border-pressed: #adadad; --canvas-scroll-arrow: #adadad; --canvas-scroll-arrow-hover: #f7f7f7; --canvas-scroll-arrow-pressed: #f7f7f7;