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

@@ -1,5 +1,5 @@
 import {transientInput} from 'app/client/ui/transientInput';
-import {colors, mediaSmall, vars} from 'app/client/ui2018/cssVars';
+import {mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {styled} from 'grainjs';
 import {bigBasicButton} from 'app/client/ui2018/buttons';
@@ -41,7 +41,7 @@ export const docList = styled('div', `
 const listHeader = styled('div', `
   min-height: 32px;
   line-height: 32px;
-  color: ${colors.dark};
+  color: ${theme.text};
   font-size: ${vars.xxxlargeFontSize};
   font-weight: ${vars.headerControlTextWeight};
 `);
@@ -81,6 +81,7 @@ export const allDocsTemplates = styled('div', `
 `);
 
 export const docBlock = styled('div', `
+  color: ${theme.text};
   max-width: 550px;
   min-width: 300px;
   margin-bottom: 28px;
@@ -96,6 +97,7 @@ export const templatesDocBlock = styled(docBlock, `
 `);
 
 export const otherSitesBlock = styled('div', `
+  color: ${theme.text};
   margin-bottom: 32px;
 `);
 
@@ -112,16 +114,18 @@ export const siteButton = styled(bigBasicButton, `
   flex: 0 0 auto;
 `);
 
-export const docHeaderIconDark = styled(icon, `
+export const docHeaderIcon = styled(icon, `
   margin-right: 8px;
   margin-top: -3px;
+  --icon-color: ${theme.lightText};
 `);
 
-export const docHeaderIcon = styled(docHeaderIconDark, `
-  --icon-color: ${colors.slate};
+export const pinnedDocsIcon = styled(docHeaderIcon, `
+  --icon-color: ${theme.text};
 `);
 
 export const featuredTemplatesIcon = styled(icon, `
+  --icon-color: ${theme.text};
   margin-right: 8px;
   width: 20px;
   height: 20px;
@@ -141,7 +145,7 @@ const docBlockHeader = `
   line-height: 40px;
   margin-bottom: 8px;
   margin-right: -16px;
-  color: ${colors.dark};
+  color: ${theme.text};
   font-size: ${vars.mediumFontSize};
   font-weight: bold;
   &, &:hover, &:focus {
@@ -156,6 +160,7 @@ export const docBlockHeaderLink = styled('a', docBlockHeader);
 export const templateBlockHeader = styled('div', docBlockHeader);
 
 export const wsLeft = styled('div', `
+  color: ${theme.text};
   flex: 1 0 50%;
   min-width: 0px;
   margin-right: 24px;
@@ -166,11 +171,11 @@ export const docRowWrapper = styled('div', `
   margin: 0px -16px 8px -16px;
   border-radius: 3px;
   font-size: ${vars.mediumFontSize};
-  color: ${colors.dark};
-  --icon-color: ${colors.slate};
+  color: ${theme.text};
+  --icon-color: ${theme.lightText};
 
   &:hover, &.weasel-popup-open, &-renaming {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
   }
 `);
 
@@ -188,7 +193,7 @@ export const docRowLink = styled('a', `
     color: inherit;
   }
   &-no-access, &-no-access:hover, &-no-access:focus {
-    color: ${colors.slate};
+    color: ${theme.disabledText};
     cursor: not-allowed;
   }
 `);
@@ -211,13 +216,13 @@ export const docName = styled('div', `
 export const docPinIcon = styled(icon, `
   flex: none;
   margin-left: 4px;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};
 `);
 
 export const docPublicIcon = styled(icon, `
   flex: none;
   margin-left: auto;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};
 `);
 
 export const docEditorInput = styled(transientInput, `
@@ -231,7 +236,7 @@ export const docEditorInput = styled(transientInput, `
 
 export const docRowUpdatedAt = styled('div', `
   flex: 1 1 50%;
-  color: ${colors.slate};
+  color: ${theme.lightText};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -247,20 +252,20 @@ export const docMenuTrigger = styled('div', `
   line-height: 0px;
   border-radius: 3px;
   cursor: default;
-  --icon-color: ${colors.darkGrey};
+  --icon-color: ${theme.docMenuDocOptionsFg};
   .${docRowLink.className}:hover > & {
-    --icon-color: ${colors.slate};
+    --icon-color: ${theme.docMenuDocOptionsHoverFg};
   }
   &:hover, &.weasel-popup-open {
-    background-color: ${colors.darkGrey};
-    --icon-color: ${colors.slate};
+    background-color: ${theme.docMenuDocOptionsHoverBg};
+    --icon-color: ${theme.docMenuDocOptionsHoverFg};
   }
 `);
 
 export const moveDocModalBody = styled('div', `
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid ${colors.darkGrey};
+  border-bottom: 1px solid ${theme.modalBorderDark};
   margin: 0 -64px;
   height: 200px;
 `);
@@ -275,11 +280,11 @@ export const moveDocListItem = styled('div', `
   font-size: ${vars.mediumFontSize};
 
   &-selected {
-    background-color: ${colors.lightGreen};
-    color: white;
+    background-color: ${theme.moveDocsSelectedBg};
+    color: ${theme.moveDocsSelectedFg};
   }
   &-disabled {
-    color: ${colors.darkGrey};
+    color: ${theme.moveDocsDisabledFg};
     cursor: default;
   }
 `);
@@ -319,13 +324,14 @@ export const sortSelector = styled('div', `
   line-height: unset;
   align-items: center;
   border-radius: ${vars.controlBorderRadius};
-  color: ${colors.lightGreen};
-  --icon-color: ${colors.lightGreen};
+  color: ${theme.controlFg};
+  --icon-color: ${theme.controlFg};
+  background-color: unset;
 
   &:focus, &:hover {
     outline: none;
     box-shadow: none;
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
   }
   @media ${mediaSmall} {
     & {