diff --git a/app/assets/javascripts/admin/controllers/admin-customize-colors.js.es6 b/app/assets/javascripts/admin/controllers/admin-customize-colors.js.es6
index 88ab2b8846d..faf9d29a60f 100644
--- a/app/assets/javascripts/admin/controllers/admin-customize-colors.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-customize-colors.js.es6
@@ -1,21 +1,25 @@
 import showModal from "discourse/lib/show-modal";
+import { default as computed } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend({
-  baseColorScheme: function() {
+  @computed("model.@each.id")
+  baseColorScheme() {
     return this.get("model").findBy("is_base", true);
-  }.property("model.@each.id"),
+  },
 
-  baseColorSchemes: function() {
+  @computed("model.@each.id")
+  baseColorSchemes() {
     return this.get("model").filterBy("is_base", true);
-  }.property("model.@each.id"),
+  },
 
-  baseColors: function() {
-    var baseColorsHash = Ember.Object.create({});
-    this.get("baseColorScheme.colors").forEach(color => {
+  @computed("baseColorScheme")
+  baseColors(baseColorScheme) {
+    const baseColorsHash = Ember.Object.create({});
+    baseColorScheme.get("colors").forEach(color => {
       baseColorsHash.set(color.get("name"), color);
     });
     return baseColorsHash;
-  }.property("baseColorScheme"),
+  },
 
   actions: {
     newColorSchemeWithBase(baseKey) {
@@ -24,8 +28,10 @@ export default Ember.Controller.extend({
         baseKey
       );
       const newColorScheme = Ember.copy(base, true);
-      newColorScheme.set("name", I18n.t("admin.customize.colors.new_name"));
-      newColorScheme.set("base_scheme_id", base.get("base_scheme_id"));
+      newColorScheme.setProperties({
+        name: I18n.t("admin.customize.colors.new_name"),
+        base_scheme_id: base.get("base_scheme_id")
+      });
       newColorScheme.save().then(() => {
         this.get("model").pushObject(newColorScheme);
         newColorScheme.set("savingStatus", null);
diff --git a/app/assets/javascripts/admin/templates/customize-colors.hbs b/app/assets/javascripts/admin/templates/customize-colors.hbs
index b09fc1855ac..01716958c87 100644
--- a/app/assets/javascripts/admin/templates/customize-colors.hbs
+++ b/app/assets/javascripts/admin/templates/customize-colors.hbs
@@ -1,15 +1,24 @@
-<div class='content-list color-schemes'>
-  <h3>{{i18n 'admin.customize.colors.long_title'}}</h3>
+<div class="content-list color-schemes">
+  <h3>{{i18n "admin.customize.colors.long_title"}}</h3>
+
   <ul>
     {{#each model as |scheme|}}
       {{#unless scheme.is_base}}
-      <li>
-        {{#link-to 'adminCustomize.colors.show' scheme replace=true}}{{d-icon 'paint-brush'}}{{scheme.description}}{{/link-to}}
-      </li>
+        <li>
+          {{#link-to "adminCustomize.colors.show" scheme replace=true}}
+            {{d-icon "paint-brush"}}
+            {{scheme.description}}
+          {{/link-to}}
+        </li>
       {{/unless}}
     {{/each}}
   </ul>
-  <button {{action "newColorScheme"}} class='btn btn-default'>{{d-icon 'plus'}}{{i18n 'admin.customize.new'}}</button>
+
+  {{d-button
+    class="btn-default"
+    action=(action "newColorScheme")
+    icon="plus"
+    label="admin.customize.new"}}
 </div>
 
 {{outlet}}