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',
};