diff --git a/src/vs/editor/browser/widget/media/editor.css b/src/vs/editor/browser/widget/media/editor.css
index b665708cea7..90a691620e8 100644
--- a/src/vs/editor/browser/widget/media/editor.css
+++ b/src/vs/editor/browser/widget/media/editor.css
@@ -71,9 +71,6 @@
 	 */
 	background: #fffffe;
 }
-.monaco-editor-background {
-	background: #fffffe;
-}
 .monaco-editor.ime-input .inputarea {
 	background: rgba(255, 255, 255, 0.85);
 }
@@ -84,9 +81,6 @@
 	color: #BBB;
 	background: #1E1E1E;
 }
-.monaco-editor.vs-dark .monaco-editor-background {
-	background: #1E1E1E;
-}
 .monaco-editor.vs-dark.ime-input .inputarea {
 	background: rgba(0, 0, 0, 0.65);
 }
@@ -97,9 +91,6 @@
 	color: #fff;
 	background: #000;
 }
-.monaco-editor.hc-black .monaco-editor-background {
-	background: #000;
-}
 
 
 /* -------------------- Misc -------------------- */
@@ -114,12 +105,6 @@
 	top: 0;
 }
 
-/* -------------------- Highlight a range -------------------- */
-
-.monaco-editor.vs		.rangeHighlight { background: rgba(253, 255, 0, 0.2); }
-.monaco-editor.vs-dark	.rangeHighlight { background: rgba(255, 255, 255, 0.044); }
-.monaco-editor.hc-black	.rangeHighlight { border: 1px dotted #f38518; }
-
 /* -------------------- Squigglies -------------------- */
 
 .monaco-editor.vs		.redsquiggly,
diff --git a/src/vs/editor/common/view/editorColorRegistry.ts b/src/vs/editor/common/view/editorColorRegistry.ts
index 723dca1bc61..46b0a81201b 100644
--- a/src/vs/editor/common/view/editorColorRegistry.ts
+++ b/src/vs/editor/common/view/editorColorRegistry.ts
@@ -3,25 +3,14 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import nls = require('vs/nls');
+import { registerColor, editorBackground, highContrastOutline } from 'vs/platform/theme/common/colorRegistry';
+import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { Color } from 'vs/base/common/color';
+
 /**
  * Definition of the editor colors
  */
-
-import nls = require('vs/nls');
-import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
-import { Registry } from 'vs/platform/platform';
-import { ITheme, ICssStyleCollector, Extensions as ThemingExtensions, IThemingRegistry } from 'vs/platform/theme/common/themeService';
-import { Color } from 'vs/base/common/color';
-
-
-let colorReg = <colorRegistry.IColorRegistry>Registry.as(colorRegistry.Extensions.ColorContribution);
-let themingReg = <IThemingRegistry>Registry.as(ThemingExtensions.ThemingContribution);
-themingReg.onThemeChange(applyEditorStyles);
-
-function registerColor(id: string, defaults: colorRegistry.ColorDefaults, description: string): colorRegistry.ColorIdentifier {
-	return colorReg.registerColor(id, defaults, description);
-}
-
 export const editorLineHighlight = registerColor('editorLineHighlight', { dark: null, light: null, hc: null }, nls.localize('lineHighlight', 'Editor line highlight color'));
 export const editorLineHighlightBorder = registerColor('editorLineHighlightBorderCox', { dark: '#282828', light: '#eeeeee', hc: '#f38518' }, nls.localize('lineHighlightBorderBox', 'Editor line highlight border box color'));
 export const editorRangeHighlight = registerColor('editorRangeHighlight', { dark: '#ffffff0b', light: '#fdff0033', hc: null }, nls.localize('rangeHighlight', 'Background color of range highlighted, like by Quick open and Find features'));
@@ -29,34 +18,27 @@ export const editorCursor = registerColor('editorCursor', { dark: '#AEAFAD', lig
 export const editorInvisibles = registerColor('editorInvisibles', { dark: '#e3e4e229', light: '#33333333', hc: '#e3e4e229' }, nls.localize('invisibles', 'Editor invisibles color'));
 export const editorGuide = registerColor('editorGuide', { dark: editorInvisibles, light: editorInvisibles, hc: editorInvisibles }, nls.localize('guide', 'Editor guide color'));
 
-// TBD: split up and place each rule in the owning part
-function applyEditorStyles(theme: ITheme, collector: ICssStyleCollector) {
+// contains all color rules that used to defined in editor/browser/widget/editor.css
+registerThemingParticipant((theme, collector) => {
 
-	let background = theme.getColor(colorRegistry.editorBackground);
+	let background = theme.getColor(editorBackground);
 	if (background) {
-		addBackgroundColorRule(theme, '.monaco-editor-background', background, collector);
-		collector.addRule(`.${theme.selector} .monaco-workbench .monaco-editor-background { background-color: ${background}; }`);
+		collector.addRule(`.monaco-editor.${theme.selector} .monaco-editor-background { background-color: ${background}; }`);
 	}
 
-	let lineHighlight = theme.getColor(editorLineHighlight);
-	if (lineHighlight) {
-		collector.addRule(`.monaco-editor.${theme.selector} .view-overlays .current-line { background-color: ${lineHighlight}; border: none; }`);
-		collector.addRule(`.monaco-editor.${theme.selector} .margin-view-overlays .current-line-margin { background-color: ${lineHighlight}; border: none; }`);
-	} else {
-		// to do editor line border
+	let rangeHighlight = theme.getColor(editorRangeHighlight);
+	if (rangeHighlight) {
+		collector.addRule(`.monaco-editor.${theme.selector} .rangeHighlight { background-color: ${rangeHighlight}; }`);
+	}
+	let outline = theme.getColor(highContrastOutline);
+	if (outline) {
+		collector.addRule(`.monaco-editor.${theme.selector} .rangeHighlight { border: 1px dotted ${outline}; }; }`);
 	}
-	addBackgroundColorRule(theme, '.rangeHighlight', theme.getColor(editorRangeHighlight), collector);
 
 	let invisibles = theme.getColor(editorInvisibles);
 	if (invisibles) {
 		collector.addRule(`.vs-whitespace { color: ${invisibles} !important; }`);
 	}
-}
-
-function addBackgroundColorRule(theme: ITheme, selector: string, color: Color, collector: ICssStyleCollector): void {
-	if (color) {
-		collector.addRule(`.monaco-editor.${theme.selector} ${selector} { background-color: ${color}; }`);
-	}
-}
+});