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

29
app/client/ui2018/buttonSelect.ts
View File

@@ -1,4 +1,4 @@
import {colors, testId, vars} from 'app/client/ui2018/cssVars';
import {colors, testId, theme, vars} from 'app/client/ui2018/cssVars';
import {IconName} from 'app/client/ui2018/IconList';
import {icon} from 'app/client/ui2018/icons';
import {isColorDark} from 'app/common/gutil';
@@ -142,7 +142,7 @@ export const cssButtonSelect = styled('div', `
display: flex;
/* Vars */
color: ${colors.dark};
color: ${theme.text};
flex: 1 1 0;
`);
@@ -165,8 +165,9 @@ const cssSelectorBtn = styled('div', `
white-space: nowrap;
padding: 4px 10px;
border: 1px solid ${colors.darkGrey};
--icon-color: ${colors.slate};
background-color: ${theme.buttonGroupBg};
border: 1px solid ${theme.buttonGroupBorder};
--icon-color: ${theme.buttonGroupIcon};
margin-left: -1px;
@@ -184,15 +185,15 @@ const cssSelectorBtn = styled('div', `
}
&:hover:not(&-selected) {
border: 1px solid ${colors.hover};
border: 1px solid ${theme.buttonGroupBorderHover};
z-index: 5; /* Update z-index so selected borders take precedent */
}
&-selected {
color: ${colors.light};
--icon-color: ${colors.light};
border: 1px solid ${colors.dark};
background-color: ${colors.dark};
color: ${theme.buttonGroupSelectedFg};
--icon-color: ${theme.buttonGroupSelectedFg};
border: 1px solid ${theme.buttonGroupSelectedBorder};
background-color: ${theme.buttonGroupSelectedBg};
z-index: 10; /* Update z-index so selected borders take precedent */
}
@@ -202,18 +203,18 @@ const cssSelectorBtn = styled('div', `
border-radius: ${vars.controlBorderRadius};
margin-left: 0px;
padding: 8px;
color: ${colors.slate};
--icon-color: ${colors.slate};
color: ${theme.buttonGroupLightFg};
--icon-color: ${theme.buttonGroupLightFg};
}
.${cssButtonSelect.className}-light > &-selected {
border: none;
color: ${colors.lightGreen};
--icon-color: ${colors.lightGreen};
color: ${theme.buttonGroupLightSelectedFg};
--icon-color: ${theme.buttonGroupLightSelectedFg};
background-color: initial;
}
.${cssButtonSelect.className}-light > &:hover {
border: none;
background-color: ${colors.mediumGrey};
background-color: ${theme.hover};
}
`);