design-themes/theme_bewise/views/snippets_options.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="bewise_snippet_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='background']" position="attributes">
            <attribute name="data-selector">section, .carousel, .parallax, .s_color_blocks_2_block, .s_color_blocks_4_block, .s_big_image</attribute>
        </xpath>

        <xpath expr="//div[@data-js='background']" position="after">
            <div data-js='sizing_x'
                 data-selector=".row.simple-stepwizard-row > .simple-stepwizard-step"
                 data-drop-in='.row.simple-stepwizard-row'/>

            <div data-js="scroll_nav"
            data-selector="section">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#"><i class="fa fa-mouse-pointer" />Scroll Nav</a>
                    <ul class="dropdown-menu">
                        <li data-select-class="o_scroll_nav"><a>Enabled</a></li>
                        <li data-select-class=""><a>Disabled</a></li>
                    </ul>
                </li>
            </div>

            <div data-selector="s_separator_multicolor"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>

            <div data-selector=".s_separator_color"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>

            <div data-selector=".s_separator_shade"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>

            <div data-selector=".s_text_highlight"
                 data-drop-near="section, p, h1, h2, h3, blockquote, .well, .panel, .oe_share, .progress"/>
        </xpath>
    </template>

    <!-- Option colorpicker override default from website and add a new one for some object  -->
    <template id="options_colorpicker" inherit_id="website.snippet_options">
        <xpath expr="//div[@data-js='colorpicker']" position="replace">
            <div data-js='colorpicker' data-selector="section, .carousel, .parallax, .s_big_image, .s_team_profile_box, .s_color_blocks_2_block, .s_color_blocks_4_block, .s_event_list time, .s_text_highlight, .s_color_blocks_img_title">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#"><i class="fa fa-paint-brush" />Color</a>
                    <ul class="dropdown-menu">
                        <li>
                            <table class="colorpicker">
                                <tr>
                                    <td colspan="9">Theme colors</td>
                                </tr>
                                <tr>
                                    <td><button data-color="alpha"></button></td>
                                    <td><button data-color="beta"></button></td>
                                    <td><button data-color="gamma"></button></td>
                                    <td><button data-color="delta"></button></td>
                                    <td><button data-color="epsilon"></button></td>
                                </tr>
                                <tr>
                                    <td><button data-color="white"></button></td>
                                    <td><button data-color="black"></button></td>
                                </tr>
                            </table>
                        </li>
                    </ul>
                </li>
            </div>
        </xpath>
    </template>

    <!-- Colorpicker used for editor and when li of color option is empty  -->
    <template id="colorpicker" inherit_id="web_editor.colorpicker" name="theme_clean colorpicker">
        <xpath expr="colorpicker" position="replace">
            <table class="colorpicker">
                <tr>
                    <td colspan="9">Theme colors</td>
                </tr>
                <tr>
                    <td><button data-color="alpha"></button></td>
                    <td><button data-color="beta"></button></td>
                    <td><button data-color="gamma"></button></td>
                    <td><button data-color="delta"></button></td>
                    <td><button data-color="epsilon"></button></td>
                </tr>
                <tr>
                  <td colspan="9">Custom colors</td>
                </tr>
                <tr>
                    <td><button data-color="turquoise-light"/></td>
                    <td><button data-color="green-light"/></td>
                    <td><button data-color="blue-light"/></td>
                    <td><button data-color="purple-light"/></td>
                    <td><button data-color="pink-light"/></td>
                    <td><button data-color="red-light"/></td>
                    <td><button data-color="brown-light"/></td>
                    <td><button data-color="orange-light"/></td>
                    <td><button data-color="yellow-light"/></td>
                </tr>
                <tr>
                    <td><button data-color="turquoise"/></td>
                    <td><button data-color="green"/></td>
                    <td><button data-color="blue"/></td>
                    <td><button data-color="purple"/></td>
                    <td><button data-color="pink"/></td>
                    <td><button data-color="red"/></td>
                    <td><button data-color="brown"/></td>
                    <td><button data-color="orange"/></td>
                    <td><button data-color="yellow"/></td>
                </tr>
                <tr>
                    <td><button data-color="turquoise-dark"/></td>
                    <td><button data-color="green-dark"/></td>
                    <td><button data-color="blue-dark"/></td>
                    <td><button data-color="purple-dark"/></td>
                    <td><button data-color="pink-dark"/></td>
                    <td><button data-color="red-dark"/></td>
                    <td><button data-color="brown-dark"/></td>
                    <td><button data-color="orange-dark"/></td>
                    <td><button data-color="yellow-dark"/></td>
                </tr>
                <tr>
                    <td><button data-color="white"/></td>
                    <td><button data-color="clouds"/></td>
                    <td><button data-color="silver"/></td>
                    <td><button data-color="concrete"/></td>
                    <td><button data-color="stone"/></td>
                    <td><button data-color="asphalt"/></td>
                    <td><button data-color="midnight"/></td>
                    <td><button data-color="black"/></td>
                </tr>
            </table>
        </xpath>
    </template>
</odoo>