Editor: Changing grid colors to match theme. See #3920.

I tried using document.stylesheets but there is no event listener for then a element.href is done so it would access the css values too soon.

editor/js/Editor.js

@@ -10,6 +10,8 @@ var Editor = function () {
 
 		// notifications
 
+		themeChanged: new SIGNALS.Signal(),
+
 		transformModeChanged: new SIGNALS.Signal(),
 		snapChanged: new SIGNALS.Signal(),
 		spaceChanged: new SIGNALS.Signal(),
@@ -52,6 +54,14 @@ var Editor = function () {
 
 Editor.prototype = {
 
+	setTheme: function ( value ) {
+
+		document.getElementById( 'theme' ).href = value;
+
+		this.signals.themeChanged.dispatch( value );
+
+	},
+
 	setScene: function ( scene ) {
 
 		this.scene.name = scene.name;

editor/js/Menubar.View.js

@@ -21,14 +21,12 @@ Menubar.View = function ( editor ) {
 
 	// themes
 
-	var themeLink = document.getElementById( 'theme' );
-
 	var option = new UI.Panel();
 	option.setClass( 'option' );
 	option.setTextContent( 'Light theme' );
 	option.onClick( function () {
 
-		themeLink.href = 'css/light.css';
+		editor.setTheme( 'css/light.css' );
 
 	} );
 	options.add( option );
@@ -40,7 +38,7 @@ Menubar.View = function ( editor ) {
 	option.setTextContent( 'Dark theme' );
 	option.onClick( function () {
 
-		themeLink.href = 'css/dark.css';
+		editor.setTheme( 'css/dark.css' );
 
 	} );
 	options.add( option );

editor/js/Viewport.js

@@ -179,6 +179,19 @@ var Viewport = function ( editor ) {
 
 	// signals
 
+	signals.themeChanged.add( function ( value ) {
+
+		switch ( value ) {
+
+			case 'css/light.css': grid.setColors( 0x444444, 0x888888 ); break;
+			case 'css/dark.css': grid.setColors( 0xbbbbbb, 0x888888 ); break;
+
+		}
+
+		render();
+
+	} );
+
 	signals.transformModeChanged.add( function ( mode ) {
 
 		transformControls.setMode( mode );