diff --git a/app/assets/javascripts/admin/addon/models/color-scheme.js b/app/assets/javascripts/admin/addon/models/color-scheme.js
index 513f8cb3ee1..4bce289ba7e 100644
--- a/app/assets/javascripts/admin/addon/models/color-scheme.js
+++ b/app/assets/javascripts/admin/addon/models/color-scheme.js
@@ -20,7 +20,10 @@ const ColorScheme = EmberObject.extend({
   },
 
   startTrackingChanges() {
-    this.set("originals", { name: this.name });
+    this.set("originals", {
+      name: this.name,
+      user_selectable: this.user_selectable,
+    });
   },
 
   schemeJson() {
@@ -46,14 +49,22 @@ const ColorScheme = EmberObject.extend({
     return newScheme;
   },
 
-  @discourseComputed("name", "colors.@each.changed", "saving")
-  changed(name) {
+  @discourseComputed(
+    "name",
+    "user_selectable",
+    "colors.@each.changed",
+    "saving"
+  )
+  changed(name, user_selectable) {
     if (!this.originals) {
       return false;
     }
     if (this.originals.name !== name) {
       return true;
     }
+    if (this.originals.user_selectable !== user_selectable) {
+      return true;
+    }
     if (this.colors.any((c) => c.get("changed"))) {
       return true;
     }
@@ -80,9 +91,9 @@ const ColorScheme = EmberObject.extend({
     this.setProperties({ savingStatus: I18n.t("saving"), saving: true });
 
     const data = {};
-
     if (!opts || !opts.enabledOnly) {
       data.name = this.name;
+      data.user_selectable = this.user_selectable;
       data.base_scheme_id = this.base_scheme_id;
       data.colors = [];
       this.colors.forEach((c) => {
diff --git a/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs b/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs
index 86f5c595558..17cc747731d 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs
@@ -41,7 +41,14 @@
     <br>
 
     <div class="admin-controls">
-      {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable}}
+      {{#if model.theme_id}}
+        {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable}}
+      {{else}}
+        <label>
+          {{input type="checkbox" checked=model.user_selectable}}
+          {{i18n "admin.customize.theme.color_scheme_user_selectable"}}
+        </label>
+      {{/if}}
     </div>
 
     {{#if colors.length}}