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

15
app/client/components/ViewLayout.css
View File

@@ -12,14 +12,13 @@
cursor: default;
height: 24px;
margin-left: -16px; /* to include drag handle that shows up on hover */
color: var(--grist-color-slate);
color: var(--grist-theme-text-light, var(--grist-color-slate));
font-size: var(--grist-small-font-size);
font-weight: 500;
white-space: nowrap;
}
.viewsection_content {
background-color: #ffffff;
overflow: visible;
margin: 12px;
}
@@ -91,19 +90,19 @@
.view_data_pane_container {
position: relative;
flex: auto;
border: 1px solid var(--grist-color-dark-grey);
border: 1px solid var(--grist-theme-widget-border, var(--grist-color-dark-grey));
}
@media not print {
.active_section > .view_data_pane_container {
box-shadow: -2px 0 0 0px var(--grist-color-light-green);
border-left: 1px solid var(--grist-color-light-green);
box-shadow: -2px 0 0 0px var(--grist-theme-widget-active-border, var(--grist-color-light-green));
border-left: 1px solid var(--grist-theme-widget-active-border, var(--grist-color-light-green));
}
.active_section > .view_data_pane_container.viewsection_type_detail {
/* this color is a translucent version of grist-color-light-green */
box-shadow: -2px 0 0 0px var(--grist-color-inactive-cursor);
border-left: 1px solid var(--grist-color-inactive-cursor);
box-shadow: -2px 0 0 0px var(--grist-theme-cursor-inactive, var(--grist-color-inactive-cursor));
border-left: 1px solid var(--grist-theme-cursor-inactive, var(--grist-color-inactive-cursor));
}
}
@@ -111,7 +110,7 @@
.active_section--no-indicator > .view_data_pane_container,
.active_section--no-indicator > .view_data_pane_container.viewsection_type_detail {
box-shadow: none;
border-left: 1px solid var(--grist-color-dark-grey);
border-left: 1px solid var(--grist-theme-widget-border, var(--grist-color-dark-grey));
}
.disable_viewpane {