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 5b5a229a7f9..52601aecb18 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -1,9 +1,11 @@
 /* tslint:disable:max-line-length */
 
 import { GrafanaTheme } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
 export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
-  `// Global values
+  `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
+// Global values
 // --------------------------------------------------
 
 $theme-name: dark;
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 552de0fe62c..770c536fcd2 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -1,9 +1,11 @@
 /* tslint:disable:max-line-length */
 
 import { GrafanaTheme } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
 export const lightThemeVarsTemplate = (theme: GrafanaTheme) =>
-  `// Global values
+  `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
+// Global values
 // --------------------------------------------------
 
 $theme-name: light;
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 0051f74b21b..ce73f8e6dc8 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -1,9 +1,11 @@
 /* tslint:disable:max-line-length */
 
 import { GrafanaThemeCommons } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
 export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) =>
-  `// Options
+  `${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')}
+// Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
diff --git a/packages/grafana-ui/src/utils/generatedFileBanner.ts b/packages/grafana-ui/src/utils/generatedFileBanner.ts
new file mode 100644
index 00000000000..86ee59dc1a3
--- /dev/null
+++ b/packages/grafana-ui/src/utils/generatedFileBanner.ts
@@ -0,0 +1,10 @@
+export const renderGeneratedFileBanner = (themeFile: string, templateFile: string) => `/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify this file!
+ * - Edit ${themeFile} to regenerate
+ * - Edit ${templateFile} to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+`;
diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx
index 1e6f8bd888e..30ce4005188 100644
--- a/public/app/features/dashboard/containers/DashboardPage.test.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx
@@ -3,10 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { DashboardPage, Props, State } from './DashboardPage';
 import { DashboardModel } from '../state';
 import { cleanUpDashboard } from '../state/actions';
-import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock  } from 'app/core/redux';
+import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
 import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
 
-jest.mock('sass/_variables.scss', () => ({
+jest.mock('sass/_variables.generated.scss', () => ({
   panelhorizontalpadding: 10,
   panelVerticalPadding: 10,
 }));
@@ -23,17 +23,20 @@ interface ScenarioContext {
 }
 
 function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel {
-  const data = Object.assign({
-    title: 'My dashboard',
-    panels: [
-      {
-        id: 1,
-        type: 'graph',
-        title: 'My graph',
-        gridPos: { x: 0, y: 0, w: 1, h: 1 },
-      },
-    ],
-  }, overrides);
+  const data = Object.assign(
+    {
+      title: 'My dashboard',
+      panels: [
+        {
+          id: 1,
+          type: 'graph',
+          title: 'My graph',
+          gridPos: { x: 0, y: 0, w: 1, h: 1 },
+        },
+      ],
+    },
+    overrides
+  );
 
   const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides);
   return new DashboardModel(data, meta);
@@ -74,7 +77,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
 
         ctx.dashboard = props.dashboard;
         ctx.wrapper = shallow(<DashboardPage {...props} />);
-      }
+      },
     };
 
     beforeEach(() => {
@@ -86,8 +89,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
 }
 
 describe('DashboardPage', () => {
-
-  dashboardPageScenario("Given initial state", (ctx) => {
+  dashboardPageScenario('Given initial state', ctx => {
     ctx.setup(() => {
       ctx.mount();
     });
@@ -97,7 +99,7 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("Dashboard is fetching slowly", (ctx) => {
+  dashboardPageScenario('Dashboard is fetching slowly', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.wrapper.setProps({
@@ -111,7 +113,7 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("Dashboard init completed ", (ctx) => {
+  dashboardPageScenario('Dashboard init completed ', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp();
@@ -126,7 +128,7 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("When user goes into panel edit", (ctx) => {
+  dashboardPageScenario('When user goes into panel edit', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp();
@@ -149,7 +151,7 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("When user goes back to dashboard from panel edit", (ctx) => {
+  dashboardPageScenario('When user goes back to dashboard from panel edit', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp();
@@ -179,7 +181,7 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("When dashboard has editview url state", (ctx) => {
+  dashboardPageScenario('When dashboard has editview url state', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp();
@@ -197,7 +199,7 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("When adding panel", (ctx) => {
+  dashboardPageScenario('When adding panel', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp();
@@ -214,37 +216,37 @@ describe('DashboardPage', () => {
     });
   });
 
-  dashboardPageScenario("Given panel with id 0", (ctx) => {
+  dashboardPageScenario('Given panel with id 0', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp({
-        panels: [{ id: 0, type: 'graph'}],
+        panels: [{ id: 0, type: 'graph' }],
         schemaVersion: 17,
       });
       ctx.wrapper.setProps({
         urlEdit: true,
         urlFullscreen: true,
-        urlPanelId: '0'
+        urlPanelId: '0',
       });
     });
 
-    it('Should go into edit mode' , () => {
+    it('Should go into edit mode', () => {
       expect(ctx.wrapper.state().isEditing).toBe(true);
       expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0);
     });
   });
 
-  dashboardPageScenario("When dashboard unmounts", (ctx) => {
+  dashboardPageScenario('When dashboard unmounts', ctx => {
     ctx.setup(() => {
       ctx.mount();
       ctx.setDashboardProp({
-        panels: [{ id: 0, type: 'graph'}],
+        panels: [{ id: 0, type: 'graph' }],
         schemaVersion: 17,
       });
       ctx.wrapper.unmount();
     });
 
-    it('Should call clean up action' , () => {
+    it('Should call clean up action', () => {
       expect(ctx.cleanUpDashboardMock.calls).toBe(1);
     });
   });
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index b29be4b389d..c66a7ff2fe8 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -19,7 +19,7 @@ import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { TimeRange, LoadingState } from '@grafana/ui';
 
-import variables from 'sass/_variables.scss';
+import variables from 'sass/_variables.generated.scss';
 import templateSrv from 'app/features/templating/template_srv';
 import { DataQueryResponse } from '@grafana/ui/src';
 
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.generated.scss
similarity index 97%
rename from public/sass/_variables.dark.scss
rename to public/sass/_variables.dark.generated.scss
index 4a3f5eb97d2..8b019805abc 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -1,3 +1,13 @@
+/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify it!
+ * - Edit grafana-ui/src/themes/dark.ts to regenerate
+ * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+
 // Global values
 // --------------------------------------------------
 
diff --git a/public/sass/_variables.scss b/public/sass/_variables.generated.scss
similarity index 95%
rename from public/sass/_variables.scss
rename to public/sass/_variables.generated.scss
index 1fbc22337e8..1d82b1a2f5c 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.generated.scss
@@ -1,3 +1,13 @@
+/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify it!
+ * - Edit grafana-ui/src/themes/default.ts to regenerate
+ * - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
diff --git a/public/sass/_variables.scss.d.ts b/public/sass/_variables.generated.scss.d.ts
similarity index 60%
rename from public/sass/_variables.scss.d.ts
rename to public/sass/_variables.generated.scss.d.ts
index f3de2340419..5b44580a7aa 100644
--- a/public/sass/_variables.scss.d.ts
+++ b/public/sass/_variables.generated.scss.d.ts
@@ -1,6 +1,6 @@
 export interface GrafanaVariables {
-  'panelHorizontalPadding': number;
-  'panelVerticalPadding': number;
+  panelHorizontalPadding: number;
+  panelVerticalPadding: number;
 }
 
 declare const variables: GrafanaVariables;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.generated.scss
similarity index 97%
rename from public/sass/_variables.light.scss
rename to public/sass/_variables.light.generated.scss
index ff9e884a39d..b5ebb883d1e 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -1,3 +1,13 @@
+/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify it!
+ * - Edit grafana-ui/src/themes/light.ts to regenerate
+ * - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+
 // Global values
 // --------------------------------------------------
 
diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss
index f7f5163f36f..4c214194c33 100644
--- a/public/sass/grafana.dark.scss
+++ b/public/sass/grafana.dark.scss
@@ -1,3 +1,3 @@
-@import 'variables';
-@import 'variables.dark';
+@import 'variables.generated';
+@import 'variables.dark.generated';
 @import 'grafana';
diff --git a/public/sass/grafana.light.scss b/public/sass/grafana.light.scss
index d7824edfc5d..fad46b9a206 100644
--- a/public/sass/grafana.light.scss
+++ b/public/sass/grafana.light.scss
@@ -1,3 +1,3 @@
-@import 'variables';
-@import 'variables.light';
+@import 'variables.generated';
+@import 'variables.light.generated';
 @import 'grafana';
diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts
index 5d0434f6f9d..43a5ff193c1 100644
--- a/scripts/cli/generateSassVariableFiles.ts
+++ b/scripts/cli/generateSassVariableFiles.ts
@@ -6,9 +6,9 @@ import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.sc
 import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl';
 import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl';
 
-const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss';
-const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss';
-const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss';
+const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss';
+const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
+const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss';
 
 const writeVariablesFile = async (path: string, data: string) => {
   return new Promise((resolve, reject) => {