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

@@ -2,7 +2,7 @@ import {DocPageModel} from 'app/client/models/DocPageModel';
 import {urlState} from 'app/client/models/gristUrlState';
 import {docListHeader} from 'app/client/ui/DocMenuCss';
 import {infoTooltip} from 'app/client/ui/tooltips';
-import {colors, mediaXSmall} from 'app/client/ui2018/cssVars';
+import {mediaXSmall, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {loadingDots, loadingSpinner} from 'app/client/ui2018/loaders';
 import {APPROACHING_LIMIT_RATIO, DataLimitStatus} from 'app/common/DocUsage';
@@ -341,12 +341,11 @@ const cssLightlyBoldedText = styled('div', `
   font-weight: 500;
 `);
 
-const cssIconAndText = styled('div', `
+const cssWarningMessage = styled('div', `
+  color: ${theme.text};
+  --icon-color: ${theme.text};
   display: flex;
   gap: 16px;
-`);
-
-const cssWarningMessage = styled(cssIconAndText, `
   margin-top: 16px;
 `);
 
@@ -392,6 +391,7 @@ const cssUsageMetrics = styled('div', `
 `);
 
 const cssUsageMetric = styled('div', `
+  color: ${theme.text};
   display: flex;
   flex-direction: column;
   width: 180px;
@@ -408,14 +408,14 @@ const cssProgressBarContainer = styled('div', `
   width: 100%;
   height: 4px;
   border-radius: 5px;
-  background: ${colors.darkGrey};
+  background: ${theme.progressBarBg};
 `);
 
 const cssProgressBarFill = styled(cssProgressBarContainer, `
-  background: ${colors.lightGreen};
+  background: ${theme.progressBarFg};
 
   &-approaching-limit {
-    background: ${colors.error};
+    background: ${theme.progressBarErrorFg};
   }
 `);