diff --git a/packages/grafana-ui/src/themes/dark.js b/packages/grafana-ui/src/themes/dark.ts
similarity index 87%
rename from packages/grafana-ui/src/themes/dark.js
rename to packages/grafana-ui/src/themes/dark.ts
index d5e7e5aacba..deae022f63a 100644
--- a/packages/grafana-ui/src/themes/dark.js
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -1,5 +1,6 @@
-const defaultTheme = require('./default');
-const tinycolor = require('tinycolor2');
+import tinycolor  from 'tinycolor2';
+import defaultTheme from './default';
+import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
 const basicColors = {
   black: '#000000',
@@ -29,9 +30,9 @@ const basicColors = {
   orange: '#eb7b18',
 };
 
-const darkTheme = {
+const darkTheme: GrafanaTheme = {
   ...defaultTheme,
-  type: 'dark',
+  type: GrafanaThemeType.Dark,
   name: 'Grafana Dark',
   colors: {
     ...basicColors,
@@ -65,4 +66,4 @@ const darkTheme = {
   },
 };
 
-module.exports = darkTheme;
+export default darkTheme;
diff --git a/packages/grafana-ui/src/themes/default.js b/packages/grafana-ui/src/themes/default.ts
similarity index 97%
rename from packages/grafana-ui/src/themes/default.js
rename to packages/grafana-ui/src/themes/default.ts
index d95c6ad5689..bf318f526e7 100644
--- a/packages/grafana-ui/src/themes/default.js
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -59,4 +59,4 @@ const theme = {
   }
 };
 
-module.exports = theme;
+export default theme;
diff --git a/packages/grafana-ui/src/themes/index.d.ts b/packages/grafana-ui/src/themes/index.d.ts
deleted file mode 100644
index c16d489d9e0..00000000000
--- a/packages/grafana-ui/src/themes/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { GrafanaTheme } from "../types";
-
-export function getTheme(themeName?: string): GrafanaTheme
-export function mockTheme(themeMock: (name: string) => object): () => void
diff --git a/packages/grafana-ui/src/themes/index.js b/packages/grafana-ui/src/themes/index.js
deleted file mode 100644
index 21dd19cf119..00000000000
--- a/packages/grafana-ui/src/themes/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const darkTheme = require('./dark');
-const lightTheme = require('./light');
-
-let mockedTheme;
-
-let getTheme = name => (mockedTheme && mockedTheme(name)) || (name === 'light' ? lightTheme : darkTheme);
-
-const mockTheme = mock => {
-  mockedTheme = mock;
-  return () => (mockedTheme = null);
-};
-
-module.exports = {
-  getTheme,
-  mockTheme,
-};
diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts
new file mode 100644
index 00000000000..c0d9a4f2d32
--- /dev/null
+++ b/packages/grafana-ui/src/themes/index.ts
@@ -0,0 +1,14 @@
+import darkTheme from './dark';
+import lightTheme from './light';
+import { GrafanaTheme } from '../types/theme';
+
+let themeMock: ((name?: string) => GrafanaTheme) | null;
+
+export let getTheme = (name?: string) => (themeMock && themeMock(name)) || (name === 'light' ? lightTheme : darkTheme);
+
+export const mockTheme = (mock: (name: string) => GrafanaTheme) => {
+  themeMock = mock;
+  return () => {
+    themeMock = null;
+  };
+};
diff --git a/packages/grafana-ui/src/themes/light.js b/packages/grafana-ui/src/themes/light.ts
similarity index 86%
rename from packages/grafana-ui/src/themes/light.js
rename to packages/grafana-ui/src/themes/light.ts
index 8da6190caba..fd1f1d05b95 100644
--- a/packages/grafana-ui/src/themes/light.js
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -1,7 +1,6 @@
-// import { GrafanaThemeType } from "../theme";
-
-const defaultTheme = require('./default');
-const tinycolor = require('tinycolor2');
+import tinycolor from 'tinycolor2';
+import defaultTheme from './default';
+import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
 const basicColors = {
   black: '#000000',
@@ -31,11 +30,11 @@ const basicColors = {
   orange: '#ff7941',
 };
 
-const lightTheme/*: GrafanaThemeType*/ = {
+const lightTheme: GrafanaTheme = {
   ...defaultTheme,
-  type: 'light',
+  type: GrafanaThemeType.Light,
   name: 'Grafana Light',
-  colors:  {
+  colors: {
     ...basicColors,
     variable: basicColors.blue,
     inputBlack: '#09090b',
@@ -65,7 +64,7 @@ const lightTheme/*: GrafanaThemeType*/ = {
     dropdown: basicColors.white,
     scrollbar: basicColors.gray5,
     scrollbar2: basicColors.gray5,
-  }
-}
+  },
+};
 
-module.exports = lightTheme;
+export default lightTheme;
diff --git a/packages/grafana-ui/src/themes/selectThemeVariant.test.ts b/packages/grafana-ui/src/themes/selectThemeVariant.test.ts
index 86e35f515c2..66cb02a2372 100644
--- a/packages/grafana-ui/src/themes/selectThemeVariant.test.ts
+++ b/packages/grafana-ui/src/themes/selectThemeVariant.test.ts
@@ -17,6 +17,7 @@ const darkThemeMock = {
 };
 
 describe('Theme variable variant selector', () => {
+  // @ts-ignore
   const restoreTheme = mockTheme(name => (name === GrafanaThemeType.Light ? lightThemeMock : darkThemeMock));
 
   afterAll(() => {