diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index db1e149af1d..db35c2ecb38 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -4,7 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Subscription } from 'rxjs';
 
-import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
+import { FieldConfigSource, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { locationService } from '@grafana/runtime';
 import {
@@ -14,10 +14,11 @@ import {
   PageToolbar,
   RadioButtonGroup,
   stylesFactory,
+  Themeable2,
   ToolbarButton,
+  withTheme2,
 } from '@grafana/ui';
 import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
-import config from 'app/core/config';
 import { appEvents } from 'app/core/core';
 import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems';
 import { SaveLibraryPanelModal } from 'app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal';
@@ -84,7 +85,7 @@ const mapDispatchToProps = {
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
-type Props = OwnProps & ConnectedProps<typeof connector>;
+type Props = OwnProps & ConnectedProps<typeof connector> & Themeable2;
 
 interface State {
   showSaveLibraryPanelModal?: boolean;
@@ -216,7 +217,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   };
 
   renderPanel(styles: EditorStyles, isOnlyPanel: boolean) {
-    const { dashboard, panel, uiState, tableViewEnabled } = this.props;
+    const { dashboard, panel, uiState, tableViewEnabled, theme } = this.props;
 
     return (
       <div className={styles.mainPaneWrapper} key="panel">
@@ -230,7 +231,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
               // If no tabs limit height so panel does not extend to edge
               if (isOnlyPanel) {
-                height -= config.theme2.spacing.gridSize * 2;
+                height -= theme.spacing.gridSize * 2;
               }
 
               if (tableViewEnabled) {
@@ -431,8 +432,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   };
 
   render() {
-    const { dashboard, initDone, updatePanelEditorUIState, uiState } = this.props;
-    const styles = getStyles(config.theme, this.props);
+    const { dashboard, initDone, updatePanelEditorUIState, uiState, theme } = this.props;
+    const styles = getStyles(theme, this.props);
 
     if (!initDone) {
       return null;
@@ -466,14 +467,14 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   }
 }
 
-export const PanelEditor = connector(PanelEditorUnconnected);
+export const PanelEditor = withTheme2(connector(PanelEditorUnconnected));
 
 /*
  * Styles
  */
-export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => {
   const { uiState } = props;
-  const paneSpacing = theme.spacing.md;
+  const paneSpacing = theme.spacing(2);
 
   return {
     wrapper: css`
@@ -485,7 +486,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
       left: 0;
       right: 0;
       bottom: 0;
-      background: ${theme.colors.dashboardBg};
+      background: ${theme.colors.background.canvas};
       display: flex;
       flex-direction: column;
     `,
@@ -526,7 +527,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
       flex-wrap: wrap;
     `,
     toolbarLeft: css`
-      padding-left: ${theme.spacing.sm};
+      padding-left: ${theme.spacing(1)};
     `,
     centeringContainer: css`
       display: flex;