(core) Add dark mode for comments

Summary:
Also fixes the CSS for the page/workspace input so that it's always
readable in dark mode.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3682
This commit is contained in:
George Gevoian
2022-10-24 20:10:15 -07:00
parent aa88c156e6
commit 3145af36c6
9 changed files with 92 additions and 36 deletions

View File

@@ -185,7 +185,7 @@ export const ThemeColors = t.iface([], {
"right-panel-tab-hover-bg": "string",
"right-panel-tab-selected-fg": "string",
"right-panel-tab-selected-bg": "string",
"right-panel-tab-close-button-hover-bg": "string",
"right-panel-tab-button-hover-bg": "string",
"right-panel-subtab-fg": "string",
"right-panel-subtab-selected-fg": "string",
"right-panel-subtab-selected-underline": "string",
@@ -321,6 +321,13 @@ export const ThemeColors = t.iface([], {
"chart-legend-bg": "string",
"chart-x-axis": "string",
"chart-y-axis": "string",
"comments-popup-header-bg": "string",
"comments-popup-body-bg": "string",
"comments-popup-border": "string",
"comments-user-name-fg": "string",
"comments-panel-topic-bg": "string",
"comments-panel-topic-border": "string",
"comments-panel-resolved-topic-bg": "string",
});
const exportedTypeSuite: t.ITypeSuite = {

View File

@@ -239,7 +239,7 @@ export interface ThemeColors {
'right-panel-tab-hover-bg': string;
'right-panel-tab-selected-fg': string;
'right-panel-tab-selected-bg': string;
'right-panel-tab-close-button-hover-bg': string;
'right-panel-tab-button-hover-bg': string;
'right-panel-subtab-fg': string;
'right-panel-subtab-selected-fg': string;
'right-panel-subtab-selected-underline': string;
@@ -421,6 +421,15 @@ export interface ThemeColors {
'chart-legend-bg': string;
'chart-x-axis': string;
'chart-y-axis': string;
/* Comments */
'comments-popup-header-bg': string;
'comments-popup-body-bg': string;
'comments-popup-border': string;
'comments-user-name-fg': string;
'comments-panel-topic-bg': string;
'comments-panel-topic-border': string;
'comments-panel-resolved-topic-bg': string;
}
export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;

View File

@@ -218,7 +218,7 @@ export const GristDark: ThemeColors = {
'right-panel-tab-hover-bg': 'rgba(111,111,117,0.6)',
'right-panel-tab-selected-fg': '#FFFFFF',
'right-panel-tab-selected-bg': '#1DA270',
'right-panel-tab-close-button-hover-bg': '#157A54',
'right-panel-tab-button-hover-bg': '#157A54',
'right-panel-subtab-fg': '#1DA270',
'right-panel-subtab-selected-fg': '#EFEFEF',
'right-panel-subtab-selected-underline': '#1DA270',
@@ -400,4 +400,13 @@ export const GristDark: ThemeColors = {
'chart-legend-bg': '#32323F80',
'chart-x-axis': '#A4A4A4',
'chart-y-axis': '#A4A4A4',
/* Comments */
'comments-popup-header-bg': '#262633',
'comments-popup-body-bg': '#32323F',
'comments-popup-border': '#69697D',
'comments-user-name-fg': '#DFDFDF',
'comments-panel-topic-bg': '#32323F',
'comments-panel-topic-border': '#555563',
'comments-panel-resolved-topic-bg': '#262634',
};

View File

@@ -218,7 +218,7 @@ export const GristLight: ThemeColors = {
'right-panel-tab-hover-bg': 'rgba(217,217,217,0.6)',
'right-panel-tab-selected-fg': '#FFFFFF',
'right-panel-tab-selected-bg': '#16B378',
'right-panel-tab-close-button-hover-bg': '#009058',
'right-panel-tab-button-hover-bg': '#009058',
'right-panel-subtab-fg': '#16B378',
'right-panel-subtab-selected-fg': '#262633',
'right-panel-subtab-selected-underline': '#16B378',
@@ -400,4 +400,13 @@ export const GristLight: ThemeColors = {
'chart-legend-bg': '#FFFFFF80',
'chart-x-axis': '#444',
'chart-y-axis': '#444',
/* Comments */
'comments-popup-header-bg': '#F7F7F7',
'comments-popup-body-bg': 'white',
'comments-popup-border': '#D9D9D9',
'comments-user-name-fg': '#494949',
'comments-panel-topic-bg': 'white',
'comments-panel-topic-border': '#ccc',
'comments-panel-resolved-topic-bg': '#F0F0F0',
};