diff --git a/share/tools/web_config/partials/new_colors.html b/share/tools/web_config/partials/new_colors.html
index 25026e9a1..a8862933f 100644
--- a/share/tools/web_config/partials/new_colors.html
+++ b/share/tools/web_config/partials/new_colors.html
@@ -1,56 +1,48 @@
-<div ng-controller="newColorsController">
+<div>
     <!-- ko with: color_picker -->
     <span style="padding-left: 25px">Click to customize each color:</span><br>
-    <div class="colorpicker_text_sample" data-bind="style: {backgroundColor: selected_sample_text_background_color}">
-        <div class="color_picker_background_cells" data-bind="foreach: sample_text_background_colors">
-            <div data-bind="style: { 'backgroundColor': $data}, click: $parent.selected_sample_text_background_color"></div>
+    <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
+        <div class="color_picker_background_cells">
+            <div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)"></div>
         </div>
         <!-- This is the sample text -->
-        <span data-ng-style="{ 'color': selectedSettings.command}">/bright/vixens</span>
-        <span data-ng-style="{ 'color': selectedSettings.param}">jump</span>
-        <span data-ng-style="{ 'color': selectedSettings.end}">|</span>
-        <span data-ng-style="{ 'color': selectedSettings.command}">dozy</span>
-        <span data-ng-style="{ 'color': selectedSettings.quote}"> "fowl" </span>
-        <span data-ng-style="{ 'color': selectedSettings.redirection}">&gt; quack</span>
-        <span data-ng-style="{ 'color': selectedSettings.end}">&</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">/bright/vixens</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.param}" ng-click="selectColorSetting('param')">jump</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">|</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">dozy</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.quote}" ng-click="selectColorSetting('quote')"> "fowl" </span>
+        <span data-ng-style="{ 'color': selectedColorScheme.redirection}" ng-click="selectColorSetting('redirection')">&gt; quack</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.end}" ng-click="selectColorSetting('end')">&</span>
         <br>
-        <span data-ng-style="{ 'color': selectedSettings.command}">echo</span>
-        <span data-ng-style="{ 'color': selectedSettings.error}">'Errors are the portals to discovery</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">echo</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.error}" ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>
         <br>
-        <span data-ng-style="{ 'color': selectedSettings.comment}"># This is a comment</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.comment}" ng-click="selectColorSetting('comment')"># This is a comment</span>
         <br>
-        <span data-ng-style="{ 'color': selectedSettings.command}">Th</span><span data-ng-style="{ 'color': selectedSettings.autosuggestion }"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
+        <span data-ng-style="{ 'color': selectedColorScheme.command}" ng-click="selectColorSetting('command')">Th</span><span data-ng-style="{ 'color': selectedColorScheme.autosuggestion }" ng-click="selectColorSetting('autosuggestion')"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
 
-        <span class="save_button" style="position: absolute; right: 5px; bottom: 5px;" data-ng-style="{'color': text_color_for_color(selectedSettings.preferred_background)}">Apply</span>
+        <span class="save_button" style="position: absolute; right: 5px; bottom: 5px;" data-ng-style="{'color': text_color_for_color(selectedColorScheme.preferred_background || 'white')}">Apply</span>
 
     </div>
             
     <table class="colorpicker_term256" style="margin: 0px 20px;">
         <tbody>
-            <tr class="colorpicker_term256_row" data-ng-repeat="color_array in color_arrays_array"> 
-                <td class="colorpicker_term256_cell"
-                    data-ng-style="{'backgroundColor': color, 'color': color, 'border-color': border_color_for_color(color)}"
-                               data-ng-repeat="color in color_array">
-                <!--css: { 'colorpicker_cell_selected': color === $parents[1].selected_color()}, click: $parents[1].select_color" -->
+            <tr class="colorpicker_term256_row" data-ng-repeat="color_array in colorArraysArray"> 
+                <td class="colorpicker_term256_cell" data-ng-style="{'background-color': color, 'color': color}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
+                                <div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': border_color_for_color(color)}"</div>
                 </td>
-
-                <!--td class="colorpicker_term256_cell"
-                    data-bind="style: {'backgroundColor': '#' + $data, 'color': '#' + $data, 'border-color': 'black'},
-                               click: $parents[1].select_color">
-                        <div class="colorpicker_term256_selection_indicator" data-bind="visible: $data === $parents[1].selected_color(), style: {borderColor: border_color_for_color($data) }">hi</div>
-                    </td-->
             </tr>
         </tbody>
         <!-- /ko -->
     </table>
     
     <div class="color_scheme_choices_list">
-        <div class="color_scheme_choice_container" data-ng-repeat="color_scheme in color_schemes" data-ng-click="console.log('called'); selectedSettings = color_scheme">
+        <div class="color_scheme_choice_container" data-ng-repeat="color_scheme in color_schemes" ng-click="changeSelectedColorScheme(color_scheme)">
             <div class="color_scheme_choice_label">
                 <!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
-                <span>{{color_scheme.name }}</span><a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a>
+                <span>{{color_scheme.name }}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a-->
             </div>
-            <div class="colorpicker_text_sample_tight" data-ng-style="{'backgroundColor: preferred_background':true}">
+            <div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': color_scheme.preferred_background}">
                 <span data-ng-style="{'color': color_scheme.command}">/bright/vixens</span>
                 <span data-ng-style="{'color': color_scheme.param}">jump</span>
                 <span data-ng-style="{'color': color_scheme.end}">|</span>
@@ -68,32 +60,5 @@
             </div>
         </div>
     </div>
-            
-    <div style="display: none">
-    <div class="master_detail_table">
-        <div class="master" data-bind="foreach: color_settings">
-            <div class="master_element"
-                 data-bind="text: name,
-                            style: {color: label_color},
-                            click: $parent.selected_setting,
-                            css: {selected_master_elem: $parent.selected_setting() == $data}
-                            "></div>
-        </div>
-        <div class="detail">
-            <table class="colorpicker_term256">
-                <tbody>
-                    <tr class="colorpicker_term256_row" data-ng-repeat="color_array in color_arrays_array"> 
-                        <td class="colorpicker_term256_cell"
-                            data-ng-style="{'backgroundColor': color, 'color': color, 'border-color': border_color_for_color(color)}"
-                                       data-ng-repeat="color in color_array">
-                        <!--css: { 'colorpicker_cell_selected': color === $parents[1].selected_color()}, click: $parents[1].select_color" -->
-                        </td>
-                    </tr>
-                </tbody>
-                <!-- /ko -->
-            </table>
-        </div>
-    </div>
-    </div>
     <!-- /ko -->
 </div>
diff --git a/share/tools/web_config/webconfig.js b/share/tools/web_config/webconfig.js
index 59d9bffd2..ac3a1815b 100644
--- a/share/tools/web_config/webconfig.js
+++ b/share/tools/web_config/webconfig.js
@@ -60,6 +60,7 @@ webconfig.controller("main", function($scope, $location) {
         }
         return cls;
     }
+
 })
 /*
 webconfig.controller("colorsController", function($scope, $http) {
@@ -136,7 +137,261 @@ webconfig.controller("colorsController", function($scope, $http) {
 */
 
 webconfig.controller("newColorsController", function($scope, $http) {
-    $scope.term256Colors = [ "ffd7d7", "d7afaf", "af8787", "875f5f", "5f0000", "870000", "af0000", "d70000", "ff0000", "ff5f5f", "d75f5f", "d78787", "ff8787", "ffafaf", "ffaf87", "ffaf5f", "ffaf00", "ff875f", "ff8700", "ff5f00", "d75f00", "af5f5f", "af5f00", "d78700", "d7875f", "af875f", "af8700", "875f00", "d7af87", "ffd7af", "ffd787", "ffd75f", "d7af00", "d7af5f", "ffd700", "ffff5f", "ffff00", "ffff87", "ffffaf", "ffffd7", "d7ff00", "afd75f", "d7d700", "d7d787", "d7d7af", "afaf87", "87875f", "5f5f00", "878700", "afaf00", "afaf5f", "d7d75f", "d7ff5f", "d7ff87", "87ff00", "afff00", "afff5f", "afd700", "87d700", "87af00", "5f8700", "87af5f", "5faf00", "afd787", "d7ffd7", "d7ffaf", "afffaf", "afff87", "5fff00", "5fd700", "87d75f", "5fd75f", "87ff5f", "5fff5f", "87ff87", "afd7af", "87d787", "87d7af", "87af87", "5f875f", "5faf5f", "005f00", "008700", "00af00", "00d700", "00ff00", "00ff5f", "5fff87", "00ff87", "87ffaf", "afffd7", "5fd787", "00d75f", "5faf87", "00af5f", "5fffaf", "00ffaf", "5fd7af", "00d787", "00875f", "00af87", "00d7af", "5fffd7", "87ffd7", "00ffd7", "d7ffff", "afd7d7", "87afaf", "5f8787", "5fafaf", "87d7d7", "5fd7d7", "5fffff", "00ffff", "87ffff", "afffff", "00d7d7", "00d7ff", "5fd7ff", "5fafd7", "00afd7", "00afff", "0087af", "00afaf", "008787", "005f5f", "005f87", "0087d7", "0087ff", "5fafff", "87afff", "5f87d7", "5f87ff", "005fd7", "005fff", "005faf", "5f87af", "87afd7", "afd7ff", "87d7ff", "d7d7ff", "afafd7", "8787af", "afafff", "8787d7", "8787ff", "5f5fff", "5f5fd7", "5f5faf", "5f5f87", "00005f", "000087", "0000af", "0000d7", "0000ff", "5f00ff", "5f00d7", "5f00af", "5f0087", "8700af", "8700d7", "8700ff", "af00ff", "af00d7", "d700ff", "d75fff", "d787ff", "ffafd7", "ffafff", "ffd7ff", "d7afff", "d7afd7", "af87af", "af87d7", "af87ff", "875fd7", "875faf", "875fff", "af5fff", "af5fd7", "af5faf", "d75fd7", "d787d7", "ff87ff", "ff5fff", "ff5fd7", "ff00ff", "ff00af", "ff00d7", "d700af", "d700d7", "af00af", "870087", "5f005f", "87005f", "af005f", "af0087", "d70087", "d7005f", "ff0087", "ff005f", "ff5f87", "d75f87", "d75faf", "ff5faf", "ff87af", "ff87d7", "d787af", "af5f87", "875f87", "000000", "080808", "121212", "1c1c1c", "262626", "303030", "3a3a3a", "444444", "4e4e4e", "585858", "5f5f5f", "626262", "6c6c6c", "767676", "808080", "878787", "8a8a8a", "949494", "9e9e9e", "a8a8a8", "afafaf", "b2b2b2", "bcbcbc", "c6c6c6", "d0d0d0", "d7d7d7", "dadada", "e4e4e4", "eeeeee", "ffffff", ];
+    $scope.changeSelectedColorScheme= function(newScheme) {
+        $scope.selectedColorScheme = newScheme;
+        if ($scope.selectedColorScheme.preferred_background) {
+            $scope.terminalBackgroundColor = $scope.selectedColorScheme.preferred_background;
+        }
+        $scope.selectedColorSetting = 'command';
+        $scope.colorArraysArray = $scope.getColorArraysArray();
+    }
+
+    $scope.changeTerminalBackgroundColor = function(color) {
+        $scope.terminalBackgroundColor = color;
+    }
+
+    $scope.term256Colors = [ //247
+    "ffd7d7",
+    "d7afaf",
+    "af8787",
+    "875f5f",
+    "5f0000",
+    "870000",
+    "af0000",
+    "d70000",
+    "ff0000",
+    "ff5f5f",
+    "d75f5f",
+    "d78787",
+    "ff8787",
+    "ffafaf",
+    "ffaf87",
+    "ffaf5f",
+    "ffaf00",
+    "ff875f",
+    "ff8700",
+    "ff5f00",
+    "d75f00",
+    "af5f5f",
+    "af5f00",
+    "d78700",
+    "d7875f",
+    "af875f",
+    "af8700",
+    "875f00",
+    "d7af87",
+    "ffd7af",
+    "ffd787",
+    "ffd75f",
+    "d7af00",
+    "d7af5f",
+    "ffd700",
+    "ffff5f",
+    "ffff00",
+    "ffff87",
+    "ffffaf",
+    "ffffd7",
+    "d7ff00",
+    "afd75f",
+    "d7d700",
+    "d7d787",
+    "d7d7af",
+    "afaf87",
+    "87875f",
+    "5f5f00",
+    "878700",
+    "afaf00",
+    "afaf5f",
+    "d7d75f",
+    "d7ff5f",
+    "d7ff87",
+    "87ff00",
+    "afff00",
+    "afff5f",
+    "afd700",
+    "87d700",
+    "87af00",
+    "5f8700",
+    "87af5f",
+    "5faf00",
+    "afd787",
+    "d7ffd7",
+    "d7ffaf",
+    "afffaf",
+    "afff87",
+    "5fff00",
+    "5fd700",
+    "87d75f",
+    "5fd75f",
+    "87ff5f",
+    "5fff5f",
+    "87ff87",
+    "afd7af",
+    "87d787",
+    "87d7af",
+    "87af87",
+    "5f875f",
+    "5faf5f",
+    "005f00",
+    "008700",
+    "00af00",
+    "00d700",
+    "00ff00",
+    "00ff5f",
+    "5fff87",
+    "00ff87",
+    "87ffaf",
+    "afffd7",
+    "5fd787",
+    "00d75f",
+    "5faf87",
+    "00af5f",
+    "5fffaf",
+    "00ffaf",
+    "5fd7af",
+    "00d787",
+    "00875f",
+    "00af87",
+    "00d7af",
+    "5fffd7",
+    "87ffd7",
+    "00ffd7",
+    "d7ffff",
+    "afd7d7",
+    "87afaf",
+    "5f8787",
+    "5fafaf",
+    "87d7d7",
+    "5fd7d7",
+    "5fffff",
+    "00ffff",
+    "87ffff",
+    "afffff",
+    "00d7d7",
+    "00d7ff",
+    "5fd7ff",
+    "5fafd7",
+    "00afd7",
+    "00afff",
+    "0087af",
+    "00afaf",
+    "008787",
+    "005f5f",
+    "005f87",
+    "0087d7",
+    "0087ff",
+    "5fafff",
+    "87afff",
+    "5f87d7",
+    "5f87ff",
+    "005fd7",
+    "005fff",
+    "005faf",
+    "5f87af",
+    "87afd7",
+    "afd7ff",
+    "87d7ff",
+    "d7d7ff",
+    "afafd7",
+    "8787af",
+    "afafff",
+    "8787d7",
+    "8787ff",
+    "5f5fff",
+    "5f5fd7",
+    "5f5faf",
+    "5f5f87",
+    "00005f",
+    "000087",
+    "0000af",
+    "0000d7",
+    "0000ff",
+    "5f00ff",
+    "5f00d7",
+    "5f00af",
+    "5f0087",
+    "8700af",
+    "8700d7",
+    "8700ff",
+    "af00ff",
+    "af00d7",
+    "d700ff",
+    "d75fff",
+    "d787ff",
+    "ffafd7",
+    "ffafff",
+    "ffd7ff",
+    "d7afff",
+    "d7afd7",
+    "af87af",
+    "af87d7",
+    "af87ff",
+    "875fd7",
+    "875faf",
+    "875fff",
+    "af5fff",
+    "af5fd7",
+    "af5faf",
+    "d75fd7",
+    "d787d7",
+    "ff87ff",
+    "ff5fff",
+    "ff5fd7",
+    "ff00ff",
+    "ff00af",
+    "ff00d7",
+    "d700af",
+    "d700d7",
+    "af00af",
+    "870087",
+    "5f005f",
+    "87005f",
+    "af005f",
+    "af0087",
+    "d70087",
+    "d7005f",
+    "ff0087",
+    "ff005f",
+    "ff5f87",
+    "d75f87",
+    "d75faf",
+    "ff5faf",
+    "ff87af",
+    "ff87d7",
+    "d787af",
+    "af5f87",
+    "875f87",
+    "000000",
+    "080808",
+    "121212",
+    "1c1c1c",
+    "262626",
+    "303030",
+    "3a3a3a",
+    "444444",
+    "4e4e4e",
+    "585858",
+    "5f5f5f",
+    "626262",
+    "6c6c6c",
+    "767676",
+    "808080",
+    "878787",
+    "8a8a8a",
+    "949494",
+    "9e9e9e",
+    "a8a8a8",
+    "afafaf",
+    "b2b2b2",
+    "bcbcbc",
+    "c6c6c6",
+    "d0d0d0",
+    "d7d7d7",
+    "dadada",
+    "e4e4e4",
+    "eeeeee",
+    "ffffff",
+    ]
 
     /* Returns array of values from a dictionary (or any object) */
     function dict_values(dict) {
@@ -158,6 +413,18 @@ webconfig.controller("newColorsController", function($scope, $http) {
 	    return result;
     }
 
+    /* Given a color, compute a "border color" for it that can show it selected */
+    $scope.border_color_for_color = function (color_str) {
+        return adjust_lightness(color_str, function(lightness){
+            var adjust = .5
+            var new_lightness = lightness + adjust
+            if (new_lightness > 1.0 || new_lightness < 0.0) {
+                new_lightness -= 2 * adjust
+            }
+            return new_lightness
+        })
+    }
+
     $scope.text_color_for_color = function (color_str) {
         /* Use this function to make a color that contrasts well with the given color */
         var adjust = .5
@@ -171,8 +438,22 @@ webconfig.controller("newColorsController", function($scope, $http) {
         return adjust_lightness(color_str, compute_constrast);
     }		
 
-    /* Our colors. The array itself is never modified, but may be replaced. */
-    $scope.color_arrays_array = get_colors_as_nested_array($scope.term256Colors, 32);
+    $scope.getColorArraysArray = function() {
+        var result = null;
+        if ($scope.selectedColorScheme.colors.length > 0)
+            result = get_colors_as_nested_array($scope.selectedColorScheme.colors, 32);
+        else
+            result =  get_colors_as_nested_array($scope.term256Colors, 32);
+        return result;
+    }
+
+    $scope.selectColorSetting = function(name) {
+        $scope.selectedColorSetting = name;
+    }
+
+    $scope.changeSelectedTextColor = function(color) {
+        $scope.selectedColorScheme[$scope.selectedColorSetting] = color;
+    }
 
     var color_scheme_fish_default = {
         "name": "fish default",
@@ -404,6 +685,8 @@ webconfig.controller("newColorsController", function($scope, $http) {
     construct_color_scheme_mono('Mono Smoke', 'black', true)
     ];
 
+    $scope.sampleTerminalBackgroundColors = ['white', '#' + solarized.base3, '#300', '#003', '#' + solarized.base03, '#232323', 'black'];
+
     /* Array of FishColorSchemes */
     $scope.color_schemes = [color_scheme_fish_default, color_scheme_solarized_light, color_scheme_solarized_dark, color_scheme_tomorrow, color_scheme_tomorrow_night, color_scheme_tomorrow_night_bright];
     for (var i=0; i < additional_color_schemes.length; i++)
@@ -411,7 +694,7 @@ webconfig.controller("newColorsController", function($scope, $http) {
 
     var supported_setting_names = ['autosuggestion', 'command', 'comment', 'end', 'error', 'param', 'quote', 'redirection'];
 
-    $scope.selectedSettings = $scope.color_schemes[0];
+    $scope.changeSelectedColorScheme($scope.color_schemes[0]);
     $scope.color_settings = $scope.color_schemes.colors; 
 
     range = function(start, end) {