diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index 59b3c450a04..95e6d8f3646 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -133,8 +133,8 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: $dark-9;
-$tight-form-func-highlight-bg: $dark-10;
+$tight-form-func-bg: ${theme.colors.bg2};
+$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
 
 $modal-backdrop-bg: ${theme.colors.bg3};
 $code-tag-bg: $dark-1;
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 3b226844034..9ffb24a5289 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -126,8 +126,8 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: $gray-5;
-$tight-form-func-highlight-bg: $gray-6;
+$tight-form-func-bg: ${theme.colors.bg2};
+$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
 
 $modal-backdrop-bg: ${theme.colors.bg1};
 $code-tag-bg: $gray-6;
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index e6b5eeb0e83..6c622e99f8f 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -135,8 +135,8 @@ $page-header-border-color: #202226;
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: $dark-9;
-$tight-form-func-highlight-bg: $dark-10;
+$tight-form-func-bg: #202226;
+$tight-form-func-highlight-bg: #25272b;
 
 $modal-backdrop-bg: #2c3235;
 $code-tag-bg: $dark-1;
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 013cfb71994..cbe0e219b85 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -128,8 +128,8 @@ $page-header-border-color: #dce1e6;
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: $gray-5;
-$tight-form-func-highlight-bg: $gray-6;
+$tight-form-func-bg: #f1f5f9;
+$tight-form-func-highlight-bg: #eaf0f6;
 
 $modal-backdrop-bg: #ffffff;
 $code-tag-bg: $gray-6;
diff --git a/public/sass/components/_query_part.scss b/public/sass/components/_query_part.scss
index f22e21b319c..6ec484e841a 100644
--- a/public/sass/components/_query_part.scss
+++ b/public/sass/components/_query_part.scss
@@ -1,5 +1,5 @@
 .query-part {
-  background-color: lighten($input-label-bg, 5%);
+  background-color: $tight-form-func-bg;
 
   &.show-function-controls {
     padding-top: 5px;
@@ -14,6 +14,10 @@
   &:hover .query-part__last {
     display: inline;
   }
+
+  &:hover {
+    background: $tight-form-func-highlight-bg;
+  }
 }
 
 .query-part__link {