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) Add dark mode to user preferences

Browse Source 
Summary:
Adds initial implementation of dark mode. Preferences for dark mode are
available on the account settings page. Dark mode is currently a beta feature
as there are still some small bugs to squash and a few remaining UI elements
to style.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: paulfitz, jarek

Differential Revision: https://phab.getgrist.com/D3587
This commit is contained in:
George Gevoian
2022-09-05 18:51:57 -07:00
parent d7b3fb972c
commit ec157dc469
122 changed files with 3616 additions and 1075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/client/components/DetailView.css
View File

@@ -9,7 +9,7 @@
left: 0;
width: 100%;
background: white;
background: var(--grist-theme-page-panels-main-panel-bg, white);
z-index: 1;
margin-top: -3px;
}
@@ -37,15 +37,15 @@
min-height: 16px;
white-space: pre;
word-wrap: break-word;
color: black;
color: var(--grist-theme-cell-fg, black);
}
.g_record_detail_value.record-add {
background-color: #f6f6ff;
background-color: var(--grist-theme-table-add-new-bg, #f6f6ff);
}
.g_record_detail_value.scissors {
outline: 2px dashed var(--grist-color-cursor);
outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor));
}
.g_record_detail_value.draft {
@@ -55,7 +55,7 @@
.detail_row_num {
font-size: var(--grist-x-small-font-size);
font-weight: normal;
color: var(--grist-color-slate);
color: var(--grist-theme-text-light, var(--grist-color-slate));
padding: 8px;
display: flex;
align-items: center;
@@ -163,7 +163,7 @@
.detail_theme_record_compact {
/* 12px is enough margin on the right to include most of the floating scrollbar on MacOS */
padding: 4px 16px 0px 16px;
background-color: var(--grist-color-medium-grey);
background-color: var(--grist-theme-card-compact-widget-bg, var(--grist-color-medium-grey));
}
.detail_theme_record_compact.detailview_record_single {
@@ -175,12 +175,12 @@
}
.detail_theme_record_compact > .g_record_detail_inner {
background-color: white;
background-color: var(--grist-theme-card-compact-record-bg, white);
position: relative;
}
.detail_theme_record_compact > .g_record_detail_inner > .layout_root {
border: 1px solid var(--grist-color-dark-grey);
border: 1px solid var(--grist-theme-card-compact-border, var(--grist-color-dark-grey));
border-right: none;
border-bottom: none;
}
@@ -196,8 +196,8 @@
.detail_theme_field_compact {
border-top: none;
border-left: none;
border-right: 1px solid var(--grist-color-dark-grey);
border-bottom: 1px solid var(--grist-color-dark-grey);
border-right: 1px solid var(--grist-theme-card-compact-border, var(--grist-color-dark-grey));
border-bottom: 1px solid var(--grist-theme-card-compact-border, var(--grist-color-dark-grey));
padding: 1px 1px 1px 5px;
margin: 0;
line-height: 1.2;
@@ -206,7 +206,7 @@
.detail_theme_field_compact > .g_record_detail_label {
font-weight: normal;
font-size: var(--grist-small-font-size);
color: var(--grist-color-slate);
color: var(--grist-theme-card-compact-label, var(--grist-color-slate));
min-height: 0px;
white-space: nowrap;
@@ -227,7 +227,7 @@
.detail_theme_field_form > .g_record_detail_label {
font-size: var(--grist-small-font-size);
color: var(--grist-color-slate);
color: var(--grist-theme-card-form-label, var(--grist-color-slate));
font-weight: bold;
min-height: 0px;
white-space: nowrap;
@@ -241,7 +241,7 @@
* needs to learn to match the value box's style. Right now, the cell editor style is hard-coded.
*/
.detail_theme_field_form > .g_record_detail_value {
border: 1px solid lightgrey;
border: 1px solid var(--grist-theme-card-form-border, lightgrey);
}
.detail_theme_record_form {
@@ -253,7 +253,7 @@
}
.detail_theme_record_form.detailview_record_detail {
border-bottom: 1px solid var(--grist-color-dark-grey);
border-bottom: 1px solid var(--grist-theme-card-list-form-border, var(--grist-color-dark-grey));
padding-bottom: 12px;
}
@@ -272,20 +272,20 @@
}
.detail_theme_record_blocks.detailview_record_detail {
border-bottom: 1px solid var(--grist-color-dark-grey);
border-bottom: 1px solid var(--grist-theme-card-list-blocks-border, var(--grist-color-dark-grey));
padding-bottom: 8px;
}
.detail_theme_field_blocks {
padding: 6px;
margin: 8px;
background-color: var(--grist-color-medium-grey);
background-color: var(--grist-theme-card-blocks-bg, var(--grist-color-medium-grey));
border-radius: 2px;
}
.detail_theme_field_blocks > .g_record_detail_label {
font-size: var(--grist-small-font-size);
color: var(--grist-color-slate);
color: var(--grist-theme-card-blocks-label, var(--grist-color-slate));
font-weight: normal;
white-space: nowrap;
overflow: hidden;