(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/ui/MenuToggle.ts

@@ -1,6 +1,6 @@
-import { dom, DomArg, IDisposableOwner, styled } from "grainjs";
+import { theme } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
-import { colors } from "app/client/ui2018/cssVars";
+import { dom, DomArg, IDisposableOwner, styled } from "grainjs";
 
 /**
  * Creates a toggle button - little square button with a dropdown icon inside, used
@@ -15,18 +15,18 @@ export function menuToggle(obs: IDisposableOwner, ...args: DomArg[]) {
 }
 
 const cssMenuToggle = styled('div.menu_toggle', `
-  background: white;
+  background: ${theme.menuToggleBg};
   cursor: pointer;
-  --icon-color: ${colors.slate};
-  border: 1px solid ${colors.slate};
+  --icon-color: ${theme.menuToggleFg};
+  border: 1px solid ${theme.menuToggleBorder};
   border-radius: 4px;
   &:hover  {
-    --icon-color: ${colors.darkGreen};
-    border-color: ${colors.darkGreen};
+    --icon-color: ${theme.menuToggleHoverFg};
+    border-color: ${theme.menuToggleHoverFg};
   }
   &:active  {
-    --icon-color: ${colors.darkerGreen};
-    border-color: ${colors.darkerGreen};
+    --icon-color: ${theme.menuToggleActiveFg};
+    border-color: ${theme.menuToggleActiveFg};
   }
   & > .menu_toggle_icon {
     display: block; /* don't create a line */