diff --git a/share/tools/web_config/js/controllers.js b/share/tools/web_config/js/controllers.js
index a6708861d..c93e0914a 100644
--- a/share/tools/web_config/js/controllers.js
+++ b/share/tools/web_config/js/controllers.js
@@ -73,6 +73,7 @@ controllers.controller("colorsController", function($scope, $http) {
 
     $scope.changeSelectedTextColor = function(color) {
         $scope.selectedColorScheme[$scope.selectedColorSetting] = color;
+        $scope.selectedColorScheme["colordata-" + $scope.selectedColorSetting].color = color;
         $scope.noteThemeChanged();
     }
 
@@ -102,9 +103,15 @@ controllers.controller("colorsController", function($scope, $http) {
                 }
                 if (scheme["url"]) currentScheme["url"] = scheme["url"];
 
+                var cols = [];
                 for (var i in data) {
                     if (isValidColor(data[i].color)) {
                         currentScheme[data[i].name] = data[i].color;
+                        // HACK: For some reason the colors array is cleared later
+                        // So we cheesily encode the actual objects as colordata-, so we can send them.
+                        // TODO: We should switch to keeping the objects, and also displaying them
+                        // with underlines and such.
+                        currentScheme["colordata-" + data[i].name] = data[i];
                     }
                 }
                 $scope.colorSchemes.push(currentScheme);
@@ -167,13 +174,14 @@ controllers.controller("colorsController", function($scope, $http) {
         }
         for (var name of settingNames) {
             var selected;
+            var realname = "colordata-" + name;
             // Skip colors undefined in the current theme
             // js is dumb - the empty string is false,
             // but we want that to mean unsetting a var.
-            if (!$scope.selectedColorScheme[name] && $scope.selectedColorScheme[name] !== '') {
+            if (!$scope.selectedColorScheme[realname] && $scope.selectedColorScheme[realname] !== '') {
                 selected = '';
             } else {
-                selected = $scope.selectedColorScheme[name];
+                selected = $scope.selectedColorScheme[realname];
             }
             postdata.colors.push({
                 "what" : name,
diff --git a/share/tools/web_config/webconfig.py b/share/tools/web_config/webconfig.py
index a4af0a9c6..442791a1c 100755
--- a/share/tools/web_config/webconfig.py
+++ b/share/tools/web_config/webconfig.py
@@ -226,6 +226,26 @@ def parse_color(color_str):
         "reverse": reverse,
     }
 
+def unparse_color(col):
+    """A basic function to return the fish version of a color dict"""
+    if isinstance(col, str):
+        return col
+    ret = ""
+    if col["color"]:
+        ret += col["color"]
+    if col["bold"]:
+        ret += " --bold"
+    if col["underline"]:
+        ret += " --underline"
+    if col["italics"]:
+        ret += " --italics"
+    if col["dim"]:
+        ret += " --dim"
+    if col["reverse"]:
+        ret += " --reverse"
+    if col["background"]:
+        ret += " --background=" + col["background"]
+    return ret
 
 def parse_bool(val):
     val = val.lower()
@@ -1114,6 +1134,8 @@ class FishConfigHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
             raise ValueError
         if not color and not color == "":
             color = "normal"
+        else:
+            color = unparse_color(color)
         if not name.startswith("fish_pager_color_"):
             varname = "fish_color_" + name
         # If the name already starts with "fish_", use it as the varname