Updated body & page variables to use variables from code theme

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -73,8 +73,8 @@ $critical: $red-base;
 
 // Scaffolding
 // -------------------------
-$body-bg: $dark-2;
-$page-bg: $dark-2;
+$body-bg: ${theme.colors.bodyBg};
+$page-bg: ${theme.colors.pageBg};
 
 $body-color: $gray-4;
 $text-color: $gray-4;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -65,8 +65,8 @@ $critical: $red-shade;
 
 // Scaffolding
 // -------------------------
-$body-bg: $gray-7;
-$page-bg: $gray-7;
+$body-bg: ${theme.colors.bodyBg};
+$page-bg: ${theme.colors.pageBg};
 
 $body-color: $gray-1;
 $text-color: $gray-1;

packages/grafana-ui/src/themes/dark.ts

@@ -54,8 +54,8 @@ const darkTheme: GrafanaTheme = {
     online: basicColors.greenBase,
     warn: '#f79520',
     critical: basicColors.redBase,
-    bodyBg: '#171819',
-    pageBg: '#161719',
+    bodyBg: basicColors.dark2,
+    pageBg: basicColors.dark2,
     bodyColor: basicColors.gray4,
     textColor: basicColors.gray4,
     textColorStrong: basicColors.white,

public/sass/_variables.dark.generated.scss

@@ -76,8 +76,8 @@ $critical: $red-base;
 
 // Scaffolding
 // -------------------------
-$body-bg: $dark-2;
-$page-bg: $dark-2;
+$body-bg: #161719;
+$page-bg: #161719;
 
 $body-color: $gray-4;
 $text-color: $gray-4;

public/sass/_variables.light.generated.scss

@@ -68,8 +68,8 @@ $critical: $red-shade;
 
 // Scaffolding
 // -------------------------
-$body-bg: $gray-7;
-$page-bg: $gray-7;
+$body-bg: #f7f8fa;
+$page-bg: #f7f8fa;
 
 $body-color: $gray-1;
 $text-color: $gray-1;