diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 5ab0769e47b..8a6f89ee06f 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1450,6 +1450,22 @@ options.registry.topMenuTransparency = options.Class.extend({
 
 options.registry.topMenuColor = options.Class.extend({
 
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    selectStyle(previewMode, widgetValue, params) {
+        this._super(...arguments);
+        const className = widgetValue ? (params.colorPrefix + widgetValue) : '';
+        this.trigger_up('action_demand', {
+            actionName: 'toggle_page_option',
+            params: [{name: 'header_color', value: className}],
+        });
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -1470,24 +1486,6 @@ options.registry.topMenuColor = options.Class.extend({
             });
         });
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _onColorButtonClick: function () {
-        this._super.apply(this, arguments);
-        var bgs = this.$target.attr('class').match(/bg-(\w|-)+/g);
-        var allowedBgs = this.classes.split(' ');
-        var color = _.intersection(bgs, allowedBgs).join(' ');
-        this.trigger_up('action_demand', {
-            actionName: 'toggle_page_option',
-            params: [{name: 'header_color', value: color}],
-        });
-    },
 });
 
 /**