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

@@ -15,7 +15,7 @@ import {reportError} from 'app/client/models/errors';
 import {filterBar} from 'app/client/ui/FilterBar';
 import {viewSectionMenu} from 'app/client/ui/ViewSectionMenu';
 import {buildWidgetTitle} from 'app/client/ui/WidgetTitle';
-import {colors, mediaSmall, testId} from 'app/client/ui2018/cssVars';
+import {mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
 import {mod} from 'app/common/gutil';
@@ -335,7 +335,7 @@ const cssTestClick = styled(`div`, `
 const cssSigmaIcon = styled(icon, `
   bottom: 1px;
   margin-right: 5px;
-  background-color: ${colors.slate}
+  background-color: ${theme.lightText}
 `);
 
 const cssViewLeaf = styled('div', `
@@ -352,12 +352,12 @@ const cssViewLeafInactive = styled('div', `
       overflow: hidden;
       background: repeating-linear-gradient(
         -45deg,
-        ${colors.mediumGreyOpaque},
-        ${colors.mediumGreyOpaque} 10px,
-        ${colors.lightGrey} 10px,
-        ${colors.lightGrey} 20px
+        ${theme.widgetInactiveStripesDark},
+        ${theme.widgetInactiveStripesDark} 10px,
+        ${theme.widgetInactiveStripesLight} 10px,
+        ${theme.widgetInactiveStripesLight} 20px
       );
-      border: 1px solid ${colors.darkGrey};
+      border: 1px solid ${theme.widgetBorder};
       border-radius: 4px;
       padding: 0 2px;
     }