diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index b418ffcdb4..096f89527a 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,12 +7,12 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => 'ff161f2d',
+    'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '7ae9e755',
+    'core.pkg.css' => '2cac901b',
     'core.pkg.js' => '5d80e0db',
     'darkconsole.pkg.js' => '1f9a31bc',
-    'differential.pkg.css' => 'b00f573e',
+    'differential.pkg.css' => '0cdef299',
     'differential.pkg.js' => '1d80ecc6',
     'diffusion.pkg.css' => 'a2d17c7d',
     'diffusion.pkg.js' => '6134c5a1',
@@ -35,17 +35,17 @@ return array(
     'rsrc/css/aphront/table-view.css' => 'a3aa6910',
     'rsrc/css/aphront/tokenizer.css' => '15d5ff71',
     'rsrc/css/aphront/tooltip.css' => '173b9431',
-    'rsrc/css/aphront/typeahead-browse.css' => '4f82e510',
-    'rsrc/css/aphront/typeahead.css' => '8a84cc7d',
+    'rsrc/css/aphront/typeahead-browse.css' => 'f2818435',
+    'rsrc/css/aphront/typeahead.css' => '4434bc8a',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '0877ed6e',
     'rsrc/css/application/base/main-menu-view.css' => '16053029',
-    'rsrc/css/application/base/notification-menu.css' => '6a697e43',
+    'rsrc/css/application/base/notification-menu.css' => '73fefdfa',
     'rsrc/css/application/base/phui-theme.css' => '9f261c6b',
     'rsrc/css/application/base/standard-page-view.css' => 'eb5b80c5',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
-    'rsrc/css/application/config/config-options.css' => '0ede4c9b',
+    'rsrc/css/application/config/config-options.css' => 'c5aac7b0',
     'rsrc/css/application/config/config-page.css' => 'c1d5121b',
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
     'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
@@ -53,7 +53,7 @@ return array(
     'rsrc/css/application/conpherence/color.css' => 'abb4c358',
     'rsrc/css/application/conpherence/durable-column.css' => '89ea6bef',
     'rsrc/css/application/conpherence/header-pane.css' => 'cb6f4e19',
-    'rsrc/css/application/conpherence/menu.css' => '6953e7ec',
+    'rsrc/css/application/conpherence/menu.css' => '69368e97',
     'rsrc/css/application/conpherence/message-pane.css' => 'b0f55ecc',
     'rsrc/css/application/conpherence/notification.css' => 'cef0a3fc',
     'rsrc/css/application/conpherence/participant-pane.css' => '26a3ce56',
@@ -62,11 +62,11 @@ return array(
     'rsrc/css/application/countdown/timer.css' => '16c52f5c',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
     'rsrc/css/application/dashboard/dashboard.css' => 'fe5b1869',
-    'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
+    'rsrc/css/application/diff/inline-comment-summary.css' => 'f23d4e8f',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => '3cef17bd',
+    'rsrc/css/application/differential/changeset-view.css' => 'bf1a41d8',
     'rsrc/css/application/differential/core.css' => '5b7b8ff4',
-    'rsrc/css/application/differential/phui-inline-comment.css' => 'ffd1a542',
+    'rsrc/css/application/differential/phui-inline-comment.css' => 'c4036846',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
@@ -77,7 +77,7 @@ return array(
     'rsrc/css/application/diffusion/diffusion-source.css' => '750add59',
     'rsrc/css/application/diffusion/diffusion.css' => '8d01932f',
     'rsrc/css/application/feed/feed.css' => 'ecd4ec57',
-    'rsrc/css/application/files/global-drag-and-drop.css' => '5c1b47c2',
+    'rsrc/css/application/files/global-drag-and-drop.css' => 'b556a948',
     'rsrc/css/application/flag/flag.css' => 'bba8f811',
     'rsrc/css/application/harbormaster/harbormaster.css' => 'f491c9f4',
     'rsrc/css/application/herald/herald-test.css' => 'a52e323e',
@@ -88,10 +88,10 @@ return array(
     'rsrc/css/application/maniphest/task-summary.css' => '11cc5344',
     'rsrc/css/application/objectselector/object-selector.css' => '85ee8ce6',
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
-    'rsrc/css/application/paste/paste.css' => '1898e534',
+    'rsrc/css/application/paste/paste.css' => '9fcc9773',
     'rsrc/css/application/people/people-picture-menu-item.css' => 'a06f7f34',
     'rsrc/css/application/people/people-profile.css' => '4df76faf',
-    'rsrc/css/application/phame/phame.css' => 'b3a0b3a3',
+    'rsrc/css/application/phame/phame.css' => '8cb3afcd',
     'rsrc/css/application/pholio/pholio-edit.css' => '07676f51',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => 'ca89d380',
@@ -104,7 +104,7 @@ return array(
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
     'rsrc/css/application/ponder/ponder-view.css' => 'fbd45f96',
-    'rsrc/css/application/project/project-card-view.css' => '3d3c1f91',
+    'rsrc/css/application/project/project-card-view.css' => '0010bb52',
     'rsrc/css/application/project/project-view.css' => '792c9057',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
@@ -115,8 +115,8 @@ return array(
     'rsrc/css/application/slowvote/slowvote.css' => 'a94b7230',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
-    'rsrc/css/core/core.css' => '23beb330',
-    'rsrc/css/core/remarkup.css' => 'eb37bd0d',
+    'rsrc/css/core/core.css' => '1760853c',
+    'rsrc/css/core/remarkup.css' => '279e409c',
     'rsrc/css/core/syntax.css' => 'cae95e89',
     'rsrc/css/core/z-index.css' => '9d8f7c4b',
     'rsrc/css/diviner/diviner-shared.css' => '896f1d43',
@@ -124,29 +124,29 @@ return array(
     'rsrc/css/font/font-lato.css' => 'c7ccd872',
     'rsrc/css/font/phui-font-icon-base.css' => '870a7360',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
-    'rsrc/css/layout/phabricator-source-code-view.css' => '4383192f',
+    'rsrc/css/layout/phabricator-source-code-view.css' => 'aea41829',
     'rsrc/css/phui/button/phui-button-bar.css' => '39fe680c',
     'rsrc/css/phui/button/phui-button-simple.css' => '8e1baf68',
     'rsrc/css/phui/button/phui-button.css' => '022581b4',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => '576be600',
-    'rsrc/css/phui/calendar/phui-calendar-month.css' => '8e10e92c',
-    'rsrc/css/phui/calendar/phui-calendar.css' => '477acfaa',
+    'rsrc/css/phui/calendar/phui-calendar-month.css' => '21154caf',
+    'rsrc/css/phui/calendar/phui-calendar.css' => 'f1ddf11c',
     'rsrc/css/phui/object-item/phui-oi-big-ui.css' => '19f9369b',
     'rsrc/css/phui/object-item/phui-oi-color.css' => 'cd2b9b77',
     'rsrc/css/phui/object-item/phui-oi-drag-ui.css' => '08f4ccc3',
     'rsrc/css/phui/object-item/phui-oi-flush-ui.css' => '9d9685d6',
     'rsrc/css/phui/object-item/phui-oi-list-view.css' => 'bf094950',
     'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => 'a8beebea',
-    'rsrc/css/phui/phui-action-list.css' => 'c01858f4',
+    'rsrc/css/phui/phui-action-list.css' => '6ee16164',
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => '22c0cf4f',
     'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
-    'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
-    'rsrc/css/phui/phui-box.css' => '269cbc99',
+    'rsrc/css/phui/phui-big-info-view.css' => 'd13afcde',
+    'rsrc/css/phui/phui-box.css' => '745e881d',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => '504b4b23',
-    'rsrc/css/phui/phui-comment-form.css' => '57af2e14',
+    'rsrc/css/phui/phui-comment-form.css' => '62836121',
     'rsrc/css/phui/phui-comment-panel.css' => 'f50152ad',
     'rsrc/css/phui/phui-crumbs-view.css' => '6ece3bbb',
     'rsrc/css/phui/phui-curtain-view.css' => '55dd0e59',
@@ -156,7 +156,7 @@ return array(
     'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
     'rsrc/css/phui/phui-fontkit.css' => '1320ed01',
     'rsrc/css/phui/phui-form-view.css' => '6175808d',
-    'rsrc/css/phui/phui-form.css' => 'a5570f70',
+    'rsrc/css/phui/phui-form.css' => 'efa86a27',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
     'rsrc/css/phui/phui-header-view.css' => 'e7de7ee2',
     'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf',
@@ -164,11 +164,11 @@ return array(
     'rsrc/css/phui/phui-icon.css' => '5c4a5de6',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
-    'rsrc/css/phui/phui-info-view.css' => '6e217679',
+    'rsrc/css/phui/phui-info-view.css' => 'e1b4ec37',
     'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
     'rsrc/css/phui/phui-left-right.css' => 'f60c67e7',
     'rsrc/css/phui/phui-lightbox.css' => '0a035e40',
-    'rsrc/css/phui/phui-list.css' => 'dcafb463',
+    'rsrc/css/phui/phui-list.css' => '38f8c9bd',
     'rsrc/css/phui/phui-object-box.css' => '9cff003c',
     'rsrc/css/phui/phui-pager.css' => 'edcbc226',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
@@ -177,8 +177,8 @@ return array(
     'rsrc/css/phui/phui-segment-bar-view.css' => 'b1d1b892',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => 'd5263e49',
-    'rsrc/css/phui/phui-tag-view.css' => '93b084cf',
-    'rsrc/css/phui/phui-timeline-view.css' => '313c7f22',
+    'rsrc/css/phui/phui-tag-view.css' => 'b4719c50',
+    'rsrc/css/phui/phui-timeline-view.css' => 'c4700486',
     'rsrc/css/phui/phui-two-column-view.css' => '5b8cd553',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
     'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455',
@@ -547,24 +547,24 @@ return array(
     'aphront-table-view-css' => 'a3aa6910',
     'aphront-tokenizer-control-css' => '15d5ff71',
     'aphront-tooltip-css' => '173b9431',
-    'aphront-typeahead-control-css' => '8a84cc7d',
+    'aphront-typeahead-control-css' => '4434bc8a',
     'application-search-view-css' => '66ee5d46',
     'auth-css' => '0877ed6e',
     'bulk-job-css' => 'df9c1d4a',
     'conduit-api-css' => '7bc725c4',
-    'config-options-css' => '0ede4c9b',
+    'config-options-css' => 'c5aac7b0',
     'config-page-css' => 'c1d5121b',
     'conpherence-color-css' => 'abb4c358',
     'conpherence-durable-column-view' => '89ea6bef',
     'conpherence-header-pane-css' => 'cb6f4e19',
-    'conpherence-menu-css' => '6953e7ec',
+    'conpherence-menu-css' => '69368e97',
     'conpherence-message-pane-css' => 'b0f55ecc',
     'conpherence-notification-css' => 'cef0a3fc',
     'conpherence-participant-pane-css' => '26a3ce56',
     'conpherence-thread-manager' => '4d863052',
     'conpherence-transaction-css' => '85129c68',
     'd3' => 'a11a5ff2',
-    'differential-changeset-view-css' => '3cef17bd',
+    'differential-changeset-view-css' => 'bf1a41d8',
     'differential-core-view-css' => '5b7b8ff4',
     'differential-revision-add-comment-css' => 'c47f8c40',
     'differential-revision-comment-css' => '14b8565a',
@@ -579,12 +579,12 @@ return array(
     'diviner-shared-css' => '896f1d43',
     'font-fontawesome' => 'e838e088',
     'font-lato' => 'c7ccd872',
-    'global-drag-and-drop-css' => '5c1b47c2',
+    'global-drag-and-drop-css' => 'b556a948',
     'harbormaster-css' => 'f491c9f4',
     'herald-css' => 'dc31f6e9',
     'herald-rule-editor' => 'd6a7e717',
     'herald-test-css' => 'a52e323e',
-    'inline-comment-summary-css' => '51efda3a',
+    'inline-comment-summary-css' => 'f23d4e8f',
     'javelin-aphlict' => 'e1d4b11a',
     'javelin-behavior' => '61cbc29a',
     'javelin-behavior-aphlict-dropdown' => 'caade6f2',
@@ -764,15 +764,15 @@ return array(
     'multirow-row-manager' => 'b5d57730',
     'owners-path-editor' => 'aa1733d0',
     'owners-path-editor-css' => '2f00933b',
-    'paste-css' => '1898e534',
+    'paste-css' => '9fcc9773',
     'path-typeahead' => 'f7fc67ec',
     'people-picture-menu-item-css' => 'a06f7f34',
     'people-profile-css' => '4df76faf',
-    'phabricator-action-list-view-css' => 'c01858f4',
+    'phabricator-action-list-view-css' => '6ee16164',
     'phabricator-busy' => '59a7976a',
     'phabricator-chatlog-css' => 'd295b020',
     'phabricator-content-source-view-css' => '4b8b05d4',
-    'phabricator-core-css' => '23beb330',
+    'phabricator-core-css' => '1760853c',
     'phabricator-countdown-css' => '16c52f5c',
     'phabricator-darklog' => 'c8e1ffe3',
     'phabricator-darkmessage' => 'c48cccdd',
@@ -794,22 +794,22 @@ return array(
     'phabricator-nav-view-css' => 'faf6a6fc',
     'phabricator-notification' => 'ccf1cbf8',
     'phabricator-notification-css' => '3f6c89c9',
-    'phabricator-notification-menu-css' => '6a697e43',
+    'phabricator-notification-menu-css' => '73fefdfa',
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => 'c5af80a2',
-    'phabricator-remarkup-css' => 'eb37bd0d',
+    'phabricator-remarkup-css' => '279e409c',
     'phabricator-search-results-css' => '8f8e08ed',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',
-    'phabricator-source-code-view-css' => '4383192f',
+    'phabricator-source-code-view-css' => 'aea41829',
     'phabricator-standard-page-view' => 'eb5b80c5',
     'phabricator-textareautils' => '320810c8',
     'phabricator-title' => '485aaa6c',
     'phabricator-tooltip' => '358b8c04',
     'phabricator-ui-example-css' => '528b19de',
     'phabricator-zindex-css' => '9d8f7c4b',
-    'phame-css' => 'b3a0b3a3',
+    'phame-css' => '8cb3afcd',
     'pholio-css' => 'ca89d380',
     'pholio-edit-css' => '07676f51',
     'pholio-inline-comments-css' => '8e545e49',
@@ -822,18 +822,18 @@ return array(
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => '22c0cf4f',
     'phui-basic-nav-view-css' => 'a0705f53',
-    'phui-big-info-view-css' => 'bd903741',
-    'phui-box-css' => '269cbc99',
+    'phui-big-info-view-css' => 'd13afcde',
+    'phui-box-css' => '745e881d',
     'phui-button-bar-css' => '39fe680c',
     'phui-button-css' => '022581b4',
     'phui-button-simple-css' => '8e1baf68',
-    'phui-calendar-css' => '477acfaa',
+    'phui-calendar-css' => 'f1ddf11c',
     'phui-calendar-day-css' => '572b1893',
     'phui-calendar-list-css' => '576be600',
-    'phui-calendar-month-css' => '8e10e92c',
+    'phui-calendar-month-css' => '21154caf',
     'phui-chart-css' => '6bf6f78e',
     'phui-cms-css' => '504b4b23',
-    'phui-comment-form-css' => '57af2e14',
+    'phui-comment-form-css' => '62836121',
     'phui-comment-panel-css' => 'f50152ad',
     'phui-crumbs-view-css' => '6ece3bbb',
     'phui-curtain-view-css' => '55dd0e59',
@@ -843,7 +843,7 @@ return array(
     'phui-feed-story-css' => '44a9c8e9',
     'phui-font-icon-base-css' => '870a7360',
     'phui-fontkit-css' => '1320ed01',
-    'phui-form-css' => 'a5570f70',
+    'phui-form-css' => 'efa86a27',
     'phui-form-view-css' => '6175808d',
     'phui-head-thing-view-css' => 'fd311e5f',
     'phui-header-view-css' => 'e7de7ee2',
@@ -853,12 +853,12 @@ return array(
     'phui-icon-view-css' => '5c4a5de6',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
-    'phui-info-view-css' => '6e217679',
-    'phui-inline-comment-view-css' => 'ffd1a542',
+    'phui-info-view-css' => 'e1b4ec37',
+    'phui-inline-comment-view-css' => 'c4036846',
     'phui-invisible-character-view-css' => '6993d9f0',
     'phui-left-right-css' => 'f60c67e7',
     'phui-lightbox-css' => '0a035e40',
-    'phui-list-view-css' => 'dcafb463',
+    'phui-list-view-css' => '38f8c9bd',
     'phui-object-box-css' => '9cff003c',
     'phui-oi-big-ui-css' => '19f9369b',
     'phui-oi-color-css' => 'cd2b9b77',
@@ -873,9 +873,9 @@ return array(
     'phui-segment-bar-view-css' => 'b1d1b892',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => 'd5263e49',
-    'phui-tag-view-css' => '93b084cf',
+    'phui-tag-view-css' => 'b4719c50',
     'phui-theme-css' => '9f261c6b',
-    'phui-timeline-view-css' => '313c7f22',
+    'phui-timeline-view-css' => 'c4700486',
     'phui-two-column-view-css' => '5b8cd553',
     'phui-workboard-color-css' => '783cdff5',
     'phui-workboard-view-css' => '3bc85455',
@@ -892,7 +892,7 @@ return array(
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
     'ponder-view-css' => 'fbd45f96',
-    'project-card-view-css' => '3d3c1f91',
+    'project-card-view-css' => '0010bb52',
     'project-view-css' => '792c9057',
     'releeph-core' => '9b3c5733',
     'releeph-preview-branch' => 'b7a6f4a5',
@@ -904,7 +904,7 @@ return array(
     'syntax-default-css' => '9923583c',
     'syntax-highlighting-css' => 'cae95e89',
     'tokens-css' => '3d0f239e',
-    'typeahead-browse-css' => '4f82e510',
+    'typeahead-browse-css' => 'f2818435',
     'unhandled-exception-css' => '4c96257a',
   ),
   'requires' => array(
@@ -1146,9 +1146,6 @@ return array(
       'javelin-util',
       'javelin-uri',
     ),
-    '3cef17bd' => array(
-      'phui-inline-comment-view-css',
-    ),
     '3dbf94d5' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1870,6 +1867,9 @@ return array(
       'phabricator-drag-and-drop-file-upload',
       'phabricator-draggable-list',
     ),
+    'bf1a41d8' => array(
+      'phui-inline-comment-view-css',
+    ),
     'bf5374ef' => array(
       'javelin-behavior',
       'javelin-stratcom',
diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
index 1e3ed214fa..1527091575 100644
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@@ -223,6 +223,7 @@ phutil_register_library_map(array(
     'CalendarTimeUtil' => 'applications/calendar/util/CalendarTimeUtil.php',
     'CalendarTimeUtilTestCase' => 'applications/calendar/__tests__/CalendarTimeUtilTestCase.php',
     'CelerityAPI' => 'applications/celerity/CelerityAPI.php',
+    'CelerityDarkModePostprocessor' => 'applications/celerity/postprocessor/CelerityDarkModePostprocessor.php',
     'CelerityDefaultPostprocessor' => 'applications/celerity/postprocessor/CelerityDefaultPostprocessor.php',
     'CelerityHighContrastPostprocessor' => 'applications/celerity/postprocessor/CelerityHighContrastPostprocessor.php',
     'CelerityLargeFontPostprocessor' => 'applications/celerity/postprocessor/CelerityLargeFontPostprocessor.php',
@@ -5170,6 +5171,7 @@ phutil_register_library_map(array(
     'CalendarTimeUtil' => 'Phobject',
     'CalendarTimeUtilTestCase' => 'PhabricatorTestCase',
     'CelerityAPI' => 'Phobject',
+    'CelerityDarkModePostprocessor' => 'CelerityPostprocessor',
     'CelerityDefaultPostprocessor' => 'CelerityPostprocessor',
     'CelerityHighContrastPostprocessor' => 'CelerityPostprocessor',
     'CelerityLargeFontPostprocessor' => 'CelerityPostprocessor',
diff --git a/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php b/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php
new file mode 100644
index 0000000000..fbaf4051bb
--- /dev/null
+++ b/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php
@@ -0,0 +1,218 @@
+<?php
+
+final class CelerityDarkModePostprocessor
+  extends CelerityPostprocessor {
+
+  public function getPostprocessorKey() {
+    return 'darkmode';
+  }
+
+  public function getPostprocessorName() {
+    return pht('Dark Mode (Experimental)');
+  }
+
+  public function buildVariables() {
+    return array(
+
+      // Fonts
+      'basefont' => "13px 'Segoe UI', 'Segoe UI Emoji', ".
+        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', ".
+        "Helvetica, Arial, sans-serif",
+
+      'fontfamily' => "'Segoe UI', 'Segoe UI Emoji', ".
+        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', ".
+        "Helvetica, Arial, sans-serif",
+
+      // Drop Shadow
+      'dropshadow' => '0 2px 12px rgba(0, 0, 0, .20)',
+      'whitetextshadow' => '0 1px 0 rgba(255, 255, 255, 1)',
+
+      // Anchors
+      'anchor' => '#3498db',
+
+      // Base Colors
+      'red'           => '#c0392b',
+      'lightred'      => '#f4dddb',
+      'orange'        => '#e67e22',
+      'lightorange'   => '#f7e2d4',
+      'yellow'        => '#f1c40f',
+      'lightyellow'   => '#fdf5d4',
+      'green'         => '#139543',
+      'lightgreen'    => '#d7eddf',
+      'blue'          => '#2980b9',
+      'lightblue'     => '#daeaf3',
+      'sky'           => '#3498db',
+      'lightsky'      => '#ddeef9',
+      'fire'          => '#e62f17',
+      'indigo'        => '#6e5cb6',
+      'lightindigo'   => '#eae6f7',
+      'pink'          => '#da49be',
+      'lightpink'     => '#fbeaf8',
+      'violet'        => '#8e44ad',
+      'lightviolet'   => '#ecdff1',
+      'charcoal'      => '#4b4d51',
+      'backdrop'      => '#c4cde0',
+      'hoverwhite'    => 'rgba(255,255,255,.6)',
+      'hovergrey'     => '#c5cbcf',
+      'hoverblue'     => '#2a425f',
+      'hoverborder'   => '#dfe1e9',
+      'hoverselectedgrey' => '#bbc4ca',
+      'hoverselectedblue' => '#e6e9ee',
+      'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
+      'timeline'    => '#4e6078',
+      'bluepropertybackground' => '#2d435f',
+
+      // Alphas
+      'alphawhite'          => '255,255,255',
+      'alphagrey'           => '255,255,255',
+      'alphablue'           => '255,255,255',
+      'alphablack'          => '0,0,0',
+
+      // Base Greys
+      'lightgreyborder'     => 'rgba(255,255,255,.3)',
+      'greyborder'          => 'rgba(255,255,255,.6)',
+      'darkgreyborder'      => 'rgba(255,255,255,.9)',
+      'lightgreytext'       => 'rgba(255,255,255,.3)',
+      'greytext'            => 'rgba(255,255,255,.6)',
+      'darkgreytext'        => 'rgba(255,255,255,.9)',
+      'lightgreybackground' => '#2a425f',
+      'greybackground'      => '#304a6d',
+      'darkgreybackground'  => '#8C98B8',
+
+      // Base Blues
+      'thinblueborder'      => '#2c405a',
+      'lightblueborder'     => '#39506d',
+      'blueborder'          => '#8C98B8',
+      'darkblueborder'      => '#626E82',
+      'lightbluebackground' => 'rgba(255,255,255,.05)',
+      'bluebackground'      => 'rgba(255,255,255,.1)',
+      'lightbluetext'       => 'rgba(255,255,255,.3)',
+      'bluetext'            => 'rgba(255,255,255,.6)',
+      'darkbluetext'        => 'rgba(255,255,255,.8)',
+      'blacktext'           => 'rgba(255,255,255,.9)',
+
+      // Base Greens
+      'lightgreenborder'      => '#bfdac1',
+      'greenborder'           => '#8cb89c',
+      'greentext'             => '#3e6d35',
+      'lightgreenbackground'  => '#e6f2e4',
+
+      // Base Red
+      'lightredborder'        => '#f4c6c6',
+      'redborder'             => '#eb9797',
+      'redtext'               => '#802b2b',
+      'lightredbackground'    => '#f5e1e1',
+
+      // Base Violet
+      'lightvioletborder'     => '#cfbddb',
+      'violetborder'          => '#b589ba',
+      'violettext'            => '#603c73',
+      'lightvioletbackground' => '#e9dfee',
+
+      // Shades are a more muted set of our base colors
+      // better suited to blending into other UIs.
+
+      // Shade Red
+      'sh-lightredborder'     => '#efcfcf',
+      'sh-redborder'          => '#d1abab',
+      'sh-redicon'            => '#c85a5a',
+      'sh-redtext'            => '#a53737',
+      'sh-redbackground'      => '#f7e6e6',
+
+      // Shade Orange
+      'sh-lightorangeborder'  => '#f8dcc3',
+      'sh-orangeborder'       => '#dbb99e',
+      'sh-orangeicon'         => '#e78331',
+      'sh-orangetext'         => '#ba6016',
+      'sh-orangebackground'   => '#fbede1',
+
+      // Shade Yellow
+      'sh-lightyellowborder'  => '#e9dbcd',
+      'sh-yellowborder'       => '#c9b8a8',
+      'sh-yellowicon'         => '#9b946e',
+      'sh-yellowtext'         => '#726f56',
+      'sh-yellowbackground'   => '#fdf3da',
+
+      // Shade Green
+      'sh-lightgreenborder'   => '#c6e6c7',
+      'sh-greenborder'        => '#a0c4a1',
+      'sh-greenicon'          => '#4ca74e',
+      'sh-greentext'          => '#326d34',
+      'sh-greenbackground'    => '#ddefdd',
+
+      // Shade Blue
+      'sh-lightblueborder'    => '#cfdbe3',
+      'sh-blueborder'         => '#a7b5bf',
+      'sh-blueicon'           => '#6b748c',
+      'sh-bluetext'           => '#464c5c',
+      'sh-bluebackground'     => '#dee7f8',
+
+      // Shade Indigo
+      'sh-lightindigoborder'  => '#d1c9ee',
+      'sh-indigoborder'       => '#bcb4da',
+      'sh-indigoicon'         => '#8672d4',
+      'sh-indigotext'         => '#6e5cb6',
+      'sh-indigobackground'   => '#eae6f7',
+
+      // Shade Violet
+      'sh-lightvioletborder'  => '#e0d1e7',
+      'sh-violetborder'       => '#bcabc5',
+      'sh-violeticon'         => '#9260ad',
+      'sh-violettext'         => '#69427f',
+      'sh-violetbackground'   => '#efe8f3',
+
+      // Shade Pink
+      'sh-lightpinkborder'  => '#f6d5ef',
+      'sh-pinkborder'       => '#d5aecd',
+      'sh-pinkicon'         => '#e26fcb',
+      'sh-pinktext'         => '#da49be',
+      'sh-pinkbackground'   => '#fbeaf8',
+
+      // Shade Grey
+      'sh-lightgreyborder'    => '#e3e4e8',
+      'sh-greyborder'         => '#b2b2b2',
+      'sh-greyicon'           => '#757575',
+      'sh-greytext'           => '#555555',
+      'sh-greybackground'     => '#edeef2',
+
+      // Shade Disabled
+      'sh-lightdisabledborder'  => '#e5e5e5',
+      'sh-disabledborder'       => '#cbcbcb',
+      'sh-disabledicon'         => '#bababa',
+      'sh-disabledtext'         => '#a6a6a6',
+      'sh-disabledbackground'   => '#f3f3f3',
+
+      // Diffs
+      'new-background' => 'rgba(151, 234, 151, .3)',
+      'new-bright' => 'rgba(151, 234, 151, .6)',
+      'old-background' => 'rgba(251, 175, 175, .3)',
+      'old-bright' => 'rgba(251, 175, 175, .7)',
+      'move-background' => '#fdf5d4',
+      'copy-background' => '#f1c40f',
+
+      'paste.content' => '#222222',
+      'paste.border' => '#000000',
+      'paste.highlight' => '#121212',
+
+      // Background color for "most" themes.
+      'page.background' => '#223246',
+      'page.sidenav' => '#1c293b',
+      'page.content' => '#26374c',
+
+      'menu.profile.text' => 'rgba(255,255,255,.8)',
+      'menu.profile.text.selected' => 'rgba(255,255,255,1)',
+      'menu.profile.icon.disabled' => 'rgba(255,255,255,.4)',
+
+      // Buttons
+      'blue.button.color' => '#2980b9',
+      'blue.button.gradient' => 'linear-gradient(to bottom, #3498db, #2980b9)',
+      'green.button.color' => '#139543',
+      'green.button.gradient' => 'linear-gradient(to bottom, #23BB5B, #139543)',
+      'grey.button.color' => '#223246',
+      'grey.button.gradient' => 'linear-gradient(to bottom, #223246, #223246)',
+      'grey.button.hover' => 'linear-gradient(to bottom, #1c293b, #1c293b)',
+
+    );
+  }
+
+}
diff --git a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
index 62a4b4fd24..447edbd99f 100644
--- a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+++ b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
@@ -72,6 +72,7 @@ final class CelerityDefaultPostprocessor
       'hoverselectedblue' => '#e6e9ee',
       'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
       'timeline'    => '#d5d8e1',
+      'bluepropertybackground' => '#eff3fc',
 
       // Alphas
       'alphawhite'          => '255,255,255',
@@ -100,6 +101,7 @@ final class CelerityDefaultPostprocessor
       'lightbluetext'       => '#8C98B8',
       'bluetext'            => '#6B748C',
       'darkbluetext'        => '#464C5C',
+      'blacktext'           => '#000',
 
       // Base Greens
       'lightgreenborder'      => '#bfdac1',
@@ -200,9 +202,14 @@ final class CelerityDefaultPostprocessor
       'move-background' => '#fdf5d4',
       'copy-background' => '#f1c40f',
 
+      'paste.content' => '#fffef5',
+      'paste.border' => '#e9dbcd',
+      'paste.highlight' => '#fdf3da',
+
       // Background color for "most" themes.
       'page.background' => '#f3f5f7',
       'page.sidenav' => '#eaedf1',
+      'page.content' => '#fff',
 
       'menu.profile.text' => 'rgba(255,255,255,.8)',
       'menu.profile.text.selected' => 'rgba(255,255,255,1)',
@@ -211,6 +218,18 @@ final class CelerityDefaultPostprocessor
       'menu.main.height' => '44px',
       'menu.profile.width' => '240px',
 
+      // Buttons
+      'blue.button.color' => '#2980b9',
+      'blue.button.gradient' => 'linear-gradient(to bottom, #3498db, #2980b9)',
+      'blue.button.hover' => 'linear-gradient(to bottom, #3498db, #1b6ba0)',
+      'green.button.color' => '#139543',
+      'green.button.gradient' => 'linear-gradient(to bottom, #23BB5B, #139543)',
+      'green.button.hover' => 'linear-gradient(to bottom, #23BB5B, #178841)',
+      'grey.button.color' => '#F7F7F9',
+      'grey.button.gradient' => 'linear-gradient(to bottom, #ffffff, #f1f0f1)',
+      'grey.button.hover' => 'linear-gradient(to bottom, #ffffff, #eeebec)',
+
+
     );
   }
 
diff --git a/webroot/rsrc/css/aphront/dialog-view.css b/webroot/rsrc/css/aphront/dialog-view.css
index 0e6f6d4cfc..5809ab117e 100644
--- a/webroot/rsrc/css/aphront/dialog-view.css
+++ b/webroot/rsrc/css/aphront/dialog-view.css
@@ -7,7 +7,7 @@
   margin: 32px auto 16px;
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .jx-client-dialog .aphront-dialog-view {
@@ -41,7 +41,7 @@
 }
 
 .aphront-dialog-body {
-  background: #fff;
+  background: {$page.content};
   padding: 16px;
   border: none;
 }
diff --git a/webroot/rsrc/css/aphront/list-filter-view.css b/webroot/rsrc/css/aphront/list-filter-view.css
index 50d43f2383..d16ad72eb4 100644
--- a/webroot/rsrc/css/aphront/list-filter-view.css
+++ b/webroot/rsrc/css/aphront/list-filter-view.css
@@ -5,7 +5,7 @@
 .aphront-list-filter-wrap {
   border: 1px solid {$lightblueborder};
   margin: 0 16px;
-  background: #fff;
+  background: {$page.content};
   border-radius: 3px;
 }
 
diff --git a/webroot/rsrc/css/aphront/table-view.css b/webroot/rsrc/css/aphront/table-view.css
index 2238f5a041..a02d4dcfbe 100644
--- a/webroot/rsrc/css/aphront/table-view.css
+++ b/webroot/rsrc/css/aphront/table-view.css
@@ -9,7 +9,7 @@
 .aphront-table-view {
   width: 100%;
   border-collapse:  collapse;
-  background: #fff;
+  background: {$page.content};
   border: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$blueborder};
 }
diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css
index 3f3f904e22..7cfc9e391b 100644
--- a/webroot/rsrc/css/aphront/tokenizer.css
+++ b/webroot/rsrc/css/aphront/tokenizer.css
@@ -88,11 +88,11 @@ a.jx-tokenizer-token:hover {
 
 a.jx-tokenizer-token-function {
   border-color: {$sh-lightgreyborder};
-  background: #fff;
+  background: {$page.content};
 }
 
 a.jx-tokenizer-token-function:hover {
-  background: #fff;
+  background: {$page.content};
 }
 
 a.jx-tokenizer-token-disabled {
diff --git a/webroot/rsrc/css/aphront/typeahead-browse.css b/webroot/rsrc/css/aphront/typeahead-browse.css
index 7439d299e7..8746d9db4e 100644
--- a/webroot/rsrc/css/aphront/typeahead-browse.css
+++ b/webroot/rsrc/css/aphront/typeahead-browse.css
@@ -11,7 +11,7 @@
 }
 
 .typeahead-browse-more {
-  background: {$lightblue};
+  background: {$lightbluebackground};
   border: 1px solid {$lightblueborder};
   color: {$blue};
 }
diff --git a/webroot/rsrc/css/aphront/typeahead.css b/webroot/rsrc/css/aphront/typeahead.css
index bdda2703e0..92970386bf 100644
--- a/webroot/rsrc/css/aphront/typeahead.css
+++ b/webroot/rsrc/css/aphront/typeahead.css
@@ -9,10 +9,10 @@ div.jx-typeahead-hardpoint {
 
 div.jx-typeahead-results {
   position: absolute;
-  border: 1px solid {$hoverborder};
+  border: 1px solid {$thinblueborder};
   border-top: 0px;
   padding: 0;
-  background: #fefefe;
+  background: {$page.content};
   width: 98%;
   box-shadow: 0px 1px 2px rgba({$alphablack}, 0.2);
   margin: -1px 1% 0;
@@ -31,7 +31,7 @@ div.jx-typeahead-results a.jx-result {
 }
 
 div.jx-typeahead-results a.jx-result + a.jx-result {
-  border-top: 1px solid {$hoverborder};
+  border-top: 1px solid {$thinblueborder};
 }
 
 div.jx-typeahead-results a.jx-result:hover,
diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css
index 4de30fb8ce..39ec89c9fc 100644
--- a/webroot/rsrc/css/application/base/main-menu-view.css
+++ b/webroot/rsrc/css/application/base/main-menu-view.css
@@ -164,7 +164,7 @@
   position: absolute;
   font-size: {$normalfontsize};
   border: none;
-  background-color: #fff;
+  background-color: {$page.content};
   height: 28px;
   padding: 3px 28px 3px 52px;
   float: left;
@@ -180,7 +180,7 @@
 }
 
 .phabricator-main-menu .phabricator-main-menu-search input:focus {
-  background: #fff;
+  background: {$page.content};
   opacity: 1;
   color: {$darkbluetext};
   box-shadow: none;
@@ -270,7 +270,7 @@ a.phabricator-core-user-menu .caret:before {
 }
 
 .phabricator-main-menu-search-target div.jx-typeahead-results {
-  background: #fff;
+  background: {$page.content};
   word-wrap: break-word;
   overflow-y: auto;
   box-shadow: {$dropshadow};
diff --git a/webroot/rsrc/css/application/base/notification-menu.css b/webroot/rsrc/css/application/base/notification-menu.css
index 02a3d5a170..1a834b11fb 100644
--- a/webroot/rsrc/css/application/base/notification-menu.css
+++ b/webroot/rsrc/css/application/base/notification-menu.css
@@ -3,7 +3,7 @@
  */
 
 .phabricator-notification-menu {
-  background: #fff;
+  background: {$page.content};
   font-size: {$smallestfontsize};
   word-wrap: break-word;
   overflow-y: auto;
@@ -65,7 +65,7 @@
 }
 
 .phabricator-notification + .phabricator-notification {
-  border-top: 1px solid {$hoverborder};
+  border-top: 1px solid {$thinblueborder};
 }
 
 .no-notifications {
diff --git a/webroot/rsrc/css/application/base/standard-page-view.css b/webroot/rsrc/css/application/base/standard-page-view.css
index 1205dc93e7..89cbfdbd2e 100644
--- a/webroot/rsrc/css/application/base/standard-page-view.css
+++ b/webroot/rsrc/css/application/base/standard-page-view.css
@@ -18,7 +18,7 @@
 }
 
 body.white-background {
-  background: #fff;
+  background: {$page.content};
 }
 
 .phabricator-standard-page-footer {
diff --git a/webroot/rsrc/css/application/config/config-options.css b/webroot/rsrc/css/application/config/config-options.css
index 67c005094c..efac6f0759 100644
--- a/webroot/rsrc/css/application/config/config-options.css
+++ b/webroot/rsrc/css/application/config/config-options.css
@@ -5,8 +5,8 @@
 .config-option-table {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid {$lightgreyborder};
-  background: #fff;
+  border: 1px solid {$thinblueborder};
+  background: {$page.content};
 }
 
 .config-option-table th,
diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css
index fdbdbe848f..41645717f3 100644
--- a/webroot/rsrc/css/application/conpherence/durable-column.css
+++ b/webroot/rsrc/css/application/conpherence/durable-column.css
@@ -12,7 +12,7 @@
   right: 16px;
   width: 400px;
   height: 360px;
-  background: #fff;
+  background: {$page.content};
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
   box-shadow: 0px 1px 8px rgba(55,55,55, .3);
diff --git a/webroot/rsrc/css/application/conpherence/header-pane.css b/webroot/rsrc/css/application/conpherence/header-pane.css
index 54f58682da..3f5965def5 100644
--- a/webroot/rsrc/css/application/conpherence/header-pane.css
+++ b/webroot/rsrc/css/application/conpherence/header-pane.css
@@ -9,7 +9,7 @@
 
 .conpherence-header-pane .phui-header-header {
   font-size: 16px;
-  color: #000;
+  color: {$blacktext};
   display: block;
 }
 
diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css
index b2702d94fd..feb17156d7 100644
--- a/webroot/rsrc/css/application/conpherence/menu.css
+++ b/webroot/rsrc/css/application/conpherence/menu.css
@@ -8,7 +8,7 @@
   left: 0;
   right: 0;
   top: 44px;
-  background: #fff;
+  background: {$page.content};
 }
 
 .conpherence-menu-pane {
@@ -137,7 +137,6 @@
   font-weight: bold;
   font-size: {$normalfontsize};
   color: {$darkbluetext};
-  text-shadow: 0px 1px 1px #fff;
   overflow: hidden;
   width: 165px;
   text-overflow: ellipsis;
diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
index ab3c55ba22..0dc33789f3 100644
--- a/webroot/rsrc/css/application/conpherence/message-pane.css
+++ b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -25,7 +25,7 @@
 .conpherence-layout .conpherence-content-pane .conpherence-no-threads {
   top: 44px;
   right: 0;
-  background: #fff;
+  background: {$page.content};
   z-index: 26;
 }
 
@@ -411,7 +411,7 @@ body .conpherence-message-pane .aphront-form-control {
   bottom: 0;
   transition: all 0.3s;
   position: fixed;
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .conpherence-layout.loading .conpherence-loading-mask {
@@ -445,7 +445,7 @@ body .conpherence-message-pane .aphront-form-control {
 .show-searchbar .conpherence-search-form-view {
   display: block;
   height: 54px;
-  background: #fff;
+  background: {$page.content};
   position: absolute;
   top: 0;
   left: 0;
@@ -461,7 +461,7 @@ body .conpherence-message-pane .aphront-form-control {
 
 .conpherence-search-results {
   position: absolute;
-  background: #fff;
+  background: {$page.content};
   top: 54px;
   left: 0;
   right: 0;
diff --git a/webroot/rsrc/css/application/conpherence/participant-pane.css b/webroot/rsrc/css/application/conpherence/participant-pane.css
index f219707e7b..479bf95637 100644
--- a/webroot/rsrc/css/application/conpherence/participant-pane.css
+++ b/webroot/rsrc/css/application/conpherence/participant-pane.css
@@ -65,7 +65,7 @@
 }
 
 .conpherence-participant-pane .person-entry:hover a {
-  color: #000;
+  color: {$blacktext};
 }
 
 .conpherence-participant-pane .person-entry a img {
@@ -99,7 +99,7 @@
 }
 
 .conpherence-participant-pane .person-entry .remove:hover .close-icon {
-  color: #000;
+  color: {$blacktext};
 }
 
 /****** Hide Widgets **********************************************************/
diff --git a/webroot/rsrc/css/application/conpherence/transaction.css b/webroot/rsrc/css/application/conpherence/transaction.css
index 6e52a8c30c..42f39bac74 100644
--- a/webroot/rsrc/css/application/conpherence/transaction.css
+++ b/webroot/rsrc/css/application/conpherence/transaction.css
@@ -13,7 +13,7 @@
 .conpherence-transaction-header .phui-link-person {
   font-weight: bold;
   font-size: {$biggerfontsize};
-  color: #000;
+  color: {$blacktext};
 }
 
 .conpherence-transaction-view.date-marker {
@@ -23,7 +23,7 @@
 .conpherence-transaction-view.date-marker .date {
   position: relative;
   top: -11px;
-  background-color: #fff;
+  background-color: {$page.content};
   color: {$sh-violettext};
   font-weight: bold;
 }
diff --git a/webroot/rsrc/css/application/dashboard/dashboard.css b/webroot/rsrc/css/application/dashboard/dashboard.css
index 3def453670..aed87b7673 100644
--- a/webroot/rsrc/css/application/dashboard/dashboard.css
+++ b/webroot/rsrc/css/application/dashboard/dashboard.css
@@ -20,7 +20,7 @@
 }
 
 .dashboard-box .phui-header-header {
-  color: #000;
+  color: {$blacktext};
 }
 
 .dashboard-view .phui-oi-empty .phui-info-view {
diff --git a/webroot/rsrc/css/application/diff/inline-comment-summary.css b/webroot/rsrc/css/application/diff/inline-comment-summary.css
index 572441191d..554fcdd518 100644
--- a/webroot/rsrc/css/application/diff/inline-comment-summary.css
+++ b/webroot/rsrc/css/application/diff/inline-comment-summary.css
@@ -16,8 +16,7 @@
 .phabricator-inline-summary-table .inline-comment-summary-table-header {
   font-weight: bold;
   padding: 16px 1px 8px;
-  background: #fff;
-  color: #000;
+  color: {$blacktext};
   border-bottom: 1px solid {$thinblueborder};
 }
 
@@ -25,14 +24,14 @@
   padding: 4px 8px;
   white-space: nowrap;
   color: {$darkbluetext};
-  background: white;
+  background: {$page.content};
 }
 
 .phabricator-inline-summary-table td.inline-line-number {
   padding: 0;
   width: 100px;
   white-space: nowrap;
-  background: #F8F9FC;
+  background: {$lightgreybackground};
   font-family: "Menlo", "Consolas", monospace;
   font-size: {$smallestfontsize};
   color: {$bluetext};
diff --git a/webroot/rsrc/css/application/differential/changeset-view.css b/webroot/rsrc/css/application/differential/changeset-view.css
index 98c8f099ba..481149fe34 100644
--- a/webroot/rsrc/css/application/differential/changeset-view.css
+++ b/webroot/rsrc/css/application/differential/changeset-view.css
@@ -20,7 +20,7 @@
 }
 
 .differential-diff {
-  background: #fff;
+  background: {$page.content};
   width: 100%;
   border-top: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$lightblueborder};
@@ -113,14 +113,6 @@
   cursor: auto;
 }
 
-.differential-diff th.old {
-  border-right-color: {$old-bright};
-}
-
-.differential-diff th.new {
-  border-right-color: {$new-bright};
-}
-
 .differential-diff td.old {
   background: {$old-background};
 }
@@ -288,7 +280,7 @@ td.cov-I {
   font-size: {$biggestfontsize};
   padding: 2px 0 20px 12px;
   line-height: 20px;
-  color: #000;
+  color: {$blacktext};
 }
 
 .device-phone .differential-changeset h1 {
@@ -392,7 +384,7 @@ tr.differential-inline-loading {
   top: 0;
   left: 0;
   right: 0;
-  background: #fff;
+  background: {$page.content};
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid {$lightgreyborder};
   padding: 8px 18px;
diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css
index 146117b1cb..0a1ffecb39 100644
--- a/webroot/rsrc/css/application/differential/phui-inline-comment.css
+++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css
@@ -25,7 +25,7 @@
 
 .differential-inline-comment,
 .differential-inline-comment-edit {
-  background: #fff;
+  background: {$page.content};
   border: 1px solid {$sh-yellowborder};
   font: {$basefont};
   -moz-box-sizing: border-box;
@@ -244,7 +244,7 @@
 
 .differential-inline-comment.inline-is-done
   .differential-inline-done-label {
-    background-color: #fff;
+    background-color: {$page.content};
     border-color: {$lightblueborder};
     color: {$sky};
     opacity: 1;
@@ -252,7 +252,7 @@
 
 .device-desktop .differential-inline-comment.inline-is-done
   .differential-inline-done-label:hover {
-    background-color: #fff;
+    background-color: {$page.content};
     color: {$sky};
 }
 
@@ -273,7 +273,7 @@
 }
 
 .differential-inline-comment.inline-is-done
-   .differential-inline-comment-head {
+  .differential-inline-comment-head {
     background-color: {$lightgreybackground};
     border-bottom-color: {$lightgreyborder};
 }
@@ -287,7 +287,7 @@
 .differential-inline-comment.inline-is-done .differential-inline-comment-head
   .differential-inline-done-label {
     color: {$sky};
-    background-color: #fff;
+    background-color: {$page.content};
     border-color: {$sky};
 }
 
diff --git a/webroot/rsrc/css/application/diffusion/diffusion-source.css b/webroot/rsrc/css/application/diffusion/diffusion-source.css
index 1af068fe1a..744f84359a 100644
--- a/webroot/rsrc/css/application/diffusion/diffusion-source.css
+++ b/webroot/rsrc/css/application/diffusion/diffusion-source.css
@@ -4,7 +4,7 @@
 
 .diffusion-source {
   width: 100%;
-  background: #fff;
+  background: {$page.content};
 }
 
 .diffusion-source tr.phabricator-source-highlight {
diff --git a/webroot/rsrc/css/application/diffusion/diffusion.css b/webroot/rsrc/css/application/diffusion/diffusion.css
index 3d81cd5c62..405755140b 100644
--- a/webroot/rsrc/css/application/diffusion/diffusion.css
+++ b/webroot/rsrc/css/application/diffusion/diffusion.css
@@ -46,7 +46,7 @@
 /* - List Styles  ------------------------------------------------------------*/
 
 .diffusion-history-list .phui-oi-link {
-  color: #000;
+  color: {$blacktext};
   font-size: {$biggerfontsize};
 }
 
diff --git a/webroot/rsrc/css/application/files/global-drag-and-drop.css b/webroot/rsrc/css/application/files/global-drag-and-drop.css
index e338b987b0..f9981d0492 100644
--- a/webroot/rsrc/css/application/files/global-drag-and-drop.css
+++ b/webroot/rsrc/css/application/files/global-drag-and-drop.css
@@ -14,7 +14,7 @@
   top: 30%;
   padding: 18px 0;
 
-  color: #ffffff;
+  color: {$page.content};
   background: rgba({$alphablack}, 0.8);
   border-radius: 18px;
 
diff --git a/webroot/rsrc/css/application/objectselector/object-selector.css b/webroot/rsrc/css/application/objectselector/object-selector.css
index 927b805155..fc53cc3282 100644
--- a/webroot/rsrc/css/application/objectselector/object-selector.css
+++ b/webroot/rsrc/css/application/objectselector/object-selector.css
@@ -32,7 +32,7 @@ td.phabricator-object-selector-search-text {
 
 .phabricator-object-selector-row:hover a {
   text-decoration: none;
-  color: #000;
+  color: {$blacktext};
 }
 
 .phabricator-object-selector-search-text input {
diff --git a/webroot/rsrc/css/application/paste/paste.css b/webroot/rsrc/css/application/paste/paste.css
index b9b2fe2dd2..22138df452 100644
--- a/webroot/rsrc/css/application/paste/paste.css
+++ b/webroot/rsrc/css/application/paste/paste.css
@@ -3,8 +3,8 @@
  */
 
 .paste-embed {
-  background: {$sh-yellowbackground};
-  border: 1px solid {$sh-lightyellowborder};
+  background: {$paste.content};
+  border: 1px solid {$paste.border};
   border-radius: 3px;
 }
 
@@ -13,7 +13,8 @@
 }
 
 .paste-embed-head {
-  border-bottom: 1px solid {$sh-lightyellowborder};
+  border-bottom: 1px solid {$paste.border};
+  background: {$paste.highlight};
   padding: 8px 12px;
 }
 
@@ -25,3 +26,8 @@
 .paste-embed-body {
   overflow-y: auto;
 }
+
+.paste-embed-body .phabricator-source-code-container {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
diff --git a/webroot/rsrc/css/application/people/people-picture-menu-item.css b/webroot/rsrc/css/application/people/people-picture-menu-item.css
index 8f5da76166..745f9df3cd 100644
--- a/webroot/rsrc/css/application/people/people-picture-menu-item.css
+++ b/webroot/rsrc/css/application/people/people-picture-menu-item.css
@@ -8,7 +8,7 @@
 }
 
 .people-menu-image-container {
-  background: #fff;
+  background: {$page.content};
   padding: 5px;
   border-radius: 5px;
   border: 1px solid rgba({$alphablue},.2);
diff --git a/webroot/rsrc/css/application/phame/phame.css b/webroot/rsrc/css/application/phame/phame.css
index 080f5ca344..4478e607e9 100644
--- a/webroot/rsrc/css/application/phame/phame.css
+++ b/webroot/rsrc/css/application/phame/phame.css
@@ -29,6 +29,7 @@
   position: absolute;
 }
 
+
 .phame-blog-description + .phui-document-view-pro-box {
   border-top: 1px solid rgba({$alphablue}, 0.20);
 }
@@ -38,11 +39,11 @@
 }
 
 .phame-home-view .phui-side-column {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .phame-home-view {
-  background-color: #fff;
+  background-color: {$page.content};
   border-bottom: 1px solid rgba({$alphagrey},.1);
 }
 
@@ -145,7 +146,7 @@
   width: 360px;
   float: right;
   text-align: right;
-  color: #000;
+  color: {$blacktext};
   position: relative;
 }
 
@@ -179,7 +180,7 @@
   width: 360px;
   float: left;
   text-align: left;
-  color: #000;
+  color: {$blacktext};
   position: relative;
 }
 
@@ -258,7 +259,7 @@
 
 /* Hero Image */
 .phame-header-hero {
-  background-color: #fff;
+  background-color: {$page.content};
   margin-top: 16px;
 }
 
@@ -281,7 +282,7 @@
 .phame-mega-header {
   margin: 0 auto;
   text-align: center;
-  background: #fff;
+  background: {$page.content};
   padding: 16px 0 24px;
 }
 
@@ -290,7 +291,7 @@
 }
 
 .phame-mega-header .phame-header-title {
-  color: #000;
+  color: {$blacktext};
   font-size: 28px;
   font-weight: bold;
   padding-top: 24px;
diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
index 52ff4ca5bd..598a5e0abc 100644
--- a/webroot/rsrc/css/application/pholio/pholio.css
+++ b/webroot/rsrc/css/application/pholio/pholio.css
@@ -181,7 +181,7 @@
 }
 
 .mock-image-description {
-  background: #fff;
+  background: {$page.content};
   border-top: 1px solid {$thinblueborder};
   text-align: left;
 }
diff --git a/webroot/rsrc/css/application/project/project-card-view.css b/webroot/rsrc/css/application/project/project-card-view.css
index 0d45de9485..b960d55cef 100644
--- a/webroot/rsrc/css/application/project/project-card-view.css
+++ b/webroot/rsrc/css/application/project/project-card-view.css
@@ -5,7 +5,7 @@
 .project-card-view {
   margin: 0 12px 16px 0;
   text-align: left;
-  background: #fff;
+  background: {$page.content};
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
   box-shadow: {$dropshadow};
@@ -21,9 +21,9 @@
 }
 
 .project-card-view .phui-header-shell .phui-header-image {
-  border: 3px solid #fff;
+  border: 3px solid {$page.content};
   border-radius: 3px;
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .project-card-view .phui-header-shell .phui-header-header {
@@ -71,7 +71,7 @@
 .project-card-header .project-card-name {
   font-size: 20px;
   font-weight: bold;
-  color: #000;
+  color: {$blacktext};
   margin-bottom: 2px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -129,85 +129,48 @@
 
 /* Colors */
 
-.project-card-view.project-card-red {
-  border-color: {$sh-redborder};
-}
-
 .project-card-view.project-card-red .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-redbackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-orange {
-  border-color: {$sh-orangeborder};
+    {$sh-redbackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-orange .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-orangebackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-yellow {
-  border-color: {$sh-yellowborder};
+    {$sh-orangebackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-yellow .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-yellowbackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-green {
-  border-color: {$sh-greenborder};
+    {$sh-yellowbackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-green .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-greenbackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-blue {
-  border-color: {$sh-blueborder};
+    {$sh-greenbackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-blue .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-bluebackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-indigo {
-  border-color: {$sh-indigoborder};
+    {$sh-bluebackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-indigo .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-indigobackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-violet {
-  border-color: {$sh-violetborder};
+    {$sh-indigobackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-violet .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-violetbackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-pink {
-  border-color: {$sh-pinkborder};
+    {$sh-violetbackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-pink .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-pinkbackground} 42px, #fff 42px);
-}
-
-.project-card-view.project-card-grey,
-.project-card-view.project-card-checkered {
-  border-color: {$sh-greyborder};
+    {$sh-pinkbackground} 42px, {$page.content} 42px);
 }
 
 .project-card-view.project-card-grey .phui-header-shell,
 .project-card-view.project-card-checkered .phui-header-shell {
   background: linear-gradient(to bottom,
-    {$sh-greybackground} 42px, #fff 42px);
+    {$sh-greybackground} 42px, {$page.content} 42px);
 }
diff --git a/webroot/rsrc/css/application/search/application-search-view.css b/webroot/rsrc/css/application/search/application-search-view.css
index 1964d010f0..4036124547 100644
--- a/webroot/rsrc/css/application/search/application-search-view.css
+++ b/webroot/rsrc/css/application/search/application-search-view.css
@@ -3,11 +3,11 @@
  */
 
 .application-search-view {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .application-search-view .phui-crumbs-view {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .application-search-view .application-search-results.phui-object-box {
diff --git a/webroot/rsrc/css/application/search/search-results.css b/webroot/rsrc/css/application/search/search-results.css
index 0f0a31a1b9..02d40fa179 100644
--- a/webroot/rsrc/css/application/search/search-results.css
+++ b/webroot/rsrc/css/application/search/search-results.css
@@ -14,7 +14,7 @@
 .phui-source-fragment strong {
   background-color: {$lightyellow};
   font-weight: normal;
-  color: #000;
+  color: {$blacktext};
 }
 
 .phui-fulltext-tokens {
diff --git a/webroot/rsrc/css/core/core.css b/webroot/rsrc/css/core/core.css
index d7145bb485..9d471477ed 100644
--- a/webroot/rsrc/css/core/core.css
+++ b/webroot/rsrc/css/core/core.css
@@ -48,6 +48,7 @@ body {
   text-align: left;
   unicode-bidi: embed;
   background: {$page.background};
+  color: {$blacktext};
 
   /* By default, the iPhone zooms all text on the page by some percentage when
      you rotate from portrait mode to landscape mode. Disable this, since it
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
index 1de7ccf85a..4007e910ea 100644
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -5,6 +5,7 @@
 .phabricator-remarkup {
   line-height: 1.51em;
   word-break: break-word;
+  color: {$darkbluetext};
 }
 
 .phabricator-remarkup p {
@@ -47,7 +48,7 @@
 .phabricator-remarkup .remarkup-code-block pre {
   background: rgba({$alphablue},0.08);
   display: block;
-  color: #000;
+  color: {$blacktext};
   overflow: auto;
   padding: 12px;
   border-radius: 3px;
@@ -80,7 +81,7 @@
 }
 
 .phabricator-remarkup tt.remarkup-monospaced {
-  color: #000;
+  color: {$blacktext};
   background: rgba({$alphablue},0.1);
   padding: 1px 4px;
   border-radius: 3px;
@@ -342,7 +343,7 @@ video.phabricator-media {
 .phabricator-remarkup-toc {
   float: right;
   border-left: 1px solid {$lightblueborder};
-  background: #fff;
+  background: {$page.content};
   width: 160px;
   padding-left: 8px;
   margin: 0 0 4px 8px;
@@ -402,7 +403,7 @@ video.phabricator-media {
   -webkit-font-smoothing: antialiased;
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
-  color: #000;
+  color: {$blacktext};
   min-width: 256px;
   position: relative;
   /*height: 22px;*/
@@ -509,7 +510,7 @@ video.phabricator-media {
 }
 
 .phabricator-remarkup table.remarkup-table td {
-  background: #ffffff;
+  background: {$page.content};
   padding: 3px 6px;
 }
 
@@ -679,7 +680,7 @@ var.remarkup-assist-textarea {
   position: absolute;
   width: 300px;
   box-shadow: {$dropshadow};
-  background: #ffffff;
+  background: {$page.content};
   border: 1px solid {$lightgreyborder};
   border-radius: 3px;
 }
@@ -721,13 +722,13 @@ var.remarkup-assist-textarea {
 .phuix-autocomplete-list a.jx-result:hover {
   text-decoration: none;
   background: {$sh-bluebackground};
-  color: #000;
+  color: {$blacktext};
 }
 
 .phuix-autocomplete-list a.jx-result.focused,
 .phuix-autocomplete-list a.jx-result.focused:hover {
   background: {$sh-bluebackground};
-  color: #000;
+  color: {$blacktext};
 }
 
 
@@ -735,7 +736,7 @@ var.remarkup-assist-textarea {
 
 .phui-box.phui-object-box.phui-comment-form-view.remarkup-assist-pinned {
   position: fixed;
-  background-color: #ffffff;
+  background-color: {$page.content};
   border-top: 1px solid {$lightblueborder};
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
 
@@ -759,7 +760,7 @@ var.remarkup-assist-textarea {
 .remarkup-inline-preview {
   display: block;
   position: relative;
-  background: #fff;
+  background: {$page.content};
   overflow-y: auto;
   box-sizing: border-box;
   width: 100%;
@@ -783,7 +784,7 @@ var.remarkup-assist-textarea {
 }
 
 .remarkup-assist-button.preview-active .phui-icon-view {
-  color: #fff;
+  color: {$page.content};
 }
 
 .remarkup-assist-button.preview-active:hover {
@@ -791,7 +792,7 @@ var.remarkup-assist-textarea {
 }
 
 .remarkup-assist-button.preview-active:hover .phui-icon-view {
-  color: #fff;
+  color: {$page.content};
 }
 
 .remarkup-preview-active .remarkup-assist,
@@ -867,7 +868,7 @@ var.remarkup-assist-textarea {
     border-width: 1px 0 0 0;
     outline: none;
     resize: none;
-    background: #fff !important;
+    background: {$page.content} !important;
 }
 
 .remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus {
diff --git a/webroot/rsrc/css/layout/phabricator-source-code-view.css b/webroot/rsrc/css/layout/phabricator-source-code-view.css
index 7e956b580a..a855e01447 100644
--- a/webroot/rsrc/css/layout/phabricator-source-code-view.css
+++ b/webroot/rsrc/css/layout/phabricator-source-code-view.css
@@ -5,9 +5,9 @@
 .phabricator-source-code-container {
   overflow-x: auto;
   overflow-y: hidden;
-  border: 1px solid {$sh-lightyellowborder};
+  border: 1px solid {$paste.border};
   border-radius: 3px;
-  background-color: #FFFEF5;
+  background-color: {$paste.content};
 }
 
 .phui-oi .phabricator-source-code-container {
@@ -29,10 +29,10 @@
 }
 
 .phabricator-source-line {
-  background-color: {$sh-yellowbackground};
+  background-color: {$paste.highlight};
   text-align: right;
   padding: 2px 6px 1px 12px;
-  border-right: 1px solid {$sh-lightyellowborder};
+  border-right: 1px solid {$paste.border};
   color: {$sh-yellowtext};
 
   /* When the user selects rows of source, don't visibly select the line
@@ -51,12 +51,12 @@ th.phabricator-source-line a {
 }
 
 th.phabricator-source-line:hover {
-  background: {$sh-lightyellowborder};
+  background: {$paste.border};
   cursor: pointer;
 }
 
 .phabricator-source-highlight {
-  background: {$sh-yellowbackground};
+  background: {$paste.highlight};
 }
 
 .phabricator-source-code-summary {
diff --git a/webroot/rsrc/css/phui/button/phui-button-simple.css b/webroot/rsrc/css/phui/button/phui-button-simple.css
index 4bc6daee23..1ebfea47d5 100644
--- a/webroot/rsrc/css/phui/button/phui-button-simple.css
+++ b/webroot/rsrc/css/phui/button/phui-button-simple.css
@@ -10,7 +10,7 @@ button.phui-button-simple,
 input[type="submit"].phui-button-simple,
 a.phui-button-simple,
 a.phui-button-simple:visited {
-  background: #fff;
+  background: {$page.content};
   color: {$bluetext};
   border: 1px solid {$lightblueborder};
 }
@@ -26,7 +26,7 @@ a.button.phui-button-simple:hover,
 button.phui-button-simple:hover {
   border-color: {$blueborder};
   background-image: none;
-  background-color: #fff;
+  background-color: {$page.content};
   transition: 0s;
 }
 
diff --git a/webroot/rsrc/css/phui/button/phui-button.css b/webroot/rsrc/css/phui/button/phui-button.css
index 69718808c3..3a356f7deb 100644
--- a/webroot/rsrc/css/phui/button/phui-button.css
+++ b/webroot/rsrc/css/phui/button/phui-button.css
@@ -33,9 +33,9 @@ button,
 a.button,
 a.button:visited,
 input[type="submit"] {
-  background-color: #2980b9;
-  border: 1px solid #2980b9;
-  background-image: linear-gradient(to bottom, #3498db, #2980b9);
+  background-color: {$blue.button.color};
+  border: 1px solid {$blue.button.color};
+  background-image: {$blue.button.gradient};
   color: white;
   cursor: pointer;
   font-weight: bold;
@@ -71,17 +71,17 @@ a.icon:visited {
 button.button-green,
 a.button-green.button,
 a.button-green.button:visited {
-  background-color: {$green};
-  border-color: {$green};
-  background-image: linear-gradient(to bottom, #23BB5B, #139543);
+  background-color: {$green.button.color};
+  border-color: {$green.button.color};
+  background-image: {$green.button.gradient};
 }
 
 button.button-grey,
 input[type="submit"].button-grey,
 a.button-grey,
 a.button-grey:visited {
-  background-color: #F7F7F9;
-  background-image: linear-gradient(to bottom, #ffffff, #f1f0f1);
+  background-color: {$grey.button.color};
+  background-image: {$grey.button.gradient};
   border: 1px solid rgba({$alphablue}, 0.3);
   color: {$darkgreytext};
 }
@@ -103,14 +103,14 @@ a.button:hover,
 button:hover {
   text-decoration: none;
   background-color: #2980b9;
-  background-image: linear-gradient(to bottom, #3498db, #1b6ba0);
+  background-image: {$blue.button.hover};
   border-color: #115988;
   transition: 0.1s;
 }
 
 a.button.button-grey:hover,
 button.button-grey:hover {
-  background-image: linear-gradient(to bottom, #ffffff, #eeebec);
+  background-image: {$grey.button.hover};
   border-color: rgba({$alphablue}, 0.4);
   transition: 0.1s;
 }
@@ -119,7 +119,7 @@ a.button.button-green:hover,
 button.button-green:hover {
   border-color: #127336;
   background-color: #0DAD48;
-  background-image: linear-gradient(to bottom, #23BB5B, #178841);
+  background-image: {$green.button.hover};
   transition: 0.1s;
 }
 
@@ -163,7 +163,7 @@ button.link:hover {
 .phuix-dropdown-menu {
   position: absolute;
   width: 200px;
-  background: #fff;
+  background: {$page.content};
   margin-top: -1px;
   padding: 12px;
   box-shadow: {$dropshadow};
@@ -205,7 +205,7 @@ a.policy-control .phui-button-text {
   width: 0;
   height: 0;
   vertical-align: top;
-  border-top: 5px solid #fff;
+  border-top: 5px solid {$page.content};
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   content: "";
@@ -245,7 +245,7 @@ a.policy-control .phui-button-text {
 }
 
 .button-grey.dropdown .caret {
-  border-top-color: #000;
+  border-top-color: {$blacktext};
 }
 
 /* Icons */
diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar-list.css b/webroot/rsrc/css/phui/calendar/phui-calendar-list.css
index c7b844a7eb..5fea904911 100644
--- a/webroot/rsrc/css/phui/calendar/phui-calendar-list.css
+++ b/webroot/rsrc/css/phui/calendar/phui-calendar-list.css
@@ -15,7 +15,7 @@
 .project-view-home .phui-object-box .phui-calendar-list-container
   .phui-header-shell {
   padding: 8px 0;
-  background: #fff;
+  background: {$page.content};
 }
 
 .phui-calendar-list {
diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar-month.css b/webroot/rsrc/css/phui/calendar/phui-calendar-month.css
index c649021f0d..49b792023d 100644
--- a/webroot/rsrc/css/phui/calendar/phui-calendar-month.css
+++ b/webroot/rsrc/css/phui/calendar/phui-calendar-month.css
@@ -5,7 +5,7 @@
 .phui-calendar-view {
   width: 100%;
   border-collapse: collapse;
-  background: #fff;
+  background: {$page.content};
 }
 
 tr.phui-calendar-day-of-week-header th {
@@ -33,7 +33,7 @@ tr.phui-calendar-day-of-week-header th .short-weekday-name {
 }
 
 table.phui-calendar-view td {
-  border: solid #dfdfdf;
+  border: solid {$lightblueborder};
   border-width: 1px 0 0;
   width: 14.2857%; /* This is one seventh, approximately. */
 }
@@ -220,7 +220,7 @@ td.phui-calendar-month-number {
 
 .device-desktop td.phui-calendar-month-day.calendar-hover,
 .device-desktop td.phui-calendar-month-number.calendar-hover {
-  background: {$lightblue};
+  background: {$hoverblue};
 }
 
 .phui-calendar-month-adjacent {
diff --git a/webroot/rsrc/css/phui/calendar/phui-calendar.css b/webroot/rsrc/css/phui/calendar/phui-calendar.css
index ab59886fd8..0d8dcfc56e 100644
--- a/webroot/rsrc/css/phui/calendar/phui-calendar.css
+++ b/webroot/rsrc/css/phui/calendar/phui-calendar.css
@@ -5,7 +5,7 @@
 .phui-calendar-list {
   /* When hovering over a day, this allows the hover color to peek through
      the event name, but for event names to mostly remain readable. */
-  background: rgba(255, 255, 255, 0.75);
+
 }
 
 .application-search-view div.phui-calendar-box {
diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css b/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css
index 7fcc6d4ef7..e4d636cf46 100644
--- a/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css
+++ b/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css
@@ -17,7 +17,7 @@
 }
 
 .phui-oi-list-big a.phui-oi-link {
-  color: #000;
+  color: {$blacktext};
   font-size: {$biggestfontsize};
 }
 
diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
index 5ddedfa24a..e356396451 100644
--- a/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
+++ b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
@@ -37,7 +37,7 @@ ul.phui-oi-list-view {
   border-color: {$lightgreyborder};
   margin: 5px 0;
   overflow: hidden;
-  background: #fff;
+  background: {$page.content};
   margin-bottom: 4px;
 }
 
@@ -105,7 +105,7 @@ ul.phui-oi-list-view {
 }
 
 .phui-oi-objname {
-  color: #000;
+  color: {$blacktext};
   cursor: text;
   font-weight: bold;
 }
diff --git a/webroot/rsrc/css/phui/phui-action-list.css b/webroot/rsrc/css/phui/phui-action-list.css
index 4569438d5a..44b93e61be 100644
--- a/webroot/rsrc/css/phui/phui-action-list.css
+++ b/webroot/rsrc/css/phui/phui-action-list.css
@@ -114,7 +114,7 @@
 
 .device-desktop li.phabricator-action-view-label:hover
   .phabricator-action-view-item {
-    background-color: #fff;
+    background-color: {$page.content};
     color: {$bluetext};
 }
 
@@ -157,7 +157,6 @@
   .phabricator-action-view-icon,
 .device-desktop .phabricator-action-view-disabled:hover
   button.phabricator-action-view-icon {
-  background-color: {$greybackground};
   color: {$lightgreytext};
 }
 
diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css
index 8cfd69a94f..d52a1cbaae 100644
--- a/webroot/rsrc/css/phui/phui-action-panel.css
+++ b/webroot/rsrc/css/phui/phui-action-panel.css
@@ -4,7 +4,7 @@
 
 .phui-action-panel {
   position: relative;
-  background-color: #fff;
+  background-color: {$page.content};
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
   margin: 0 8px;
diff --git a/webroot/rsrc/css/phui/phui-big-info-view.css b/webroot/rsrc/css/phui/phui-big-info-view.css
index 3c92025d79..38951aa059 100644
--- a/webroot/rsrc/css/phui/phui-big-info-view.css
+++ b/webroot/rsrc/css/phui/phui-big-info-view.css
@@ -5,7 +5,7 @@
 .phui-big-info-view {
   padding: 64px 32px;
   margin: 16px 4px;
-  background-color: {$sh-greybackground};
+  background-color: {$page.sidenav};
   text-align: center;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-box.css b/webroot/rsrc/css/phui/phui-box.css
index 9dc99c6f8c..4c44fa04d6 100644
--- a/webroot/rsrc/css/phui/phui-box.css
+++ b/webroot/rsrc/css/phui/phui-box.css
@@ -4,7 +4,7 @@
 
 .phui-box-border {
   border: 1px solid {$lightblueborder};
-  background-color: #fff;
+  background-color: {$page.content};
   border-radius: 3px;
 }
 
@@ -13,7 +13,7 @@
 }
 
 .phui-box-grey {
-  background-color: #F7F7F9;
+  background-color: {$lightgreybackground};
   border-radius: 3px;
   border-color: rgba({$alphagrey},.2);
 }
@@ -36,7 +36,7 @@
 
 .phui-box-blue .phui-oi-list-view,
 .phui-box-grey .phui-oi-list-view {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .phui-box-blue .phui-header-shell {
@@ -49,7 +49,7 @@
 
 .phui-object-box.phui-box-blue div.phui-info-severity-nodata,
 .phui-object-box.phui-box-grey div.phui-info-severity-nodata {
-  background: #fff;
+  background: {$page.content};
   padding: 32px 0;
   text-align: center;
   border: none;
@@ -81,7 +81,7 @@
 }
 
 .phui-box.phui-object-box.phui-box-blue-property .phui-header-shell {
-  background-color: #eff3fc;
+  background-color: {$bluepropertybackground};
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
   padding: 6px 16px;
@@ -113,5 +113,5 @@ body .phui-box-blue-property .phui-header-shell + .phui-object-box {
 
 .phui-box-blue-property .phui-header-shell + .phui-object-box
   .phui-header-shell {
-    background: #fff;
+    background: {$page.content};
 }
diff --git a/webroot/rsrc/css/phui/phui-comment-form.css b/webroot/rsrc/css/phui/phui-comment-form.css
index 860dc9dcaf..8fbd3f0c6e 100644
--- a/webroot/rsrc/css/phui/phui-comment-form.css
+++ b/webroot/rsrc/css/phui/phui-comment-form.css
@@ -3,7 +3,7 @@
  */
 
 body .phui-box.phui-object-box.phui-comment-form-view {
-  background-color: #fff;
+  background-color: {$page.content};
   margin-left: 62px;
   position: relative;
 }
@@ -67,7 +67,7 @@ body.device .phui-box.phui-object-box.phui-comment-form-view {
 }
 
 .phui-comment-form-view .aphront-form-input .remarkup-assist-textarea:focus {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .device-phone .phui-comment-form-view .aphront-form-input
@@ -106,7 +106,7 @@ body.device .phui-box.phui-object-box.phui-comment-form-view {
 
 .phui-comment-form-view .phui-comment-action-bar {
   border-bottom: 1px solid {$thinblueborder};
-  background-color: rgba(239, 243, 252, .75);
+  background-color: {$bluepropertybackground};
   padding: 4px 12px 4px 12px;
   margin-bottom: 16px;
 }
diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css
index 60b5106154..35c843f81f 100644
--- a/webroot/rsrc/css/phui/phui-document-pro.css
+++ b/webroot/rsrc/css/phui/phui-document-pro.css
@@ -9,7 +9,7 @@
 }
 
 .phui-document-container {
-  background-color: #fff;
+  background-color: {$page.content};
   position: relative;
   border-bottom: 1px solid #dedee1;
 }
@@ -79,7 +79,7 @@ body.printable {
   width: 260px;
   position: absolute;
   z-index: 30;
-  background-color: #fff;
+  background-color: {$page.content};
   top: 52px;
   left: -40px;
 }
@@ -163,7 +163,7 @@ body.printable {
   .phui-header-header {
   font-size: 24px;
   line-height: 30px;
-  color: #000;
+  color: {$blacktext};
 }
 
 .device-phone .phui-document-view.phui-document-view-pro .phui-header-tall
@@ -228,7 +228,7 @@ body.printable {
 .phui-document-view-pro-box .phui-timeline-title {
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
-  background-color: #fff;
+  background-color: {$page.content};
   border-bottom: 1px solid #F1F1F4;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-document-summary.css b/webroot/rsrc/css/phui/phui-document-summary.css
index 736efe9d20..322096f481 100644
--- a/webroot/rsrc/css/phui/phui-document-summary.css
+++ b/webroot/rsrc/css/phui/phui-document-summary.css
@@ -17,7 +17,7 @@ body .phui-document-view .phui-document-summary-view h2.remarkup-header {
 }
 
 .phui-document-summary-view h2.remarkup-header a {
-  color: #000;
+  color: {$blacktext};
 }
 
 .phui-document-summary-view h2.remarkup-header a:hover {
diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css
index 87cdc60ddd..e5985f8889 100644
--- a/webroot/rsrc/css/phui/phui-document.css
+++ b/webroot/rsrc/css/phui/phui-document.css
@@ -55,7 +55,7 @@
 }
 
 .phui-document-content {
-  background: #fff;
+  background: {$page.content};
 }
 
 .phui-document-content .phabricator-remarkup {
diff --git a/webroot/rsrc/css/phui/phui-fontkit.css b/webroot/rsrc/css/phui/phui-fontkit.css
index 875ac41981..43162ea618 100644
--- a/webroot/rsrc/css/phui/phui-fontkit.css
+++ b/webroot/rsrc/css/phui/phui-fontkit.css
@@ -3,7 +3,7 @@
  */
 
 .diviner-document-section .phui-header-header {
-  color: #000;
+  color: {$blacktext};
 }
 
 .phui-document-view .phabricator-remarkup .remarkup-header {
diff --git a/webroot/rsrc/css/phui/phui-form.css b/webroot/rsrc/css/phui/phui-form.css
index 8a6f705ec9..98e6e5b28f 100644
--- a/webroot/rsrc/css/phui/phui-form.css
+++ b/webroot/rsrc/css/phui/phui-form.css
@@ -22,7 +22,7 @@ div.jx-tokenizer-container {
   display: inline-block;
   height: 30px;
   line-height: 18px;
-  color: #333;
+  color: {$darkbluetext};
   vertical-align: middle;
   font: {$basefont};
   -webkit-font-smoothing: antialiased;
@@ -45,7 +45,7 @@ input[type="tel"],
 input[type="color"],
 div.jx-tokenizer-container {
   padding: 4px 6px;
-  background-color: #ffffff;
+  background-color: {$page.content};
   border: 1px solid {$greyborder};
   border-radius: 3px;
 
@@ -105,7 +105,7 @@ select {
   -moz-appearance: none;
   appearance: none;
 
-  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
+  background: {$page.content} url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
   background-size: 8px 10px;
   border-radius: 3px;
   color: {$darkbluetext};
diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css
index 87df1d0fc5..7926e431c1 100644
--- a/webroot/rsrc/css/phui/phui-header-view.css
+++ b/webroot/rsrc/css/phui/phui-header-view.css
@@ -338,7 +338,7 @@ body .phui-header-shell.phui-bleed-header
 
 .phui-profile-header.phui-header-shell .phui-header-header {
   font-size: 24px;
-  color: #000;
+  color: {$blacktext};
 }
 
 .phui-profile-header .phui-header-col3 {
diff --git a/webroot/rsrc/css/phui/phui-hovercard.css b/webroot/rsrc/css/phui/phui-hovercard.css
index 0daa904ade..1f01362b6f 100644
--- a/webroot/rsrc/css/phui/phui-hovercard.css
+++ b/webroot/rsrc/css/phui/phui-hovercard.css
@@ -19,7 +19,7 @@
   box-shadow: {$dropshadow};
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .phui-hovercard-head .phui-header-shell {
diff --git a/webroot/rsrc/css/phui/phui-info-view.css b/webroot/rsrc/css/phui/phui-info-view.css
index 105adf9ed4..268385edec 100644
--- a/webroot/rsrc/css/phui/phui-info-view.css
+++ b/webroot/rsrc/css/phui/phui-info-view.css
@@ -5,7 +5,7 @@
 .phui-info-view {
   border-style: solid;
   border-width: 1px;
-  background: #fff;
+  background: {$page.content};
   margin: 16px;
   padding: 12px;
   border-radius: 3px;
@@ -38,6 +38,7 @@ div.phui-info-view.phui-info-severity-plain {
 
 .phui-info-view-body {
   line-height: 1.6em;
+  color: {$blacktext};
 }
 
 .phui-info-view.phui-info-has-icon .phui-info-view-body {
diff --git a/webroot/rsrc/css/phui/phui-invisible-character-view.css b/webroot/rsrc/css/phui/phui-invisible-character-view.css
index b8a848fa9a..a6a90da536 100644
--- a/webroot/rsrc/css/phui/phui-invisible-character-view.css
+++ b/webroot/rsrc/css/phui/phui-invisible-character-view.css
@@ -4,7 +4,7 @@
 
 .invisible-special {
   font-family: monospace;
-  color: #000;
+  color: {$blacktext};
   background: rgba({$alphablue},0.1);
   padding: 1px 4px;
   border-radius: 3px;
diff --git a/webroot/rsrc/css/phui/phui-lightbox.css b/webroot/rsrc/css/phui/phui-lightbox.css
index 910d902a3b..611b9c97a4 100644
--- a/webroot/rsrc/css/phui/phui-lightbox.css
+++ b/webroot/rsrc/css/phui/phui-lightbox.css
@@ -80,7 +80,7 @@
   right: 0;
   width: 360px;
   overflow-y: auto;
-  background: #fff;
+  background: {$page.content};
   opacity: 1;
 }
 
@@ -100,7 +100,7 @@
 }
 
 .lightbox-attachment .lightbox-status {
-  background: #fff;
+  background: {$page.content};
   position: fixed;
   top: 0;
   left: 0;
@@ -121,7 +121,7 @@
 }
 
 .lightbox-attachment .lightbox-status-txt a {
-  color: #000;
+  color: {$blacktext};
   margin-right: 12px;
   font-size: {$biggerfontsize};
 }
diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css
index 5df6f4a210..5fab89bcd8 100644
--- a/webroot/rsrc/css/phui/phui-list.css
+++ b/webroot/rsrc/css/phui/phui-list.css
@@ -88,7 +88,7 @@
 }
 
 .device-desktop .phui-list-sidenav .phui-list-item-href:hover .phui-icon-view {
-  color: #fff;
+  color: {$page.content};
 }
 
 /* - Top, Full Width Navigations -----------------------------------------------
@@ -171,7 +171,7 @@
   line-height: 24px;
   font-weight: bold;
   font-size: {$biggerfontsize};
-  border-top: 4px solid #fff;
+  border-top: 4px solid transparent;
 }
 
 .phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
@@ -186,7 +186,6 @@
 
 .device-desktop .phui-list-tabbar .phui-list-item-href:hover {
   color: {$sky};
-  border-bottom: 4px solid $fff;
   text-decoration: none;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-pinboard-view.css b/webroot/rsrc/css/phui/phui-pinboard-view.css
index d632f13795..1fb4e95792 100644
--- a/webroot/rsrc/css/phui/phui-pinboard-view.css
+++ b/webroot/rsrc/css/phui/phui-pinboard-view.css
@@ -16,7 +16,7 @@
   margin: 0 12px 16px 0;
   text-align: left;
   width: 280px;
-  background: #fff;
+  background: {$page.content};
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
 }
@@ -95,7 +95,7 @@
 .dashboard-panel .phui-pinboard-view {
   margin: 0;
   padding: 16px 12px 0 12px;
-  background: #fff;
+  background: {$page.content};
   border-left: 1px solid {$lightblueborder};
   border-right: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$blueborder};
diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css
index 885b20c12b..73675a44d6 100644
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@@ -63,12 +63,12 @@ a.phui-tag-view:hover {
 a.phui-tag-type-object,
 a.phui-tag-type-object:link,
 .phui-tag-core-closed .phui-tag-color-object {
-  color: #000;
+  color: {$blacktext};
 }
 
 .phui-tag-type-person {
   white-space: nowrap;
-  color: #19558d;
+  color: {$anchor};
 }
 
 .phui-tag-color-red {
@@ -107,8 +107,8 @@ a.phui-tag-type-object:link,
 }
 
 .phui-tag-color-black {
-  background-color: #333333;
-  border-color: #333333;
+  background-color: {$darkgreybackground};
+  border-color: {$darkgreybackground};
 }
 
 .phui-tag-color-grey {
@@ -117,28 +117,28 @@ a.phui-tag-type-object:link,
 }
 
 .phui-tag-color-white {
-  background-color: #f7f7f7;
-  border-color: #f7f7f7;
+  background-color: {$lightgreybackground};
+  border-color: {$lightgreybackground};
 }
 
 .phui-tag-color-object {
-  background-color: #e7e7e7;
-  border-color: #e7e7e7;
+  background-color: {$greybackground};
+  border-color: {$lightgreyborder};
 }
 
 .phui-tag-color-person {
-  background-color: #f1f7ff;
-  border-color: #f1f7ff;
+  background-color: {$bluebackground};
+  border-color: {$thinblueborder};
 }
 
 a.phui-tag-view:hover
   .phui-tag-core.phui-tag-color-person {
-  border-color: #d9ebfd;
+  border-color: {$lightblueborder};
 }
 
 a.phui-tag-view:hover
   .phui-tag-core.phui-tag-color-object {
-  border-color: #d7d7d7;
+  border-color: {$greyborder};
 }
 
 .phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
@@ -514,6 +514,6 @@ a.phui-tag-view:hover.phui-tag-disabled .phui-tag-core {
 }
 
 .phui-tag-type-outline.phui-tag-black .phui-tag-core {
-  color: #000;
-  border-color: #000;
+  color: {$blacktext};
+  border-color: {$blacktext};
 }
diff --git a/webroot/rsrc/css/phui/phui-timeline-view.css b/webroot/rsrc/css/phui/phui-timeline-view.css
index da6b5950c4..27be9c0e72 100644
--- a/webroot/rsrc/css/phui/phui-timeline-view.css
+++ b/webroot/rsrc/css/phui/phui-timeline-view.css
@@ -179,7 +179,7 @@
   .phui-timeline-core-content {
   padding: 16px;
   line-height: 18px;
-  background: #fff;
+  background: {$page.content};
   border-top: 1px solid rgba({$alphablue},.1);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -260,7 +260,7 @@
 .conpherence-transaction-content .phui-timeline-value,
 .phui-feed-story-head .phui-timeline-value {
   font-style: italic;
-  color: black;
+  color: {$blacktext};
 }
 
 .device-desktop .phui-timeline-extra {
@@ -280,7 +280,7 @@
 }
 
 .phui-timeline-icon-fill.fill-has-color .phui-icon-view {
-  color: #fff;
+  color: {$page.content};
 }
 
 .phui-timeline-icon-fill-red {
diff --git a/webroot/rsrc/css/phui/phui-two-column-view.css b/webroot/rsrc/css/phui/phui-two-column-view.css
index 7728980268..75162619c4 100644
--- a/webroot/rsrc/css/phui/phui-two-column-view.css
+++ b/webroot/rsrc/css/phui/phui-two-column-view.css
@@ -3,7 +3,7 @@
  */
 
 .phui-two-column-view .phui-two-column-header {
-  background-color: #fff;
+  background-color: {$page.content};
   border-bottom: 1px solid rgba({$alphagrey}, .12);
   margin-bottom: 24px;
 }
@@ -19,7 +19,7 @@
 
 .phui-two-column-header .phui-header-header {
   font-size: 20px;
-  color: #000;
+  color: {$blacktext};
 }
 
 .device-phone .phui-two-column-header .phui-header-header {
@@ -172,7 +172,7 @@
 .phui-two-column-tabs {
   padding: 0 32px;
   margin-bottom: 32px;
-  background: #fff;
+  background: {$page.content};
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
 }
 
diff --git a/webroot/rsrc/css/phui/workboards/phui-workboard-color.css b/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
index e07bc6597f..9973d64979 100644
--- a/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
@@ -7,7 +7,7 @@
 }
 
 .phui-workboard-no-color {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .phui-workboard-color .phui-crumbs-view {
diff --git a/webroot/rsrc/css/phui/workboards/phui-workcard.css b/webroot/rsrc/css/phui/workboards/phui-workcard.css
index 5af162b4bc..e137e962bc 100644
--- a/webroot/rsrc/css/phui/workboards/phui-workcard.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workcard.css
@@ -3,7 +3,7 @@
  */
 
 .phui-workcard.phui-oi {
-  background-color: #fff;
+  background-color: {$page.content};
   border-radius: 3px;
   margin-bottom: 8px;
   border-left-width: 4px;
@@ -37,7 +37,7 @@
 .phui-workcard .phui-oi-link {
   white-space: normal;
   font-weight: normal;
-  color: #000;
+  color: {$blacktext};
   margin-left: 2px;
 }