(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
2026-03-02 04:09:24 +00:00 · 2022-09-05 18:51:57 -07:00
parent d7b3fb972c
commit ec157dc469
122 changed files with 3616 additions and 1075 deletions
--- a/app/client/ui/AccountPage.ts
+++ b/app/client/ui/AccountPage.ts
@@ -1,17 +1,19 @@
 import {AppModel, reportError} from 'app/client/models/AppModel';
 import {urlState} from 'app/client/models/gristUrlState';
+import * as css from 'app/client/ui/AccountPageCss';
 import {ApiKey} from 'app/client/ui/ApiKey';
 import {AppHeader} from 'app/client/ui/AppHeader';
 import {buildChangePasswordDialog} from 'app/client/ui/ChangePasswordDialog';
 import {leftPanelBasic} from 'app/client/ui/LeftPanelCommon';
 import {MFAConfig} from 'app/client/ui/MFAConfig';
 import {pagePanels} from 'app/client/ui/PagePanels';
+import {ThemeConfig} from 'app/client/ui/ThemeConfig';
 import {createTopBarHome} from 'app/client/ui/TopBar';
 import {transientInput} from 'app/client/ui/transientInput';
-import {cssBreadcrumbs, cssBreadcrumbsLink, separator} from 'app/client/ui2018/breadcrumbs';
+import {cssBreadcrumbs, separator} from 'app/client/ui2018/breadcrumbs';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
-import {icon} from 'app/client/ui2018/icons';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {cssLink} from 'app/client/ui2018/links';
+import {getGristConfig} from 'app/common/urlUtils';
 import {FullUser} from 'app/common/UserAPI';
 import {Computed, Disposable, dom, domComputed, makeTestId, Observable, styled} from 'grainjs';

@@ -46,19 +48,21 @@ export class AccountPage extends Disposable {
      },
      headerMain: this._buildHeaderMain(),
      contentMain: this._buildContentMain(),
+      testId,
    });
  }

  private _buildContentMain() {
+    const {enableCustomCss} = getGristConfig();
    return domComputed(this._userObs, (user) => user && (
-      cssContainer(cssAccountPage(
-        cssHeader('Account settings'),
-        cssDataRow(
-          cssSubHeader('Email'),
-          cssEmail(user.email),
+      css.container(css.accountPage(
+        css.header('Account settings'),
+        css.dataRow(
+          css.inlineSubHeader('Email'),
+          css.email(user.email),
        ),
-        cssDataRow(
-          cssSubHeader('Name'),
+        css.dataRow(
+          css.inlineSubHeader('Name'),
          domComputed(this._isEditingName, (isEditing) => (
            isEditing ? [
              transientInput(
@@ -69,16 +73,16 @@ export class AccountPage extends Disposable {
                },
                { size: '5' }, // Lower size so that input can shrink below ~152px.
                dom.on('input', (_ev, el) => this._nameEdit.set(el.value)),
-                cssFlexGrow.cls(''),
+                css.flexGrow.cls(''),
              ),
-              cssTextBtn(
-                cssIcon('Settings'), 'Save',
+              css.textBtn(
+                css.icon('Settings'), 'Save',
                // No need to save on 'click'. The transient input already does it on close.
              ),
            ] : [
-              cssName(user.name),
-              cssTextBtn(
-                cssIcon('Settings'), 'Edit',
+              css.name(user.name),
+              css.textBtn(
+                css.icon('Settings'), 'Edit',
                dom.on('click', () => this._isEditingName.set(true)),
              ),
            ]
@@ -87,17 +91,17 @@ export class AccountPage extends Disposable {
        ),
        // show warning for invalid name but not for the empty string
        dom.maybe(use => use(this._nameEdit) && !use(this._isNameValid), cssWarnings),
-        cssHeader('Password & Security'),
-        cssDataRow(
-          cssSubHeader('Login Method'),
-          cssLoginMethod(user.loginMethod),
-          user.loginMethod === 'Email + Password' ? cssTextBtn('Change Password',
+        css.header('Password & Security'),
+        css.dataRow(
+          css.inlineSubHeader('Login Method'),
+          css.loginMethod(user.loginMethod),
+          user.loginMethod === 'Email + Password' ? css.textBtn('Change Password',
            dom.on('click', () => this._showChangePasswordDialog()),
          ) : null,
          testId('login-method'),
        ),
        user.loginMethod !== 'Email + Password' ? null : dom.frag(
-          cssDataRow(
+          css.dataRow(
            labeledSquareCheckbox(
              this._allowGoogleLogin,
              'Allow signing in to this account with Google',
@@ -105,16 +109,21 @@ export class AccountPage extends Disposable {
            ),
            testId('allow-google-login'),
          ),
-          cssSubHeaderFullWidth('Two-factor authentication'),
-          cssDescription(
+          css.subHeader('Two-factor authentication'),
+          css.description(
            "Two-factor authentication is an extra layer of security for your Grist account designed " +
            "to ensure that you're the only person who can access your account, even if someone " +
            "knows your password."
          ),
          dom.create(MFAConfig, user),
        ),
-        cssHeader('API'),
-        cssDataRow(cssSubHeader('API Key'), cssContent(
+        // Custom CSS is incompatible with custom themes.
+        enableCustomCss ? null : [
+          css.header('Theme'),
+          dom.create(ThemeConfig, this._appModel),
+        ],
+        css.header('API'),
+        css.dataRow(css.inlineSubHeader('API Key'), css.content(
          dom.create(ApiKey, {
            apiKey: this._apiKey,
            onCreate: () => this._createApiKey(),
@@ -131,7 +140,7 @@ export class AccountPage extends Disposable {
  private _buildHeaderMain() {
    return dom.frag(
      cssBreadcrumbs({ style: 'margin-left: 16px;' },
-        cssBreadcrumbsLink(
+        cssLink(
          urlState().setLinkUrl({}),
          'Home',
          testId('home'),
@@ -204,103 +213,12 @@ export function checkName(name: string): boolean {
 * Builds dom to show marning messages to the user.
 */
 function buildNameWarningsDom() {
-  return cssWarning(
+  return css.warning(
    "Names only allow letters, numbers and certain special characters",
    testId('username-warning'),
  );
 }

-const cssContainer = styled('div', `
-  display: flex;
-  justify-content: center;
-  overflow: auto;
-`);
-
-const cssHeader = styled('div', `
-  height: 32px;
-  line-height: 32px;
-  margin: 28px 0 16px 0;
-  color: ${colors.dark};
-  font-size: ${vars.xxxlargeFontSize};
-  font-weight: ${vars.headerControlTextWeight};
-`);
-
-const cssAccountPage = styled('div', `
-  max-width: 600px;
-  padding: 16px;
-`);
-
-const cssDataRow = styled('div', `
-  margin: 8px 0px;
-  display: flex;
-  align-items: baseline;
-`);
-
-const cssSubHeaderFullWidth = styled('div', `
-  padding: 8px 0;
-  display: inline-block;
-  vertical-align: top;
-  font-weight: bold;
-`);
-
-const cssSubHeader = styled(cssSubHeaderFullWidth, `
-  min-width: 110px;
-`);
-
-const cssContent = styled('div', `
-  flex: 1 1 300px;
-`);
-
-const cssTextBtn = styled('button', `
-  font-size: ${vars.mediumFontSize};
-  color: ${colors.lightGreen};
-  cursor: pointer;
-  margin-left: 16px;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  text-align: left;
-  min-width: 110px;
-
-  &:hover {
-    color: ${colors.darkGreen};
-  }
-`);
-
-const cssIcon = styled(icon, `
-  background-color: ${colors.lightGreen};
-  margin: 0 4px 2px 0;
-
-  .${cssTextBtn.className}:hover > & {
-    background-color: ${colors.darkGreen};
-  }
-`);
-
 const cssWarnings = styled(buildNameWarningsDom, `
  margin: -8px 0 0 110px;
 `);
-
-const cssDescription = styled('div', `
-  color: #8a8a8a;
-  font-size: 13px;
-`);
-
-const cssFlexGrow = styled('div', `
-  flex-grow: 1;
-`);
-
-const cssName = styled(cssFlexGrow, `
-  word-break: break-word;
-`);
-
-const cssEmail = styled('div', `
-  word-break: break-word;
-`);
-
-const cssLoginMethod = styled(cssFlexGrow, `
-  word-break: break-word;
-`);
-
-const cssWarning = styled('div', `
-  color: red;
-`);
--- a/app/client/ui/AccountPageCss.ts
+++ b/app/client/ui/AccountPageCss.ts
@@ -0,0 +1,108 @@
+import {theme, vars} from 'app/client/ui2018/cssVars';
+import {icon as gristIcon} from 'app/client/ui2018/icons';
+import {styled} from 'grainjs';
+
+export const container = styled('div', `
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+`);
+
+export const accountPage = styled('div', `
+  max-width: 600px;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding: 16px;
+`);
+
+export const content = styled('div', `
+  flex: 1 1 300px;
+`);
+
+export const textBtn = styled('button', `
+  font-size: ${vars.mediumFontSize};
+  color: ${theme.controlFg};
+  cursor: pointer;
+  margin-left: 16px;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  text-align: left;
+  min-width: 110px;
+
+  &:hover {
+    color: ${theme.controlHoverFg};
+  }
+`);
+
+export const icon = styled(gristIcon, `
+  background-color: ${theme.controlFg};
+  margin: 0 4px 2px 0;
+
+  .${textBtn.className}:hover > & {
+    background-color: ${theme.controlHoverFg};
+  }
+`);
+
+export const description = styled('div', `
+  color: ${theme.lightText};
+  font-size: 13px;
+`);
+
+export const flexGrow = styled('div', `
+  flex-grow: 1;
+`);
+
+export const name = styled(flexGrow, `
+  color: ${theme.text};
+  word-break: break-word;
+`);
+
+export const email = styled('div', `
+  color: ${theme.text};
+  word-break: break-word;
+`);
+
+export const loginMethod = styled(flexGrow, `
+  color: ${theme.text};
+  word-break: break-word;
+`);
+
+export const warning = styled('div', `
+  color: ${theme.errorText};
+`);
+
+export const header = styled('div', `
+  height: 32px;
+  line-height: 32px;
+  margin: 28px 0 16px 0;
+  color: ${theme.text};
+  font-size: ${vars.xxxlargeFontSize};
+  font-weight: ${vars.headerControlTextWeight};
+`);
+
+export const subHeader = styled('div', `
+  color: ${theme.text};
+  padding: 8px 0;
+  vertical-align: top;
+  font-weight: bold;
+  display: block;
+`);
+
+export const inlineSubHeader = styled(subHeader, `
+  display: inline-block;
+  min-width: 110px;
+`);
+
+export const dataRow = styled('div', `
+  margin: 8px 0px;
+  display: flex;
+  align-items: baseline;
+`);
+
+export const betaTag = styled('span', `
+  text-transform: uppercase;
+  vertical-align: super;
+  font-size: ${vars.xsmallFontSize};
+  color: ${theme.accentText};
+`);
--- a/app/client/ui/AccountWidget.ts
+++ b/app/client/ui/AccountWidget.ts
@@ -7,7 +7,7 @@ import {manageTeamUsers} from 'app/client/ui/OpenUserManager';
 import {createUserImage} from 'app/client/ui/UserImage';
 import * as viewport from 'app/client/ui/viewport';
 import {primaryButton} from 'app/client/ui2018/buttons';
-import {colors, mediaDeviceNotSmall, testId, vars} from 'app/client/ui2018/cssVars';
+import {mediaDeviceNotSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuDivider, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {commonUrls, shouldHideUiElement} from 'app/common/gristUrls';
@@ -165,14 +165,14 @@ const cssUserName = styled('div', `
  margin-left: 8px;
  font-size: ${vars.mediumFontSize};
  font-weight: ${vars.headerControlTextWeight};
-  color: ${colors.dark};
+  color: ${theme.text};
 `);

 const cssEmail = styled('div', `
  margin-top: 4px;
  font-size: ${vars.smallFontSize};
  font-weight: initial;
-  color: ${colors.slate};
+  color: ${theme.lightText};
 `);

 const cssSmallIconWrap = styled('div', `
@@ -181,16 +181,16 @@ const cssSmallIconWrap = styled('div', `
 `);

 const cssOtherEmail = styled('div', `
-  color: ${colors.slate};
+  color: ${theme.lightText};
  .${cssMenuItem.className}-sel & {
-    color: ${colors.light};
+    color: ${theme.menuItemSelectedFg};
  }
 `);

 const cssCheckmark = styled(icon, `
  flex: none;
  margin-left: 16px;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};
 `);

 // Note that this css class hides the item when the device width is small (not based on viewport
--- a/app/client/ui/AddNewButton.ts
+++ b/app/client/ui/AddNewButton.ts
@@ -1,4 +1,4 @@
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomElementArg, Observable, styled} from "grainjs";

@@ -20,7 +20,7 @@ export const cssAddNewButton = styled('div', `
  align-items: center;
  margin: 22px 0px 22px 0px;
  height: 40px;
-  color: ${colors.light};
+  color: ${theme.controlPrimaryFg};
  border: none;
  border-radius: 4px;

@@ -30,19 +30,19 @@ export const cssAddNewButton = styled('div', `
  font-weight: bold;
  overflow: hidden;

-  --circle-color: ${colors.lightGreen};
+  --circle-color: ${theme.addNewCircleSmallBg};

  &:hover, &.weasel-popup-open {
-    --circle-color: ${colors.darkGreen};
+    --circle-color: ${theme.addNewCircleSmallHoverBg};
  }
  &-open {
    margin: 22px 16px 22px 16px;
-    background-color: ${colors.lightGreen};
-    --circle-color: ${colors.darkGreen};
+    background-color: ${theme.controlPrimaryBg};
+    --circle-color: ${theme.addNewCircleBg};
  }
  &-open:hover, &-open.weasel-popup-open {
-    background-color: ${colors.darkGreen};
-    --circle-color: ${colors.darkerGreen};
+    background-color: ${theme.controlPrimaryHoverBg};
+    --circle-color: ${theme.addNewCircleHoverBg};
  }
 `);
 const cssLeftMargin = styled('div', `
@@ -53,6 +53,7 @@ const cssLeftMargin = styled('div', `
  }
 `);
 const cssAddText = styled('div', `
+  color: ${theme.controlPrimaryFg};
  flex: 0 0.5 content;
  white-space: nowrap;
  min-width: 0px;
@@ -70,6 +71,6 @@ const cssPlusButton = styled('div', `
  text-align: center;
 `);
 const cssPlusIcon = styled(icon, `
-  background-color: ${colors.light};
+  background-color: ${theme.addNewCircleFg};
  margin-top: 6px;
 `);
--- a/app/client/ui/ApiKey.ts
+++ b/app/client/ui/ApiKey.ts
@@ -1,4 +1,5 @@
 import { basicButton, textButton } from 'app/client/ui2018/buttons';
+import { theme, vars } from 'app/client/ui2018/cssVars';
 import { icon } from 'app/client/ui2018/icons';
 import { confirmModal } from 'app/client/ui2018/modals';
 import { Disposable, dom, IDomArgs, makeTestId, Observable, observable, styled } from 'grainjs';
@@ -119,11 +120,17 @@ export class ApiKey extends Disposable {
 }

 const description = styled('div', `
-  color: #8a8a8a;
-  font-size: 13px;
+  margin-top: 8px;
+  color: ${theme.lightText};
+  font-size: ${vars.mediumFontSize};
 `);

 const cssInput = styled('input', `
+  background-color: transparent;
+  color: ${theme.inputFg};
+  border: 1px solid ${theme.inputBorder};
+  padding: 4px;
+  border-radius: 3px;
  outline: none;
  flex: 1 0 0;
 `);
--- a/app/client/ui/App.css
+++ b/app/client/ui/App.css
@@ -9,7 +9,8 @@ body {
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
-  background: url('img/gplaypattern.png');
+  background: var(--grist-theme-bg, url('img/gplaypattern.png'));
+  background-color: var(--grist-theme-bg-color, unset);
 }

 .g-help {
--- a/app/client/ui/AppHeader.ts
+++ b/app/client/ui/AppHeader.ts
@@ -2,9 +2,8 @@ import {urlState} from 'app/client/models/gristUrlState';
 import {buildAppMenuBillingItem} from 'app/client/ui/BillingButtons';
 import {getTheme} from 'app/client/ui/CustomThemes';
 import {cssLeftPane} from 'app/client/ui/PagePanels';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {colors, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import * as version from 'app/common/version';
-import {BindableValue, Disposable, dom, styled} from "grainjs";
 import {menu, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {isTemplatesOrg, Organization} from 'app/common/UserAPI';
 import {AppModel} from 'app/client/models/AppModel';
@@ -13,7 +12,7 @@ import {DocPageModel} from 'app/client/models/DocPageModel';
 import * as roles from 'app/common/roles';
 import {manageTeamUsersApp} from 'app/client/ui/OpenUserManager';
 import {maybeAddSiteSwitcherSection} from 'app/client/ui/SiteSwitcher';
-import {DomContents} from 'grainjs';
+import {BindableValue, Disposable, dom, DomContents, styled} from 'grainjs';

 // Maps a name of a Product (from app/gen-server/entity/Product.ts) to a tag (pill) to show next
 // to the org name.
@@ -33,12 +32,12 @@ export class AppHeader extends Disposable {
  }

  public buildDom() {
-    const theme = getTheme(this._appModel.topAppModel.productFlavor);
+    const productFlavor = getTheme(this._appModel.topAppModel.productFlavor);

    const currentOrg = this._appModel.currentOrg;

    return cssAppHeader(
-      cssAppHeader.cls('-widelogo', theme.wideLogo || false),
+      cssAppHeader.cls('-widelogo', productFlavor.wideLogo || false),
      // Show version when hovering over the application icon.
      cssAppLogo(
        {title: `Ver ${version.version} (${version.gitcommit})`},
@@ -96,10 +95,11 @@ const cssAppHeader = styled('div', `
  width: 100%;
  height: 100%;
  align-items: center;
+  background-color: ${theme.leftPanelBg};
  &, &:hover, &:focus {
    text-decoration: none;
    outline: none;
-    color: ${colors.dark};
+    color: ${theme.text};
  }
 `);

@@ -124,6 +124,7 @@ const cssAppLogo = styled('a', `
 `);

 const cssDropdownIcon = styled(icon, `
+  --icon-color: ${theme.text};
  flex-shrink: 0;
  margin-right: 8px;
 `);
@@ -138,7 +139,7 @@ const cssOrg = styled('div', `
  font-weight: 500;

  &:hover {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
  }

  .${cssLeftPane.className}-open & {
--- a/app/client/ui/AppUI.ts
+++ b/app/client/ui/AppUI.ts
@@ -105,6 +105,7 @@ function pagePanelsHome(owner: IDisposableOwner, appModel: AppModel, app: App) {
    headerMain: createTopBarHome(appModel),
    contentMain: createDocMenu(pageModel),
    contentTop: buildHomeBanners(appModel),
+    testId,
  });
 }

--- a/app/client/ui/ColumnFilterMenu.ts
+++ b/app/client/ui/ColumnFilterMenu.ts
@@ -11,10 +11,11 @@ import {FilterInfo} from 'app/client/models/entities/ViewSectionRec';
 import {RowId, RowSource} from 'app/client/models/rowset';
 import {ColumnFilterFunc, SectionFilter} from 'app/client/models/SectionFilter';
 import {TableData} from 'app/client/models/TableData';
+import {cssInput} from 'app/client/ui/cssInput';
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
 import {cssLabel as cssCheckboxLabel, cssCheckboxSquare, cssLabelText, Indeterminate, labeledTriStateSquareCheckbox
       } from 'app/client/ui2018/checkbox';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menuCssClass, menuDivider} from 'app/client/ui2018/menus';
 import {CellValue} from 'app/common/DocActions';
@@ -593,7 +594,7 @@ const cssMenu = styled('div', `
  max-width: 400px;
  max-height: 90vh;
  outline: none;
-  background-color: white;
+  background-color: ${theme.menuBg};
  padding-top: 0;
  padding-bottom: 12px;
 `);
@@ -608,15 +609,15 @@ const cssMenuHeader = styled('div', `
 `);
 const cssSelectAll = styled('div', `
  display: flex;
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
  cursor: default;
  user-select: none;
  &-disabled {
-    color: ${colors.slate};
+    color: ${theme.controlSecondaryFg};
  }
 `);
 const cssDotSeparator = styled('span', `
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
  margin: 0 4px;
  user-select: none;
 `);
@@ -637,14 +638,13 @@ const cssMenuItem = styled('div', `
 `);
 export const cssItemValue = styled(cssLabelText, `
  margin-right: 12px;
-  color: ${colors.dark};
  white-space: pre;
 `);
 const cssItemCount = styled('div', `
  flex-grow: 1;
  align-self: normal;
  text-align: right;
-  color: ${colors.slate};
+  color: ${theme.lightText};
 `);
 const cssMenuFooter = styled('div', `
  display: flex;
@@ -656,6 +656,8 @@ const cssApplyButton = styled(primaryButton, `
  margin-right: 4px;
 `);
 const cssSearch = styled(input, `
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
  flex-grow: 1;
  min-width: 1px;
  -webkit-appearance: none;
@@ -668,22 +670,26 @@ const cssSearch = styled(input, `
  border: none;
  outline: none;

+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
 `);
 const cssSearchIcon = styled(icon, `
+  --icon-color: ${theme.lightText};
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 4px;
 `);
 const cssNoResults = styled(cssMenuItem, `
  font-style: italic;
-  color: ${colors.slate};
+  color: ${theme.lightText};
  justify-content: center;
 `);
 const cssSortIcon = styled(icon, `
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.controlSecondaryFg};
  margin-left: auto;
  &-active {
-    --icon-color: ${colors.lightGreen}
+    --icon-color: ${theme.controlFg}
  }
 `);
 const cssLabel = styled(cssCheckboxLabel, `
@@ -695,6 +701,7 @@ const cssToken = styled('div', `
  margin-right: 12px;
 `);
 const cssRangeHeader = styled(cssMenuItem, `
+  color: ${theme.text};
  padding: unset;
  border-radius: 0 0 3px 0;
  text-transform: uppercase;
@@ -704,14 +711,14 @@ const cssRangeHeader = styled(cssMenuItem, `
 const cssRangeContainer = styled(cssMenuItem, `
  display: flex;
  justify-content: left;
+  align-items: center;
  column-gap: 10px;
 `);
 const cssRangeInputSeparator = styled('span', `
  font-weight: 600;
-  position: relative;
-  top: 3px;
-  color: var(--grist-color-slate);
+  color: ${theme.lightText};
 `);
-const cssRangeInput = styled('input', `
+const cssRangeInput = styled(cssInput, `
+  height: unset;
  width: 120px;
 `);
--- a/app/client/ui/DocHistory.ts
+++ b/app/client/ui/DocHistory.ts
@@ -5,7 +5,7 @@ import {urlState} from 'app/client/models/gristUrlState';
 import {getTimeFromNow} from 'app/client/models/HomeModel';
 import {buildConfigContainer} from 'app/client/ui/RightPanel';
 import {buttonSelect} from 'app/client/ui2018/buttonSelect';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuAnnotate, menuItemLink} from 'app/client/ui2018/menus';
 import {buildUrlId, parseUrlId} from 'app/common/gristUrls';
@@ -108,7 +108,7 @@ export class DocHistory extends Disposable implements IDomComponent {

 const cssSubTabs = styled('div', `
  padding: 16px;
-  border-bottom: 1px solid ${colors.mediumGrey};
+  border-bottom: 1px solid ${theme.pagePanelsBorder};
 `);

 const cssSnapshot = styled('div', `
@@ -117,24 +117,25 @@ const cssSnapshot = styled('div', `

 const cssSnapshotTime = styled('div', `
  text-align: right;
-  color: ${colors.slate};
+  color: ${theme.lightText};
  font-size: ${vars.smallFontSize};
 `);

 const cssSnapshotCard = styled('div', `
-  border: 1px solid ${colors.mediumGrey};
+  border: 1px solid ${theme.documentHistorySnapshotBorder};
  padding: 8px;
-  background: white;
+  color: ${theme.documentHistorySnapshotFg};
+  background: ${theme.documentHistorySnapshotBg};
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.controlSecondaryFg};

  &-current {
-    background-color: ${colors.dark};
-    color: ${colors.light};
-    --icon-color: ${colors.light};
+    background-color: ${theme.documentHistorySnapshotSelectedBg};
+    color: ${theme.documentHistorySnapshotSelectedFg};
+    --icon-color: ${theme.documentHistorySnapshotSelectedFg};
  }
 `);

@@ -152,6 +153,6 @@ const cssMenuDots = styled('div', `
  border-radius: 3px;
  cursor: default;
  &:hover, &.weasel-popup-open {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
  }
 `);
--- a/app/client/ui/DocMenu.ts
+++ b/app/client/ui/DocMenu.ts
@@ -17,7 +17,7 @@ import {transition} from 'app/client/ui/transitions';
 import {showWelcomeQuestions} from 'app/client/ui/WelcomeQuestions';
 import {createVideoTourTextButton} from 'app/client/ui/OpenVideoTour';
 import {buttonSelect, cssButtonSelect} from 'app/client/ui2018/buttonSelect';
-import {colors, isNarrowScreenObs} from 'app/client/ui2018/cssVars';
+import {isNarrowScreenObs, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {menu, menuItem, menuText, select} from 'app/client/ui2018/menus';
@@ -84,7 +84,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
            // TODO: this is shown on all pages, but there is a hack in currentWSPinnedDocs that
            // removes all pinned docs when on trash page.
            dom.maybe((use) => use(home.currentWSPinnedDocs).length > 0, () => [
-              css.docListHeader(css.docHeaderIconDark('PinBig'), 'Pinned Documents'),
+              css.docListHeader(css.pinnedDocsIcon('PinBig'), 'Pinned Documents'),
              createPinnedDocs(home, home.currentWSPinnedDocs),
            ]),

@@ -393,7 +393,7 @@ function buildWorkspaceDocBlock(home: HomeModel, workspace: Workspace, flashDocI
          // The flash value may change to true, and then immediately to false. We highlight it
          // using a transition, and scroll into view, when it turns back to false.
          transition(flash, {
-            prepare(elem, val) { if (!val) { elem.style.backgroundColor = colors.slate.toString(); } },
+            prepare(elem, val) { if (!val) { elem.style.backgroundColor = theme.lightText.toString(); } },
            run(elem, val) { if (!val) { elem.style.backgroundColor = ''; scrollIntoViewIfNeeded(elem); } },
          })
        ),
--- a/app/client/ui/DocMenuCss.ts
+++ b/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} {
    & {
--- a/app/client/ui/ExampleCard.ts
+++ b/app/client/ui/ExampleCard.ts
@@ -1,6 +1,6 @@
 import {IExampleInfo} from 'app/client/ui/ExampleInfo';
 import {prepareForTransition, TransitionWatcher} from 'app/client/ui/transitions';
-import {colors, mediaXSmall, testId, vars} from 'app/client/ui2018/cssVars';
+import {mediaXSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {dom, styled} from 'grainjs';
@@ -98,8 +98,8 @@ const cssCard = styled('div', `
  margin-right: 24px;
  max-width: 624px;
  padding: 32px 56px 32px 32px;
-  background-color: white;
-  box-shadow: 0 2px 18px 0 rgba(31,37,50,0.31), 0 0 1px 0 rgba(76,86,103,0.24);
+  background-color: ${theme.popupBg};
+  box-shadow: 0 2px 18px 0 ${theme.popupInnerShadow}, 0 0 1px 0 ${theme.popupOuterShadow};
  display: flex;
  overflow: hidden;
  transition-property: opacity, transform;
@@ -129,10 +129,12 @@ const cssImage = styled('img', `
 `);

 const cssBody = styled('div', `
+  color: ${theme.text};
  min-width: 0px;
 `);

 const cssTitle = styled('div', `
+  color: ${theme.text};
  font-size: var(--title-font-size);
  font-weight: ${vars.headerControlTextWeight};
  margin-bottom: 16px;
@@ -165,10 +167,10 @@ export const cssCloseButton = styled('div', `
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.popupCloseButtonFg};

  &:hover {
-    background-color: ${colors.mediumGreyOpaque};
+    background-color: ${theme.hover};
  }
 `);

--- a/app/client/ui/FieldConfig.ts
+++ b/app/client/ui/FieldConfig.ts
@@ -5,7 +5,7 @@ import {buildHighlightedCode, cssCodeBlock} from 'app/client/ui/CodeHighlight';
 import {cssBlockedCursor, cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
 import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
 import {textButton} from 'app/client/ui2018/buttons';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {testId, theme} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {cssIconButton, icon} from 'app/client/ui2018/icons';
 import {IconName} from 'app/client/ui2018/IconList';
@@ -42,13 +42,13 @@ export function buildNameConfig(owner: MultiHolder, origColumn: ColumnRec, curso
    cssRow(
      dom.cls(cssBlockedCursor.className, origColumn.disableModify),
      cssColLabelBlock(
-        editor = textInput(fromKo(origColumn.label),
+        editor = cssInput(fromKo(origColumn.label),
          async val => { await origColumn.label.saveOnly(val); editedLabel.set(''); },
          dom.on('input', (ev, elem) => { if (!untieColId.peek()) { editedLabel.set(elem.value); } }),
          dom.boolAttr('disabled', origColumn.disableModify),
          testId('field-label'),
        ),
-        textInput(editableColId,
+        cssInput(editableColId,
          saveColId,
          dom.boolAttr('disabled', use => use(origColumn.disableModify) || !use(origColumn.untieColIdFromLabel)),
          cssCodeBlock.cls(''),
@@ -332,10 +332,10 @@ export const cssFieldFormula = styled(buildHighlightedCode, `
  cursor: pointer;
  margin-top: 4px;
  padding-left: 24px;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};

  &-disabled-icon.formula_field_sidepane::before {
-    --icon-color: ${colors.slate};
+    --icon-color: ${theme.lightText};
  }
  &-disabled {
    pointer-events: none;
@@ -344,20 +344,20 @@ export const cssFieldFormula = styled(buildHighlightedCode, `

 const cssToggleButton = styled(cssIconButton, `
  margin-left: 8px;
-  background-color: var(--grist-color-medium-grey-opaque);
-  box-shadow: inset 0 0 0 1px ${colors.darkGrey};
+  background-color: ${theme.rightPanelToggleButtonDisabledBg};
+  box-shadow: inset 0 0 0 1px ${theme.inputBorder};

  &-selected, &-selected:hover {
    box-shadow: none;
-    background-color: ${colors.dark};
-    --icon-color: ${colors.light};
+    background-color: ${theme.rightPanelToggleButtonEnabledBg};
+    --icon-color: ${theme.rightPanelToggleButtonEnabledFg};
  }
  &-selected:hover {
-    --icon-color: ${colors.darkGrey};
+    --icon-color: ${theme.rightPanelToggleButtonEnabledHoverFg};
  }
  &-disabled, &-disabled:hover {
-    --icon-color: ${colors.light};
-    background-color: var(--grist-color-medium-grey-opaque);
+    --icon-color: ${theme.rightPanelToggleButtonDisabledFg};
+    background-color: ${theme.rightPanelToggleButtonDisabledBg};
  }
 `);

@@ -374,7 +374,7 @@ const cssColTieBlock = styled('div', `

 const cssColTieConnectors = styled('div', `
  position: absolute;
-  border: 2px solid var(--grist-color-dark-grey);
+  border: 2px solid ${theme.inputBorder};
  top: -9px;
  bottom: -9px;
  right: 11px;
@@ -386,3 +386,18 @@ const cssColTieConnectors = styled('div', `
 const cssEmptySeparator = styled('div', `
  margin-top: 16px;
 `);
+
+const cssInput = styled(textInput, `
+  color: ${theme.inputFg};
+  background-color: ${theme.mainPanelBg};
+  border: 1px solid ${theme.inputBorder};
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
+
+  &:disabled {
+    background-color: ${theme.inputDisabledBg};
+    color: ${theme.inputDisabledFg};
+  }
+`);
--- a/app/client/ui/FilterBar.ts
+++ b/app/client/ui/FilterBar.ts
@@ -3,7 +3,7 @@ import { ColumnRec, ViewFieldRec, ViewSectionRec } from "app/client/models/DocMo
 import { FilterInfo } from "app/client/models/entities/ViewSectionRec";
 import { attachColumnFilterMenu } from "app/client/ui/ColumnFilterMenu";
 import { cssButton, cssButtonGroup } from "app/client/ui2018/buttons";
-import { colors, testId } from "app/client/ui2018/cssVars";
+import { testId, theme } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
 import { menu, menuItemAsync } from "app/client/ui2018/menus";
 import { dom, IDisposableOwner, IDomArgs, styled } from "grainjs";
@@ -117,14 +117,14 @@ const cssBtn = styled('div', `
    margin: 0 4px;
  }
  &-grayed {
-    color:        ${colors.light};
-    --icon-color: ${colors.light};
-    background-color: ${colors.slate};
-    border-color: ${colors.slate};
+    color:        ${theme.filterBarButtonSavedFg};
+    --icon-color: ${theme.filterBarButtonSavedFg};
+    background-color: ${theme.filterBarButtonSavedBg};
+    border-color: ${theme.filterBarButtonSavedBg};
  }
  &-grayed:hover {
-    background-color: ${colors.darkGrey};
-    border-color: ${colors.darkGrey};
+    background-color: ${theme.filterBarButtonSavedHoverBg};
+    border-color: ${theme.filterBarButtonSavedHoverBg};
  }
 `);
 const primaryButton = (...args: IDomArgs<HTMLDivElement>) => (
--- a/app/client/ui/GridViewMenus.ts
+++ b/app/client/ui/GridViewMenus.ts
@@ -1,6 +1,6 @@
 import { allCommands } from 'app/client/components/commands';
 import { ViewFieldRec } from 'app/client/models/entities/ViewFieldRec';
-import { testId, vars } from 'app/client/ui2018/cssVars';
+import { testId, theme } from 'app/client/ui2018/cssVars';
 import { icon } from 'app/client/ui2018/icons';
 import { menuDivider, menuItem, menuItemCmd } from 'app/client/ui2018/menus';
 import { Sort } from 'app/common/SortSpec';
@@ -297,9 +297,9 @@ const cssCustomMenuItem = styled('div', `
  padding: 8px 8px;
  display: flex;
  &:not(:hover) {
-    background-color: white;
-    color: black;
-    --icon-color: black;
+    background-color: ${theme.menuBg};
+    color: ${theme.menuItemFg};
+    --icon-color: ${theme.menuItemFg};
  }
  &:last-of-type {
    padding-right: 24px;
@@ -310,9 +310,9 @@ const cssCustomMenuItem = styled('div', `
    flex: 1 0 auto;
  }
  &-selected, &-selected:not(:hover) {
-    background-color: ${vars.primaryBg};
-    color: white;
-    --icon-color: white;
+    background-color: ${theme.menuItemSelectedBg};
+    color: ${theme.menuItemSelectedFg};
+    --icon-color: ${theme.menuItemSelectedFg};
  }
 `);

--- a/app/client/ui/HomeIntro.ts
+++ b/app/client/ui/HomeIntro.ts
@@ -5,7 +5,7 @@ import * as css from 'app/client/ui/DocMenuCss';
 import {createDocAndOpen, importDocAndOpen} from 'app/client/ui/HomeLeftPane';
 import {manageTeamUsersApp} from 'app/client/ui/OpenUserManager';
 import {bigBasicButton, cssButton} from 'app/client/ui2018/buttons';
-import {testId, vars} from 'app/client/ui2018/cssVars';
+import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {commonUrls, shouldHideUiElement} from 'app/common/gristUrls';
@@ -131,6 +131,7 @@ function makeCreateButtons(homeModel: HomeModel) {
 }

 const cssParagraph = styled(css.docBlock, `
+  color: ${theme.text};
  line-height: 1.6;
 `);

--- a/app/client/ui/HomeLeftPane.ts
+++ b/app/client/ui/HomeLeftPane.ts
@@ -9,7 +9,7 @@ import {docImport, importFromPlugin} from 'app/client/ui/HomeImports';
 import {cssLinkText, cssPageEntry, cssPageIcon, cssPageLink, cssSpacer} from 'app/client/ui/LeftPanelCommon';
 import {createVideoTourToolsButton} from 'app/client/ui/OpenVideoTour';
 import {transientInput} from 'app/client/ui/transientInput';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuIcon, menuItem, upgradableMenuItem, upgradeText} from 'app/client/ui2018/menus';
 import {confirmModal} from 'app/client/ui2018/modals';
@@ -248,6 +248,7 @@ export const cssEditorInput = styled(transientInput, `
  flex: 1 1 0px;
  min-width: 0px;
  color: initial;
+  background-color: ${theme.inputBg};
  margin-right: 16px;
  font-size: inherit;
 `);
@@ -265,9 +266,9 @@ const cssMenuTrigger = styled('div', `
    display: block;
  }
  &:hover, &.weasel-popup-open {
-    background-color: ${colors.darkGrey};
+    background-color: ${theme.pageOptionsHoverBg};
  }
  .${cssPageEntry.className}-selected &:hover, .${cssPageEntry.className}-selected &.weasel-popup-open {
-    background-color: ${colors.slate};
+    background-color: ${theme.pageOptionsSelectedHoverBg};
  }
 `);
--- a/app/client/ui/LeftPanelCommon.ts
+++ b/app/client/ui/LeftPanelCommon.ts
@@ -15,7 +15,7 @@
 */
 import {beaconOpenMessage} from 'app/client/lib/helpScout';
 import {AppModel} from 'app/client/models/AppModel';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {commonUrls, shouldHideUiElement} from 'app/common/gristUrls';
 import {dom, DomContents, Observable, styled} from 'grainjs';
@@ -83,7 +83,7 @@ export const cssTools = styled('div', `

 export const cssSectionHeader = styled('div', `
  margin: 24px 0 8px 24px;
-  color: ${colors.slate};
+  color: ${theme.lightText};
  text-transform: uppercase;
  font-weight: 500;
  font-size: ${vars.xsmallFontSize};
@@ -96,22 +96,22 @@ export const cssSectionHeader = styled('div', `
 export const cssPageEntry = styled('div', `
  margin: 0px 16px 0px 0px;
  border-radius: 0 3px 3px 0;
-  color: ${colors.dark};
-  --icon-color: ${colors.slate};
+  color: ${theme.text};
+  --icon-color: ${theme.lightText};
  cursor: default;

  &:hover, &.weasel-popup-open, &-renaming {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.pageHoverBg};
  }
  &-selected, &-selected:hover, &-selected.weasel-popup-open {
-    background-color: ${colors.darkBg};
-    color: ${colors.light};
-    --icon-color: ${colors.light};
+    background-color: ${theme.activePageBg};
+    color: ${theme.activePageFg};
+    --icon-color: ${theme.activePageFg};
  }
  &-disabled, &-disabled:hover, &-disabled.weasel-popup-open {
    background-color: initial;
-    color: ${colors.darkGrey};
-    --icon-color: ${colors.darkGrey};
+    color: ${theme.disabledPageFg};
+    --icon-color: ${theme.disabledPageFg};
  }
  .${cssTools.className}-collapsed > & {
    margin-right: 0;
@@ -171,12 +171,12 @@ export const cssPageEntryMain = styled(cssPageEntry, `
 export const cssPageEntrySmall = styled(cssPageEntry, `
  flex: none;
  border-radius: 3px;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.controlFg};
  & > .${cssPageLink.className} {
    padding: 0 8px 0 16px;
  }
  &:hover {
-    --icon-color: ${colors.darkGreen};
+    --icon-color: ${theme.controlHoverFg};
  }
  .${cssTools.className}-collapsed & {
    display: none;
--- a/app/client/ui/MakeCopyMenu.ts
+++ b/app/client/ui/MakeCopyMenu.ts
@@ -9,7 +9,7 @@ import {getWorkspaceInfo, ownerName, workspaceName} from 'app/client/models/Work
 import {cssInput} from 'app/client/ui/cssInput';
 import {bigBasicButton, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {select} from 'app/client/ui2018/menus';
 import {confirmModal, cssModalBody, cssModalButtons, cssModalWidth, modal, saveModal} from 'app/client/ui2018/modals';
@@ -284,7 +284,7 @@ export const cssField = styled('div', `
 export const cssLabel = styled('label', `
  font-weight: normal;
  font-size: ${vars.mediumFontSize};
-  color: ${colors.dark};
+  color: ${theme.text};
  margin: 8px 16px 0 0;
  white-space: nowrap;
  width: 80px;
@@ -292,7 +292,7 @@ export const cssLabel = styled('label', `
 `);

 const cssWarningText = styled('div', `
-  color: red;
+  color: ${theme.errorText};
  margin-top: 8px;
 `);

--- a/app/client/ui/MenuToggle.ts
+++ b/app/client/ui/MenuToggle.ts
@@ -1,6 +1,6 @@
-import { dom, DomArg, IDisposableOwner, styled } from "grainjs";
+import { theme } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
-import { colors } from "app/client/ui2018/cssVars";
+import { dom, DomArg, IDisposableOwner, styled } from "grainjs";

 /**
 * Creates a toggle button - little square button with a dropdown icon inside, used
@@ -15,18 +15,18 @@ export function menuToggle(obs: IDisposableOwner, ...args: DomArg[]) {
 }

 const cssMenuToggle = styled('div.menu_toggle', `
-  background: white;
+  background: ${theme.menuToggleBg};
  cursor: pointer;
-  --icon-color: ${colors.slate};
-  border: 1px solid ${colors.slate};
+  --icon-color: ${theme.menuToggleFg};
+  border: 1px solid ${theme.menuToggleBorder};
  border-radius: 4px;
  &:hover  {
-    --icon-color: ${colors.darkGreen};
-    border-color: ${colors.darkGreen};
+    --icon-color: ${theme.menuToggleHoverFg};
+    border-color: ${theme.menuToggleHoverFg};
  }
  &:active  {
-    --icon-color: ${colors.darkerGreen};
-    border-color: ${colors.darkerGreen};
+    --icon-color: ${theme.menuToggleActiveFg};
+    border-color: ${theme.menuToggleActiveFg};
  }
  & > .menu_toggle_icon {
    display: block; /* don't create a line */
--- a/app/client/ui/NotifyUI.ts
+++ b/app/client/ui/NotifyUI.ts
@@ -4,7 +4,7 @@ import {ConnectState} from 'app/client/models/ConnectState';
 import {urlState} from 'app/client/models/gristUrlState';
 import {Expirable, IAppError, Notification, Notifier, NotifyAction, Progress} from 'app/client/models/NotifyModel';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {IconName} from "app/client/ui2018/IconList";
 import {menuCssClass} from 'app/client/ui2018/menus';
@@ -193,8 +193,8 @@ function buildConnectStateButton(state: ConnectState): Element {


 const cssDropdownWrapper = styled('div', `
-  background-color: white;
-  border: 1px solid ${colors.darkGrey};
+  background-color: ${theme.notificationsPanelBodyBg};
+  border: 1px solid ${theme.notificationsPanelBorder};
  padding: 0px;
 `);

@@ -208,17 +208,18 @@ const cssDropdownHeader = styled('div', `
  justify-content: space-between;
  align-items: center;
  padding: 24px;
-  background-color: ${colors.lightGrey};
-  outline: 1px solid ${colors.darkGrey};
+  background-color: ${theme.notificationsPanelHeaderBg};
+  outline: 1px solid ${theme.notificationsPanelBorder};
 `);

 const cssDropdownHeaderTitle = styled('span', `
+  color: ${theme.text};
  font-weight: bold;
 `);

 const cssDropdownFeedbackLink = styled('div', `
  display: flex;
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
  cursor: pointer;
  user-select: none;
  &:hover {
@@ -227,21 +228,21 @@ const cssDropdownFeedbackLink = styled('div', `
 `);

 const cssDropdownFeedbackIcon = styled(icon, `
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.controlFg};
  margin-right: 4px;
 `);

 const cssDropdownStatus = styled('div', `
  padding: 16px 48px 24px 48px;
  text-align: center;
-  border-top: 1px solid ${colors.darkGrey};
+  border-top: 1px solid ${theme.notificationsPanelBorder};
 `);

 const cssDropdownStatusText = styled('div', `
  display: inline-block;
  margin: 8px 0 0 0;
  text-align: left;
-  color: ${colors.slate};
+  color: ${theme.lightText};
 `);

 // z-index below is set above other assorted children of <body> which include z-index such as 999
@@ -279,7 +280,7 @@ const cssToastActions = styled('div', `
  display: flex;
  align-items: flex-end;
  margin-top: 16px;
-  color: ${colors.lightGreen};
+  color: ${theme.toastControlFg};
 `);

 const cssToastWrapper = styled('div', `
@@ -292,8 +293,8 @@ const cssToastWrapper = styled('div', `
  padding: 12px;
  border-radius: 3px;

-  color: ${colors.light};
-  background-color: ${vars.toastBg};
+  color: ${theme.toastText};
+  background-color: ${theme.toastBg};

  pointer-events: auto;

@@ -301,28 +302,28 @@ const cssToastWrapper = styled('div', `
  transition: opacity ${Expirable.fadeDelay}ms;

  &-error {
-    border-left: 6px solid ${colors.error};
+    border-left: 6px solid ${theme.toastErrorBg};
    padding-left: 6px;
-    --icon-color: ${colors.error};
+    --icon-color: ${theme.toastErrorIcon};
  }

  &-success {
-    border-left: 6px solid ${colors.darkGreen};
+    border-left: 6px solid ${theme.toastSuccessBg};
    padding-left: 6px;
-    --icon-color: ${colors.darkGreen};
+    --icon-color: ${theme.toastSuccessIcon};
  }
  &-warning {
-    border-left: 6px solid ${colors.warningBg};
+    border-left: 6px solid ${theme.toastWarningBg};
    padding-left: 6px;
-    --icon-color: ${colors.warning};
+    --icon-color: ${theme.toastWarningIcon};
  }
  &-info {
-    border-left: 6px solid ${colors.lightBlue};
+    border-left: 6px solid ${theme.toastInfoBg};
    padding-left: 6px;
-    --icon-color: ${colors.lightBlue};
+    --icon-color: ${theme.toastInfoIcon};
  }
  &-info .${cssToastActions.className} {
-    color: ${colors.lighterBlue};
+    color: ${theme.toastInfoControlFg};
  }

  &-left-icon {
@@ -340,9 +341,9 @@ const cssToastWrapper = styled('div', `
  }
  .${cssDropdownContent.className} > & {
    background-color: unset;
-    color: unset;
+    color: ${theme.text};
    border-radius: 0px;
-    border-top: 1px solid ${colors.darkGrey};
+    border-top: 1px solid ${theme.notificationsPanelBorder};
    margin: 0px;
    padding: 16px 20px;
  }
@@ -389,8 +390,8 @@ const cssToastMemos = styled('div', `

 const cssToastMemo = styled('div', `
  margin: 3px;
-  color: ${colors.dark};
-  background: ${colors.light};
+  color: ${theme.text};
+  background: ${theme.notificationsPanelBodyBg};
  padding: 3px;
 `);

@@ -399,16 +400,16 @@ const cssProgressBarWrapper = styled('div', `
  margin-bottom: 11px;
  height: 3px;
  border-radius: 3px;
-  background-color: ${colors.light};
+  background-color: ${theme.progressBarBg};
 `);

 const cssProgressBarSize = styled('span', `
-  color: ${colors.slate};
+  color: ${theme.toastLightText};
 `);

 const cssProgressBarStatus = styled('div', `
  height: 3px;
  min-width: 3px;
  border-radius: 3px;
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.progressBarFg};
 `);
--- a/app/client/ui/OnBoardingPopups.ts
+++ b/app/client/ui/OnBoardingPopups.ts
@@ -27,7 +27,7 @@ import { createPopper, Placement } from '@popperjs/core';
 import { FocusLayer } from 'app/client/lib/FocusLayer';
 import * as Mousetrap from 'app/client/lib/Mousetrap';
 import { bigBasicButton, bigPrimaryButton } from "app/client/ui2018/buttons";
-import { colors, vars } from "app/client/ui2018/cssVars";
+import { theme, vars } from "app/client/ui2018/cssVars";
 import range = require("lodash/range");
 import {IGristUrlState} from "app/common/gristUrls";
 import {urlState} from "app/client/models/gristUrlState";
@@ -321,13 +321,13 @@ function buildArrow() {

 const Container = styled('div', `
  align-self: center;
-  border: 2px solid ${colors.lightGreen};
+  border: 2px solid ${theme.accentBorder};
  border-radius: 3px;
  z-index: 1000;
  max-width: 490px;
  position: relative;
-  background-color: white;
-  box-shadow: 0 2px 18px 0 rgba(31,37,50,0.31), 0 0 1px 0 rgba(76,86,103,0.24);
+  background-color: ${theme.popupBg};
+  box-shadow: 0 2px 18px 0 ${theme.popupInnerShadow}, 0 0 1px 0 ${theme.popupOuterShadow};
  outline: unset;
 `);

@@ -339,9 +339,9 @@ const ArrowContainer = styled('div', `
  position: absolute;

  & path {
-    stroke: ${colors.lightGreen};
+    stroke: ${theme.accentBorder};
    stroke-width: 2px;
-    fill: white;
+    fill: ${theme.popupBg};
  }

  ${sideSelectorChunk('top')} > & {
@@ -376,7 +376,7 @@ const ArrowContainer = styled('div', `
 const ContentWrapper = styled('div', `
  position: relative;
  padding: 32px;
-  background-color: white;
+  background-color: ${theme.popupBg};
 `);

 const Footer = styled('div', `
@@ -402,9 +402,9 @@ const Dot = styled('div', `
  border-radius: 3px;
  margin-right: 12px;
  align-self: center;
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.progressBarFg};
  &-done {
-    background-color: ${colors.darkGrey};
+    background-color: ${theme.progressBarBg};
  }
 `);

@@ -424,10 +424,11 @@ const Overlay = styled('div', `
 const cssTitle = styled('div', `
  font-size: ${vars.xxxlargeFontSize};
  font-weight: ${vars.headerControlTextWeight};
-  color: ${colors.dark};
+  color: ${theme.text};
  margin: 0 0 16px 0;
  line-height: 32px;
 `);

 const cssBody = styled('div', `
+  color: ${theme.text};
 `);
--- a/app/client/ui/OpenVideoTour.ts
+++ b/app/client/ui/OpenVideoTour.ts
@@ -1,6 +1,6 @@
 import * as commands from 'app/client/components/commands';
 import {cssLinkText, cssPageEntryMain, cssPageIcon, cssPageLink} from 'app/client/ui/LeftPanelCommon';
-import {colors} from 'app/client/ui2018/cssVars';
+import {theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {modal} from 'app/client/ui2018/modals';
 import {commonUrls, shouldHideUiElement} from 'app/common/gristUrls';
@@ -106,21 +106,21 @@ const cssVideo = styled('iframe', `
 `);

 const cssVideoTourTextButton = styled('div', `
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
  cursor: pointer;

  &:hover {
-    color: ${colors.darkGreen};
+    color: ${theme.controlHoverFg};
  }
 `);

 const cssVideoIcon = styled(icon, `
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.controlFg};
  cursor: pointer;
  margin: 0px 4px 3px 0;

  .${cssVideoTourTextButton.className}:hover > & {
-    background-color: ${colors.darkGreen};
+    background-color: ${theme.controlHoverFg};
  }
 `);

@@ -130,10 +130,10 @@ const cssCloseButton = styled('div', `
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.modalCloseButtonFg};

  &:hover {
-    background-color: ${colors.mediumGreyOpaque};
+    background-color: ${theme.hover};
  }
 `);

--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -6,7 +6,7 @@ import {watchElementForBlur} from 'app/client/lib/FocusLayer';
 import {urlState} from "app/client/models/gristUrlState";
 import {resizeFlexVHandle} from 'app/client/ui/resizeHandle';
 import {transition, TransitionWatcher} from 'app/client/ui/transitions';
-import {colors, cssHideForNarrowScreen, isScreenResizing, mediaNotSmall, mediaSmall} from 'app/client/ui2018/cssVars';
+import {cssHideForNarrowScreen, isScreenResizing, mediaNotSmall, mediaSmall, theme} from 'app/client/ui2018/cssVars';
 import {isNarrowScreenObs} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomArg, MultiHolder, noTestId, Observable, styled, subscribe, TestId} from "grainjs";
@@ -102,7 +102,7 @@ export function pagePanels(page: PageContents) {
        testId('left-panel'),
        cssOverflowContainer(
          contentWrapper = cssLeftPanelContainer(
-            cssTopHeader(left.header),
+            cssLeftPaneHeader(left.header),
            left.content,
          ),
        ),
@@ -264,7 +264,7 @@ export function pagePanels(page: PageContents) {

        cssRightPane(
          testId('right-panel'),
-          cssTopHeader(right.header),
+          cssRightPaneHeader(right.header),
          right.content,

          dom.style('width', (use) => use(right.panelOpen) ? use(right.panelWidth) + 'px' : ''),
@@ -341,7 +341,7 @@ const cssPageContainer = styled(cssVBox, `
  right: 0;
  bottom: 0;
  min-width: 600px;
-  background-color: ${colors.lightGrey};
+  background-color: ${theme.pageBg};

  @media ${mediaSmall} {
    & {
@@ -359,7 +359,7 @@ const cssContentMain = styled(cssHBox, `
 `);
 export const cssLeftPane = styled(cssVBox, `
  position: relative;
-  background-color: ${colors.lightGrey};
+  background-color: ${theme.leftPanelBg};
  width: 48px;
  margin-right: 0px;
  transition: width 0.4s;
@@ -415,7 +415,7 @@ const cssMainPane = styled(cssVBox, `
  position: relative;
  flex: 1 1 0px;
  min-width: 0px;
-  background-color: white;
+  background-color: ${theme.mainPanelBg};
  z-index: 1;
  &-left-overlap {
    margin-left: 48px;
@@ -423,7 +423,7 @@ const cssMainPane = styled(cssVBox, `
 `);
 const cssRightPane = styled(cssVBox, `
  position: relative;
-  background-color: ${colors.lightGrey};
+  background-color: ${theme.rightPanelBg};
  width: 0px;
  margin-left: 0px;
  overflow: hidden;
@@ -461,13 +461,13 @@ const cssRightPane = styled(cssVBox, `
    display: none;
  }
 `);
-const cssTopHeader = styled('div', `
-  height: 48px;
+const cssHeader = styled('div', `
+  height: 49px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  border-bottom: 1px solid ${colors.mediumGrey};
+  border-bottom: 1px solid ${theme.pagePanelsBorder};

  @media print {
    & {
@@ -479,9 +479,18 @@ const cssTopHeader = styled('div', `
    display: none;
  }
 `);
+const cssTopHeader = styled(cssHeader, `
+  background-color: ${theme.topHeaderBg};
+`);
+const cssLeftPaneHeader = styled(cssHeader, `
+  background-color: ${theme.leftPanelBg};
+`);
+const cssRightPaneHeader = styled(cssHeader, `
+  background-color: ${theme.rightPanelBg};
+`);
 const cssBottomFooter = styled ('div', `
  height: ${bottomFooterHeightPx}px;
-  background-color: white;
+  background-color: ${theme.bottomFooterBg};
  z-index: 20;
  display: flex;
  flex-direction: row;
@@ -492,7 +501,7 @@ const cssBottomFooter = styled ('div', `
  bottom: 0;
  left: 0;
  right: 0;
-  border-top: 1px solid ${colors.mediumGrey};
+  border-top: 1px solid ${theme.pagePanelsBorder};
  @media ${mediaNotSmall} {
    & {
      display: none;
@@ -508,8 +517,8 @@ const cssBottomFooter = styled ('div', `
  }
 `);
 const cssResizeFlexVHandle = styled(resizeFlexVHandle, `
-  --resize-handle-color: ${colors.mediumGrey};
-  --resize-handle-highlight: ${colors.lightGreen};
+  --resize-handle-color: ${theme.pagePanelsBorder};
+  --resize-handle-highlight: ${theme.pagePanelsBorderResizing};

  @media print {
    & {
@@ -521,7 +530,7 @@ const cssResizeDisabledBorder = styled('div', `
  flex: none;
  width: 1px;
  height: 100%;
-  background-color: ${colors.mediumGrey};
+  background-color: ${theme.pagePanelsBorder};
  position: absolute;
  top: 0;
  bottom: 0;
@@ -535,20 +544,20 @@ const cssPanelOpener = styled(icon, `
  padding: 8px 8px;
  cursor: pointer;
  -webkit-mask-size: 16px 16px;
-  background-color: ${colors.lightGreen};
+  background-color: ${theme.controlFg};
  transition: transform 0.4s;
-  &:hover { background-color: ${colors.darkGreen}; }
+  &:hover { background-color: ${theme.controlHoverFg}; }
  &-open { transform: rotateY(180deg); }
 `);
 const cssPanelOpenerNarrowScreenBtn = styled('div', `
  width: 32px;
  height: 32px;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.sidePanelOpenerFg};
  cursor: pointer;
  border-radius: 4px;
  &-open {
-    background-color: ${colors.lightGreen};
-    --icon-color: white;
+    background-color: ${theme.sidePanelOpenerActiveBg};
+    --icon-color: ${theme.sidePanelOpenerActiveFg};
  }
 `);
 const cssPanelOpenerNarrowScreen = styled(icon, `
@@ -562,7 +571,7 @@ const cssContentOverlay = styled('div', `
  left: 0;
  bottom: 0;
  right: 0;
-  background-color: grey;
+  background-color: ${theme.pageBackdrop};
  opacity: 0.5;
  display: none;
  z-index: 9;
--- a/app/client/ui/PageWidgetPicker.ts
+++ b/app/client/ui/PageWidgetPicker.ts
@@ -3,7 +3,7 @@ import { ColumnRec, DocModel, TableRec, ViewSectionRec } from 'app/client/models
 import { linkId, NoLink } from 'app/client/ui/selectBy';
 import { getWidgetTypes, IWidgetType } from 'app/client/ui/widgetTypes';
 import { bigPrimaryButton } from "app/client/ui2018/buttons";
-import { colors, vars } from "app/client/ui2018/cssVars";
+import { theme, vars } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
 import { spinnerModal } from 'app/client/ui2018/modals';
 import { isLongerThan, nativeCompare } from "app/common/gutil";
@@ -421,15 +421,15 @@ function header(label: string) {
 }

 const cssContainer = styled('div', `
-  --outline: 1px solid rgba(217,217,217,0.60);
+  --outline: 1px solid ${theme.widgetPickerBorder};

  max-height: 386px;
-  box-shadow: 0 2px 20px 0 rgba(38,38,51,0.20);
+  box-shadow: 0 2px 20px 0 ${theme.widgetPickerShadow};
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  user-select: none;
-  background-color: white;
+  background-color: ${theme.widgetPickerPrimaryBg};
 `);

 const cssPopupWrapper = styled('div', `
@@ -450,17 +450,19 @@ const cssPanel = styled('div', `
  overflow: auto;
  padding-bottom: 18px;
  &:nth-of-type(2n) {
-    background-color: ${colors.lightGrey};
+    background-color: ${theme.widgetPickerSecondaryBg};
    outline: var(--outline);
  }
 `);

 const cssHeader = styled('div', `
+  color: ${theme.text};
  margin: 24px 0 24px 24px;
  font-size: ${vars.mediumFontSize};
 `);

 const cssEntry = styled('div', `
+  color: ${theme.widgetPickerItemFg};
  padding: 0 0 0 24px;
  height: 32px;
  display: flex;
@@ -471,10 +473,10 @@ const cssEntry = styled('div', `
  overflow: hidden;
  cursor: pointer;
  &-selected {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.widgetPickerItemSelectedBg};
  }
  &-disabled {
-    color: ${colors.mediumGrey};
+    color: ${theme.widgetPickerItemDisabledBg};
    cursor: default;
  }
  &-disabled&-selected {
@@ -485,14 +487,14 @@ const cssEntry = styled('div', `
 const cssIcon = styled(icon, `
  margin-right: 8px;
  flex-shrink: 0;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.widgetPickerIcon};
  .${cssEntry.className}-disabled > & {
-    opacity: 0.2;
+    opacity: 0.25;
  }
 `);

 const cssTypeIcon = styled(cssIcon, `
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.widgetPickerPrimaryIcon};
 `);

 const cssLabel = styled('span', `
@@ -518,7 +520,7 @@ const cssPivot = styled(cssEntry, `
 const cssBigIcon = styled(icon, `
  width: 24px;
  height: 24px;
-  background-color: ${colors.darkGreen};
+  background-color: ${theme.widgetPickerSummaryIcon};
 `);

 const cssFooter = styled('div', `
@@ -536,11 +538,14 @@ const cssFooterContent = styled('div', `
 `);

 const cssSmallLabel = styled('span', `
+  color: ${theme.text};
  font-size: ${vars.xsmallFontSize};
  margin-right: 8px;
 `);

 const cssSelect = styled(select, `
+  color: ${theme.selectButtonFg};
+  background-color: ${theme.selectButtonBg};
  flex: 1 0 160px;
  width: 160px;
 `);
--- a/app/client/ui/Pages.ts
+++ b/app/client/ui/Pages.ts
@@ -8,7 +8,7 @@ import {find as findInTree, fromTableData, TreeItemRecord, TreeRecord,
        TreeTableData} from 'app/client/models/TreeModel';
 import {TreeViewComponent} from 'app/client/ui/TreeViewComponent';
 import {labeledCircleCheckbox} from 'app/client/ui2018/checkbox';
-import {colors} from 'app/client/ui2018/cssVars';
+import {theme} from 'app/client/ui2018/cssVars';
 import {cssLink} from 'app/client/ui2018/links';
 import {ISaveModalOptions, saveModal} from 'app/client/ui2018/modals';
 import {buildPageDom, PageActions} from 'app/client/ui2018/pages';
@@ -182,7 +182,7 @@ const cssOptions = styled('div', `
 const cssBlockCheckbox = styled('div', `
  display: flex;
  padding: 10px 8px;
-  border: 1px solid ${colors.mediumGrey};
+  border: 1px solid ${theme.modalBorder};
  border-radius: 3px;
  cursor: pointer;
  & input::before, & input::after  {
@@ -190,7 +190,7 @@ const cssBlockCheckbox = styled('div', `
    left: unset;
  }
  &:hover {
-    border-color: ${colors.lightGreen};
+    border-color: ${theme.accentBorder};
  }
  &-block {
    pointer-events: none;
@@ -208,7 +208,8 @@ const cssWarning = styled('div', `
 `);

 const cssTableName = styled('div', `
-  background: #eee;
+  color: black;
+  background-color: #eee;
  padding: 3px 6px;
  border-radius: 4px;
 `);
--- a/app/client/ui/PinnedDocs.ts
+++ b/app/client/ui/PinnedDocs.ts
@@ -2,7 +2,7 @@ import {docUrl, urlState} from 'app/client/models/gristUrlState';
 import {getTimeFromNow, HomeModel} from 'app/client/models/HomeModel';
 import {makeDocOptionsMenu, makeRemovedDocOptionsMenu} from 'app/client/ui/DocMenu';
 import {transientInput} from 'app/client/ui/transientInput';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {colors, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu} from 'app/client/ui2018/menus';
 import * as roles from 'app/common/roles';
@@ -115,11 +115,11 @@ const pinnedDocWrapper = styled('div', `
  position: relative;
  width: 210px;
  margin: 16px 24px 16px 0;
-  border: 1px solid ${colors.mediumGrey};
+  border: 1px solid ${theme.pinnedDocBorder};
  border-radius: 1px;
  vertical-align: top;
  &:hover {
-    border: 1px solid ${colors.slate};
+    border: 1px solid ${theme.pinnedDocBorderHover};
  }

  /* TODO: Specify a gap on flexbox parents of pinnedDocWrapper instead. */
@@ -132,16 +132,16 @@ const pinnedDoc = styled('a', `
  display: flex;
  flex-direction: column;
  width: 100%;
-  color: black;
+  color: ${theme.text};
  text-decoration: none;
  cursor: pointer;

  &:hover {
-    color: black;
+    color: ${theme.text};
    text-decoration: none;
  }
  &-no-access, &-no-access:hover {
-    color: ${colors.slate};
+    color: ${theme.disabledText};
    cursor: not-allowed;
  }
 `);
@@ -216,6 +216,7 @@ const pinnedDocOptions = styled('div', `
 const pinnedDocFooter = styled('div', `
  width: 100%;
  font-size: ${vars.mediumFontSize};
+  background-color: ${theme.pinnedDocFooterBg};
 `);

 const pinnedDocTitle = styled('div', `
@@ -238,17 +239,18 @@ const pinnedDocEditorInput = styled(transientInput, `
  padding: 0;
  border: none;
  outline: none;
-  background-color: ${colors.mediumGrey};
+  color: ${theme.text};
+  background-color: ${theme.pinnedDocEditorBg};
 `);

 const cssPinnedDocTimestamp = styled('div', `
  margin: 8px 16px 16px 16px;
-  color: ${colors.slate};
+  color: ${theme.lightText};
 `);

 const cssPinnedDocDesc = styled(cssPinnedDocTimestamp, `
  margin: 8px 16px 16px 16px;
-  color: ${colors.slate};
+  color: ${theme.lightText};
  height: 48px;
  line-height: 16px;
  -webkit-box-orient: vertical;
@@ -271,5 +273,5 @@ const cssPublicIcon = styled(icon, `
  position: absolute;
  top: 16px;
  left: 16px;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};
 `);
--- a/app/client/ui/RightPanel.ts
+++ b/app/client/ui/RightPanel.ts
@@ -30,7 +30,7 @@ import {CustomSectionConfig} from 'app/client/ui/CustomSectionConfig';
 import {VisibleFieldsConfig} from 'app/client/ui/VisibleFieldsConfig';
 import {IWidgetType, widgetTypes} from 'app/client/ui/widgetTypes';
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
-import {colors, testId, vars} from 'app/client/ui2018/cssVars';
+import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
@@ -567,7 +567,7 @@ function tabContentToDom(content: Observable<TabContent[]>|TabContent[]|IDomComp
 }

 const cssOverlay = styled('div', `
-  background-color: white;
+  background-color: ${theme.rightPanelDisabledOverlay};
  opacity: 0.8;
  position: absolute;
  top: 0;
@@ -578,19 +578,21 @@ const cssOverlay = styled('div', `
 `);

 const cssBottomText = styled('span', `
+  color: ${theme.text};
  position: absolute;
  bottom: -40px;
  padding: 4px 16px;
 `);

 const cssLabel = styled('div', `
+  color: ${theme.text};
  text-transform: uppercase;
  margin: 16px 16px 12px 16px;
  font-size: ${vars.xsmallFontSize};
 `);

-
 const cssRow = styled('div', `
+  color: ${theme.text};
  display: flex;
  margin: 8px 16px;
  align-items: center;
@@ -598,7 +600,7 @@ const cssRow = styled('div', `
    margin-top: 24px;
  }
  &-disabled {
-    color: ${colors.slate};
+    color: ${theme.disabledText};
  }
 `);

@@ -613,29 +615,29 @@ const cssButtonRow = styled(cssRow, `

 const cssIcon = styled(icon, `
  flex: 0 0 auto;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.lightText};
 `);

 const cssTopBarItem = styled('div', `
  flex: 1 1 0px;
  height: 100%;
-  background-color: ${colors.lightGrey};
+  background-color: ${theme.rightPanelTabBg};
  font-weight: ${vars.headerControlTextWeight};
-  color: ${colors.dark};
-  --icon-color: ${colors.slate};
+  color: ${theme.rightPanelTabFg};
+  --icon-color: ${theme.rightPanelTabIcon};
  display: flex;
  align-items: center;
  cursor: default;

  &-selected {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.rightPanelTabSelectedBg};
    font-weight: initial;
-    color: ${colors.light};
-    --icon-color: ${colors.light};
+    color: ${theme.rightPanelTabSelectedFg};
+    --icon-color: ${theme.rightPanelTabSelectedFg};
  }
  &:not(&-selected):hover {
-    background-color: ${colors.mediumGrey};
-    --icon-color: ${colors.lightGreen};
+    background-color: ${theme.rightPanelTabHoverBg};
+    --icon-color: ${theme.rightPanelTabIconHover};
  }
 `);

@@ -659,7 +661,7 @@ const cssHoverCircle = styled('div', `
  justify-content: center;

  &:hover {
-    background-color: ${colors.darkGreen};
+    background-color: ${theme.rightPanelTabCloseButtonHoverBg};
  }
 `);

@@ -678,7 +680,7 @@ const cssSubTabContainer = styled('div', `
 `);

 const cssSubTab = styled('div', `
-  color: ${colors.lightGreen};
+  color: ${theme.rightPanelSubtabFg};
  flex: auto;
  height: 100%;
  display: flex;
@@ -686,21 +688,21 @@ const cssSubTab = styled('div', `
  justify-content: flex-end;
  text-align: center;
  padding-bottom: 8px;
-  border-bottom: 1px solid ${colors.mediumGrey};
+  border-bottom: 1px solid ${theme.pagePanelsBorder};
  cursor: default;

  &-selected {
-    color: ${colors.dark};
-    border-bottom: 1px solid ${colors.lightGreen};
+    color: ${theme.rightPanelSubtabSelectedFg};
+    border-bottom: 1px solid ${theme.rightPanelSubtabSelectedUnderline};
  }
  &:not(&-selected):hover {
-    color: ${colors.darkGreen};
+    color: ${theme.rightPanelSubtabHoverFg};
  }
  &:hover {
-    border-bottom: 1px solid ${colors.lightGreen};
+    border-bottom: 1px solid ${theme.rightPanelSubtabHoverUnderline};
  }
  .${cssSubTabContainer.className}:hover > &-selected:not(:hover) {
-    border-bottom: 1px solid ${colors.mediumGrey};
+    border-bottom: 1px solid ${theme.pagePanelsBorder};
  }
 `);

@@ -710,7 +712,7 @@ const cssTabContents = styled('div', `
 `);

 const cssSeparator = styled('div', `
-  border-bottom: 1px solid ${colors.mediumGrey};
+  border-bottom: 1px solid ${theme.pagePanelsBorder};
  margin-top: 16px;
 `);

@@ -731,7 +733,7 @@ const cssConfigContainer = styled('div', `

 const cssDataLabel = styled('div', `
  flex: 0 0 81px;
-  color: ${colors.slate};
+  color: ${theme.lightText};
  font-size: ${vars.xsmallFontSize};
  margin-left: 4px;
  margin-top: 2px;
@@ -751,7 +753,7 @@ const cssList = styled('div', `


 const cssListItem = styled('li', `
-  background-color: ${colors.mediumGrey};
+  background-color: ${theme.hover};
  border-radius: 2px;
  margin-bottom: 4px;
  white-space: nowrap;
@@ -763,10 +765,12 @@ const cssListItem = styled('li', `

 const cssTextInput = styled(textInput, `
  flex: 1 0 auto;
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};

  &:disabled {
-    color: ${colors.slate};
-    background-color: ${colors.lightGrey};
+    color: ${theme.inputDisabledFg};
+    background-color: ${theme.inputDisabledBg};
    pointer-events: none;
  }
 `);
--- a/app/client/ui/RightPanelStyles.ts
+++ b/app/client/ui/RightPanelStyles.ts
@@ -1,13 +1,14 @@
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {styled} from 'grainjs';

 export const cssIcon = styled(icon, `
  flex: 0 0 auto;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.lightText};
 `);

 export const cssLabel = styled('div', `
+  color: ${theme.text};
  text-transform: uppercase;
  margin: 16px 16px 12px 16px;
  font-size: ${vars.xsmallFontSize};
@@ -23,11 +24,12 @@ export const cssRow = styled('div', `
  display: flex;
  margin: 8px 16px;
  align-items: center;
+  color: ${theme.text};
  &-top-space {
    margin-top: 24px;
  }
  &-disabled {
-    color: ${colors.slate};
+    color: ${theme.disabledText};
  }
 `);

@@ -46,6 +48,6 @@ export const cssButtonRow = styled(cssRow, `
 `);

 export const cssSeparator = styled('div', `
-  border-bottom: 1px solid ${colors.mediumGrey};
+  border-bottom: 1px solid ${theme.pagePanelsBorder};
  margin-top: 16px;
 `);
--- a/app/client/ui/ShareMenu.ts
+++ b/app/client/ui/ShareMenu.ts
@@ -6,7 +6,7 @@ import {makeCopy, replaceTrunkWithFork} from 'app/client/ui/MakeCopyMenu';
 import {sendToDrive} from 'app/client/ui/sendToDrive';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {primaryButton} from 'app/client/ui2018/buttons';
-import {colors, mediaXSmall, testId} from 'app/client/ui2018/cssVars';
+import {mediaXSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuAnnotate, menuDivider, menuIcon, menuItem, menuItemLink, menuText} from 'app/client/ui2018/menus';
 import {buildUrlId, parseUrlId} from 'app/common/gristUrls';
@@ -265,9 +265,9 @@ const cssShareButton = styled('div', `
  margin: 5px;
  white-space: nowrap;

-  --share-btn-bg: ${colors.lightGreen};
+  --share-btn-bg: ${theme.controlPrimaryBg};
  &-combined:hover, &-combined.weasel-popup-open {
-    --share-btn-bg: ${colors.darkGreen};
+    --share-btn-bg: ${theme.controlPrimaryHoverBg};
  }
 `);

@@ -289,14 +289,14 @@ const cssShareAction = styled(primaryButton, `
 const cssShareCircle = styled(cssHoverCircle, `
  z-index: 1;
  background-color: var(--share-btn-bg);
-  border: 1px solid white;
+  border: 1px solid ${theme.topHeaderBg};
  &:hover, &.weasel-popup-open {
-    background-color: ${colors.darkGreen};
+    background-color: ${theme.controlPrimaryHoverBg};
  }
 `);

 const cssShareIcon = styled(cssTopBarBtn, `
-  background-color: white;
+  background-color: ${theme.controlPrimaryFg};
  height: 30px;
  width: 30px;
 `);
@@ -310,8 +310,8 @@ const cssMenuSplitLinkText = styled('div', `
  flex: auto;
  padding: var(--weaseljs-menu-item-padding, 8px 24px);
  &:not(:hover) {
-    background-color: white;
-    color: black;
+    background-color: ${theme.menuBg};
+    color: ${theme.menuItemFg};
  }
 `);

@@ -320,11 +320,11 @@ const cssMenuIconLink = styled('a', `
  flex: none;
  padding: 8px 24px;

-  background-color: white;
-  --icon-color: ${colors.lightGreen};
+  background-color: ${theme.menuBg};
+  --icon-color: ${theme.menuItemLinkFg};
  &:hover {
-    background-color: ${colors.mediumGreyOpaque};
-    --icon-color: ${colors.darkGreen};
+    background-color: ${theme.menuItemLinkselectedBg};
+    --icon-color: ${theme.menuItemLinkSelectedFg};
  }
 `);

--- a/app/client/ui/SiteSwitcher.ts
+++ b/app/client/ui/SiteSwitcher.ts
@@ -3,9 +3,9 @@ import {getOrgName} from 'app/common/UserAPI';
 import {dom, makeTestId, styled} from 'grainjs';
 import {AppModel} from 'app/client/models/AppModel';
 import {urlState} from 'app/client/models/gristUrlState';
+import {theme} from 'app/client/ui2018/cssVars';
 import {menuDivider, menuIcon, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {icon} from 'app/client/ui2018/icons';
-import {colors} from 'app/client/ui2018/cssVars';

 const testId = makeTestId('test-site-switcher-');

@@ -49,14 +49,14 @@ export function buildSiteSwitcher(appModel: AppModel) {
 }

 const cssOrgSelected = styled('div', `
-  background-color: ${colors.dark};
-  color: ${colors.light};
+  background-color: ${theme.siteSwitcherActiveBg};
+  color: ${theme.siteSwitcherActiveFg};
 `);

 const cssOrgCheckmark = styled(icon, `
  flex: none;
  margin-left: 16px;
-  --icon-color: ${colors.light};
+  --icon-color: ${theme.siteSwitcherActiveFg};
  display: none;
  .${cssOrgSelected.className} > & {
    display: block;
--- a/app/client/ui/ThemeConfig.ts
+++ b/app/client/ui/ThemeConfig.ts
@@ -0,0 +1,62 @@
+import {AppModel} from 'app/client/models/AppModel';
+import * as css from 'app/client/ui/AccountPageCss';
+import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
+import {select} from 'app/client/ui2018/menus';
+import {ThemeAppearance} from 'app/common/ThemePrefs';
+import {Computed, Disposable, dom, makeTestId, styled} from 'grainjs';
+
+const testId = makeTestId('test-theme-config-');
+
+export class ThemeConfig extends Disposable {
+  private _themePrefs = this._appModel.themePrefs;
+
+  private _appearance = Computed.create(this, this._themePrefs, (_use, prefs) => {
+    return prefs.appearance;
+  }).onWrite((value) => this._updateAppearance(value));
+
+  private _syncWithOS = Computed.create(this, this._themePrefs, (_use, prefs) => {
+    return prefs.syncWithOS;
+  }).onWrite((value) => this._updateSyncWithOS(value));
+
+  constructor(private _appModel: AppModel) {
+    super();
+  }
+
+  public buildDom() {
+    return dom('div',
+      css.subHeader('Appearance ', css.betaTag('Beta')),
+      css.dataRow(
+        cssAppearanceSelect(
+          select(
+            this._appearance,
+            [
+              {value: 'light', label: 'Light'},
+              {value: 'dark', label: 'Dark'},
+            ],
+          ),
+          testId('appearance'),
+        ),
+      ),
+      css.dataRow(
+        labeledSquareCheckbox(
+          this._syncWithOS,
+          'Switch appearance automatically to match system',
+          testId('sync-with-os'),
+        ),
+      ),
+      testId('container'),
+    );
+  }
+
+  private _updateAppearance(appearance: ThemeAppearance) {
+    this._themePrefs.set({...this._themePrefs.get(), appearance});
+  }
+
+  private _updateSyncWithOS(syncWithOS: boolean) {
+    this._themePrefs.set({...this._themePrefs.get(), syncWithOS});
+  }
+}
+
+const cssAppearanceSelect = styled('div', `
+  width: 120px;
+`);
--- a/app/client/ui/Tools.ts
+++ b/app/client/ui/Tools.ts
@@ -7,7 +7,7 @@ import {createHelpTools, cssLinkText, cssPageEntry, cssPageEntryMain, cssPageEnt
        cssPageIcon, cssPageLink, cssSectionHeader, cssSpacer, cssSplitPageEntry,
        cssTools} from 'app/client/ui/LeftPanelCommon';
 import {hoverTooltip, tooltipCloseButton} from 'app/client/ui/tooltips';
-import {colors} from 'app/client/ui2018/cssVars';
+import {theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {menuAnnotate} from 'app/client/ui2018/menus';
@@ -206,7 +206,7 @@ function addRevertViewAsUI() {
 const cssConvertTooltip = styled('div', `
  display: flex;
  align-items: center;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.controlFg};

  & > .${cssLink.className} {
    margin-left: 8px;
@@ -223,10 +223,10 @@ const cssExampleCardOpener = styled('div', `
  width: 24px;
  padding: 4px;
  line-height: 0px;
-  --icon-color: ${colors.light};
-  background-color: ${colors.lightGreen};
+  --icon-color: ${theme.iconButtonFg};
+  background-color: ${theme.iconButtonPrimaryBg};
  &:hover {
-    background-color: ${colors.darkGreen};
+    background-color: ${theme.iconButtonPrimaryHoverBg};
  }
  .${cssTools.className}-collapsed & {
    display: none;
@@ -234,9 +234,9 @@ const cssExampleCardOpener = styled('div', `
 `);

 const cssRevertViewAsButton = styled(cssExampleCardOpener, `
-  background-color: ${colors.darkGrey};
+  background-color: ${theme.iconButtonSecondaryBg};
  &:hover {
-    background-color: ${colors.slate};
+    background-color: ${theme.iconButtonSecondaryHoverBg};
  }
 `);

--- a/app/client/ui/TopBar.ts
+++ b/app/client/ui/TopBar.ts
@@ -10,7 +10,7 @@ import {buildShareMenuButton} from 'app/client/ui/ShareMenu';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {docBreadcrumbs} from 'app/client/ui2018/breadcrumbs';
 import {basicButton} from 'app/client/ui2018/buttons';
-import {colors, cssHideForNarrowScreen, testId} from 'app/client/ui2018/cssVars';
+import {cssHideForNarrowScreen, testId, theme} from 'app/client/ui2018/cssVars';
 import {IconName} from 'app/client/ui2018/IconList';
 import {waitGrainObs} from 'app/common/gutil';
 import * as roles from 'app/common/roles';
@@ -129,14 +129,14 @@ function topBarUndoBtn(iconName: IconName, ...domArgs: DomElementArg[]): Element
 }

 const cssTopBarUndoBtn = styled(cssTopBarBtn, `
-  background-color: ${colors.slate};
+  background-color: ${theme.topBarButtonSecondaryFg};

  .${cssHoverCircle.className}:hover & {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.topBarButtonPrimaryFg};
  }

  .${cssHoverCircle.className}-disabled:hover & {
-    background-color: ${colors.darkGrey};
+    background-color: ${theme.topBarButtonDisabledFg};
    cursor: default;
  }
 `);
--- a/app/client/ui/TopBarCss.ts
+++ b/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}; }
 `);
--- a/app/client/ui/TreeViewComponentCss.ts
+++ b/app/client/ui/TreeViewComponentCss.ts
@@ -1,4 +1,4 @@
-import { colors, vars } from "app/client/ui2018/cssVars";
+import { theme } from "app/client/ui2018/cssVars";
 import { icon } from "app/client/ui2018/icons";
 import { styled } from "grainjs";

@@ -42,27 +42,28 @@ export const itemHeader = styled('div', `
  min-width: 0;
  border-radius: 0 2px 2px 0;
  border: solid 1px transparent;
+  color: ${theme.text};
  .${itemHeaderWrapper.className}-not-dragging:hover > & {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.pageHoverBg};
  }
  .${itemHeaderWrapper.className}-not-dragging > &.selected {
-    background-color: ${colors.darkBg};
-    color: white;
+    background-color: ${theme.activePageBg};
+    color: ${theme.activePageFg};
  }
  &.highlight {
-    border-color: ${vars.controlFg};
+    border-color: ${theme.controlFg};
  }
 `);

 export const dropdown = styled(icon, `
-  background-color: ${colors.slate};
+  background-color: ${theme.controlSecondaryFg};
  .${itemHeaderWrapper.className}-not-dragging > .${itemHeader.className}.selected & {
-    background-color: white;
+    background-color: ${theme.activePageFg};
  }
 `);

 export const itemLabelRight = styled('div', `
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.controlSecondaryFg};
  width: 16px;
  .${treeViewContainer.className}-close & {
    display: none;
@@ -114,6 +115,6 @@ export const offset = styled('div', `
 export const target = styled('div', `
  position: absolute;
  height: 2px;
-  background: ${vars.controlFg};
+  background: ${theme.controlFg};
  pointer-events: none;
 `);
--- a/app/client/ui/TriggerFormulas.ts
+++ b/app/client/ui/TriggerFormulas.ts
@@ -5,7 +5,7 @@ import {cssRow} from 'app/client/ui/RightPanelStyles';
 import {shadowScroll} from 'app/client/ui/shadowScroll';
 import {basicButton, primaryButton} from "app/client/ui2018/buttons";
 import {labeledSquareCheckbox} from "app/client/ui2018/checkbox";
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from "app/client/ui2018/icons";
 import {menuCssClass, menuDivider} from 'app/client/ui2018/menus';
 import {cssSelectBtn} from 'app/client/ui2018/select';
@@ -228,7 +228,7 @@ const cssSelectSummary = styled('div', `

  &:empty::before {
    content: "Select fields";
-    color: ${colors.slate};
+    color: ${theme.selectButtonPlaceholderFg};
  }
 `);

@@ -244,8 +244,8 @@ const cssSelectorMenu = styled(cssMenu, `
 const cssItemsList = styled(shadowScroll, `
  flex: auto;
  min-height: 80px;
-  border-top: 1px solid ${colors.darkGrey};
-  border-bottom: 1px solid ${colors.darkGrey};
+  border-top: 1px solid ${theme.menuBorder};
+  border-bottom: 1px solid ${theme.menuBorder};
  margin-top: 8px;
  padding: 8px 0;
 `);
@@ -263,7 +263,7 @@ const cssSelectorItem = styled(cssMenuItem, `
 `);

 const cssSelectorNote = styled('span', `
-  color: ${colors.slate};
+  color: ${theme.lightText};
 `);

 const cssSelectorFooter = styled(cssSelectorItem, `
--- a/app/client/ui/UserImage.ts
+++ b/app/client/ui/UserImage.ts
@@ -1,4 +1,4 @@
-import {colors} from 'app/client/ui2018/cssVars';
+import {colors, theme} from 'app/client/ui2018/cssVars';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import {dom, DomElementArg, styled} from 'grainjs';

@@ -120,8 +120,7 @@ const cssUserPicture = styled('img', `
  width: 100%;
  height: 100%;
  object-fit: cover;
-  background-color: white;
+  background-color: ${theme.menuBg};
  border-radius: 100px;
-  border: 1px solid white;    /* make sure edge of circle with initials is not visible */
  box-sizing: content-box;    /* keep the border outside of the size of the image */
 `);
--- a/app/client/ui/UserItem.ts
+++ b/app/client/ui/UserItem.ts
@@ -1,4 +1,4 @@
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {colors, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {input, styled} from 'grainjs';
 import {cssMenuItem} from 'popweasel';
@@ -54,16 +54,16 @@ export const cssMemberText = styled('div', `

 export const cssMemberPrimary = styled('span', `
  font-weight: bold;
-  color: ${colors.dark};
+  color: ${theme.text};
  padding: 2px 0;

  .${cssMenuItem.className}-sel & {
-    color: white;
+    color: ${theme.menuItemSelectedFg};
  }
 `);

 export const cssMemberSecondary = styled('span', `
-  color: ${colors.slate};
+  color: ${theme.lightText};
  /* the following just undo annoying bootstrap styles that apply to all labels */
  margin: 0px;
  font-weight: normal;
@@ -71,12 +71,12 @@ export const cssMemberSecondary = styled('span', `
  white-space: nowrap;

  .${cssMenuItem.className}-sel & {
-    color: white;
+    color: ${theme.menuItemSelectedFg};
  }
 `);

 export const cssMemberType = styled('span', `
-  color: ${colors.slate};
+  color: ${theme.lightText};
  /* the following just undo annoying bootstrap styles that apply to all labels */
  margin: 0px;
  font-weight: normal;
@@ -84,12 +84,12 @@ export const cssMemberType = styled('span', `
  white-space: nowrap;

  .${cssMenuItem.className}-sel & {
-    color: white;
+    color: ${theme.menuItemSelectedFg};
  }
 `);

 export const cssMemberTypeProblem = styled('span', `
-  color: ${colors.error};
+  color: ${theme.errorText};
  /* the following just undo annoying bootstrap styles that apply to all labels */
  margin: 0px;
  font-weight: normal;
@@ -97,7 +97,7 @@ export const cssMemberTypeProblem = styled('span', `
  white-space: nowrap;

  .${cssMenuItem.className}-sel & {
-    color: white;
+    color: ${theme.menuItemSelectedFg};
  }
 `);

@@ -113,6 +113,7 @@ export const cssMemberBtn = styled('div', `
 `);

 export const cssRemoveIcon = styled(icon, `
+  background-color: ${theme.lightText};
  margin: 12px 0;
 `);

@@ -122,26 +123,32 @@ export const cssEmailInputContainer = styled('div', `
  height: 42px;
  padding: 0 3px;
  margin: 16px 63px;
-  border: 1px solid ${colors.darkGrey};
+  border: 1px solid ${theme.inputBorder};
  border-radius: 3px;
  font-size: ${vars.mediumFontSize};
  outline: none;

  &-green {
-    border: 1px solid ${colors.lightGreen};
+    border: 1px solid ${theme.inputValid};
  }
 `);

 export const cssEmailInput = styled(input, `
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
  flex: 1 1 0;
  line-height: 42px;
  font-size: ${vars.mediumFontSize};
  font-family: ${vars.fontFamily};
  outline: none;
  border: none;
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
 `);

 export const cssMailIcon = styled(icon, `
  margin: 12px 8px 12px 13px;
-  background-color: ${colors.slate};
+  background-color: ${theme.lightText};
 `);
--- a/app/client/ui/UserManager.ts
+++ b/app/client/ui/UserManager.ts
@@ -32,7 +32,7 @@ import {cssEmailInput, cssEmailInputContainer, cssMailIcon, cssMemberBtn, cssMem
        cssMemberPrimary, cssMemberSecondary, cssMemberText, cssMemberType, cssMemberTypeProblem,
        cssRemoveIcon} from 'app/client/ui/UserItem';
 import {basicButton, bigBasicButton, bigPrimaryButton} from 'app/client/ui2018/buttons';
-import {colors, mediaXSmall, testId, vars} from 'app/client/ui2018/cssVars';
+import {colors, mediaXSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
@@ -662,7 +662,7 @@ const cssAccessDetailsBody = styled('div', `

 const cssUserManagerBody = styled(cssAccessDetailsBody, `
  height: 374px;
-  border-bottom: 1px solid ${colors.darkGrey};
+  border-bottom: 1px solid ${theme.modalBorderDark};
 `);

 const cssSpinner = styled('div', `
@@ -695,7 +695,7 @@ const cssOptionRow = styled('div', `
 const cssOptionBtn = styled('span', `
  display: inline-flex;
  font-size: ${vars.mediumFontSize};
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
  cursor: pointer;
 `);

@@ -703,14 +703,15 @@ const cssPublicMemberIcon = styled(icon, `
  width: 40px;
  height: 40px;
  margin: 0 4px;
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};
 `);

 const cssPublicAccessIcon = styled(icon, `
-  --icon-color: ${colors.lightGreen};
+  --icon-color: ${theme.accentIcon};
 `);

 const cssUndoIcon = styled(icon, `
+  --icon-color: ${theme.controlSecondaryFg};
  margin: 12px 0;
 `);

@@ -718,7 +719,7 @@ const cssRoleBtn = styled('div', `
  display: flex;
  justify-content: flex-end;
  font-size: ${vars.mediumFontSize};
-  color: ${colors.lightGreen};
+  color: ${theme.controlFg};
  margin: 12px 24px;
  cursor: pointer;

@@ -730,7 +731,7 @@ const cssRoleBtn = styled('div', `

 const cssCollapseIcon = styled(icon, `
  margin-top: 1px;
-  background-color: var(--grist-color-light-green);
+  background-color: ${theme.controlFg};
 `);

 const cssInputMenuItem = styled(menuItem, `
@@ -747,8 +748,8 @@ const cssUserImagePlus = styled(cssUserImage, `
  }

  .${cssMenuItem.className}-sel & {
-    background-color: white;
-    color: ${colors.lightGreen};
+    background-color: ${theme.menuItemIconSelectedFg};
+    color: ${theme.menuItemSelectedBg};
  }
 `);

@@ -762,7 +763,7 @@ const cssOrgName = styled('div', `
 `);

 const cssOrgDomain = styled('span', `
-  color: ${colors.lightGreen};
+  color: ${theme.accentText};
 `);

 const cssFadeInFromTop = keyframes(`
--- a/app/client/ui/ViewSectionMenu.ts
+++ b/app/client/ui/ViewSectionMenu.ts
@@ -7,7 +7,7 @@ import {addFilterMenu} from 'app/client/ui/FilterBar';
 import {hoverTooltip} from 'app/client/ui/tooltips';
 import {makeViewLayoutMenu} from 'app/client/ui/ViewLayoutMenu';
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu} from 'app/client/ui2018/menus';
 import {Sort} from 'app/common/SortSpec';
@@ -292,7 +292,7 @@ const cssMenu = styled('div', `
  }

  &:hover, &.weasel-popup-open {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
  }
 `);

@@ -310,13 +310,13 @@ const cssMenuIconWrapper = styled(cssIconWrapper, `
  height: 22px;

  &:hover, &.weasel-popup-open {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
  }
  &-changed {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.accentIcon};
  }
  &-changed:hover, &-changed:hover.weasel-popup-open {
-    background-color: ${colors.darkGreen};
+    background-color: ${theme.controlHoverFg};
  }
 `);

@@ -326,7 +326,7 @@ const cssFilterMenuWrapper = styled('div', `
  border-radius: 3px;
  align-items: center;
  &-unsaved {
-    border: 1px solid ${colors.lightGreen};
+    border: 1px solid ${theme.accentBorder};
  }
  & .${cssMenu.className} {
    border: none;
@@ -337,18 +337,18 @@ const cssFilterMenuWrapper = styled('div', `
 const cssIcon = styled(icon, `
  flex: none;
  cursor: pointer;
-  background-color: ${colors.slate};
+  background-color: ${theme.lightText};

  .${cssMenuIconWrapper.className}-changed & {
-    background-color: white;
+    background-color: ${theme.controlPrimaryFg};
  }

  .${clsOldUI.className} & {
-    background-color: white;
+    background-color: ${theme.controlPrimaryFg};
  }

  &-green {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.accentIcon};
  }
 `);

@@ -363,20 +363,21 @@ const cssDotsIconWrapper = styled(cssIconWrapper, `
 const cssFilterIconWrapper = styled(cssIconWrapper, `
  border-radius: 2px 0px 0px 2px;
  .${cssFilterMenuWrapper.className}-unsaved & {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.accentIcon};
  }
 `);

 const cssFilterIcon = styled(cssIcon, `
  .${cssFilterIconWrapper.className}-any & {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.accentIcon};
  }
  .${cssFilterMenuWrapper.className}-unsaved & {
-    background-color: white;
+    background-color: ${theme.controlPrimaryFg};
  }
 `);

 const cssMenuInfoHeader = styled('div', `
+  color: ${theme.menuSubheaderFg};
  font-weight: ${vars.bigControlTextWeight};
  padding: 8px 24px 8px 24px;
  cursor: default;
@@ -389,18 +390,19 @@ const cssMenuText = styled('div', `
  cursor: default;
  white-space: nowrap;
  &-green {
-    color: ${colors.lightGreen};
+    color: ${theme.accentText};
  }
  &-gray {
-    color: ${colors.slate};
+    color: ${theme.lightText};
  }
 `);

 const cssGrayedMenuText = styled(cssMenuText, `
-  color: ${colors.slate};
+  color: ${theme.lightText};
 `);

 const cssMenuTextLabel = styled('span', `
+  color: ${theme.menuItemFg};
  flex-grow: 1;
  padding: 0 4px;
  overflow: hidden;
@@ -418,13 +420,13 @@ const cssSmallIconWrapper = styled('div', `
  margin: 0 5px 0 5px;

  &-green {
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.accentIcon};
  }
  &-gray {
-    background-color: ${colors.slate};
+    background-color: ${theme.lightText};
  }
  & > .${cssIcon.className} {
-    background-color: white;
+    background-color: ${theme.controlPrimaryFg};
  }
 `);

--- a/app/client/ui/VisibleFieldsConfig.ts
+++ b/app/client/ui/VisibleFieldsConfig.ts
@@ -7,7 +7,7 @@ import { getFieldType } from "app/client/ui/RightPanel";
 import { IWidgetType } from "app/client/ui/widgetTypes";
 import { basicButton, cssButton, primaryButton } from 'app/client/ui2018/buttons';
 import * as checkbox from "app/client/ui2018/checkbox";
-import { colors, vars } from "app/client/ui2018/cssVars";
+import { theme, vars } from "app/client/ui2018/cssVars";
 import { cssDragger } from "app/client/ui2018/draggableList";
 import { icon } from "app/client/ui2018/icons";
 import * as gutil from 'app/common/gutil';
@@ -200,7 +200,7 @@ export class VisibleFieldsConfig extends Disposable {
        dom.maybe(
          (use) => Boolean(use(use(this._section.viewFields).getObservable()).length),
          () => (
-            cssGreenLabel(
+            cssControlLabel(
              icon('Tick'),
              'Select All',
              dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, true)),
@@ -236,7 +236,7 @@ export class VisibleFieldsConfig extends Disposable {
        dom.maybe(
          (use) => Boolean(use(this._hiddenFields.getObservable()).length && !use(this._collapseHiddenFields)),
          () => (
-            cssGreenLabel(
+            cssControlLabel(
              icon('Tick'),
              'Select All',
              dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, true)),
@@ -453,7 +453,7 @@ export const cssDragRow = styled('div', `

 export const cssFieldEntry = styled('div', `
  display: flex;
-  background-color: ${colors.mediumGrey};
+  background-color: ${theme.hover};
  width: 100%;
  border-radius: 2px;
  margin: 0 8px 0 0;
@@ -463,10 +463,11 @@ export const cssFieldEntry = styled('div', `
  overflow: hidden;
  text-overflow: ellipsis;

-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.lightText};
 `);

 const cssHideIcon = styled(icon, `
+  --icon-color: ${theme.lightText};
  display: none;
  cursor: pointer;
  flex: none;
@@ -477,12 +478,14 @@ const cssHideIcon = styled(icon, `
 `);

 export const cssFieldLabel = styled('span', `
+  color: ${theme.text};
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
 `);

 const cssFieldListHeader = styled('span', `
+  color: ${theme.text};
  flex: 1 1 0px;
  font-size: ${vars.xsmallFontSize};
  text-transform: uppercase;
@@ -492,15 +495,15 @@ const cssRow = styled('div', `
  display: flex;
  margin: 16px;
  overflow: hidden;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.lightText};
  & > .${cssButton.className} {
    margin-right: 8px;
  }
 `);

-const cssGreenLabel = styled('div', `
-  --icon-color: ${colors.lightGreen};
-  color: ${colors.lightGreen};
+const cssControlLabel = styled('div', `
+  --icon-color: ${theme.controlFg};
+  color: ${theme.controlFg};
  cursor: pointer;
 `);

@@ -511,6 +514,7 @@ const cssHeader = styled(cssRow, `
 `);

 const cssHeaderIcon = styled(icon, `
+  --icon-color: ${theme.lightText};
  flex: none;
  margin-right: 4px;
 `);
--- a/app/client/ui/WidgetTitle.ts
+++ b/app/client/ui/WidgetTitle.ts
@@ -1,7 +1,7 @@
 import {FocusLayer} from 'app/client/lib/FocusLayer';
 import {ViewSectionRec} from 'app/client/models/entities/ViewSectionRec';
 import {basicButton, cssButton, primaryButton} from 'app/client/ui2018/buttons';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {cssTextInput} from 'app/client/ui2018/editableLabel';
 import {menuCssClass} from 'app/client/ui2018/menus';
 import {ModalControl} from 'app/client/ui2018/modals';
@@ -189,7 +189,7 @@ const cssTitle = styled('div', `
  text-overflow: ellipsis;
  align-self: start;
  &:hover {
-    background-color: ${colors.mediumGrey};
+    background-color: ${theme.hover};
  }
  &-empty {
    min-width: 48px;
@@ -202,12 +202,13 @@ const cssRenamePopup = styled('div', `
  flex-direction: column;
  min-width: 280px;
  padding: 16px;
-  background-color: white;
+  background-color: ${theme.popupBg};
  border-radius: 2px;
  outline: none;
 `);

 const cssLabel = styled('label', `
+  color: ${theme.text};
  font-size: ${vars.xsmallFontSize};
  font-weight: ${vars.bigControlTextWeight};
  margin: 0 0 8px 0;
@@ -235,11 +236,16 @@ const cssInput = styled((
  opts: IInputOptions,
  ...args) => input(obs, opts, cssTextInput.cls(''), ...args), `
  text-overflow: ellipsis;
+  color: ${theme.inputFg};
+  background-color: transparent;
  &:disabled {
-    color: ${colors.slate};
-    background-color: ${colors.lightGrey};
+    color: ${theme.inputDisabledFg};
+    background-color: ${theme.inputDisabledBg};
    pointer-events: none;
  }
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
  .${cssInputWithIcon.className} > &:disabled {
    padding-right: 28px;
  }
--- a/app/client/ui/cssInput.ts
+++ b/app/client/ui/cssInput.ts
@@ -1,12 +1,18 @@
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {styled} from 'grainjs';

 export const cssInput = styled('input', `
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
  height: 30px;
  width: 100%;
  font-size: ${vars.mediumFontSize};
  border-radius: 3px;
  padding: 5px;
-  border: 1px solid ${colors.darkGrey};
+  border: 1px solid ${theme.inputBorder};
  outline: none;
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
 `);
--- a/app/client/ui/errorPages.ts
+++ b/app/client/ui/errorPages.ts
@@ -5,7 +5,7 @@ import {leftPanelBasic} from 'app/client/ui/LeftPanelCommon';
 import {pagePanels} from 'app/client/ui/PagePanels';
 import {createTopBarHome} from 'app/client/ui/TopBar';
 import {bigBasicButtonLink, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {getPageTitleSuffix, GristLoadConfig} from 'app/common/gristUrls';
 import {getGristConfig} from 'app/common/urlUtils';
 import {dom, DomElementArg, makeTestId, observable, styled} from 'grainjs';
@@ -144,12 +144,12 @@ const cssErrorHeader = styled('div', `
  font-size: ${vars.xxxlargeFontSize};
  margin: 24px;
  text-align: center;
-  color: ${colors.dark};
+  color: ${theme.text};
 `);

 const cssErrorText = styled('div', `
  font-size: ${vars.mediumFontSize};
-  color: ${colors.dark};
+  color: ${theme.text};
  margin: 0 auto 24px auto;
  max-width: 400px;
  text-align: center;
--- a/app/client/ui/inputs.ts
+++ b/app/client/ui/inputs.ts
@@ -1,4 +1,4 @@
-import {colors, vars} from 'app/client/ui2018/cssVars';
+import {theme, vars} from 'app/client/ui2018/cssVars';
 import {dom, DomElementArg, Observable, styled} from 'grainjs';

 export const cssInput = styled('input', `
@@ -7,10 +7,16 @@ export const cssInput = styled('input', `
  line-height: 20px;
  width: 100%;
  padding: 14px;
-  border: 1px solid #D9D9D9;
+  border: 1px solid ${theme.inputBorder};
  border-radius: 4px;
  outline: none;
  display: block;
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }

  &[type=number] {
    -moz-appearance: textfield;
@@ -22,11 +28,11 @@ export const cssInput = styled('input', `
  }

  &-invalid {
-    border: 1px solid ${colors.error};
+    border: 1px solid ${theme.inputInvalid};
  }

  &-valid {
-    border: 1px solid ${colors.lightGreen};
+    border: 1px solid ${theme.inputValid};
  }
 `);

--- a/app/client/ui/modals.ts
+++ b/app/client/ui/modals.ts
@@ -1,71 +0,0 @@
-import {Disposable} from 'app/client/lib/dispose';
-import {dom, styled} from 'grainjs';
-
-const modalBacker = styled('div', `
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  background-color: rgba(0, 0, 0, 0.5);
-`);
-
-const modal = styled('div', `
-  background-color: white;
-  color: black;
-  margin: 0 auto;
-  border-radius: 4px;
-  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-  border: 1px solid #aaa;
-  padding: 10px;
-`);
-
-export const modalHeader = styled('div', `
-  font-size: 12pt;
-  color: #859394;
-  padding: 5px;
-`);
-
-export const modalButtonRow = styled('div', `
-  width: 70%;
-  margin: 0 auto;
-  text-align: center;
-
-  & > button {
-    width: 80px;
-  }
-`);
-
-/**
- * A simple modal. Shows up in the middle of the screen with a tinted backdrop.
- * Created with the given body content and width.
- *
- * Closed and disposed via clicking anywhere outside the modal. May also be closed by
- * calling the `dispose()` function.
- */
-export class Modal1 extends Disposable {
-  private _dom: Element;
-
-  public create(
-    body: Element,
-    width: number = 300
-  ) {
-    this._dom = modalBacker(
-      modal({style: `width: ${width}px;`, tabindex: "-1"},
-        dom.cls('clipboard_focus'),
-        body,
-        dom.on('click', (e) => e.stopPropagation())
-      ),
-      dom.on('click', () => this.dispose())
-    );
-    document.body.appendChild(this._dom);
-
-    this.autoDisposeCallback(() => {
-      document.body.removeChild(this._dom);
-    });
-  }
-}
--- a/app/client/ui/tooltips.ts
+++ b/app/client/ui/tooltips.ts
@@ -6,7 +6,7 @@
 */

 import {prepareForTransition} from 'app/client/ui/transitions';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {testId, theme} from 'app/client/ui2018/cssVars';
 import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomContents, DomElementArg, DomElementMethod, styled} from 'grainjs';
@@ -225,11 +225,11 @@ export function infoTooltip(tipContent: DomContents, ...domArgs: DomElementArg[]
 const cssTooltip = styled('div', `
  position: absolute;
  z-index: 5000;      /* should be higher than a modal */
-  background-color: rgba(0, 0, 0, 0.75);
+  background-color: ${theme.tooltipBg};
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  text-align: center;
-  color: white;
+  color: ${theme.tooltipFg};
  width: auto;
  font-family: sans-serif;
  font-size: 10pt;
@@ -246,19 +246,19 @@ const cssTooltipCloseButton = styled('div', `
  line-height: 16px;
  text-align: center;
  margin: -4px -4px -4px 8px;
-  --icon-color: white;
+  --icon-color: ${theme.tooltipCloseButtonFg};
  border-radius: 16px;

  &:hover {
-    background-color: white;
-    --icon-color: black;
+    background-color: ${theme.tooltipCloseButtonHoverBg};
+    --icon-color: ${theme.tooltipCloseButtonHoverFg};
  }
 `);

 const cssIconTooltip = styled(icon, `
  height: 12px;
  width: 12px;
-  background-color: ${colors.slate};
+  background-color: ${theme.tooltipIcon};
  flex-shrink: 0;
 `);

--- a/app/client/ui/transientInput.ts
+++ b/app/client/ui/transientInput.ts
@@ -7,7 +7,8 @@
 */

 import {reportError} from 'app/client/models/AppModel';
-import {dom, DomArg} from 'grainjs';
+import {theme} from 'app/client/ui2018/cssVars';
+import {dom, DomArg, styled} from 'grainjs';

 export interface ITransientInputOptions {
  initialValue: string;
@@ -36,7 +37,7 @@ export function transientInput({initialValue, save, close}: ITransientInputOptio
    setTimeout(() => { input.focus(); input.select(); }, 10);
  }

-  const input = dom('input', {type: 'text', placeholder: 'Enter name'},
+  const input = cssInput({type: 'text', placeholder: 'Enter name'},
    dom.prop('value', initialValue),
    dom.on('blur', () => onSave(false)),
    dom.onKeyDown({
@@ -48,3 +49,12 @@ export function transientInput({initialValue, save, close}: ITransientInputOptio
  delayedFocus();
  return input;
 }
+
+const cssInput = styled('input', `
+  background-color: transparent;
+  color: ${theme.inputFg};
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
+`);
--- a/app/client/ui/welcomeTour.ts
+++ b/app/client/ui/welcomeTour.ts
@@ -1,7 +1,7 @@
 import * as commands from 'app/client/components/commands';
 import { urlState } from 'app/client/models/gristUrlState';
 import { IOnBoardingMsg, startOnBoarding } from "app/client/ui/OnBoardingPopups";
-import { colors } from 'app/client/ui2018/cssVars';
+import { theme } from 'app/client/ui2018/cssVars';
 import { icon } from "app/client/ui2018/icons";
 import { cssLink } from "app/client/ui2018/links";
 import { dom, styled } from "grainjs";
@@ -54,7 +54,7 @@ export const welcomeTour: IOnBoardingMsg[] = [
    selector: '.tour-share-icon',
    title: 'Sharing',
    body: () => [
-      dom('p', 'Use the Share button (', Icon('Share'), ') to share the document or export data.')
+      dom('p', 'Use the Share button (', TopBarButtonIcon('Share'), ') to share the document or export data.')
    ],
    placement: 'bottom',
    cropPadding: true,
@@ -90,7 +90,7 @@ export function startWelcomeTour(onFinishCB: () => void) {
 const KeyContent = styled('span', `
  font-style: normal;
  font-family: inherit;
-  color: ${colors.darkGreen};
+  color: ${theme.shortcutKeyPrimaryFg};
 `);

 const KeyStrong = styled(KeyContent, `
@@ -102,20 +102,20 @@ const Key = styled('div', `
  padding: 2px 5px;
  border-radius: 4px;
  margin: 0px 2px;
-  border: 1px solid ${colors.slate};
-  color: black;
-  background-color: white;
+  border: 1px solid ${theme.shortcutKeyBorder};
+  color: ${theme.shortcutKeyFg};
+  background-color: ${theme.shortcutKeyBg};
  font-family: inherit;
  font-style: normal;
  white-space: nowrap;
 `);

-const Icon = styled(icon, `
-  --icon-color: ${colors.lightGreen};
+const TopBarButtonIcon = styled(icon, `
+  --icon-color: ${theme.topBarButtonPrimaryFg};
 `);

 const GreyIcon = styled(icon, `
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.shortcutKeySecondaryFg};
  margin-right: 8px;
 `);