Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1851 from ONLYOFFICE/feature-change-color-table

Browse source 
Changed color tables.
This commit is contained in:
maxkadushkin 2022-07-13 13:12:18 +03:00 committed by GitHub
parent 98a418f7e3 024adfe49c
commit 9093eab85f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 173 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/common/main/lib/controller/Themes.js
View file

@ -36,6 +36,11 @@ define([
type: 'dark',
source: 'static',
},
'theme-contrast-dark': {
text: locale.txtThemeContrastDark || 'Dark Contrast',
type: 'dark',
source: 'static',
},
}
if ( !!window.currentLoaderTheme ) {
@ -118,6 +123,7 @@ define([
"canvas-page-border",
"canvas-ruler-background",
"canvas-ruler-border",
"canvas-ruler-margins-background",
"canvas-ruler-mark",
"canvas-ruler-handle-border",

10
apps/common/main/lib/util/htmlutils.js
View file

@ -93,10 +93,12 @@ if ( !!ui_theme_name ) {
}
if ( checkLocalStorage ) {
var content_theme = localStorage.getItem("content-theme");
if ( content_theme == 'dark' ) {
var current_theme = localStorage.getItem("ui-theme");
if ( !!current_theme && /type":\s*"dark/.test(current_theme) ) {
let current_theme = localStorage.getItem("ui-theme");
if ( !!current_theme && /type":\s*"dark/.test(current_theme) ) {
document.body.classList.add("theme-type-dark");
let content_theme = localStorage.getItem("content-theme");
if ( content_theme == 'dark' ) {
document.body.classList.add("content-theme-dark");
}
}

2
apps/common/main/resources/less/colors-table-classic.less
View file

@ -71,6 +71,7 @@
--canvas-page-border: #bbbec2;
--canvas-ruler-background: #fff;
--canvas-ruler-border: #cbcbcb;
--canvas-ruler-margins-background: #d6d6d6;
--canvas-ruler-mark: #585b5e;
--canvas-ruler-handle-border: #555;
@ -138,3 +139,4 @@
--menu-icon-item-checked-offset-x: -20px;
}
}

142
apps/common/main/resources/less/colors-table-dark-contrast.less Normal file
View file

@ -0,0 +1,142 @@
:root {
.theme-contrast-dark {
--toolbar-header-document: #1e1e1e;
--toolbar-header-spreadsheet: #1e1e1e;
--toolbar-header-presentation: #1e1e1e;
--text-toolbar-header-on-background-document: #2a2a2a;
--text-toolbar-header-on-background-spreadsheet: #2a2a2a;
--text-toolbar-header-on-background-presentation: #2a2a2a;
--background-normal: #212121;
--background-toolbar: #2a2a2a;
--background-toolbar-additional: #2a2a2a;
--background-primary-dialog-button: #E6E6E6;
--background-accent-button: #4d76a8;
--background-tab-underline: #717171;
--background-notification-popover: #5f5d81;
--background-notification-badge: #7792fd;
--background-scrim: fade(black, 60%);
--background-loader: fade(#121212, 95%);
--background-alt-key-hint: #FFD938;
--background-contrast-popover: #121212;
--highlight-button-hover: #424242;
--highlight-button-pressed: #666666;
--highlight-button-pressed-hover: #828282;
--highlight-primary-dialog-button-hover: #a6a6a6;
--highlight-accent-button-hover: #75a2d6;
--highlight-accent-button-pressed: #89afdc;
--highlight-header-button-hover: #424242;
--highlight-header-button-pressed: #828282;
--highlight-toolbar-tab-underline: #d0d0d0;
--highlight-text-select: #96c8fd;
--border-toolbar: #616161;
--border-divider: #414141;
--border-regular-control: #696969;
--border-toolbar-button-hover: #616161;
--border-preview-hover: #828282;
--border-preview-select: #888;
--border-control-focus: #b8b8b8;
--border-color-shading: fade(#fff, 15%);
--border-error: #f62211;
--border-contrast-popover: #616161;
--text-normal: #e8e8e8;
--text-normal-pressed: #e8e8e8;
--text-secondary: #b8b8b8;
--text-tertiary: #888888;
--text-link: #ffd78c;
--text-link-hover: #ffd78c;
--text-link-active: #ffd78c;
--text-link-visited: #ffd78c;
--text-inverse: #121212;
--text-toolbar-header: #e8e8e8;
--text-contrast-background: #fff;
--text-alt-key-hint: #121212;
--icon-normal: #e8e8e8;
--icon-normal-pressed: #e8e8e8;
--icon-inverse: #2a2a2a;
--icon-toolbar-header: #d0d0d0;
--icon-notification-badge: #121212;
--icon-contrast-popover: #fff;
--icon-success: #090;
// Canvas
--canvas-background: #121212;
--canvas-content-background: #fff;
--canvas-page-border: #5f5f5f;
--canvas-ruler-background: #414141;
--canvas-ruler-border: #616161;
--canvas-ruler-margins-background: #1e1e1e;
--canvas-ruler-mark: #d0d0d0;
--canvas-ruler-handle-border: #b8b8b8;
--canvas-ruler-handle-border-disabled: #717171;
--canvas-high-contrast: #c3c3c3;
--canvas-high-contrast-disabled: #7d7d7d;
--canvas-cell-border: #656565;
--canvas-cell-title-border: #616161;
--canvas-cell-title-border-hover: #a0a0a0;
--canvas-cell-title-border-selected: #888888;
--canvas-cell-title-hover: #303030;
--canvas-cell-title-selected: #3d3d3d;
--canvas-dark-cell-title: #1e1e1e;
--canvas-dark-cell-title-hover: #828282;
--canvas-dark-cell-title-selected: #414141;
--canvas-dark-cell-title-border: #717171;
--canvas-dark-cell-title-border-hover: #a0a0a0;
--canvas-dark-cell-title-border-selected: #b8b8b8;
--canvas-scroll-thumb: #2a2a2a;
--canvas-scroll-thumb-hover: #424242;
--canvas-scroll-thumb-pressed: #4d4d4d;
--canvas-scroll-thumb-border: #616161;
--canvas-scroll-thumb-border-hover: #616161;
--canvas-scroll-thumb-border-pressed: #616161;
--canvas-scroll-arrow: #7d7d7d;
--canvas-scroll-arrow-hover: #8c8c8c;
--canvas-scroll-arrow-pressed: #999999;
--canvas-scroll-thumb-target: #717171;
--canvas-scroll-thumb-target-hover: #8c8c8c;
--canvas-scroll-thumb-target-pressed: #999999;
// Others
--button-small-normal-icon-offset-x: -20px;
--button-small-active-icon-offset-x: -20px;
--button-large-normal-icon-offset-x: -31px;
--button-large-active-icon-offset-x: -31px;
--button-huge-normal-icon-offset-x: -40px;
--button-huge-active-icon-offset-x: -40px;
--button-xhuge-normal-icon-offset-x: -28px;
--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: invert(100%) brightness(4);
--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: 1;
--component-active-hover-icon-opacity: 1;
--component-disabled-opacity: .4;
--header-component-normal-icon-opacity: .8;
--header-component-hover-icon-opacity: .8;
--header-component-active-icon-opacity: 1;
--header-component-active-hover-icon-opacity: 1;
--menu-icon-item-checked-offset-x: -20px;
}
}

7
apps/common/main/resources/less/colors-table-dark.less
View file

@ -33,7 +33,7 @@
--highlight-toolbar-tab-underline: #ddd;
--highlight-text-select: #96c8fd;
--border-toolbar: #2a2a2a;
--border-toolbar: #616161;
--border-divider: #505050;
--border-regular-control: #666;
--border-toolbar-button-hover: #5a5a5a;
@ -60,7 +60,7 @@
--icon-normal: fade(#fff, 80%);
--icon-normal-pressed: fade(#fff, 80%);
--icon-inverse: #444;
--icon-toolbar-header: #fff;
--icon-toolbar-header: fade(#fff, 80%);
--icon-notification-badge: #000;
--icon-contrast-popover: #fff;
--icon-success: #090;
@ -72,6 +72,7 @@
--canvas-page-border: #555;
--canvas-ruler-background: #555;
--canvas-ruler-border: #2A2A2A;
--canvas-ruler-margins-background: #444;
--canvas-ruler-mark: #b6b6b6;
--canvas-ruler-handle-border: #b6b6b6;
@ -129,7 +130,7 @@
--component-hover-icon-opacity: .8;
--component-active-icon-opacity: 1;
--component-active-hover-icon-opacity: 1;
--component-disabled-opacity: .4;
--component-disabled-opacity: .6;
--header-component-normal-icon-opacity: .8;
--header-component-hover-icon-opacity: .8;

2
apps/common/main/resources/less/colors-table.less
View file

@ -83,6 +83,7 @@
--canvas-page-border: #ccc;
--canvas-ruler-background: #fff;
--canvas-ruler-border: #cbcbcb;
--canvas-ruler-margins-background: #d9d9d9;
--canvas-ruler-mark: #555;
--canvas-ruler-handle-border: #555;
@ -256,3 +257,4 @@
@canvas-page-border: var(--canvas-page-border);
@canvas-scroll-thumb-hover: var(--canvas-scroll-thumb-hover);
@canvas-scroll-thumb-border-hover: var(--canvas-scroll-thumb-border-hover);

2
apps/documenteditor/main/index.html
View file

@ -10,7 +10,7 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
.theme-dark, .theme-type-dark {
--toolbar-header-document: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;

1
apps/documenteditor/main/locale/en.json
View file

@ -197,6 +197,7 @@
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light",
"Common.UI.Themes.txtThemeDark": "Dark",
"Common.UI.Themes.txtThemeContrastDark": "Dark Contrast",
"Common.UI.Themes.txtThemeLight": "Light",
"Common.UI.Themes.txtThemeSystem": "Same as system",
"Common.UI.Window.cancelButtonText": "Cancel",

1
apps/documenteditor/main/resources/less/app.less
View file

@ -12,6 +12,7 @@
@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";
@import "../../../../common/main/resources/less/colors-table-dark-contrast.less";
//
// Bootstrap

2
apps/presentationeditor/main/index.html
View file

@ -9,7 +9,7 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
.theme-dark, .theme-type-dark {
--toolbar-header-presentation: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;

2
apps/presentationeditor/main/index.reporter.html
View file

@ -11,7 +11,7 @@
<!-- splash -->
<style>
.theme-dark {
.theme-dark, .theme-type-dark {
--toolbar-header-presentation: #2a2a2a;
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/

2
apps/presentationeditor/main/index_loader.html
View file

@ -9,7 +9,7 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
.theme-dark, .theme-type-dark {
--romb-start-color: #555;
}
.loadmask {

1
apps/presentationeditor/main/locale/en.json
View file

@ -284,6 +284,7 @@
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light",
"Common.UI.Themes.txtThemeDark": "Dark",
"Common.UI.Themes.txtThemeContrastDark": "Dark Contrast",
"Common.UI.Themes.txtThemeLight": "Light",
"Common.UI.Themes.txtThemeSystem": "Same as system",
"Common.UI.Window.cancelButtonText": "Cancel",

1
apps/presentationeditor/main/resources/less/app.less
View file

@ -12,6 +12,7 @@
@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";
@import "../../../../common/main/resources/less/colors-table-dark-contrast.less";
//
// Bootstrap

2
apps/spreadsheeteditor/main/index.html
View file

@ -8,7 +8,7 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
.theme-dark, .theme-type-dark {
--toolbar-header-spreadsheet: #2a2a2a;
--background-toolbar: #404040;
--background-normal: #333;

1
apps/spreadsheeteditor/main/locale/en.json
View file

@ -138,6 +138,7 @@
"Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
"Common.UI.Themes.txtThemeClassicLight": "Classic Light",
"Common.UI.Themes.txtThemeDark": "Dark",
"Common.UI.Themes.txtThemeContrastDark": "Dark Contrast",
"Common.UI.Themes.txtThemeLight": "Light",
"Common.UI.Themes.txtThemeSystem": "Same as system",
"Common.UI.Window.cancelButtonText": "Cancel",

1
apps/spreadsheeteditor/main/resources/less/app.less
View file

@ -12,6 +12,7 @@
@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";
@import "../../../../common/main/resources/less/colors-table-dark-contrast.less";
//
// Bootstrap