(core) Add dark mode to user preferences

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

app/client/components/Drafts.ts

@@ -6,7 +6,7 @@ import {
 import { GristDoc } from "app/client/components/GristDoc";
 import { ITooltipControl, showTooltip, tooltipCloseButton } from "app/client/ui/tooltips";
 import { FieldEditorStateEvent } from "app/client/widgets/FieldEditor";
-import { colors, testId } from "app/client/ui2018/cssVars";
+import { testId, theme } from "app/client/ui2018/cssVars";
 import { cssLink } from "app/client/ui2018/links";
 
 /**
@@ -408,7 +408,7 @@ class EditorAdapter extends Disposable implements Editor {
 const styledTooltip = styled('div', `
   display: flex;
   align-items: center;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.controlFg};
 
   & > .${cssLink.className} {
     margin-left: 8px;
@@ -430,7 +430,7 @@ function cellTooltip(clb: () => any) {
 // Discard notification dom
 const styledNotification = styled('div', `
   cursor: pointer;
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
   &:hover {
     text-decoration: underline;
   }