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

@@ -1,4 +1,4 @@
-import {colors} from 'app/client/ui2018/cssVars';
+import {theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {styled} from 'grainjs';
 
@@ -9,7 +9,7 @@ export const cssHoverCircle = styled('div', `
   border-radius: 16px;
 
   &:hover, &.weasel-popup-open {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
   }
 
   &-disabled:hover {
@@ -23,12 +23,12 @@ export const cssTopBarBtn = styled(icon, `
   padding: 8px 8px;
   cursor: pointer;
   -webkit-mask-size: 16px 16px;
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.topBarButtonPrimaryFg};
 
   .${cssHoverCircle.className}-disabled & {
-    background-color: ${colors.darkGrey};
+    background-color: ${theme.topBarButtonDisabledFg};
     cursor: default;
   }
-  &-slate { background-color: ${colors.slate}; }
-  &-error { background-color: ${colors.error}; }
+  &-slate { background-color: ${theme.topBarButtonSecondaryFg}; }
+  &-error { background-color: ${theme.topBarButtonErrorFg}; }
 `);