moved slider into label to make it clickable, styled slider in dark and light…

moved slider into label to make it clickable, styled slider in dark and light theme, created variables for slider

public/app/core/components/switch.ts

 import coreModule from 'app/core/core_module';
 
 const template = `
-<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
+  <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
     {{ctrl.label}}
     <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
       {{ctrl.tooltip}}
     </info-popover>
-</label>
-<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
+  </div>
+  <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
     <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
     <span class="gf-form-switch__slider"></span>
-</div>
+  </div>
+</label>
 `;
 
 export class SwitchCtrl {

public/sass/_variables.dark.scss

@@ -355,3 +355,11 @@ $diff-json-icon: $gray-7;
 
 //Submenu
 $variable-option-bg: $blue-dark;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $black;
+$switch-slider-color: $dark-2;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-shadow: 0 0 3px black;

public/sass/_variables.light.scss

@@ -364,3 +364,11 @@ $diff-json-icon: $gray-4;
 
 //Submenu
 $variable-option-bg: $blue-light;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-shadow: 0 0 3px $dark-5;

public/sass/components/_switch.scss

@@ -88,12 +88,16 @@ gf-form-switch[disabled] {
   }
 }
 
+.gf-form-switch-container {
+  display: flex;
+}
+
 .gf-form-switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
-  background: black;
+  background: $switch-bg;
 
   input {
     opacity: 0;
@@ -105,37 +109,36 @@ gf-form-switch[disabled] {
 /* The slider */
 .gf-form-switch__slider {
   position: absolute;
-  cursor: pointer;
   top: 8px;
-  left: 14px;
-  right: 10px;
+  left: 16px;
+  right: 14px;
   bottom: 10px;
-  background: #1d1d1d;
-  transition: 0.4s;
-  border-radius: 34px;
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
 
   &::before {
     position: absolute;
     content: '';
-    height: 16px;
-    width: 16px;
+    height: 12px;
+    width: 12px;
     left: 2px;
-    bottom: 0px;
-    background: #333333;
+    bottom: 2px;
+    background: $switch-slider-color;
     transition: 0.4s;
     border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
   }
 }
 
 input:checked + .gf-form-switch__slider {
-  background: linear-gradient(90deg, $orange, $red);
+  background: $switch-slider-on-bg;
 }
 
 /* input:focus + .gf-form-switch__slider { */
 /*   box-shadow: 0 0 1px #2196f3; */
 /* } */
 
-input:checked + .gf-form-switch__slider:before {
-  transform: translateX(20px);
-  box-shadow: 0 0 5px black;
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(14px);
 }