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

@@ -6,35 +6,27 @@
  * Workspace is a clickable link and document and page names are editable labels.
  */
 import { urlState } from 'app/client/models/gristUrlState';
-import { colors, cssHideForNarrowScreen, mediaNotSmall, testId } from 'app/client/ui2018/cssVars';
+import { cssHideForNarrowScreen, mediaNotSmall, testId, theme } from 'app/client/ui2018/cssVars';
 import { editableLabel } from 'app/client/ui2018/editableLabel';
 import { icon } from 'app/client/ui2018/icons';
+import { cssLink } from 'app/client/ui2018/links';
 import { UserOverride } from 'app/common/DocListAPI';
 import { userOverrideParams } from 'app/common/gristUrls';
 import { BindableValue, dom, Observable, styled } from 'grainjs';
 import { tooltip } from 'popweasel';
 
 export const cssBreadcrumbs = styled('div', `
-  color: ${colors.slate};
+  color: ${theme.lightText};
   white-space: nowrap;
   cursor: default;
 `);
 
-export const cssBreadcrumbsLink = styled('a', `
-  color: ${colors.lightGreen};
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`);
-
 export const separator = styled('span', `
   padding: 0 2px;
 `);
 
 const cssIcon = styled(icon, `
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.accentIcon};
   margin-top: -2px;
 `);
 
@@ -43,7 +35,7 @@ const cssPublicIcon = styled(cssIcon, `
   margin-top: -4px;
 `);
 
-const cssWorkspaceName = styled(cssBreadcrumbsLink, `
+const cssWorkspaceName = styled(cssLink, `
   margin-left: 8px;
 `);
 
@@ -54,7 +46,7 @@ const cssWorkspaceNarrowScreen = styled(icon, `
   margin-bottom: 4px;
   margin-left: -7px;
   margin-right: 8px;
-  background-color: ${colors.slate};
+  background-color: ${theme.lightText};
   cursor: pointer;
   @media ${mediaNotSmall} {
     & {
@@ -65,21 +57,21 @@ const cssWorkspaceNarrowScreen = styled(icon, `
 
 const cssEditableName = styled('input', `
   &:hover, &:focus {
-    color: ${colors.dark};
+    color: ${theme.text};
   }
 `);
 
 const cssTag = styled('span', `
-  background-color: ${colors.slate};
-  color: white;
+  background-color: ${theme.breadcrumbsTagBg};
+  color: ${theme.breadcrumbsTagFg};
   border-radius: 3px;
   padding: 0 4px;
   margin-left: 4px;
 `);
 
 const cssAlertTag = styled(cssTag, `
-  background-color: ${colors.error};
-  --icon-color: white;
+  background-color: ${theme.breadcrumbsTagAlertBg};
+  --icon-color: ${theme.breadcrumbsTagFg};
   a {
     cursor: pointer;
   }