diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx b/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
index e1c7b54d025ea..facb23461c353 100644
--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton/index.tsx
@@ -94,20 +94,22 @@ const StyledRow = styled(Row)`
 `;
 
 export const StyledButtonComponent = styled(Button)`
-  background: none;
-  text-transform: none;
-  padding: 0px;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 14px;
-  font-weight: ${({ theme }) => theme.typography.weights.normal};
-  &:disabled {
+  ${({ theme }) => `
     background: none;
-    color: rgba(0, 0, 0, 0.85);
-    &:hover {
+    text-transform: none;
+    padding: 0px;
+    color: ${theme.colors.grayscale.dark2};
+    font-size: 14px;
+    font-weight: ${theme.typography.weights.normal};
+    &:disabled {
       background: none;
-      color: rgba(0, 0, 0, 0.85);
+      color: ${theme.colors.grayscale.dark2};
+      &:hover {
+        background: none;
+        color: ${theme.colors.grayscale.dark2};
+      }
     }
-  }
+  `}
 `;
 
 const StyledJsonSchema = styled.div`
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 76f54696d81c3..06cb87e4f0340 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -96,21 +96,23 @@ const validatorMap =
 const scheduledQueriesConf = bootstrapData?.common?.conf?.SCHEDULED_QUERIES;
 
 const LimitSelectStyled = styled.span`
-  .ant-dropdown-trigger {
-    align-items: center;
-    color: black;
-    display: flex;
-    font-size: 12px;
-    margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-    text-decoration: none;
-    span {
-      display: inline-block;
-      margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-      &:last-of-type: {
-        margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+  ${({ theme }) => `
+    .ant-dropdown-trigger {
+      align-items: center;
+      color: ${theme.colors.grayscale.dark2};
+      display: flex;
+      font-size: 12px;
+      margin-right: ${theme.gridUnit * 2}px;
+      text-decoration: none;
+      span {
+        display: inline-block;
+        margin-right: ${theme.gridUnit * 2}px;
+        &:last-of-type: {
+          margin-right: ${theme.gridUnit * 4}px;
+        }
       }
     }
-  }
+  `}
 `;
 
 const StyledToolbar = styled.div`
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index e27c3729a4e92..ba08393f18fc8 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -48,7 +48,7 @@ export interface InfoTooltipProps {
 const StyledTooltip = styled(Tooltip)`
   cursor: pointer;
   path:first-of-type {
-    fill: #999999;
+    fill: ${({ theme }) => theme.colors.grayscale.base};
   }
 `;
 
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index e91626003f576..f4b5f083c7335 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -87,35 +87,38 @@ const ListViewStyles = styled.div`
 `;
 
 const BulkSelectWrapper = styled(Alert)`
-  border-radius: 0;
-  margin-bottom: 0;
-  color: #3d3d3d;
-  background-color: ${({ theme }) => theme.colors.primary.light4};
+  ${({ theme }) => `
+    border-radius: 0;
+    margin-bottom: 0;
+    color: ${theme.colors.grayscale.dark1};
+    background-color: ${theme.colors.primary.light4};
 
-  .selectedCopy {
-    display: inline-block;
-    padding: ${({ theme }) => theme.gridUnit * 2}px 0;
-  }
+    .selectedCopy {
+      display: inline-block;
+      padding: ${theme.gridUnit * 2}px 0;
+    }
 
-  .deselect-all {
-    color: #1985a0;
-    margin-left: ${({ theme }) => theme.gridUnit * 4}px;
-  }
+    .deselect-all {
+      color: ${theme.colors.primary.base};
+      margin-left: ${theme.gridUnit * 4}px;
+    }
 
-  .divider {
-    margin: ${({ theme: { gridUnit } }) =>
-      `${-gridUnit * 2}px 0 ${-gridUnit * 2}px ${gridUnit * 4}px`};
-    width: 1px;
-    height: ${({ theme }) => theme.gridUnit * 8}px;
-    box-shadow: inset -1px 0px 0px #dadada;
-    display: inline-flex;
-    vertical-align: middle;
-    position: relative;
-  }
+    .divider {
+      margin: ${`${-theme.gridUnit * 2}px 0 ${-theme.gridUnit * 2}px ${
+        theme.gridUnit * 4
+      }px`};
+      width: 1px;
+      height: ${theme.gridUnit * 8}px;
+      box-shadow: inset -1px 0px 0px ${theme.colors.grayscale.light2};
+      display: inline-flex;
+      vertical-align: middle;
+      position: relative;
+    }
 
-  .ant-alert-close-icon {
-    margin-top: ${({ theme }) => theme.gridUnit * 1.5}px;
-  }
+    .ant-alert-close-icon {
+      margin-top: ${theme.gridUnit * 1.5}px;
+    }
+  `}
 `;
 
 const bulkSelectColumnConfig = {
diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx
index 153b06489be46..3078db8ea4ba4 100644
--- a/superset-frontend/src/components/ListViewCard/index.tsx
+++ b/superset-frontend/src/components/ListViewCard/index.tsx
@@ -30,48 +30,31 @@ const ActionsWrapper = styled.div`
 `;
 
 const StyledCard = styled(AntdCard)`
-  border: 1px solid #d9dbe4;
-  border-radius: ${({ theme }) => theme.gridUnit}px;
-  overflow: hidden;
-
-  .ant-card-body {
-    padding: ${({ theme }) => theme.gridUnit * 4}px
-      ${({ theme }) => theme.gridUnit * 2}px;
-  }
-  .ant-card-meta-detail > div:not(:last-child) {
-    margin-bottom: 0;
-  }
-  .gradient-container {
-    position: relative;
-    height: 100%;
-  }
-  &:hover {
-    box-shadow: 8px 8px 28px 0px rgba(0, 0, 0, 0.24);
-    transition: box-shadow ${({ theme }) => theme.transitionTiming}s ease-in-out;
+  ${({ theme }) => `
+    border: 1px solid ${theme.colors.grayscale.light2};
+    border-radius: ${theme.gridUnit}px;
+    overflow: hidden;
 
-    .gradient-container:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
+    .ant-card-body {
+      padding: ${theme.gridUnit * 4}px
+        ${theme.gridUnit * 2}px;
+    }
+    .ant-card-meta-detail > div:not(:last-child) {
+      margin-bottom: 0;
+    }
+    .gradient-container {
+      position: relative;
       height: 100%;
-      display: inline-block;
-      background: linear-gradient(
-        180deg,
-        rgba(0, 0, 0, 0) 47.83%,
-        rgba(0, 0, 0, 0.219135) 79.64%,
-        rgba(0, 0, 0, 0.5) 100%
-      );
-
-      transition: background ${({ theme }) => theme.transitionTiming}s
-        ease-in-out;
     }
+    &:hover {
+      box-shadow: 8px 8px 28px 0px ${theme.colors.grayscale.light1};
+      transition: box-shadow ${theme.transitionTiming}s ease-in-out;
 
-    .cover-footer {
-      transform: translateY(0);
+      .cover-footer {
+        transform: translateY(0);
+      }
     }
-  }
+  `}
 `;
 
 const Cover = styled.div`
diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx
index c717fbbeec76f..f04cfbdba9eda 100644
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@@ -16,6 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+// Deprecated component
+/* eslint-disable theme-colors/no-literal-colors */
+
 import React, { CSSProperties, ComponentType, ReactNode } from 'react';
 import { SerializedStyles } from '@emotion/react';
 import { SupersetTheme, css } from '@superset-ui/core';
diff --git a/superset-frontend/src/components/TableCollection/index.tsx b/superset-frontend/src/components/TableCollection/index.tsx
index a48af9f346691..2b6999578f3ce 100644
--- a/superset-frontend/src/components/TableCollection/index.tsx
+++ b/superset-frontend/src/components/TableCollection/index.tsx
@@ -35,187 +35,168 @@ interface TableCollectionProps {
 }
 
 export const Table = styled.table`
-  background-color: ${({ theme }) => theme.colors.grayscale.light5};
-  border-collapse: separate;
-  border-radius: ${({ theme }) => theme.borderRadius}px;
+  ${({ theme }) => `
+    background-color: ${theme.colors.grayscale.light5};
+    border-collapse: separate;
+    border-radius: ${theme.borderRadius}px;
 
-  thead > tr > th {
-    border: 0;
-  }
-
-  tbody {
-    tr:first-of-type > td {
-      border-top: 0;
+    thead > tr > th {
+      border: 0;
     }
-  }
-  th {
-    background: ${({ theme }) => theme.colors.grayscale.light5};
-    position: sticky;
-    top: 0;
 
-    &:first-of-type {
-      padding-left: ${({ theme }) => theme.gridUnit * 4}px;
+    tbody {
+      tr:first-of-type > td {
+        border-top: 0;
+      }
     }
+    th {
+      background: ${theme.colors.grayscale.light5};
+      position: sticky;
+      top: 0;
 
-    &.xs {
-      min-width: 25px;
-    }
-    &.sm {
-      min-width: 50px;
-    }
-    &.md {
-      min-width: 75px;
-    }
-    &.lg {
-      min-width: 100px;
-    }
-    &.xl {
-      min-width: 150px;
-    }
-    &.xxl {
-      min-width: 200px;
-    }
+      &:first-of-type {
+        padding-left: ${theme.gridUnit * 4}px;
+      }
 
-    span {
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-      line-height: 2;
-    }
+      &.xs {
+        min-width: 25px;
+      }
+      &.sm {
+        min-width: 50px;
+      }
+      &.md {
+        min-width: 75px;
+      }
+      &.lg {
+        min-width: 100px;
+      }
+      &.xl {
+        min-width: 150px;
+      }
+      &.xxl {
+        min-width: 200px;
+      }
 
-    svg {
-      display: inline-block;
-      position: relative;
-    }
-  }
+      span {
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        line-height: 2;
+      }
 
-  td {
-    &.xs {
-      width: 25px;
-    }
-    &.sm {
-      width: 50px;
-    }
-    &.md {
-      width: 75px;
-    }
-    &.lg {
-      width: 100px;
-    }
-    &.xl {
-      width: 150px;
+      svg {
+        display: inline-block;
+        position: relative;
+      }
     }
-    &.xxl {
-      width: 200px;
+
+    td {
+      &.xs {
+        width: 25px;
+      }
+      &.sm {
+        width: 50px;
+      }
+      &.md {
+        width: 75px;
+      }
+      &.lg {
+        width: 100px;
+      }
+      &.xl {
+        width: 150px;
+      }
+      &.xxl {
+        width: 200px;
+      }
     }
-  }
 
-  .table-cell-loader {
-    position: relative;
+    .table-cell-loader {
+      position: relative;
 
-    .loading-bar {
-      background-color: ${({ theme }) => theme.colors.secondary.light4};
-      border-radius: 7px;
+      .loading-bar {
+        background-color: ${theme.colors.secondary.light4};
+        border-radius: 7px;
 
-      span {
-        visibility: hidden;
+        span {
+          visibility: hidden;
+        }
       }
-    }
-
-    .empty-loading-bar {
-      display: inline-block;
-      width: 100%;
-      height: 1.2em;
-    }
 
-    &:after {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      left: 0;
-      content: '';
-      display: block;
-      width: 100%;
-      height: 48px;
-      background-image: linear-gradient(
-        100deg,
-        rgba(255, 255, 255, 0),
-        rgba(255, 255, 255, 0.5) 60%,
-        rgba(255, 255, 255, 0) 80%
-      );
-      background-size: 200px 48px;
-      background-position: -100px 0;
-      background-repeat: no-repeat;
-      animation: loading-shimmer 1s infinite;
+      .empty-loading-bar {
+        display: inline-block;
+        width: 100%;
+        height: 1.2em;
+      }
     }
-  }
 
-  .actions {
-    white-space: nowrap;
-    min-width: 100px;
+    .actions {
+      white-space: nowrap;
+      min-width: 100px;
 
-    svg,
-    i {
-      margin-right: 8px;
+      svg,
+      i {
+        margin-right: 8px;
 
-      &:hover {
-        path {
-          fill: ${({ theme }) => theme.colors.primary.base};
+        &:hover {
+          path {
+            fill: ${theme.colors.primary.base};
+          }
         }
       }
     }
-  }
 
-  .table-row {
-    .actions {
-      opacity: 0;
-      font-size: ${({ theme }) => theme.typography.sizes.xl}px;
-    }
+    .table-row {
+      .actions {
+        opacity: 0;
+        font-size: ${theme.typography.sizes.xl}px;
+      }
 
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.secondary.light5};
+      &:hover {
+        background-color: ${theme.colors.secondary.light5};
 
-      .actions {
-        opacity: 1;
-        transition: opacity ease-in ${({ theme }) => theme.transitionTiming}s;
+        .actions {
+          opacity: 1;
+          transition: opacity ease-in ${theme.transitionTiming}s;
+        }
       }
     }
-  }
 
-  .table-row-selected {
-    background-color: ${({ theme }) => theme.colors.secondary.light4};
+    .table-row-selected {
+      background-color: ${theme.colors.secondary.light4};
 
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.secondary.light4};
+      &:hover {
+        background-color: ${theme.colors.secondary.light4};
+      }
     }
-  }
 
-  .table-cell {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 320px;
-    line-height: 1;
-    vertical-align: middle;
-    &:first-of-type {
-      padding-left: ${({ theme }) => theme.gridUnit * 4}px;
-    }
-    &__wrap {
-      white-space: normal;
-    }
-    &__nowrap {
-      white-space: nowrap;
+    .table-cell {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 320px;
+      line-height: 1;
+      vertical-align: middle;
+      &:first-of-type {
+        padding-left: ${theme.gridUnit * 4}px;
+      }
+      &__wrap {
+        white-space: normal;
+      }
+      &__nowrap {
+        white-space: nowrap;
+      }
     }
-  }
 
-  @keyframes loading-shimmer {
-    40% {
-      background-position: 100% 0;
-    }
+    @keyframes loading-shimmer {
+      40% {
+        background-position: 100% 0;
+      }
 
-    100% {
-      background-position: 100% 0;
+      100% {
+        background-position: 100% 0;
+      }
     }
-  }
+  `}
 `;
 
 Table.displayName = 'table';
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
index 9e539c09bef4f..044769b3f7148 100644
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -96,27 +96,30 @@ const Tabs = Object.assign(StyledTabs, {
 });
 
 const StyledEditableTabs = styled(StyledTabs)`
-  .ant-tabs-content-holder {
-    background: white;
-  }
-
-  & > .ant-tabs-nav {
-    margin-bottom: 0;
-  }
-
-  .ant-tabs-tab-remove {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: ${({ theme }) => theme.gridUnit * 6}px;
-  }
-
-  ${({ fullWidth }) =>
-    fullWidth &&
-    css`
-      .ant-tabs-nav-list {
-        width: 100%;
-      }
-    `}
+  ${({ theme, fullWidth }) => `
+    .ant-tabs-content-holder {
+      background: ${theme.colors.grayscale.light5};
+    }
+
+    & > .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+
+    .ant-tabs-tab-remove {
+      padding-top: 0;
+      padding-bottom: 0;
+      height: ${theme.gridUnit * 6}px;
+    }
+
+    ${
+      fullWidth &&
+      css`
+        .ant-tabs-nav-list {
+          width: 100%;
+        }
+      `
+    }
+  `}
 `;
 
 const StyledCancelXIcon = styled(Icons.CancelX)`
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
index 74a9a9080cd49..995cac01ca1f5 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@@ -50,21 +50,22 @@ const propTypes = {
 };
 
 const ActionsContainer = styled.div`
-  height: ${({ theme }) => theme.gridUnit * 16}px;
+  ${({ theme }) => `
+    height: ${theme.gridUnit * 16}px;
 
-  // TODO: replace hardcoded color with theme variable after refactoring filter-scope-selector.less to Emotion
-  border-top: ${({ theme }) => theme.gridUnit / 4}px solid #cfd8dc;
-  padding: ${({ theme }) => theme.gridUnit * 6}px;
-  margin: 0 0 0 ${({ theme }) => -theme.gridUnit * 6}px;
-  text-align: right;
+    border-top: ${theme.gridUnit / 4}px solid ${theme.colors.primary.light3};
+    padding: ${theme.gridUnit * 6}px;
+    margin: 0 0 0 ${-theme.gridUnit * 6}px;
+    text-align: right;
 
-  .btn {
-    margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+    .btn {
+      margin-right: ${theme.gridUnit * 4}px;
 
-    &:last-child {
-      margin-right: 0;
+      &:last-child {
+        margin-right: 0;
+      }
     }
-  }
+  `}
 `;
 
 export default class FilterScopeSelector extends React.PureComponent {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 542277f6a6dbc..266ac2a779dfe 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -236,7 +236,7 @@ const StyledTabs = styled(Tabs)`
   .ant-tabs-nav {
     position: sticky;
     top: 0;
-    background: white;
+    background: ${({ theme }) => theme.colors.grayscale.light5};
     z-index: 1;
   }
 
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
index 82c5fef2c2c9d..973fabaccf86d 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
@@ -27,6 +27,7 @@ import {
   getChartMetadataRegistry,
   validateNonEmpty,
   isValidExpression,
+  withTheme,
 } from '@superset-ui/core';
 
 import SelectControl from 'src/explore/components/controls/SelectControl';
@@ -97,7 +98,7 @@ const defaultProps = {
   close: () => {},
 };
 
-export default class AnnotationLayer extends React.PureComponent {
+class AnnotationLayer extends React.PureComponent {
   constructor(props) {
     super(props);
     const {
@@ -710,7 +711,9 @@ export default class AnnotationLayer extends React.PureComponent {
     return (
       <>
         {this.props.error && (
-          <span style={{ color: 'red' }}>ERROR: {this.props.error}</span>
+          <span style={{ color: this.props.theme.colors.error.base }}>
+            ERROR: {this.props.error}
+          </span>
         )}
         <div style={{ display: 'flex', flexDirection: 'row' }}>
           <div style={{ marginRight: '2rem' }}>
@@ -807,3 +810,5 @@ export default class AnnotationLayer extends React.PureComponent {
 
 AnnotationLayer.propTypes = propTypes;
 AnnotationLayer.defaultProps = defaultProps;
+
+export default withTheme(AnnotationLayer);
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
index 06fb582b5da66..f1381abee1aa4 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx
@@ -141,10 +141,14 @@ class AnnotationLayerControl extends React.PureComponent {
   }
 
   renderInfo(anno) {
-    const { annotationError, annotationQuery } = this.props;
+    const { annotationError, annotationQuery, theme } = this.props;
     if (annotationQuery[anno.name]) {
       return (
-        <i className="fa fa-refresh" style={{ color: 'orange' }} aria-hidden />
+        <i
+          className="fa fa-refresh"
+          style={{ color: theme.colors.primary.base }}
+          aria-hidden
+        />
       );
     }
     if (annotationError[anno.name]) {
@@ -157,7 +161,7 @@ class AnnotationLayerControl extends React.PureComponent {
       );
     }
     if (!anno.show) {
-      return <span style={{ color: 'red' }}> Hidden </span>;
+      return <span style={{ color: theme.colors.error.base }}> Hidden </span>;
     }
     return '';
   }
diff --git a/superset-frontend/src/explore/components/controls/ColorPickerControl.jsx b/superset-frontend/src/explore/components/controls/ColorPickerControl.jsx
index 69d378dd7e033..d0337dcc3eabb 100644
--- a/superset-frontend/src/explore/components/controls/ColorPickerControl.jsx
+++ b/superset-frontend/src/explore/components/controls/ColorPickerControl.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SketchPicker } from 'react-color';
-import { getCategoricalSchemeRegistry } from '@superset-ui/core';
+import { getCategoricalSchemeRegistry, styled } from '@superset-ui/core';
 import Popover from 'src/components/Popover';
 import ControlHeader from '../ControlHeader';
 
@@ -42,18 +42,19 @@ const swatchCommon = {
   bottom: '0px',
 };
 
+const StyledSwatch = styled.div`
+  ${({ theme }) => `
+      width: 50px;
+      height: 20px;
+      position: relative;
+      padding: ${theme.gridUnit}px;
+      borderRadius: ${theme.borderRadius}px;
+      display: inline-block;
+      cursor: pointer;
+    `}
+`;
+
 const styles = {
-  swatch: {
-    width: '50px',
-    height: '20px',
-    position: 'relative',
-    padding: '5px',
-    borderRadius: '1px',
-    display: 'inline-block',
-    cursor: 'pointer',
-    boxShadow:
-      'rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset',
-  },
   color: {
     ...swatchCommon,
     borderRadius: '2px',
@@ -103,10 +104,10 @@ export default class ColorPickerControl extends React.Component {
           placement="right"
           content={this.renderPopover()}
         >
-          <div style={styles.swatch}>
+          <StyledSwatch>
             <div style={styles.checkboard} />
             <div style={colStyle} />
-          </div>
+          </StyledSwatch>
         </Popover>
       </div>
     );
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
index 19bb2ba18dff0..b32ca5f216399 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styled, t } from '@superset-ui/core';
+import { styled, SupersetTheme, t, useTheme } from '@superset-ui/core';
 import { Form, FormItem, FormProps } from 'src/components/Form';
 import Select from 'src/components/Select/Select';
 import { Col, Row } from 'src/components';
@@ -38,10 +38,10 @@ const JustifyEnd = styled.div`
   justify-content: flex-end;
 `;
 
-const colorSchemeOptions = [
-  { value: 'rgb(0,255,0)', label: t('green') },
-  { value: 'rgb(255,255,0)', label: t('yellow') },
-  { value: 'rgb(255,0,0)', label: t('red') },
+const colorSchemeOptions = (theme: SupersetTheme) => [
+  { value: theme.colors.success.light1, label: t('green') },
+  { value: theme.colors.alert.light1, label: t('yellow') },
+  { value: theme.colors.error.light1, label: t('red') },
 ];
 
 const operatorOptions = [
@@ -187,44 +187,48 @@ export const FormattingPopoverContent = ({
   config?: ConditionalFormattingConfig;
   onChange: (config: ConditionalFormattingConfig) => void;
   columns: { label: string; value: string }[];
-}) => (
-  <Form
-    onFinish={onChange}
-    initialValues={config}
-    requiredMark="optional"
-    layout="vertical"
-  >
-    <Row gutter={12}>
-      <Col span={12}>
-        <FormItem
-          name="column"
-          label={t('Column')}
-          rules={rulesRequired}
-          initialValue={columns[0]?.value}
-        >
-          <Select ariaLabel={t('Select column')} options={columns} />
-        </FormItem>
-      </Col>
-      <Col span={12}>
-        <FormItem
-          name="colorScheme"
-          label={t('Color scheme')}
-          rules={rulesRequired}
-          initialValue={colorSchemeOptions[0].value}
-        >
-          <Select ariaLabel={t('Color scheme')} options={colorSchemeOptions} />
-        </FormItem>
-      </Col>
-    </Row>
-    <FormItem noStyle shouldUpdate={shouldFormItemUpdate}>
-      {renderOperatorFields}
-    </FormItem>
-    <FormItem>
-      <JustifyEnd>
-        <Button htmlType="submit" buttonStyle="primary">
-          {t('Apply')}
-        </Button>
-      </JustifyEnd>
-    </FormItem>
-  </Form>
-);
+}) => {
+  const theme = useTheme();
+  const colorScheme = colorSchemeOptions(theme);
+  return (
+    <Form
+      onFinish={onChange}
+      initialValues={config}
+      requiredMark="optional"
+      layout="vertical"
+    >
+      <Row gutter={12}>
+        <Col span={12}>
+          <FormItem
+            name="column"
+            label={t('Column')}
+            rules={rulesRequired}
+            initialValue={columns[0]?.value}
+          >
+            <Select ariaLabel={t('Select column')} options={columns} />
+          </FormItem>
+        </Col>
+        <Col span={12}>
+          <FormItem
+            name="colorScheme"
+            label={t('Color scheme')}
+            rules={rulesRequired}
+            initialValue={colorScheme[0].value}
+          >
+            <Select ariaLabel={t('Color scheme')} options={colorScheme} />
+          </FormItem>
+        </Col>
+      </Row>
+      <FormItem noStyle shouldUpdate={shouldFormItemUpdate}>
+        {renderOperatorFields}
+      </FormItem>
+      <FormItem>
+        <JustifyEnd>
+          <Button htmlType="submit" buttonStyle="primary">
+            {t('Apply')}
+          </Button>
+        </JustifyEnd>
+      </FormItem>
+    </Form>
+  );
+};
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index 853c859196baa..d8580fcbe14ef 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -114,7 +114,7 @@ const ContentStyleWrapper = styled.div`
     .control-label {
       font-size: 11px;
       font-weight: ${theme.typography.weights.medium};
-      color: #b2b2b2;
+      color: ${theme.colors.grayscale.light2};
       line-height: 16px;
       text-transform: uppercase;
       margin: 8px 0;
diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
index e9c02f076e047..e371061fbe556 100644
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextArea } from 'src/components/Input';
-import { t } from '@superset-ui/core';
+import { t, withTheme } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
@@ -57,7 +57,7 @@ const defaultProps = {
   readOnly: false,
 };
 
-export default class TextAreaControl extends React.Component {
+class TextAreaControl extends React.Component {
   onControlChange(event) {
     const { value } = event.target;
     this.props.onChange(value);
@@ -70,7 +70,9 @@ export default class TextAreaControl extends React.Component {
   renderEditor(inModal = false) {
     const minLines = inModal ? 40 : this.props.minLines || 12;
     if (this.props.language) {
-      const style = { border: '1px solid #CCC' };
+      const style = {
+        border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
+      };
       if (this.props.readOnly) {
         style.backgroundColor = '#f2f2f2';
       }
@@ -137,3 +139,5 @@ export default class TextAreaControl extends React.Component {
 
 TextAreaControl.propTypes = propTypes;
 TextAreaControl.defaultProps = defaultProps;
+
+export default withTheme(TextAreaControl);
diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
index d9aeccf7fad70..17d2e598b745e 100644
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx
@@ -19,7 +19,7 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
 import { TextArea } from 'src/components/Input';
 
@@ -34,7 +34,7 @@ const defaultProps = {
 describe('TextArea', () => {
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<TextAreaControl {...defaultProps} />);
+    wrapper = mount(<TextAreaControl {...defaultProps} />);
   });
 
   it('renders a FormControl', () => {
@@ -50,7 +50,7 @@ describe('TextArea', () => {
   it('renders a AceEditor when language is specified', () => {
     const props = { ...defaultProps };
     props.language = 'markdown';
-    wrapper = shallow(<TextAreaControl {...props} />);
+    wrapper = mount(<TextAreaControl {...props} />);
     expect(wrapper.find(TextArea)).not.toExist();
     expect(wrapper.find(TextAreaEditor)).toExist();
   });
@@ -58,7 +58,7 @@ describe('TextArea', () => {
   it('calls onAreaEditorChange when entering in the AceEditor', () => {
     const props = { ...defaultProps };
     props.language = 'markdown';
-    wrapper = shallow(<TextAreaControl {...props} />);
+    wrapper = mount(<TextAreaControl {...props} />);
     wrapper.simulate('change', { target: { value: 'x' } });
     expect(defaultProps.onChange.calledWith('x')).toBe(true);
   });
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
index e09d70df944c8..b267bed8c262d 100644
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -324,7 +324,7 @@ const SavedQueries = ({
                         language="sql"
                         lineProps={{
                           style: {
-                            color: 'black',
+                            color: theme.colors.grayscale.dark2,
                             wordBreak: 'break-all',
                             whiteSpace: 'pre-wrap',
                           },
diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
index f9638575bed66..9dd76ffc1565d 100644
--- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
+++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
@@ -241,10 +241,10 @@ const TimeTable = ({
         <span
           key={column.key}
           data-value={v}
-          style={
+          css={theme =>
             color && {
               boxShadow: `inset 0px -2.5px 0px 0px ${color}`,
-              borderRight: '2px solid #fff',
+              borderRight: `2px solid ${theme.colors.grayscale.light5}`,
             }
           }
         >