Add reverse color scheme.

css/dark.css

@@ -0,0 +1,182 @@
+body {
+    background-color: #272823;
+    color: #EEE;
+}
+
+div.headerButton {
+    border-left: 1px solid #EEE;
+}
+
+div#notifyGradient {
+    background-color: #272823;
+    background: -webkit-linear-gradient( rgba(39, 40, 35, 0) 0%, rgba(39, 40, 35, 1) 100% );
+    background: linear-gradient( rgba(39, 40, 35, 0) 0%, rgba(39, 40, 35, 1) 100% );
+    filter: alpha( Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500 );
+}
+
+div#saveNotify {
+    background: #272823;
+}
+
+.eventPanel:before {
+    background-color: #272823;
+}
+
+.eventTitle:after {
+    background-color: #272823;
+}
+
+div.tooltip {
+    background-color: #111;
+    border: 1px solid black;
+    box-shadow: -1px 3px 2px #111;
+}
+
+div#population {
+    background-color: #272823;
+}
+
+div#village:before {
+    background: #272823;
+}
+
+div#village {
+    border: 1px solid #EEE;
+}
+
+div#stores:before {
+    background: #272823;
+}
+
+div#stores {
+    border: 1px solid #EEE;
+}
+
+div#weapons:before {
+    background: #272823;
+}
+
+div#weapons {
+    border: 1px solid #EEE;
+}
+
+div#bagspace {
+    background-color: #272823;
+}
+
+div#outfitting:before {
+    background: #272823;
+}
+
+div#perks {
+    border: 1px solid #EEE;
+}
+
+div#perks:before {
+    background-color: #272823;
+}
+
+div#outfitting {
+    border: 1px solid #EEE;
+}
+
+#bagspace-world {
+    border: 1px solid #EEE;
+}
+
+div.supplyItem {
+    border: 1px solid #EEE;
+}
+
+#backpackTitle {
+    background-color: #272823;
+}
+
+#backpackSpace {
+    background-color: #272823;
+}
+
+#healthCounter {
+    background-color: #272823;
+}
+
+#map {
+    border: 1px solid #EEE;
+}
+
+#map .landmark {
+    color: #EEE;
+}
+
+#dropMenu {
+    background: none repeat scroll 0 0 #272823;
+    box-shadow: -1px 3px 2px #111;
+}
+
+div.button {
+    border: 1px solid #EEE;
+}
+
+div.button.disabled, div.button.disabled:hover {
+    border-color: #444;
+    color: #444;
+}
+
+
+.upBtn:after, .upManyBtn:after {
+    border-color: transparent transparent #272823;
+}
+
+.upBtn:before, .upManyBtn:before {
+    border-color: transparent transparent #EEE;
+}
+
+.upBtn.disabled:before, .upManyBtn.disabled:before {
+    border-color: transparent transparent #555;
+}
+
+.dnBtn:after, .dnManyBtn:after {
+    border-color: #272823 transparent transparent;
+}
+
+.dnBtn:before, .dnManyBtn:before {
+    border-color: #EEE transparent transparent;
+}
+
+.dnBtn.disabled:before, .dnManyBtn.disabled:before {
+    border-color: #555 transparent transparent;
+}
+
+body.noMask .eventTitle {
+    background-color: #EEE;
+    color: #272823;
+}
+
+body.noMask .eventTitle:after {
+    background-color: #EEE;
+}
+
+body.noMask .eventPanel {
+    background-color: #EEE;
+}
+
+body.noMask #description {
+    color: #272823;
+}
+
+body.noMask #buttons > .button {
+border: 1px solid #272823;
+color: #272823;
+}
+
+#stars > div, #starsBack > div {
+    color: black;
+}
+
+.endGame {
+    color:#272823;
+}
+
+#theEnd {
+    color: #272823;
+}

script/engine.js

@@ -98,6 +98,12 @@ var Engine = {
 			.addClass('menu')
 			.appendTo('body');
 
+		 $('<span>')
+			.addClass('lightsOff menuBtn')
+			.text('lights off.')
+			.click(Engine.turnLightsOff)
+			.appendTo(menu);
+		
 		$('<span>')
 			.addClass('menuBtn')
 			.text('restart.')
@@ -341,6 +347,44 @@ var Engine = {
 		}, {width: '400px'});
 	},
 
+ 	findStylesheet: function(title) {
+ 	  	for(var i=0; i<document.styleSheets.length; i++) {
+ 	      	var sheet = document.styleSheets[i];
+ 	      	if(sheet.title == title) {
+ 	        	return sheet;
+ 	      	}
+ 	    }
+ 	    return null;
+ 	},
+
+ 	isLightsOff: function() {
+ 		var darkCss = Engine.findStylesheet('darkenLights');
+ 		if (darkCss != null) {
+ 			if (darkCss.disabled)
+ 				return false;
+ 			return true;
+ 		}
+ 		return false;
+ 	},
+ 	
+ 	turnLightsOff: function() {
+ 	  	var darkCss = Engine.findStylesheet('darkenLights');
+ 	    if (darkCss == null) {
+ 	      	$('head').append('<link rel="stylesheet" href="css/dark.css" type="text/css" title="darkenLights" />');
+ 	      	Engine.turnLightsOff;
+ 	      	$('.lightsOff').text('lights on.');
+ 	    }
+ 	  	else if (darkCss.disabled) {
+ 	    	darkCss.disabled = false;
+ 	    	$('.lightsOff').text('lights on.');
+ 	  	}
+ 	   	else {
+ 	     	$("#darkenLights").attr("disabled", "disabled");
+ 	     	darkCss.disabled = true;
+ 	     	$('.lightsOff').text('lights off.');
+ 	   	}
+ 	},
+	
 	// Gets a guid
 	getGuid: function() {
 		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {

script/space.js

@@ -226,8 +226,17 @@ var Space = {
 	},
 	
 	startAscent: function() {
-		$('body').addClass('noMask').css({backgroundColor: '#FFFFFF'}).animate({
+		if (Engine.isLightsOff()) {
-			backgroundColor: '#000000'
+			var body_color = '#272823';
+			var to_color = '#EEEEEE';
+		}
+		else {
+			var body_color = '#FFFFFF';
+			var to_color = '#000000';
+		}
+
+		$('body').addClass('noMask').css({backgroundColor: body_color}).animate({
+			backgroundColor: to_color
 		}, {
 			duration: Space.FTB_SPEED, 
 			easing: 'linear',
@@ -251,7 +260,10 @@ var Space = {
 		}, 1000);
 		
 		Space._panelTimeout = setTimeout(function() {
-			$('#spacePanel, .menu').animate({color: 'white'}, 500, 'linear');
+			if (Engine.isLightsOff())
+				$('#spacePanel, .menu').animate({color: '#272823'}, 500, 'linear');
+			else
+				$('#spacePanel, .menu').animate({color: 'white'}, 500, 'linear');
 		}, Space.FTB_SPEED / 2);
 		
 		Space.createAsteroid();
@@ -312,10 +324,13 @@ var Space = {
 		clearInterval(Space._timer);
 		clearInterval(Space._shipTimer);
 		clearTimeout(Space._panelTimeout);
-		
+		if (Engine.isLightsOff())
+			var body_color = '#272823';
+		else
+			var body_color = '#FFFFFF';
 		// Craaaaash!
 		$('body').removeClass('noMask').stop().animate({
-			backgroundColor: '#FFFFFF'
+			backgroundColor: body_color
 		}, {
 			duration: 300, 
 			progress: function() {
@@ -329,9 +344,12 @@ var Space = {
 				Space.starsBack.remove();
 				Space.stars = Space.starsBack = null;
 				$('#starsContainer').remove();
+				$('body').attr('style', '');
+				$('#notifyGradient').attr('style', '');	
+				$('#spacePanel').attr('style', '');			
 			}
 		});
-		$('#spacePanel, .menu').animate({color: 'black'}, 300, 'linear');
+		$('.menu').animate({color: '#666'}, 300, 'linear');
 		$('#outerSlider').animate({top: '0px'}, 300, 'linear');
 		Engine.activeModule = Ship;
 		Ship.onArrival();
@@ -374,9 +392,13 @@ var Space = {
 					$('#header').empty();
 					setTimeout(function() {
 						$('body').stop();
+						if (Engine.isLightsOff())
+							var container_color = '#EEE';
+						else
+							var container_color = '#000';
 						$('#starsContainer').animate({
 							opacity: 0,
-							'background-color': '#000'
+							'background-color': container_color
 						}, {
 							duration: 2000, 
 							progress: function() {