diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
index 819926e4e25..6fe2d63d5db 100644
--- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
@@ -111,7 +111,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
-                  "formInputPlaceholderText": "#464c54",
+                  "formInputPlaceholderText": "#555555",
                   "formInputText": "#c7d0d9",
                   "formInputTextStrong": "#c7d0d9",
                   "formInputTextWhite": "#ffffff",
@@ -421,7 +421,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
-                  "formInputPlaceholderText": "#464c54",
+                  "formInputPlaceholderText": "#555555",
                   "formInputText": "#c7d0d9",
                   "formInputTextStrong": "#c7d0d9",
                   "formInputTextWhite": "#ffffff",
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 5530194d172..67c8b7f1be8 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -213,9 +213,6 @@ $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;
 
-// Input placeholder text color
-$placeholderText: darken($text-color, 25%);
-
 // Search
 $search-shadow: 0 0 30px 0 $black;
 
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 b3186ac7805..9e0d0be289e 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -200,14 +200,11 @@ $input-border-color: $gray-5;
 $input-box-shadow: none;
 $input-border-focus: $gray-5 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: $gray-4 !default;
+$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
 $input-color-select-arrow: $gray-1;
 
-// Input placeholder text color
-$placeholderText: $gray-2;
-
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;
 
diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts
index b19a63ef03f..c0ca4864c73 100644
--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -88,7 +88,7 @@ const darkTheme: GrafanaTheme = {
     formInputBorderHover: basicColors.gray33,
     formInputBorderActive: basicColors.blue95,
     formInputBorderInvalid: basicColors.red88,
-    formInputPlaceholderText: basicColors.gray33,
+    formInputPlaceholderText: basicColors.gray1,
     formInputText: basicColors.gray85,
     formInputDisabledText: basicColors.gray70,
     formInputTextStrong: basicColors.gray85,
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 7036daf5cfd..fefd0a01524 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -211,14 +211,11 @@ $input-border-color: $dark-6;
 $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: #464c54;
+$input-color-placeholder: #555555;
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;
 
-// Input placeholder text color
-$placeholderText: darken($text-color, 25%);
-
 // Search
 $search-shadow: 0 0 30px 0 $black;
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 65ce98ca65c..0303fab8a87 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -203,14 +203,11 @@ $input-border-color: $gray-5;
 $input-box-shadow: none;
 $input-border-focus: $gray-5 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: $gray-4 !default;
+$input-color-placeholder: #9fa7b3;
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
 $input-color-select-arrow: $gray-1;
 
-// Input placeholder text color
-$placeholderText: $gray-2;
-
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;
 
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss
index 7e6930e97a7..ced6040e46b 100644
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -44,14 +44,8 @@
 
 // Placeholder text
 // -------------------------
-@mixin placeholder($color: $placeholderText) {
-  &:-moz-placeholder {
-    color: $color;
-  }
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-  &::-webkit-input-placeholder {
+@mixin placeholder($color: $input-color-placeholder) {
+  &::placeholder {
     color: $color;
   }
 }