Show color for values of type:list site settings with word 'colors' in their name

app/assets/javascripts/admin/components/list_setting_component.js

@@ -13,15 +13,31 @@
 Discourse.ListSettingComponent = Ember.Component.extend({
   tagName: 'div',
 
+
+  _select2FormatSelection: function(selectedObject, jqueryWrapper, htmlEscaper) {
+    var text = selectedObject.text;
+    if (text.length <= 6) {
+      jqueryWrapper.closest('li.select2-search-choice').css({"border-bottom": '7px solid #'+text});
+    }
+    return htmlEscaper(text);
+  },
+
   didInsertElement: function(){
-    this.$("input").select2({
-        multiple: false,
-        separator: "|",
-        tokenSeparators: ["|"],
-        tags : this.get("choices") || [],
-        width: 'off',
-        dropdownCss: this.get("choices") ? {} : {display: 'none'}
-      }).on("change", function(obj) {
+
+    var select2_options = {
+      multiple: false,
+      separator: "|",
+      tokenSeparators: ["|"],
+      tags : this.get("choices") || [],
+      width: 'off',
+      dropdownCss: this.get("choices") ? {} : {display: 'none'}
+    };
+
+    var settingName = this.get('settingName');
+    if (typeof settingName === 'string' && settingName.indexOf('colors') > -1) {
+      select2_options.formatSelection = this._select2FormatSelection;
+    }
+    this.$("input").select2(select2_options).on("change", function(obj) {
         this.set("settingValue", obj.val.join("|"));
         this.refreshSortables();
       }.bind(this));

app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars

@@ -2,7 +2,7 @@
     <h3>{{unbound settingName}}</h3>
 </div>
 <div class="setting-value">
-  {{list-setting settingValue=value choices=choices}}
+  {{list-setting settingValue=value choices=choices settingName=setting}}
     <div class='desc'>{{unbound description}}</div>
 </div>
 {{#if dirty}}

config/site_settings.yml

@@ -11,6 +11,9 @@
 # type: email    - Must be a valid email address.
 # type: username - Must match the username of an existing user.
 # type: list     - A list of values, chosen from a set of valid values defined in the choices option.
+#
+# A type:list setting with the word 'colors' in its name will make color values have a bold line of the corresponding color
+#
 required:
   title:
     client: true