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

21
app/client/ui/OnBoardingPopups.ts
View File

@@ -27,7 +27,7 @@ import { createPopper, Placement } from '@popperjs/core';
import { FocusLayer } from 'app/client/lib/FocusLayer';
import * as Mousetrap from 'app/client/lib/Mousetrap';
import { bigBasicButton, bigPrimaryButton } from "app/client/ui2018/buttons";
import { colors, vars } from "app/client/ui2018/cssVars";
import { theme, vars } from "app/client/ui2018/cssVars";
import range = require("lodash/range");
import {IGristUrlState} from "app/common/gristUrls";
import {urlState} from "app/client/models/gristUrlState";
@@ -321,13 +321,13 @@ function buildArrow() {
const Container = styled('div', `
align-self: center;
border: 2px solid ${colors.lightGreen};
border: 2px solid ${theme.accentBorder};
border-radius: 3px;
z-index: 1000;
max-width: 490px;
position: relative;
background-color: white;
box-shadow: 0 2px 18px 0 rgba(31,37,50,0.31), 0 0 1px 0 rgba(76,86,103,0.24);
background-color: ${theme.popupBg};
box-shadow: 0 2px 18px 0 ${theme.popupInnerShadow}, 0 0 1px 0 ${theme.popupOuterShadow};
outline: unset;
`);
@@ -339,9 +339,9 @@ const ArrowContainer = styled('div', `
position: absolute;
& path {
stroke: ${colors.lightGreen};
stroke: ${theme.accentBorder};
stroke-width: 2px;
fill: white;
fill: ${theme.popupBg};
}
${sideSelectorChunk('top')} > & {
@@ -376,7 +376,7 @@ const ArrowContainer = styled('div', `
const ContentWrapper = styled('div', `
position: relative;
padding: 32px;
background-color: white;
background-color: ${theme.popupBg};
`);
const Footer = styled('div', `
@@ -402,9 +402,9 @@ const Dot = styled('div', `
border-radius: 3px;
margin-right: 12px;
align-self: center;
background-color: ${colors.lightGreen};
background-color: ${theme.progressBarFg};
&-done {
background-color: ${colors.darkGrey};
background-color: ${theme.progressBarBg};
}
`);
@@ -424,10 +424,11 @@ const Overlay = styled('div', `
const cssTitle = styled('div', `
font-size: ${vars.xxxlargeFontSize};
font-weight: ${vars.headerControlTextWeight};
color: ${colors.dark};
color: ${theme.text};
margin: 0 0 16px 0;
line-height: 32px;
`);
const cssBody = styled('div', `
color: ${theme.text};
`);