diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index e86e2277ece..074d8fc4eb6 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -143,6 +143,7 @@ function _buildCollapseElement(title, options) {
     const children = options && options.childNodes || [];
     if (titleEl) {
         titleEl.remove();
+        titleEl.classList.add('o_we_collapse_toggler');
         children.unshift(titleEl);
     }
     let i = 0;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 2c63afe95f5..b3d6769aa57 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1624,11 +1624,14 @@ body.editor_enable.editor_has_snippets {
                 }
             }
             &.active {
-                background-color: $o-we-sidebar-content-fold-block-bg;
                 box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
-
-                we-collapse.active, we-collapse.active .o_we_collapse_toggler {
-                    background-color: $o-we-bg-lighter;
+                we-collapse.active {
+                    &, we-toggler.o_we_collapse_toggler {
+                        background-color: $o-we-bg-lighter;
+                    }
+                }
+                &, we-collapse.active we-collapse.active, we-collapse.active we-collapse.active .o_we_collapse_toggler {
+                        background-color: $o-we-sidebar-content-fold-block-bg;
                 }
             }
             .o_we_collapse_toggler {
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 5cc1d35e936..4e710f68201 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1268,6 +1268,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             paletteSelectorEl.appendChild(btnEl);
         }
 
+        const presetCollapseEl = uiFragment.querySelector('we-collapse.o_we_theme_presets_collapse');
         for (let i = 1; i <= 5; i++) {
             const collapseEl = document.createElement('we-collapse');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
@@ -1277,7 +1278,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             for (const el of editionEls) {
                 collapseEl.appendChild(el);
             }
-            uiFragment.appendChild(collapseEl);
+            presetCollapseEl.appendChild(collapseEl);
         }
 
         await this._super(...arguments);
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index f7b8738bd2d..5111e0cdd6e 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1277,6 +1277,8 @@
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-select data-img="/website/static/src/img/snippets_options/palette.svg" class="o_we_theme_colors_select" data-variable="color-palettes-name"/>
         </we-row>
+        <we-collapse class="o_we_theme_presets_collapse" string="Color Presets">
+        </we-collapse>
     </div>
     <div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
         <we-checkbox string="Show Header"