Merge pull request #932 from BenjaminVanRyseghem/dark_theme

Dark theme

css/helios-niflheim.css

@@ -0,0 +1,374 @@
+body[id="helios"].niflheim {
+  background: #eeeeee url('/images/squared_metal-dark.png') repeat;
+  /*		.navbar-fixed-top ul {
+		  width: 100%;
+		}*/
+
+  /*.tool_container .pane .nav-pills i.package {
+			background-image: url('../images/package.png');
+		}*/
+
+}
+body[id="helios"].niflheim .btn-group > .dropdown-menu {
+  background-color: #666;
+  border-color: #888;
+  padding: 2px 8px;
+}
+body[id="helios"].niflheim .btn-group > .dropdown-menu a {
+  /*			position: absolute;*/
+
+  height: 100%;
+  /*			width: 100%;*/
+
+}
+body[id="helios"].niflheim .btn-group > .dropdown-menu a {
+  color: #fffffb;
+}
+body[id="helios"].niflheim .navbar-fixed-top i.close {
+  background-image: url('../images/close-dark.png');
+}
+body[id="helios"].niflheim .navbar-fixed-top .navbar-inner {
+  border-bottom: 1px solid #222;
+  border-top: 1px solid #222;
+  box-shadow: inset 0px 1px 0px #777;
+  background: #4d5052;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+body[id="helios"].niflheim .focused ::-webkit-scrollbar-thumb {
+  background-color: #4c4c4c;
+}
+body[id="helios"].niflheim .focused ::-webkit-scrollbar-thumb:hover {
+  background-color: #3a3a3a;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-thumb {
+  background-color: #585858;
+  border: 3px solid transparent;
+  border-radius: 9px;
+  background-clip: content-box;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-thumb:hover {
+  background-color: #707070;
+}
+body[id="helios"].niflheim .new_tab a b {
+  border-top: 4px solid #a7a7a7;
+}
+body[id="helios"].niflheim .navbar .nav > li > a {
+  border-right: 1px solid #222;
+  box-shadow: none;
+}
+body[id="helios"].niflheim .navbar .nav > li > a:hover {
+  color: #f00;
+  background-image: linear-gradient(top, #666666, #454648);
+  background-image: -webkit-linear-gradient(top, #666666, #454648);
+  background-image: -moz-linear-gradient(top, #666666, #454648);
+  background-image: -o-linear-gradient(top, #666666, #454648);
+}
+body[id="helios"].niflheim .navbar .nav > .active > a,
+body[id="helios"].niflheim .navbar .nav > .active > a:hover,
+body[id="helios"].niflheim .navbar .nav > .active > a:focus,
+body[id="helios"].niflheim .navbar .nav .ui-sortable-helper a {
+  color: #ddd;
+  background-image: linear-gradient(top, #666666, #454648);
+  background-image: -webkit-linear-gradient(top, #666666, #454648);
+  background-image: -moz-linear-gradient(top, #666666, #454648);
+  background-image: -o-linear-gradient(top, #666666, #454648);
+  text-shadow: none;
+  box-shadow: inset -1px 0px 1px -1px #eeeeee, inset 1px 1px 1px -1px #eeeeee;
+  border-right: 1px solid #222;
+}
+body[id="helios"].niflheim .navbar-fixed-top li.inactive {
+  opacity: 0.6;
+  background: #4d5052;
+  box-shadow: none;
+}
+body[id="helios"].niflheim .navbar-fixed-top li.inactive span {
+  text-shadow: none;
+  color: #ccc;
+}
+body[id="helios"].niflheim .nav-pills.nav-stacked > li > a {
+  color: #b8c4cf;
+}
+body[id="helios"].niflheim .focused .nav-pills.nav-stacked > li > a {
+  color: #ddd;
+}
+body[id="helios"].niflheim .nav-pills > .active > a {
+  background-color: #222B3C;
+  color: #fffffb !important;
+}
+body[id="helios"].niflheim .focused .nav-pills {
+  background-color: #585858;
+}
+body[id="helios"].niflheim .focused .nav-pills > .active > a,
+body[id="helios"].niflheim .nav-pills > .active > a:hover,
+body[id="helios"].niflheim .dropdown-menu li > a:hover,
+body[id="helios"].niflheim .dropdown-menu li > a:focus,
+body[id="helios"].niflheim .dropdown-submenu:hover > a,
+body[id="helios"].niflheim .dropdown-menu .active > a,
+body[id="helios"].niflheim .dropdown-menu .active > a:hover,
+body[id="helios"].niflheim .CodeMirror-hint-active {
+  background: #305f9f;
+}
+body[id="helios"].niflheim .CodeMirror {
+  position: initial;
+  height: 100%;
+  width: initial;
+}
+body[id="helios"].niflheim .welcome {
+  color: #fffffb;
+  text-shadow: none;
+}
+body[id="helios"].niflheim [class^="icon-"],
+body[id="helios"].niflheim body[id="helios"][class*=" icon-"] {
+  opacity: 0.68;
+  background-image: url("../bower_components/bootstrap/img/glyphicons-halflings-white.png");
+}
+body[id="helios"].niflheim .welcome h2 {
+  text-align: center;
+  /*			color: #666;*/
+
+}
+body[id="helios"].niflheim .welcome button {
+  /*			background: #eee;*/
+
+  margin: 10px;
+  padding: 20px;
+  height: auto;
+  width: 150px;
+}
+body[id="helios"].niflheim .tool_container .panes .pane {
+  background: #444;
+}
+body[id="helios"].niflheim .tool_container .splitter.vertical {
+  border-left: 1px solid #525252;
+}
+body[id="helios"].niflheim .tool_container .splitter.horizontal {
+  border-top: 1px solid #666;
+}
+body[id="helios"].niflheim .tool_container .list-label {
+  border-bottom: 1px solid #525252;
+  background-image: linear-gradient(top, #585858, #323232);
+  background-image: -webkit-linear-gradient(top, #585858, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+  color: #ccc;
+  font-weight: normal;
+  text-shadow: none;
+}
+body[id="helios"].niflheim .transcript-container .list-label {
+  border-top: none;
+}
+body[id="helios"].niflheim .tool_container .pane_actions,
+body[id="helios"].niflheim .tool_container .buttons_bar {
+  border-top: 1px solid #222;
+  background-image: linear-gradient(top, #585858, #323232);
+  background-image: -webkit-linear-gradient(top, #585858, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+}
+body[id="helios"].niflheim .tool_container .panes .pane .pane_actions label {
+  test-shadow: none;
+  color: #d3d3d3;
+}
+body[id="helios"].niflheim .tool_container .panes .pane .pane_actions .btn {
+  border: 1px;
+  text-shadow: none;
+  margin-top: -1px;
+  color: #929292;
+}
+body[id="helios"].niflheim .tool_container .panes .pane .pane_actions .btn-group .btn.active {
+  color: #d3d3d3;
+  text-shadow: none;
+  box-shadow: inset 0px 0px 2px 0px #323232;
+  border-radius: 4px;
+  background: #666;
+  background-image: linear-gradient(top, #454545, #252525);
+  background-image: -webkit-linear-gradient(top, #454545, #252525);
+  background-image: -moz-linear-gradient(top, #454545, #252525);
+  background-image: -o-linear-gradient(top, #454545, #252525);
+}
+body[id="helios"].niflheim .tool_container .panes .pane .class_side .nav-pills {
+  background: #38404a;
+}
+body[id="helios"].niflheim .key_helper {
+  background: #444;
+  box-shadow: 0 0 80px 2px #222;
+  border: 1px solid #777;
+}
+body[id="helios"].niflheim .key_helper .command {
+  color: #ccc;
+}
+body[id="helios"].niflheim .key_helper .command strong {
+  display: inline-block;
+  min-width: 1.4em;
+  text-align: center;
+  background-color: #eee;
+  color: #2b658b;
+}
+body[id="helios"].niflheim .key_helper #binding-helper-main {
+  background: #444;
+}
+body[id="helios"].niflheim .key_helper .action {
+  vertical-align: middle;
+}
+body[id="helios"].niflheim .key_helper .selected {
+  background-image: linear-gradient(top, #484848, #323232);
+  background-image: -webkit-linear-gradient(top, #484848, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+  text-shadow: none;
+  border-bottom: 1px solid #585858;
+  color: #cccccc;
+}
+body[id="helios"].niflheim .growl {
+  background-image: -webkit-linear-gradient(#505050, #3c3c3c);
+  background-image: -moz-linear-gradient(#505050, #3c3c3c);
+  background-image: -o-linear-gradient(#505050, #3c3c3c);
+  background-image: linear-gradient(#888888, #666666);
+  box-shadow: 0 0 3px #777;
+  color: #ccc;
+  text-shadow: none;
+}
+body[id="helios"].niflheim .button {
+  color: #d3d3d3;
+  border-radius: 3px !important;
+  border: 1px solid #383838;
+  background-image: linear-gradient(top, #454545, #252525);
+  background-image: -webkit-linear-gradient(top, #454545, #252525);
+  background-image: -moz-linear-gradient(top, #454545, #252525);
+  background-image: -o-linear-gradient(top, #454545, #252525);
+}
+body[id="helios"].niflheim .button.default {
+  color: #d3d3d3;
+  border: 1px solid #585858;
+  background-image: linear-gradient(top, #549ceb, #12374f);
+  background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+  background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+  background-image: -o-linear-gradient(top, #549ceb, #12374f);
+}
+body[id="helios"].niflheim .dialog .button {
+  color: #444;
+  border-radius: 3px !important;
+  background: #ccc;
+  border: 1px solid #9B9B9B;
+  height: 20px;
+  border-radius: 5px;
+  min-width: 68px;
+  padding: 0 10px;
+  text-align: center;
+  margin: 0;
+  margin-left: 10px;
+  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
+}
+body[id="helios"].niflheim .dialog .button:hover {
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+}
+body[id="helios"].niflheim .dialog .button.default {
+  border-top: 1px solid #535273;
+  border: 1px solid #4F4D67;
+  border-bottom: 1px solid #4B4B58;
+  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
+  -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+  box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+}
+body[id="helios"].niflheim .dialog .button.default:hover {
+  cursor: pointer;
+  color: #d3d3d3;
+  border: 1px solid #585858;
+  background-image: linear-gradient(top, #549ceb, #12374f);
+  background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+  background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+  background-image: -o-linear-gradient(top, #549ceb, #12374f);
+}
+body[id="helios"].niflheim .button:hover {
+  cursor: pointer;
+  border: 1px solid #444;
+  background-image: linear-gradient(top, #353535, #151515);
+  background-image: -webkit-linear-gradient(top, #353535, #151515);
+  background-image: -moz-linear-gradient(top, #353535, #151515);
+  background-image: -o-linear-gradient(top, #353535, #151515);
+}
+body[id="helios"].niflheim .button.default:hover {
+  cursor: pointer;
+  border: 1px solid #4F4D67;
+  border-top: 1px solid #535273;
+  border-bottom: 1px solid #4B4B58;
+  color: #0a0000;
+  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
+  -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+  box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+}
+body[id="helios"].niflheim .doc {
+  background: transparent;
+  color: #ccc;
+}
+body[id="helios"].niflheim .doc code {
+  color: #d46e69;
+  background-color: #626262;
+  border-color: #888;
+}
+body[id="helios"].niflheim .doc .button {
+  background-image: linear-gradient(top, #444444, #1d1d1d);
+  background-image: -webkit-linear-gradient(top, #444444, #1d1d1d);
+  background-image: -moz-linear-gradient(top, #444444, #1d1d1d);
+  background-image: -o-linear-gradient(top, #444444, #1d1d1d);
+}
+body[id="helios"].niflheim .doc .button.default {
+  background-image: linear-gradient(top, #585858, #323232);
+  background-image: -webkit-linear-gradient(top, #585858, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+}
+body[id="helios"].niflheim .doc .button.default:hover {
+  color: #ccc;
+  background-image: linear-gradient(top, #454545, #252525);
+  background-image: -webkit-linear-gradient(top, #454545, #252525);
+  background-image: -moz-linear-gradient(top, #454545, #252525);
+  background-image: -o-linear-gradient(top, #454545, #252525);
+}
+body[id="helios"].niflheim .doc .markdown > pre {
+  background-color: #666;
+  border: 1px solid #383838;
+}
+body[id="helios"].niflheim .doc .inheritance > a {
+  color: #4098ed;
+}
+body[id="helios"].niflheim .doc .inheritance > a:hover {
+  color: #4098ed;
+}
+body[id="helios"].niflheim .transcript textarea {
+  background: #444;
+  color: #b8c4cf;
+}
+body[id="helios"].niflheim .hl_debugger .list-label {
+  border-top: 1px solid transparent;
+}

css/helios-niflheim.less

@@ -0,0 +1,446 @@
+body[id="helios"] {
+	&.niflheim {
+		background: #eeeeee url('/images/squared_metal-dark.png') repeat;
+
+		.btn-group > .dropdown-menu {
+			background-color: #666;
+			border-color: #888;
+			padding: 2px 8px;
+		}
+	
+		.btn-group > .dropdown-menu a {
+			// todo: remove
+/*			position: absolute;*/
+		
+			height: 100%;
+		
+			// todo: remove
+/*			width: 100%;*/
+		}
+	
+		.btn-group > .dropdown-menu a {
+		  color: #fffffb;
+		}
+	
+		// todo: check if it can be removed
+/*		.navbar-fixed-top ul {
+		  width: 100%;
+		}*/
+
+		.navbar-fixed-top i.close {
+		  background-image: url('../images/close-dark.png');
+		}
+
+		.navbar-fixed-top .navbar-inner {
+		  border-bottom: 1px solid #222;
+		  border-top: 1px solid #222;
+		  box-shadow: inset 0px 1px 0px #777;
+		  background: #4d5052;
+		}
+
+		::-webkit-scrollbar {  
+		  width: 14px;
+		  height: 14px;
+		}  
+
+		::-webkit-scrollbar-corner {
+		  background-color: transparent;
+		}
+
+		::-webkit-scrollbar-track {  
+		  background-color: transparent;
+		}  
+
+		.focused ::-webkit-scrollbar-thumb {
+		  background-color: #4c4c4c;
+		}
+
+		.focused ::-webkit-scrollbar-thumb:hover {
+		  background-color: #3a3a3a;
+		}
+
+		::-webkit-scrollbar-thumb {
+		  background-color: #585858;
+		  border: 3px solid transparent;
+		  border-radius: 9px;
+		  background-clip: content-box;
+		}  
+
+		::-webkit-scrollbar-thumb:hover {  
+		  background-color: #707070;
+		}
+
+		.new_tab  a  b {
+		  border-top: 4px solid #a7a7a7;
+		}
+
+		.navbar .nav > li > a {
+		  border-right: 1px solid #222;
+		  box-shadow: none;
+		}
+	
+		.navbar .nav > li > a:hover {
+		  color: #f00;
+		  background-image: linear-gradient(top, #666, #454648);
+		  background-image: -webkit-linear-gradient(top, #666, #454648);
+		  background-image: -moz-linear-gradient(top, #666, #454648);
+		  background-image: -o-linear-gradient(top, #666, #454648);
+		}
+	
+		.navbar .nav > .active > a,
+		.navbar .nav > .active > a:hover,
+		.navbar .nav > .active > a:focus,
+		.navbar .nav .ui-sortable-helper a {
+		  color: #ddd;
+		  background-image: linear-gradient(top, #666, #454648);
+		  background-image: -webkit-linear-gradient(top, #666, #454648);
+		  background-image: -moz-linear-gradient(top, #666, #454648);
+		  background-image: -o-linear-gradient(top, #666, #454648);
+		  text-shadow: none;
+		  box-shadow: inset -1px 0px 1px -1px #eee, inset 1px 1px 1px -1px #eee;
+		  border-right: 1px solid #222;
+		}
+	
+		.navbar-fixed-top li.inactive{
+		  opacity: 0.6;
+		  background: #4d5052;
+		  box-shadow: none;
+		}
+
+		.navbar-fixed-top li.inactive span{
+		  text-shadow: none;
+		  color: #ccc;
+		}
+	
+		.nav-pills.nav-stacked > li > a {
+		  color: #b8c4cf;
+		}
+
+		.focused .nav-pills.nav-stacked > li > a {
+		  color: #ddd;
+		}
+	
+		.nav-pills > .active > a {
+		  background-color: #222B3C;
+		  color: #fffffb !important;
+		}
+		.focused .nav-pills {
+		  background-color: #585858;
+		}
+	
+		.focused .nav-pills > .active > a,
+		.nav-pills > .active > a:hover,
+		.dropdown-menu li > a:hover,
+		.dropdown-menu li > a:focus,
+		.dropdown-submenu:hover > a,
+		.dropdown-menu .active > a,
+		.dropdown-menu .active > a:hover,
+		.CodeMirror-hint-active {
+			background: #305f9f;
+		}
+		
+		.CodeMirror {
+			position: initial;
+			height: 100%;
+			width: initial;
+		}
+	
+		.welcome {
+			color: #fffffb;
+			text-shadow: none;
+		}
+
+		[class^="icon-"], body[id="helios"][class*=" icon-"]{
+			opacity: 0.68;
+			background-image: url("../bower_components/bootstrap/img/glyphicons-halflings-white.png");
+		}
+
+		.welcome h2 {
+			text-align: center;
+	  
+			// todo: remove
+/*			color: #666;*/
+		}
+	
+		.welcome button {
+			// todo: remove 
+/*			background: #eee;*/
+
+			margin: 10px;
+			padding: 20px;
+			height: auto;
+			width: 150px;
+		}
+	
+		.tool_container .panes .pane {
+			background: #444;
+		}
+	
+		.tool_container .splitter.vertical {
+			border-left: 1px solid #525252;
+		}
+	
+		.tool_container .splitter.horizontal {
+			border-top: 1px solid #666;
+		}
+	
+		//todo: remove
+		/*.tool_container .pane .nav-pills i.package {
+			background-image: url('../images/package.png');
+		}*/
+
+		.tool_container .list-label {
+			border-bottom: 1px solid #525252;
+			background-image: linear-gradient(top, #585858, #323232);
+			background-image: -webkit-linear-gradient(top, #585858, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+			color: #ccc;
+		
+			font-weight: normal;
+			text-shadow: none;
+		}
+	
+		.transcript-container .list-label {
+		  border-top: none;
+		}
+	
+		.tool_container .pane_actions,
+		.tool_container .buttons_bar {
+			border-top: 1px solid #222;
+			background-image: linear-gradient(top, #585858, #323232);
+			background-image: -webkit-linear-gradient(top, #585858, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+		}
+
+		.tool_container .panes .pane .pane_actions label {
+			test-shadow: none;
+			color: #d3d3d3;
+		}
+	
+		.tool_container .panes .pane .pane_actions .btn {
+		  border: 1px;
+		  text-shadow: none;
+		  margin-top: -1px;
+		  color: #929292
+		}
+
+		.tool_container .panes .pane .pane_actions .btn-group .btn.active {
+			color: #d3d3d3;
+			text-shadow: none;
+			box-shadow: inset 0px 0px 2px 0px #323232;
+			border-radius: 4px;
+			background: #666;
+			background-image: linear-gradient(top, #454545, #252525);
+			background-image: -webkit-linear-gradient(top, #454545, #252525);
+			background-image: -moz-linear-gradient(top, #454545, #252525);
+			background-image: -o-linear-gradient(top, #454545, #252525);
+		}
+	
+		.tool_container .panes .pane .class_side .nav-pills {
+			background: #38404a;
+		}
+
+		.key_helper {
+			background: #444;
+			box-shadow: 0 0 80px 2px #222;
+			border: 1px solid #777;
+		}
+	
+		.key_helper .command {
+		  color: #ccc;
+		}
+
+		.key_helper .command strong {
+			display: inline-block;
+			min-width: 1.4em;
+			text-align: center;
+			background-color: #eee;
+			color: #2b658b;
+		}
+	
+		.key_helper #binding-helper-main {
+			background: #444;
+		}
+
+		.key_helper .action {
+			vertical-align: middle;
+		}
+	
+		.key_helper .selected {
+			background-image: linear-gradient(top, #484848, #323232);
+			background-image: -webkit-linear-gradient(top, #484848, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+			text-shadow: none;
+			border-bottom: 1px solid #585858;
+			color: #ccc
+		}
+	
+		.growl {
+			background-image: -webkit-linear-gradient(#505050, #3c3c3c);
+			background-image: -moz-linear-gradient(#505050, #3c3c3c);
+			background-image: -o-linear-gradient(#505050, #3c3c3c);
+			background-image: linear-gradient(#888, #666);
+			box-shadow: 0 0 3px #777;
+			color: #ccc;
+			text-shadow: none;
+		}
+	
+		.button {
+			color: #d3d3d3;
+			border-radius: 3px !important;
+			border: 1px solid #383838;
+			background-image: linear-gradient(top, #454545, #252525);
+			background-image: -webkit-linear-gradient(top, #454545, #252525);
+			background-image: -moz-linear-gradient(top, #454545, #252525);
+			background-image: -o-linear-gradient(top, #454545, #252525);
+		}
+
+		.button.default {
+			color: #d3d3d3;
+			border: 1px solid #585858;
+			background-image: linear-gradient(top, #549ceb, #12374f);
+			background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+			background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+			background-image: -o-linear-gradient(top, #549ceb, #12374f);
+		}
+
+		.dialog .button {
+			color: #444;
+			border-radius: 3px !important;
+			background: #ccc;
+			border: 1px solid #9B9B9B;
+			height: 20px;
+			border-radius: 5px;
+			min-width: 68px;
+			padding: 0 10px;
+			text-align: center;
+			margin: 0;
+			margin-left: 10px;
+			background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			font: 13px "Lucida Grande", Lucida, Verdana, sans-serif; 
+		}
+	
+		.dialog .button:hover {
+			cursor: pointer;
+			border: 1px solid rgba(0, 0, 0, 0.6);
+			background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+			background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+		}
+
+		.dialog .button.default {
+		   border-top: 1px solid #535273;
+		  border: 1px solid #4F4D67;
+		  border-bottom: 1px solid #4B4B58;
+		  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+		  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+		  background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+		  background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+		  background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+		  -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
+		  -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+		  box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+		}
+
+		.dialog .button.default:hover {
+			cursor: pointer;
+			color: #d3d3d3;
+			border: 1px solid #585858;
+			background-image: linear-gradient(top, #549ceb, #12374f);
+			background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+			background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+			background-image: -o-linear-gradient(top, #549ceb, #12374f);
+		}
+
+		.button:hover {
+			cursor: pointer;
+			border: 1px solid #444;
+			background-image: linear-gradient(top, #353535, #151515);
+			background-image: -webkit-linear-gradient(top, #353535, #151515);
+			background-image: -moz-linear-gradient(top, #353535, #151515);
+			background-image: -o-linear-gradient(top, #353535, #151515);
+		}
+
+		.button.default:hover {
+			cursor: pointer;
+			border: 1px solid #4F4D67;
+			border-top: 1px solid #535273;
+			border-bottom: 1px solid #4B4B58;
+			color: #0a0000;
+
+			background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			-moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
+			-webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+			box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+		}
+	
+		.doc {
+			background: transparent;
+			color: #ccc;
+		}
+
+		.doc code {
+			color: #d46e69;
+			background-color: #626262;
+			border-color: #888;
+  
+		}
+	
+		.doc .button {
+			background-image: linear-gradient(top, #444, #1d1d1d);
+			background-image: -webkit-linear-gradient(top, #444, #1d1d1d);
+			background-image: -moz-linear-gradient(top, #444, #1d1d1d);
+			background-image: -o-linear-gradient(top, #444, #1d1d1d);
+		}
+
+		.doc .button.default {
+			background-image: linear-gradient(top, #585858, #323232);
+			background-image: -webkit-linear-gradient(top, #585858, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+		}
+
+		.doc .button.default:hover {
+			color: #ccc;
+			background-image: linear-gradient(top, #454545, #252525);
+			background-image: -webkit-linear-gradient(top, #454545, #252525);
+			background-image: -moz-linear-gradient(top, #454545, #252525);
+			background-image: -o-linear-gradient(top, #454545, #252525);
+		}
+	
+		.doc .markdown > pre {
+			background-color: #666;
+			border: 1px solid #383838;
+		}
+
+		.doc .inheritance > a {
+			color: #4098ed;
+		}
+
+		.doc .inheritance > a:hover {
+			color: #4098ed;
+		}
+	
+		.transcript textarea {
+			background: #444;
+			color: #b8c4cf;
+		}
+	
+		.hl_debugger .list-label {
+			border-top: 1px solid transparent;
+		}
+	}
+}

css/helios.less

@@ -46,7 +46,7 @@ body.navigation .CodeMirror pre {
 	}
 }
 
-body[id="helios"] {
+body#helios {
 	font-size: 11px;
 	font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
 	background: #eee url(/images/squared_metal.png) repeat;

css/niflheim.css

@@ -0,0 +1,134 @@
+.cm-s-niflheim.CodeMirror {
+	background-color: #444;
+    color:#b8c4cf;
+    padding-left: 8px;
+}
+.cm-s-niflheim .CodeMirror-sizer{
+	padding-bottom: 0px;
+}
+
+.cm-s-niflheim .CodeMirror-scroll{
+	margin-right: 0px;
+	border-color: #202020;
+  padding-bottom: 0px;
+}
+.cm-s-niflheim .CodeMirror-vscrollbar{
+	overflow-y: hidden;
+}
+/*
+.cm-s-niflheim ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+}
+*/
+/*
+.cm-s-niflheim ::-webkit-scrollbar-track {
+    background: transparent;
+}
+.cm-s-niflheim ::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,.2);
+    border-radius: 5px;
+}
+.cm-s-niflheim ::-webkit-scrollbar-thumb:hover{
+	background: rgba(255,255,255,.3);
+}
+.cm-s-niflheim ::-webkit-scrollbar-thumb:active{
+	background: rgba(255,255,255,.4);
+}
+*/
+
+.cm-s-niflheim.CodeMirror .inline-widget{
+	background: #272727;
+	color: #ccc;
+}
+.cm-s-niflheim.CodeMirror .inline-widget h1,
+.cm-s-niflheim.CodeMirror .inline-widget h2,
+.cm-s-niflheim.CodeMirror .inline-widget h3{
+	color: #ccc;
+}
+.cm-s-niflheim.CodeMirror .inline-widget p,
+.cm-s-niflheim.CodeMirror .inline-widget dt,
+.cm-s-niflheim.CodeMirror .inline-widget li,
+.cm-s-niflheim.CodeMirror .inline-widget code{
+	color: #fff;
+}
+.cm-s-niflheim.CodeMirror .CodeMirror-gutters {
+    border-style: none;
+    background: #202020;
+}
+.cm-s-niflheim.CodeMirror .CodeMirror-linenumbers {
+	background-color: #393939;
+    background-image: linear-gradient(to bottom, #393939 33%, #686868 67%);
+    background-position: right;
+    background-size: 1px 3px;
+    background-repeat: repeat-y;
+}
+.cm-s-niflheim.CodeMirror .CodeMirror-linenumber {
+	color: #80939b;
+	padding-left: 5px;
+}
+.cm-s-niflheim.CodeMirror .CodeMirror-activeline,
+.cm-s-niflheim.CodeMirror.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt{
+	background-color: #666;
+}
+.cm-s-niflheim.CodeMirror pre{
+	/*padding between line number & content*/
+	padding: 0 8px;
+}
+
+.cm-s-niflheim.CodeMirror .CodeMirror-cursor {
+	border-left: 2px solid #c7c7c7;
+}
+.cm-s-niflheim.CodeMirror .CodeMirror-selected {
+	background: rgba(255,255,255,.2);
+}
+
+.cm-s-niflheim.CodeMirror .CodeMirror-matchingbracket {
+	border-bottom: 1px solid #33ffff;
+    color: #ccc19b;
+}
+.cm-s-niflheim.CodeMirror .CodeMirror-unmatchingbracket {
+	border-bottom: 1px solid #cb3233;
+    color: #cb3233;
+}
+
+
+.cm-s-niflheim.CodeMirror .cm-comment {
+    color: #929283;
+}
+.cm-s-niflheim.CodeMirror .cm-property {
+    color: #cbaaf5;
+}
+.cm-s-niflheim.CodeMirror .cm-qualifier {
+    color: #aaeeab;
+}
+.cm-s-niflheim.CodeMirror .cm-tag {
+    color: #7ac1ff;
+}
+.cm-s-niflheim.CodeMirror .cm-def {
+    color: #b8c4cf;
+}
+.cm-s-niflheim.CodeMirror .cm-number {
+    color: #ccccab;
+}
+.cm-s-niflheim.CodeMirror .cm-atom {
+    color: #cc9dc7;
+}
+.cm-s-niflheim.CodeMirror .cm-keyword{
+    color: #ff6c6b;
+}
+.cm-s-niflheim.CodeMirror .cm-string{
+    color: #789771;
+}
+.cm-s-niflheim.CodeMirror .cm-string-2{
+    color: #7ad1dd;
+}
+.cm-s-niflheim.CodeMirror .cm-variable {
+    color: #ffcd8e;
+}
+.cm-s-niflheim.CodeMirror .cm-variable-2 {
+    color: #aaccff;
+}
+.cm-s-niflheim.CodeMirror .cm-attribute {
+    color: #83e1b2;
+}

src/Helios-Core.js

@@ -3877,6 +3877,44 @@ referencedClasses: ["HLRequestWidget"]
 }),
 globals.HLManager);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "setEditorTheme:",
+protocol: 'accessing',
+fn: function (aTheme){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+_st("helios.editorTheme"._asSetting())._value_(aTheme);
+return self}, function($ctx1) {$ctx1.fill(self,"setEditorTheme:",{aTheme:aTheme},globals.HLManager)})},
+args: ["aTheme"],
+source: "setEditorTheme: aTheme\x0a\x0a\x09'helios.editorTheme' asSetting value: aTheme",
+messageSends: ["value:", "asSetting"],
+referencedClasses: []
+}),
+globals.HLManager);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "setTheme:",
+protocol: 'accessing',
+fn: function (aTheme){
+var self=this;
+var currentTheme;
+return smalltalk.withContext(function($ctx1) { 
+var $1,$2;
+currentTheme="helios.theme"._asSettingIfAbsent_("default");
+$1="body"._asJQuery();
+_st($1)._removeClass_(_st(currentTheme)._value());
+$2=_st($1)._addClass_(aTheme);
+_st("helios.theme"._asSetting())._value_(aTheme);
+return self}, function($ctx1) {$ctx1.fill(self,"setTheme:",{aTheme:aTheme,currentTheme:currentTheme},globals.HLManager)})},
+args: ["aTheme"],
+source: "setTheme: aTheme\x0a\x09| currentTheme |\x0a\x0a\x09currentTheme := 'helios.theme' asSettingIfAbsent: 'default'.\x0a\x09\x0a\x09'body' asJQuery\x0a\x09\x09removeClass: currentTheme value;\x0a\x09\x09addClass: aTheme.\x0a\x09\x09\x0a\x09\x0a\x09'helios.theme' asSetting value: aTheme",
+messageSends: ["asSettingIfAbsent:", "removeClass:", "asJQuery", "value", "addClass:", "value:", "asSetting"],
+referencedClasses: []
+}),
+globals.HLManager);
+
 smalltalk.addMethod(
 smalltalk.method({
 selector: "setup",
@@ -3891,11 +3929,12 @@ $ctx1.sendIdx["setupEvents"]=1;
 _st(self._keyBinder())._setupEvents();
 $ctx1.sendIdx["setupEvents"]=2;
 _st(self._tabsWidget())._setupEvents();
+self._setupTheme();
 _st("#helper"._asJQuery())._fadeOut();
 return self}, function($ctx1) {$ctx1.fill(self,"setup",{},globals.HLManager)})},
 args: [],
-source: "setup\x0a\x09self \x0a\x09\x09registerServices;\x0a\x09\x09setupEvents.\x0a    self keyBinder setupEvents.\x0a\x09self tabsWidget setupEvents.\x0a\x09\x0a\x09\x0a\x09'#helper' asJQuery fadeOut",
-messageSends: ["registerServices", "setupEvents", "keyBinder", "tabsWidget", "fadeOut", "asJQuery"],
+source: "setup\x0a\x09self \x0a\x09\x09registerServices;\x0a\x09\x09setupEvents.\x0a    self keyBinder setupEvents.\x0a\x09self tabsWidget setupEvents.\x0a\x09self setupTheme.\x0a\x09\x0a\x09\x0a\x09'#helper' asJQuery fadeOut",
+messageSends: ["registerServices", "setupEvents", "keyBinder", "tabsWidget", "setupTheme", "fadeOut", "asJQuery"],
 referencedClasses: []
 }),
 globals.HLManager);
@@ -3939,6 +3978,23 @@ referencedClasses: []
 }),
 globals.HLManager);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "setupTheme",
+protocol: 'private',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self._setTheme_("niflheim");
+self._setEditorTheme_("niflheim");
+return self}, function($ctx1) {$ctx1.fill(self,"setupTheme",{},globals.HLManager)})},
+args: [],
+source: "setupTheme\x0a\x09self setTheme: 'niflheim'.\x0a\x09self setEditorTheme: 'niflheim'.",
+messageSends: ["setTheme:", "setEditorTheme:"],
+referencedClasses: []
+}),
+globals.HLManager);
+
 smalltalk.addMethod(
 smalltalk.method({
 selector: "tabWidth",

src/Helios-Core.st

@@ -1203,6 +1203,24 @@ keyBinder
 	^ HLKeyBinder current
 !
 
+setEditorTheme: aTheme
+
+	'helios.editorTheme' asSetting value: aTheme
+!
+
+setTheme: aTheme
+	| currentTheme |
+
+	currentTheme := 'helios.theme' asSettingIfAbsent: 'default'.
+	
+	'body' asJQuery
+		removeClass: currentTheme value;
+		addClass: aTheme.
+		
+	
+	'helios.theme' asSetting value: aTheme
+!
+
 tabWidth
 	^ (window asJQuery width - 90) / self tabs size
 !
@@ -1300,6 +1318,7 @@ setup
 		setupEvents.
     self keyBinder setupEvents.
 	self tabsWidget setupEvents.
+	self setupTheme.
 	
 	
 	'#helper' asJQuery fadeOut
@@ -1329,6 +1348,11 @@ setupEvents
 		
 	window asJQuery resize: [ :event |
 		self refresh ]
+!
+
+setupTheme
+	self setTheme: 'niflheim'.
+	self setEditorTheme: 'niflheim'.
 ! !
 
 !HLManager methodsFor: 'rendering'!

src/Helios-Workspace.js

@@ -455,13 +455,13 @@ var self=this;
 function $HashedCollection(){return globals.HashedCollection||(typeof HashedCollection=="undefined"?nil:HashedCollection)}
 return smalltalk.withContext(function($ctx1) { 
 var $2,$1;
-$2="helios.codeMirrorTheme"._settingValueIfAbsent_("default helios");
+$2="helios.editorTheme"._settingValueIfAbsent_("default");
 $ctx1.sendIdx["settingValueIfAbsent:"]=1;
 $1=globals.HashedCollection._newFromPairs_(["theme",$2,"mode","text/x-stsrc","lineNumbers",true,"enterMode","flat","indentWithTabs",true,"indentUnit",(4),"matchBrackets",true,"electricChars",false,"keyMap","Amber","extraKeys",_st($HashedCollection())._with_(_st("helios.completionKey"._settingValueIfAbsent_("Shift-Space")).__minus_gt("autocomplete"))]);
 return $1;
 }, function($ctx1) {$ctx1.fill(self,"editorOptions",{},globals.HLCodeWidget)})},
 args: [],
-source: "editorOptions\x0a\x09^ #{\x0a\x09\x09'theme' -> ('helios.codeMirrorTheme' settingValueIfAbsent: 'default helios').\x0a\x09\x09'mode' -> 'text/x-stsrc'.\x0a        'lineNumbers' -> true.\x0a        'enterMode' -> 'flat'.\x0a        'indentWithTabs' -> true.\x0a\x09\x09'indentUnit' -> 4.\x0a        'matchBrackets' -> true.\x0a        'electricChars' -> false.\x0a\x09\x09'keyMap' -> 'Amber'.\x0a\x09\x09'extraKeys' -> (HashedCollection with: ('helios.completionKey' settingValueIfAbsent: 'Shift-Space') -> 'autocomplete')\x0a\x09}",
+source: "editorOptions\x0a\x09^ #{\x0a\x09\x09'theme' -> ('helios.editorTheme' settingValueIfAbsent: 'default').\x0a\x09\x09'mode' -> 'text/x-stsrc'.\x0a        'lineNumbers' -> true.\x0a        'enterMode' -> 'flat'.\x0a        'indentWithTabs' -> true.\x0a\x09\x09'indentUnit' -> 4.\x0a        'matchBrackets' -> true.\x0a        'electricChars' -> false.\x0a\x09\x09'keyMap' -> 'Amber'.\x0a\x09\x09'extraKeys' -> (HashedCollection with: ('helios.completionKey' settingValueIfAbsent: 'Shift-Space') -> 'autocomplete')\x0a\x09}",
 messageSends: ["settingValueIfAbsent:", "with:", "->"],
 referencedClasses: ["HashedCollection"]
 }),

src/Helios-Workspace.st

@@ -96,7 +96,7 @@ currentLineOrSelection
 
 editorOptions
 	^ #{
-		'theme' -> ('helios.codeMirrorTheme' settingValueIfAbsent: 'default helios').
+		'theme' -> ('helios.editorTheme' settingValueIfAbsent: 'default').
 		'mode' -> 'text/x-stsrc'.
         'lineNumbers' -> true.
         'enterMode' -> 'flat'.

support/codemirror-inner.js

@@ -7,6 +7,7 @@ define([
     'amber_lib/codemirror/mode/smalltalk/smalltalk',
     'amber_lib/codemirror/addon/hint/show-hint',
     'css!amber_lib/codemirror/theme/ambiance',
+    'css!amber_css/niflheim',
     'css!amber_lib/codemirror/lib/codemirror',
     'css!amber_lib/codemirror/addon/hint/show-hint'
 ]);

support/helios.js

@@ -22,5 +22,6 @@ define([
 	'./codemirror',
 	'./devel-inner', // pre-fetch, dep of ./helios-inner
 	'./helios-inner',
-	'css!amber_css/helios'
+    'css!amber_css/helios',
+	'css!amber_css/helios-niflheim'
 ], function (smalltalk) { return smalltalk; });