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

14
app/client/ui2018/loaders.ts
View File

@@ -1,4 +1,4 @@
import {colors} from 'app/client/ui2018/cssVars';
import {theme} from 'app/client/ui2018/cssVars';
import {DomArg, keyframes, styled} from 'grainjs';
const rotate360 = keyframes(`
@@ -9,10 +9,10 @@ const rotate360 = keyframes(`
const flash = keyframes(`
0% {
background-color: ${colors.lightGreen};
background-color: ${theme.loaderFg};
}
50%, 100% {
background-color: ${colors.darkGrey};
background-color: ${theme.loaderBg};
}
`);
@@ -25,8 +25,8 @@ export const loadingSpinner = styled('div', `
width: 32px;
height: 32px;
border-radius: 32px;
border: 4px solid ${colors.darkGrey};
border-top-color: ${colors.lightGreen};
border: 4px solid ${theme.loaderBg};
border-top-color: ${theme.loaderFg};
animation: ${rotate360} 1s ease-out infinite;
`);
@@ -52,8 +52,8 @@ const cssLoadingDot = styled('div', `
border-radius: 50%;
width: var(--dot-size);
height: var(--dot-size);
background-color: ${colors.lightGreen};
color: ${colors.lightGreen};
background-color: ${theme.loaderFg};
color: ${theme.loaderFg};
animation: ${flash} 1s alternate infinite;
&-left {