An alternate approach to specifying three.js editor themes

themeDefinitions.patch

diff --git editor/index.html editor/index.html
index ea980e1..bb3d1f1 100644
--- editor/index.html
+++ editor/index.html
@@ -75,9 +75,28 @@
     		window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
+			var themes = [{
+				name: 'Light',
+				href: 'css/light.css',
+				select: function ( style ) {
+
+					style.grid.setColors( new THREE.Color( 0x444444 ), new THREE.Color( 0x888888 ) );
+
+				}
+			},
+			{
+				name: 'Dark',
+				href: 'css/dark.css',
+				select: function ( style ) {
+
+					style.grid.setColors( new THREE.Color( 0xbbffbb ), new THREE.Color( 0x888888 ) );
+
+				}
+			}];
+
 			var editor = new Editor();
 
-			var viewport = new Viewport( editor ).setId( 'viewport' );
+			var viewport = new Viewport( editor, themes ).setId( 'viewport' );
 			document.body.appendChild( viewport.dom );
 
 			var toolbar = new Toolbar( editor ).setId( 'toolbar' )
@@ -86,7 +105,7 @@
 			var menubar = new Menubar( editor ).setId( 'menubar' );
 			document.body.appendChild( menubar.dom );
 
-			var sidebar = new Sidebar( editor ).setId( 'sidebar' );
+			var sidebar = new Sidebar( editor, themes ).setId( 'sidebar' );
 			document.body.appendChild( sidebar.dom );
 
 			//
diff --git editor/js/Sidebar.Renderer.js editor/js/Sidebar.Renderer.js
index f48dd9a..92beb61 100644
--- editor/js/Sidebar.Renderer.js
+++ editor/js/Sidebar.Renderer.js
@@ -1,4 +1,4 @@
-Sidebar.Renderer = function ( editor ) {
+Sidebar.Renderer = function ( editor, themes ) {
 
 	var signals = editor.signals;
 
@@ -43,15 +43,11 @@ Sidebar.Renderer = function ( editor ) {
 	var themeRow = new UI.Panel();
 	var originalColor;
 
-	var theme = new UI.Select().setOptions( [ 'Light', 'Dark' ] ).setWidth( '150px ').setColor( '#444' ).setFontSize( '12px ');
-	theme.onChange( function () {
-
-		switch ( this.value ) {
 
-			case '0': themeLink.href = 'css/light.css'; break;
-			case '1': themeLink.href = 'css/dark.css'; break;
+	var theme = new UI.Select().setOptions( themes.map(function( t ) { return t.name}) ).setWidth( '150px ').setColor( '#444' ).setFontSize( '12px ');
+	theme.onChange( function () {
 
-		}
+		themeLink.href = themes[ this.value ].href;
 
 		signals.themeChanged.dispatch( { selectedIndex: this.value } );
 
diff --git editor/js/Sidebar.js editor/js/Sidebar.js
index 054fa6c..baa2da3 100644
--- editor/js/Sidebar.js
+++ editor/js/Sidebar.js
@@ -1,8 +1,8 @@
-var Sidebar = function ( editor ) {
+var Sidebar = function ( editor, themes ) {
 
 	var container = new UI.Panel();
 
-	container.add( new Sidebar.Renderer( editor ) );
+	container.add( new Sidebar.Renderer( editor, themes ) );
 	container.add( new Sidebar.Scene( editor ) );
 	container.add( new Sidebar.Object3D( editor ) );
 	container.add( new Sidebar.Geometry( editor ) );
diff --git editor/js/Viewport.js editor/js/Viewport.js
index e748e49..31957cf 100644
--- editor/js/Viewport.js
+++ editor/js/Viewport.js
@@ -1,4 +1,4 @@
-var Viewport = function ( editor ) {
+var Viewport = function ( editor, themes ) {
 
 	var signals = editor.signals;
 
@@ -407,14 +407,9 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	signals.themeChanged.add( function ( theme ) {
+	signals.themeChanged.add( function ( info ) {
 
-		switch ( theme.selectedIndex ) {
-
-			case '0': grid.setColors( new THREE.Color( 0x444444 ), new THREE.Color( 0x888888 ) ); break;
-			case '1': grid.setColors( new THREE.Color( 0xbbbbbb ), new THREE.Color( 0x888888 )); break;
-
-		}
+		themes[ info.selectedIndex ].select( { grid: grid } );
 
 		// Force refresh
 		render();
@@ -543,6 +538,9 @@ var Viewport = function ( editor ) {
 
 	}
 
+	// Fire the themeChanged code to ensure user supplied default values take hold
+	signals.themeChanged.dispatch( { selectedIndex: '0' } );
+
 	return container;
 
 }