diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts
index ef4dde50a7c..7fadf36ccd1 100644
--- a/public/app/core/components/code_editor/code_editor.ts
+++ b/public/app/core/components/code_editor/code_editor.ts
@@ -29,10 +29,12 @@
 ///<reference path="../../../headers/common.d.ts" />
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
+import config from 'app/core/config';
 import ace from 'ace';
 
 const ACE_SRC_BASE = "public/vendor/npm/ace-builds/src-noconflict/";
-const DEFAULT_THEME = "grafana-dark";
+const DEFAULT_THEME_DARK = "grafana-dark";
+const DEFAULT_THEME_LIGHT = "textmate";
 const DEFAULT_MODE = "text";
 const DEFAULT_MAX_LINES = 10;
 const DEFAULT_TAB_SIZE = 2;
@@ -66,11 +68,14 @@ setModuleUrl("snippets", "text");
 let editorTemplate = `<div></div>`;
 
 function link(scope, elem, attrs) {
+  let lightTheme = config.bootData.user.lightTheme;
+  let default_theme = lightTheme ? DEFAULT_THEME_LIGHT : DEFAULT_THEME_DARK;
+
   // Options
   let langMode = attrs.mode || DEFAULT_MODE;
   let maxLines = attrs.maxLines || DEFAULT_MAX_LINES;
   let showGutter = attrs.showGutter !== undefined;
-  let theme = attrs.theme || DEFAULT_THEME;
+  let theme = attrs.theme || default_theme;
   let tabSize = attrs.tabSize || DEFAULT_TAB_SIZE;
   let behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIOURS;
 
@@ -158,7 +163,20 @@ function link(scope, elem, attrs) {
 
   function setThemeMode(theme) {
     setModuleUrl("theme", theme);
-    codeEditor.setTheme(`ace/theme/${theme}`);
+    let themeModule = `ace/theme/${theme}`;
+    ace.config.loadModule(themeModule, (theme_module) => {
+      // Check is theme light or dark and fix if needed
+      let lightTheme = config.bootData.user.lightTheme;
+      let fixedTheme = theme;
+      if (lightTheme && theme_module.isDark) {
+        fixedTheme = DEFAULT_THEME_LIGHT;
+      } else if (!lightTheme && !theme_module.isDark) {
+        fixedTheme = DEFAULT_THEME_DARK;
+      }
+      setModuleUrl("theme", fixedTheme);
+      themeModule = `ace/theme/${fixedTheme}`;
+      codeEditor.setTheme(themeModule);
+    });
   }
 
   function setEditorContent(value) {