Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Improve dark mode

Browse Source 
Summary:
Enhances dark mode support for the formula editor, and adds support to
the color select popup. Also fixes some bugs with dark mode.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3847
This commit is contained in:
George Gevoian
2023-04-11 01:00:28 -04:00
parent 9d0e6694fc
commit 8a0bb4d4fe
27 changed files with 537 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/common/themes/GristDark.ts
View File

@@ -89,6 +89,9 @@ export const GristDark: ThemeColors = {
'popup-shadow-outer': '#000000',
'popup-close-button-fg': '#A4A4A4',
/* Prompts */
'prompt-fg': '#A4A4A4',
/* Progress Bars */
'progress-bar-fg': '#1DA270',
'progress-bar-error-fg': '#FF6666',
@@ -195,6 +198,10 @@ export const GristDark: ThemeColors = {
'filter-bar-button-saved-bg': '#555563',
'filter-bar-button-saved-hover-bg': '#69697D',
/* Icons */
'icon-disabled': '#A4A4A4',
'icon-error': '#FFA500',
/* Icon Buttons */
'icon-button-fg': '#FFFFFF',
'icon-button-primary-bg': '#1DA270',
@@ -352,6 +359,8 @@ export const GristDark: ThemeColors = {
'code-view-params': '#D2D2D2',
'code-view-string': '#ED7373',
'code-view-number': '#ED7373',
'code-view-builtin': '#BFE6D8',
'code-view-literal': '#9ED682',
/* Importer */
'importer-table-info-border': '#69697D',
@@ -394,6 +403,10 @@ export const GristDark: ThemeColors = {
'access-rules-column-item-icon-fg': '#A4A4A4',
'access-rules-column-item-icon-hover-fg': '#EFEFEF',
'access-rules-column-item-icon-hover-bg': '#A4A4A4',
'access-rules-formula-editor-bg': '#32323F',
'access-rules-formula-editor-border-hover': '#69697D',
'access-rules-formula-editor-bg-disabled': '#57575F',
'access-rules-formula-editor-focus': '#1DA270',
/* Cells */
'cell-fg': '#FFFFFF',
@@ -435,4 +448,39 @@ export const GristDark: ThemeColors = {
'tutorials-popup-border': '#69697D',
'tutorials-popup-header-fg': '#FFFFFF',
'tutorials-popup-box-bg': '#57575F',
/* Ace Autocomplete */
'ace-autocomplete-primary-fg': '#EFEFEF',
'ace-autocomplete-secondary-fg': '#A4A4A4',
'ace-autocomplete-highlighted-fg': '#FFFFFF',
'ace-autocomplete-bg': '#32323F',
'ace-autocomplete-border': '#69697D',
'ace-autocomplete-link': '#28BE86',
'ace-autocomplete-link-highlighted': '#45D48B',
'ace-autocomplete-active-line-bg': '#555563',
'ace-autocomplete-line-border-hover': 'rgba(111,111,117,0.3)',
'ace-autocomplete-line-bg-hover': 'rgba(111,111,117,0.3)',
/* Color Select */
'color-select-fg': '#EFEFEF',
'color-select-bg': '#32323F',
'color-select-shadow': '#000000',
'color-select-font-options-border': '#69697D',
'color-select-font-option-fg': '#EFEFEF',
'color-select-font-option-bg': '#32323F',
'color-select-font-option-bg-hover': '#262633',
'color-select-font-option-fg-selected': '#EFEFEF',
'color-select-font-option-bg-selected': '#555563',
'color-select-color-square-border': '#A4A4A4',
'color-select-color-square-border-empty': '#EFEFEF',
'color-select-input-fg': '#EFEFEF',
'color-select-input-bg': '#32323F',
'color-select-input-border': '#69697D',
/* Highlighted Code */
'highlighted-code-block-bg': '#262633',
'highlighted-code-block-bg-disabled': '#555563',
'highlighted-code-fg': '#A4A4A4',
'highlighted-code-border': '#69697D',
'highlighted-code-bg-disabled': '#555563',
};

48
app/common/themes/GristLight.ts
View File

@@ -89,6 +89,9 @@ export const GristLight: ThemeColors = {
'popup-shadow-outer': 'rgba(76, 86, 103, 0.24)',
'popup-close-button-fg': '#929299',
/* Prompts */
'prompt-fg': '#606060',
/* Progress Bars */
'progress-bar-fg': '#16B378',
'progress-bar-error-fg': '#D0021B',
@@ -195,6 +198,10 @@ export const GristLight: ThemeColors = {
'filter-bar-button-saved-bg': '#929299',
'filter-bar-button-saved-hover-bg': '#D9D9D9',
/* Icons */
'icon-disabled': '#929299',
'icon-error': '#D0021B',
/* Icon Buttons */
'icon-button-fg': '#FFFFFF',
'icon-button-primary-bg': '#16B378',
@@ -352,6 +359,8 @@ export const GristLight: ThemeColors = {
'code-view-params': '#444',
'code-view-string': '#880000',
'code-view-number': '#880000',
'code-view-builtin': '#397300',
'code-view-literal': '#78A960',
/* Importer */
'importer-table-info-border': '#D9D9D9',
@@ -394,6 +403,10 @@ export const GristLight: ThemeColors = {
'access-rules-column-item-icon-fg': '#929299',
'access-rules-column-item-icon-hover-fg': '#FFFFFF',
'access-rules-column-item-icon-hover-bg': '#929299',
'access-rules-formula-editor-bg': 'white',
'access-rules-formula-editor-border-hover': '#D9D9D9',
'access-rules-formula-editor-bg-disabled': '#E8E8E8',
'access-rules-formula-editor-focus': '#16B378',
/* Cells */
'cell-fg': 'black',
@@ -435,4 +448,39 @@ export const GristLight: ThemeColors = {
'tutorials-popup-border': '#D9D9D9',
'tutorials-popup-header-fg': '#FFFFFF',
'tutorials-popup-box-bg': '#F5F5F5',
/* Ace Autocomplete */
'ace-autocomplete-primary-fg': '#444',
'ace-autocomplete-secondary-fg': '#8F8F8F',
'ace-autocomplete-highlighted-fg': '#000',
'ace-autocomplete-bg': '#FBFBFB',
'ace-autocomplete-border': 'lightgray',
'ace-autocomplete-link': '#16B378',
'ace-autocomplete-link-highlighted': '#009058',
'ace-autocomplete-active-line-bg': '#CAD6FA',
'ace-autocomplete-line-border-hover': '#ABBFFE',
'ace-autocomplete-line-bg-hover': 'rgba(233,233,253,0.4)',
/* Color Select */
'color-select-fg': '#262633',
'color-select-bg': 'white',
'color-select-shadow': 'rgba(38,38,51,0.6)',
'color-select-font-options-border': '#D9D9D9',
'color-select-font-option-fg': '#262633',
'color-select-font-option-bg': '#FFFFFF',
'color-select-font-option-bg-hover': '#F7F7F7',
'color-select-font-option-fg-selected': '#FFFFFF',
'color-select-font-option-bg-selected': '#262633',
'color-select-color-square-border': '#D9D9D9',
'color-select-color-square-border-empty': '#262633',
'color-select-input-fg': '#929299',
'color-select-input-bg': 'white',
'color-select-input-border': '#D9D9D9',
/* Highlighted Code */
'highlighted-code-block-bg': '#FFFFFF',
'highlighted-code-block-bg-disabled': '#E8E8E8',
'highlighted-code-fg': '#929299',
'highlighted-code-border': '#D9D9D9',
'highlighted-code-bg-disabled': '#E8E8E8',
};