From 22c4311e283af95eafe1ba85ee1234bb8102110e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 3 Aug 2018 15:54:17 +0200
Subject: [PATCH] [IMP] *: make customize dialog generic and improve options

* web, web_editor, website, website_theme_install, portal,
  theme_default, theme_bootswatch

The purpose of this task is to make the customize dialog as generic as
possible, that is theme-independant:

1) The design is now totally generic (Odoo visuals)
2) The XML definition is form-view like. This allows themes to extend
   the dialog without any risk of breaking the style and also allows to
   not care about lots of technical details.
3) New options have been included. Those were themes options that are
   now generic and which themes can simply adapt without touching the
   customize modal (navbar colors, footer color, navbar layout, fonts,
   body background, ...).

The color palette can now also be customized with user colors.

Using sass functionnalities, color palettes and fonts integration is now
a lot better.

Thanks to @qha-odoo for the original design.

task-31677
---
 addons/portal/static/src/scss/portal.scss     |  14 +-
 addons/portal/views/portal_templates.xml      |   4 +-
 addons/theme_bootswatch/__manifest__.py       |   2 +-
 .../data/theme_bootswatch_data.xml            |   4 +
 .../views/theme_bootswatch_templates.xml      |  95 +----
 addons/theme_default/__manifest__.py          |   5 +-
 .../theme_default/data/theme_default_data.xml |   6 +-
 .../static/src/img/theme/layout-boxed.gif     | Bin 1242 -> 0 bytes
 .../static/src/img/theme/layout-full.gif      | Bin 1198 -> 0 bytes
 .../static/src/img/theme/variant-amethyst.gif | Bin 1143 -> 0 bytes
 .../static/src/img/theme/variant-cobalt.gif   | Bin 1143 -> 0 bytes
 .../static/src/img/theme/variant-emerald.gif  | Bin 1143 -> 0 bytes
 .../static/src/img/theme/variant-gold.gif     | Bin 1143 -> 0 bytes
 .../static/src/img/theme/variant-ruby.gif     | Bin 1143 -> 0 bytes
 .../static/src/img/theme/variant-stone.gif    | Bin 1143 -> 0 bytes
 .../static/src/scss/bootstrap_overridden.scss |   7 -
 .../theme_default/static/src/scss/colors.scss |  19 -
 .../static/src/scss/customize_modal.scss      |  18 -
 .../src/scss/option_color_amethyst.scss       |  53 ---
 .../option_color_amethyst_bs_variables.scss   |  19 -
 .../scss/option_color_amethyst_variables.scss |   7 -
 .../static/src/scss/option_color_cobalt.scss  |  54 ---
 .../option_color_cobalt_bs_variables.scss     |  15 -
 .../scss/option_color_cobalt_variables.scss   |   7 -
 .../static/src/scss/option_color_emerald.scss |  53 ---
 .../option_color_emerald_bs_variables.scss    |  15 -
 .../scss/option_color_emerald_variables.scss  |   7 -
 .../static/src/scss/option_color_gold.scss    |  53 ---
 .../scss/option_color_gold_bs_variables.scss  |  15 -
 .../src/scss/option_color_gold_variables.scss |   7 -
 .../static/src/scss/option_color_ruby.scss    |  53 ---
 .../scss/option_color_ruby_bs_variables.scss  |  19 -
 .../src/scss/option_color_ruby_variables.scss |   7 -
 .../static/src/scss/option_font.scss          |   2 -
 .../static/src/scss/option_layout_boxed.scss  |   6 -
 .../static/src/scss/primary_variables.scss    |  47 ---
 .../views/theme_default_templates.xml         | 214 -----------
 .../static/src/scss/bs_mixins_overrides.scss  |  36 +-
 addons/web/static/src/scss/ui.scss            |   6 +
 addons/web/static/src/scss/utils.scss         |  13 +
 addons/web/views/report_templates.xml         |  10 +-
 .../static/src/scss/bootstrap_overridden.scss |  28 +-
 .../scss/bootstrap_overridden_backend.scss    |   4 +
 .../static/src/scss/web_editor.variables.scss |  23 +-
 addons/web_editor/views/editor.xml            |   1 +
 addons/website/controllers/main.py            |  10 +-
 .../static/src/img/options/layout-boxed.png   | Bin 0 -> 371 bytes
 .../static/src/img/options/layout-full.png    | Bin 0 -> 352 bytes
 .../website/static/src/js/tours/customize.js  |  18 +
 addons/website/static/src/js/widgets/theme.js | 342 ++++++++++++++++--
 .../static/src/scss/bootstrap_overridden.scss |   9 +
 .../colors/option_color_user_variables.scss   |   4 +
 .../colors/user_color_palette_body.scss       |   4 +
 .../colors/user_color_palette_footer.scss     |   4 +
 .../colors/user_color_palette_menu.scss       |   4 +
 .../colors/user_color_palette_typo.scss       |  10 +
 .../colors/user_theme_color_palette.scss      |  15 +
 .../fonts/option_font_body_01_variables.scss  |   2 +
 .../fonts/option_font_body_02_variables.scss  |   2 +
 .../fonts/option_font_body_03_variables.scss  |   2 +
 .../fonts/option_font_body_04_variables.scss  |   2 +
 .../fonts/option_font_body_05_variables.scss  |   2 +
 .../fonts/option_font_body_06_variables.scss  |   2 +
 .../fonts/option_font_title_01_variables.scss |   2 +
 .../fonts/option_font_title_02_variables.scss |   2 +
 .../fonts/option_font_title_03_variables.scss |   2 +
 .../fonts/option_font_title_04_variables.scss |   2 +
 .../fonts/option_font_title_05_variables.scss |   2 +
 .../fonts/option_font_title_06_variables.scss |   2 +
 .../layout/option_custom_body_pattern.scss    |   5 +
 .../options/layout/option_layout_boxed.scss   |   6 +
 .../static/src/scss/primary_variables.scss    |  61 ++++
 .../static/src/scss/secondary_variables.scss  |  25 ++
 .../static/src/scss/website.edit_mode.scss    | 171 +++++++++
 addons/website/static/src/scss/website.scss   |  40 ++
 .../website/static/src/scss/website.ui.scss   |  48 ---
 .../website/static/src/xml/website.editor.xml |  62 +++-
 addons/website/views/website_templates.xml    | 244 +++++++++++--
 addons/website_theme_install/views/views.xml  |   6 +-
 79 files changed, 1116 insertions(+), 944 deletions(-)
 delete mode 100644 addons/theme_default/static/src/img/theme/layout-boxed.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/layout-full.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/variant-amethyst.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/variant-cobalt.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/variant-emerald.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/variant-gold.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/variant-ruby.gif
 delete mode 100644 addons/theme_default/static/src/img/theme/variant-stone.gif
 delete mode 100644 addons/theme_default/static/src/scss/bootstrap_overridden.scss
 delete mode 100644 addons/theme_default/static/src/scss/colors.scss
 delete mode 100644 addons/theme_default/static/src/scss/customize_modal.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_amethyst.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_amethyst_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_cobalt.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_cobalt_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_emerald.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_emerald_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_gold.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_gold_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_ruby.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_color_ruby_variables.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_font.scss
 delete mode 100644 addons/theme_default/static/src/scss/option_layout_boxed.scss
 delete mode 100644 addons/theme_default/static/src/scss/primary_variables.scss
 delete mode 100644 addons/theme_default/views/theme_default_templates.xml
 create mode 100644 addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
 create mode 100644 addons/website/static/src/img/options/layout-boxed.png
 create mode 100644 addons/website/static/src/img/options/layout-full.png
 create mode 100644 addons/website/static/src/js/tours/customize.js
 create mode 100644 addons/website/static/src/scss/bootstrap_overridden.scss
 create mode 100644 addons/website/static/src/scss/options/colors/option_color_user_variables.scss
 create mode 100644 addons/website/static/src/scss/options/colors/user_color_palette_body.scss
 create mode 100644 addons/website/static/src/scss/options/colors/user_color_palette_footer.scss
 create mode 100644 addons/website/static/src/scss/options/colors/user_color_palette_menu.scss
 create mode 100644 addons/website/static/src/scss/options/colors/user_color_palette_typo.scss
 create mode 100644 addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_01_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_01_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss
 create mode 100644 addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
 create mode 100644 addons/website/static/src/scss/options/layout/option_layout_boxed.scss
 create mode 100644 addons/website/static/src/scss/primary_variables.scss
 create mode 100644 addons/website/static/src/scss/secondary_variables.scss

diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index d742175fa5d..60ed887fa46 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -42,13 +42,12 @@ header {
 }
 .navbar {
     margin-bottom: 0;
+
     ul.nav > li {
         &.divider {
+            display: none;
             @include o-w-fill-navbar;
             border-right: 1px solid $nav-divider-color;
-            @include media-breakpoint-down(sm) {
-                display: none;
-            }
         }
 
         &.active + .divider {
@@ -61,14 +60,15 @@ header {
         }
     }
 }
+@include media-breakpoint-up(md) {
+    .navbar-expand-md ul.nav > li.divider {
+        display: list-item;
+    }
+}
 ul.flex-column > li > a {
     padding: 2px 15px;
 }
 
-footer {
-    background-color: #F8F8F8;
-}
-
 // Odoo options classes
 .jumbotron {
     margin-bottom: 0;
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index cd8e774171f..47d66ffe6f2 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -35,7 +35,7 @@
                             </button>
                             <div class="collapse navbar-collapse" id="top_menu_collapse">
                                 <!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
-                                <ul class="nav navbar-nav ml-auto" id="top_menu">
+                                <ul class="nav navbar-nav ml-auto text-right" id="top_menu">
                                     <li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
                                     <li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
                                         <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
@@ -55,7 +55,7 @@
                 <main>
                     <t t-raw="0"/>
                 </main>
-                <footer >
+                <footer class="bg-light o_footer">
                     <div class="container mt16 mb16" id="footer">
                         <div class="float-right" t-ignore="true" t-if="not editable">
                             Powered by <a target="_blank" href="http://www.odoo.com?utm_source=db&amp;utm_medium=portal">Odoo</a>
diff --git a/addons/theme_bootswatch/__manifest__.py b/addons/theme_bootswatch/__manifest__.py
index 8ce6fdb6f7a..bf6af7f0073 100644
--- a/addons/theme_bootswatch/__manifest__.py
+++ b/addons/theme_bootswatch/__manifest__.py
@@ -7,7 +7,7 @@
     'category': 'Theme/Corporate',
     'sequence': 900,
     'version': '1.0',
-    'depends': ['website'],
+    'depends': ['website', 'website_theme_install'],
     'data': [
         'data/theme_bootswatch_data.xml',
         'views/theme_bootswatch_templates.xml',
diff --git a/addons/theme_bootswatch/data/theme_bootswatch_data.xml b/addons/theme_bootswatch/data/theme_bootswatch_data.xml
index 04cf520a699..4a08164f879 100644
--- a/addons/theme_bootswatch/data/theme_bootswatch_data.xml
+++ b/addons/theme_bootswatch/data/theme_bootswatch_data.xml
@@ -9,4 +9,8 @@
         <field name="action_id" ref="action_website"/>
         <field name="state">open</field>
     </record>
+
+    <record id="website_theme_install.customize_modal" model="ir.ui.view">
+        <field name="active" eval="False"/>
+    </record>
 </odoo>
\ No newline at end of file
diff --git a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
index f0da5e7e2d9..3b3688073af 100644
--- a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
+++ b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
@@ -1,87 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <template id="theme_customize" inherit_id="website.theme_customize">
-        <xpath expr="div" position="replace">
-            <div role="dialog" id="theme_customize_modal" class="modal fade bs-example-modal-sm">
-                <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="loading_backdrop"></div>
-                        <header class="modal-header">
-                            <h4 class="modal-title">Customize your theme</h4>
-                            <button type="button" class="close">×</button>
-                        </header>
-                        <main class="modal-body">
-                            <div class="row">
-                                <div class="col-4 offset-4">
-                                    <label class="checked">
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png" alt="Default Theme"/>
-                                        <input name="theme" type="radio" data-xmlid="" checked="checked"/>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cerulean_thumbnail.png" alt="Cerulean"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean"/>
-                                    </label>
-                                </div>
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cosmo_thumbnail.png" alt="Cosmo"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-disable="ee"/>
-                                    </label>
-                                </div>
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cyborg_thumbnail.png" alt="Cyborg"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg"/>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/flatly_thumbnail.png" alt="Flatly"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly"/>
-                                    </label>
-                                </div>
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/journal_thumbnail.png" alt="Journal"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal"/>
-                                    </label>
-                                </div>
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/simplex_thumbnail.png" alt="Simplex"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex"/>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/slate_thumbnail.png" alt="Slate"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate"/>
-                                    </label>
-                                </div>
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/spacelab_thumbnail.png" alt="Spacelab"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab"/>
-                                    </label>
-                                </div>
-                                <div class="col-4">
-                                    <label>
-                                        <img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/united_thumbnail.png" alt="United"/>
-                                        <input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united"/>
-                                    </label>
-                                </div>
-                            </div>
-                        </main>
-                    </div>
-                </div>
+        <xpath expr="//div" position="replace">
+            <div>
+                <content data-string="Themes" data-title="Bootswatch Themes">
+                    <opt data-xmlid="" data-icon="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean" data-icon="/theme_bootswatch/static/src/img/cerulean_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-disable="ee" data-icon="/theme_bootswatch/static/src/img/cosmo_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg" data-icon="/theme_bootswatch/static/src/img/cyborg_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly" data-icon="/theme_bootswatch/static/src/img/flatly_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal" data-icon="/theme_bootswatch/static/src/img/journal_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex" data-icon="/theme_bootswatch/static/src/img/simplex_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate" data-icon="/theme_bootswatch/static/src/img/slate_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab" data-icon="/theme_bootswatch/static/src/img/spacelab_thumbnail.png"/>
+                    <opt data-xmlid="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united" data-icon="/theme_bootswatch/static/src/img/united_thumbnail.png"/>
+                </content>
             </div>
         </xpath>
     </template>
diff --git a/addons/theme_default/__manifest__.py b/addons/theme_default/__manifest__.py
index d7cfa2d391f..0a001245d21 100644
--- a/addons/theme_default/__manifest__.py
+++ b/addons/theme_default/__manifest__.py
@@ -3,14 +3,13 @@
 
 {
     'name': 'Default Theme',
-    'description': 'Default website theme to showcase customization possibilities.',
+    'description': 'Default website theme',
     'category': 'Theme/Corporate',
     'sequence': 1000,
     'version': '1.0',
-    'depends': ['website'],
+    'depends': ['website', 'website_theme_install'],
     'data': [
         'data/theme_default_data.xml',
-        'views/theme_default_templates.xml',
     ],
     'images': [
         'static/description/cover.png',
diff --git a/addons/theme_default/data/theme_default_data.xml b/addons/theme_default/data/theme_default_data.xml
index 04cf520a699..424fcc0e38f 100644
--- a/addons/theme_default/data/theme_default_data.xml
+++ b/addons/theme_default/data/theme_default_data.xml
@@ -9,4 +9,8 @@
         <field name="action_id" ref="action_website"/>
         <field name="state">open</field>
     </record>
-</odoo>
\ No newline at end of file
+
+    <record id="website_theme_install.customize_modal" model="ir.ui.view">
+        <field name="active" eval="False"/>
+    </record>
+</odoo>
diff --git a/addons/theme_default/static/src/img/theme/layout-boxed.gif b/addons/theme_default/static/src/img/theme/layout-boxed.gif
deleted file mode 100644
index 57e41958208b2bb6215a98c70fbca851e359c82e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1242
zcmZ?wbhEHb3}Y~2XkcL2d-(X94<8l(b4U0FD7Yk+Bm!w0`-+0Z<m}WEg{0K<%sgAA
z_q+EiDP*SDDutW+8u%7Cr)Fe&R28KLSNVk`S7j$#rYPClDcDq4Rpb`rrj{fsROII5
z6<bx<DkY}mC#6~e*&tzkB?YjOl5ATgN05X9$WG_{qErP_JyYFe10zEPb4xu#Qxi)=
zLmdSp14CndLj!#yOI<@lD-&}oLo)>^Py*Ukl#*r@<l+Xk3&^uo$|xx*u+rBrFE7_C
zH`dE9O4m2Ew6xSWFw!?N(gmu}Ew0QfNvzP#D^`Y?;F4OLT$EW*l9`{U05UN#DZjMD
zRte}*h!=7T;Kt?^>w&$amz<xgUy)d#Z>VPg@)As;uP=V3xw&xF#U(+h2=`(&xHzP;
zAXPsowK%`DC^;3VTp46lft7PnYGO%#QAmD%4lEP{GV)9Ei!<^I6r7zEG{Q6UQu51-
zHNnb#eXTt6ic1pnl2bihY?Xip=w)W6SXr8ynz@=9IvY4Tx)~a}npjv`nmJpT8XGto
zn3*|RSi<zW<R_QrrskEv^rj&6y5Q6cN(s3IK$~4si!#enQ{0O3a}~fow#vlq7Dt@s
zLG`BKc8e2Ez4}1M=!4=FDV||Mz{CS$!c#4f15fv<dBDV81WeV8|Ns5{^ZVD&AK$-y
z{qp(K#}Dt{y?yig)yo&ppFMr@_|d}$_wU`kbNklK8`rO0y>j`|#S7=pojr5<)X5Xa
zj~zX7_|U-v`}ghLvwPRh9ox5U-LiSp#trM&tzENv)yfsimn~hgc+tWI^XJW-Gkey|
z8PlgtoicgS#0mX<y*=GsogM9Mtu4(>jScm6wKdgMl@;Y>r6t8hg$4O}xjETcnHlM6
zsVT`xi3#y>u`$t6krClxp&`LRfdT%0zCPYwo*wRQt}f0_jt=&Awl>yQmKNq_rY6Ql
z!0e=_tD~)@siCf>s-mo<s30#VD<dr>DIqQ<Dk3Z-D8SFh%frpZ$-&OX%EHXV$iSfZ
zlZ62UbU*~C&|qMi*3vJ2`Yr$BIeIs{SKh06^uP4cipDgjWm?7C4si9qle~UA=hm*4
z=HKxzQyW|!PWWLQH^E_P>&z0R1=cU8WNp^kV7j*P_SdH5d)F&M?G_(>6|&2>>ago4
z%jJ3c8$WNio!|6bTu|eOL&S}OjvWhj-01ibA)#sUGyG)v%;}liEw6KazbUrLtSZc^
WjBDDdtzB2WzH*74z7oX1U=09RRM8j!

diff --git a/addons/theme_default/static/src/img/theme/layout-full.gif b/addons/theme_default/static/src/img/theme/layout-full.gif
deleted file mode 100644
index 7b7cdf739191b6f3222103d67b547eea0d918313..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1198
zcmZ?wbhEHb3}Y~2XkcL2d-(X94<8l(b4U0FD7Yk+Bm!w0`-+0Z<m}WEg{0K<%sgAA
z_q+EiDP*SDDutW+8u%7Cr)Fe&R28KLSNVk`S7j$#rYPClDcDq4Rpb`rrj{fsROII5
z6<bx<DkY}mC#6~e*&tzkB?YjOl5ATgN05X9$WG_{qErP_JyYFe10zEPb4xu#Qxi)=
zLmdSp14CndLj!#yOI<@lD-&}oLo)>^Py*Ukl#*r@<l+Xk3&^uo$|xx*u+rBrFE7_C
zH`dE9O4m2Ew6xSWFw!?N(gmu}Ew0QfNvzP#D^`Y?;F4OLT$EW*l9`{U05UN#DZjMD
zRte}*h!=7T;Kt?^>w&$amz<xgUy)d#Z>VPg@)As;uP=V3xw&xF#U(+h2=`(&xHzP;
zAXPsowK%`DC^;3VTp46lft7PnYGO%#QAmD%4lEP{GV)9Ei!<^I6r7zEG{Q6UQu51-
zHNnb#eXTt6ic1pnl2bihY?Xip=w)W6SUDLO88{hQx*0e+x)~a}npm2fySf-UTez9I
z7`Zu_n8WnC<R_QrrskEv^rpb|IvU{A3rY#O1wfl!Qj0RnQd8WD@^clyKDNrl?G_iD
z=0WwQ;B<?nD^9)oK*#8V;uR^LVM4&f17gBcEsz6G_o;cn#9jnU)r|lD{r&U%*Uul{
zzkU7k`P0V_@87+B^ZM1x7tfzPee(Fx!w2{8-Mw@B*3BE&uU)-z`O?J;=g*xzbNbZD
z6UUDoJ#zTa!2|pE?cK9`*UlZ=w{6|BdDF%X>({MavwGFa70Z_`U9x!5!Ugl^&7CuQ
z*322xr%jzQdD6rQ{e8VX-Cdm>?QN|s%}tFB^>wv1)m4=h<z=NM#YKe$`FXiH*;$zx
z>1nAc$w`R`@o}*+(NU2R;bEa6!9jrm{(inb-d>&_?ryFw&Q6XF_I9>5)>f7l=4PfQ
z#zw&Gq^GN+t);1<uBNJ@tfZ(QFDEM_EhQ--E+#4>EF>tv&&SKd&Be*V&c@2Z%*4pR
zp!k!80R(hF1gOwpV9ILgUwQg1|Kd4YZgp?Ix92y1+ar%@&pMaAI<@T`_wi3Y*T3~X
z|8?&BKYkvr_9ID34L(}a&n)}Q+3U6Z%BrtjXS257S@)frulx9uO+S15R$qU!?Kf}#
f>E~Z|{p~yd`um@K|M?{}EIcAIDt3f0FjxZsV3@(b

diff --git a/addons/theme_default/static/src/img/theme/variant-amethyst.gif b/addons/theme_default/static/src/img/theme/variant-amethyst.gif
deleted file mode 100644
index 42dd89f4f34f49ef976700b76d0bd456ff26a6a5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1143
zcmZ?wbhEHbG-5DfXkcLIb6Ly4z@Ye_JHj_W!6mUI5lGwER}>^BXQ!4ZB&DWj=GiK}
z-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT8hBDWwnwIorYA~z?m
z*s8)-DKRBKDb)(d1_|pcDS(xfWZNn^f+Q3`b~@)5r7D=}nd&AR7#S*<Tk08_nphed
z>L?f)7#iyv8t5BY>KYnanV4G{nkhhm6417ylr*a#7dNO~K%T8qMoCG5mA-y?dAVM>
zv0i>ry1t>MrKP@sk-m|UE>MMTab;dfVufyAu`<jAm(=3qqRfJl%=|nBkco*&`K2Yc
zN<f!FypUS}H#V<W59}Si<osOyio^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi
zsro^w#rdU0$*Dl)${?!>telHd6HD@oLh|!-V4)b0kzbNuoRMFk;OwlR5uTZsl3!k|
z30CgwYvq|&T#}fVoa*Ufs{}MaFEca6%G}Ao(#+M;*}%!f(a_M<#M0Q!&C<=$&>Sdg
z=4|Q;)9aF-T$-DjR|3<Ug3#-NQ!gkb<Q4#Jc1bPDEK5ysE6UGR0Q=Y~6SrF&aheC!
zn}XXdPB``I10ACeidUp~h6w=^4~Pj*wLlI$-KXXO6MGRbRWtto_xI25Uq63*|MvCE
z=T9F$ynpxh&Ffb$Up#;I^vUB#4<FpWclXZiTQ_f9zjpP?<x3YYoIiK=%;{4nPaHpX
z^vK~u2M_Guw|CF(T|0Md-?nwj=1m(ntY5cw&FWPvS1ez)bjjjH3m43vH+RnLSu<x$
zpEh;M<Vh1J^!N4lba!=jw70dkG&eOi)YsM4R9972l$Vv36c-g1<mct)WM^e&q^G5(
zBqt>%#K*<PL`OwNgolNO1P28M`1|?#czbzzxVyQ!I6FBy*xT9KSX)_In46iJ7#jhz
zlb)`Qww9)bx|*trvXY{Lyqv6zw3MWTxR|Jju#lhtKOZj-Hy0-dI~ywtGZQ1QX!ywj
zEFc&dbU*~C&|qLPZs}in`Yr$BIa_XZZ@#zZH-FnBk7>_3m%Tc*?H%{=Pd?Yb^*;Y~
W?)yJ}9<KHyi#~SvXsNR@SOWmishl?e

diff --git a/addons/theme_default/static/src/img/theme/variant-cobalt.gif b/addons/theme_default/static/src/img/theme/variant-cobalt.gif
deleted file mode 100644
index c7237049e183d3e7c8bfe0f7088b03d33c6aadad..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1143
zcmZ?wbhEHbG-5DfXkcJ4nQ@zefkE*<cZ6?%f=gmaB9OMRuP8`N&Q2{+NJ>r5%(GQ`
zzk9!uLS~AsQn;zFfp39xYDT6<RZ(him0w75Rd%vvijuvZf=z{0MQ%ZEYDuC(MQ%=B
zu~mhwQesMeQmPe@4HDK@QUEI{$+lH;1W71>>~zjAN>wn`Gu2HtFfvpyx70H<HL)}_
z)KM@pFf`UTG|)G))HO7;GBLL@G*f^AC7^9ZDQQ+gE^bh}fIM5JjFOT9D}DX)@^Za$
zW4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7^KE~&-IMVSR9nfZANAQKal@=Hr>
zm4GgVcp<j{Zfst$9@sm2$@#hZ6^RA<hI$4dFToW0`r=obn+sQ6ToROua4%Mai$f|4
zQuTvUi}Op1l2d`ol|fb&SUDG^CYIzEh2-bwz(O$~BfliSI3vG6!P!|sBRn%NCBM8_
z6Rh0V*UB@mxFj(zIn~p}Rtac;US?*Bm5Zf;rKyXNiGdR+s9jAgO<YVZoSe-Z&0Gx4
z9335DdR_99OLJ56N?>|Z5PD5<>IJ2Q+ybD@E~!PCWvMA{Mftf3U>{p$;&zJ>PV=C8
zQ*gV*7^hx+pkwqw@ro4BFd<;#0WsmJ7RZ68`_w#OVlM)wYR3Qn{{H#>>*tT}-@bnN
z{ORL|_wU}mdHw3;i|5atK6(7;;e-44?%uh5>*kH?*REc<eCgta^XJZ<IeqHniQ~tP
z9yxsI;DP=7_U_reYv+#b+qQ1mylLZx_3PHIS-ooIisj3eE?K;2;ez?|=FXWtYvzpU
z)22?DJZa*D{=VLx?yk;`_O{lR=BCDm`nuYh>Z;0$^0LyB;-bQW{Jh+p?5xa;^t9BJ
z<fO!e__)}Z=%~nu@UYO3;Gn<&e?MOzZ!b>|cQ;oTXD3GodplbjYb#3&b2C#DV<TX8
z($m$^*3#5aS5s9{R#H@umy?x|mXeeZ7ZVi`77`TT=i}w!=HldFXJchyW?}>u4L@0c
z1q1_w4u}918VpRvE&VG`zvW*%XUnbb&G+{F=5KrCG3{CBvR9|Jz2iRq$>;jF-siv0
VegDVL!_|Id(Z>!SEp=7~YXDS<o67(I

diff --git a/addons/theme_default/static/src/img/theme/variant-emerald.gif b/addons/theme_default/static/src/img/theme/variant-emerald.gif
deleted file mode 100644
index 6ca27b08e36334dd2b8563a790f3d2a305e4049f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1143
zcmZ?wbhEHbG-5DfXkcJaUzfnZz@Ye_JHj_W!6mUI5lGwER}>^BXQ!4ZB&DWj=GiK}
z-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT8hBDWwnwIorYA~z?m
z*s8)-DKRBKDb)(d1_|pcDS(xfWZNn^f+Q3`b~@)5r7D=}nd&AR7#S*<Tk08_nphed
z>L?f)7#iyv8t5BY>KYnanV4G{nkhhm6417ylr*a#7dNO~K%T8qMoCG5mA-y?dAVM>
zv0i>ry1t>MrKP@sk-m|UE>MMTab;dfVufyAu`<jAm(=3qqRfJl%=|nBkco*&`K2Yc
zN<f!FypUS}H#V<W59}Si<osOyio^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi
zsro^w#rdU0$*Dl)${?!>telHd6HD@oLh|!-V4)b0kzbNuoRMFk;OwlR5uTZsl3!k|
z30CgwYvq|&T#}fVoa*Ufs{}MaFEca6%FNi&z`(`D(7?&W(a_M<#KOYW+11$9%*EN!
z$jQmb0;bm`Ke;qFHLnDwHwB^B2&Z09O2{n$+U$~Alv$RV;#QQOs{r<~RVGfiIJ@CA
z52`l>w_6Nw>eUB2MjsTfNbw940wx|16P{{;9C*4<%>yR(B4Da!{QvLopWnZJ{`mgw
z>zB`;K7M%r?(Lh`uU@`*{_N?K$B!O9xPR~No!hr=-nf44>XplvE?zi)?(CV<r%s+Y
ze(dOx!-ozY*uQV@p5424?%2L<>z2)%Hf~tIZta@Yt5&X9zHI4|#fug$m_KjsoY}Kx
z&X_)J>XgZoCQj(@>+R|8>g;H5Yi((6YHX;ltF5W7s;nq4D=jH5DlEv)%gxEo%FIYl
zOHD~mN=%54i;annii`*k3k?Yl3Jmb~^Y!ue^7L?bb9Hfca&)k_v$e6dva~QaGc_?b
z0%j*YT^(&LO$~K5RTX6=MFn{|Ss7_5NeOW=Q4wJwK>>a~ULI~PP7Zc9Ru*O^MqttK
zlLc5nFfizV2vDKHz+~Lgzw-23{>5{)-0I$ZZ_jW3wnrY*o^>vJb!yu??&F_)u7B%&
Y{_EWLfBZaL?MD`U?C{Z2XJxPk0AGQd+W-In

diff --git a/addons/theme_default/static/src/img/theme/variant-gold.gif b/addons/theme_default/static/src/img/theme/variant-gold.gif
deleted file mode 100644
index b9a2782c051ba96205fd836619ea14c5b912301d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1143
zcmZ?wbhEHbG-5DfXkcLYyhezDfkE*<cZ6?%f=gmaB9OMRuP8`N&Q2{+NJ>r5%(GQ`
zzk9!uLS~AsQn;zFfp39xYDT6<RZ(him0w75Rd%vvijuvZf=z{0MQ%ZEYDuC(MQ%=B
zu~mhwQesMeQmPe@4HDK@QUEI{$+lH;1W71>>~zjAN>wn`Gu2HtFfvpyx70H<HL)}_
z)KM@pFf`UTG|)G))HO7;GBLL@G*f^AC7^9ZDQQ+gE^bh}fIM5JjFOT9D}DX)@^Za$
zW4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7^KE~&-IMVSR9nfZANAQKal@=Hr>
zm4GgVcp<j{Zfst$9@sm2$@#hZ6^RA<hI$4dFToW0`r=obn+sQ6ToROua4%Mai$f|4
zQuTvUi}Op1l2d`ol|fb&SUDG^CYIzEh2-bwz(O$~BfliSI3vG6!P!|sBRn%NCBM8_
z6Rh0V*UB@mxFj(zIn~p}Rtac;US?*Bm4&mjp_!?Rg@KcaqoJXziKUUDvy+>FiHnJg
zqmiMbDNL_ResXDUYF-IUZwf-MB~HDdl#p8hwAm%KD6=dz#jPkmR{`u}t4!Q(F~eyd
zRBsAyx0vJ9s}FRHJ}6$1;u$6cOgtbaJk<g@@N}P=2Tbfmz*Non|KHy~zkmJw@%`J^
zFP}es{P6zW+c&RYy?pWf+0!SFA3c0<|K8m@w{P9NasArWE0-@_ym0>9*)yk4ojh^;
z*wG`04;?(Pf8X9cyLau}v3=XtEt@xO+^~M#+BK_Jtz5Bu+0rG87cE>cf8N|VvuDkm
zF@4(9DU&BnoY3Fb+tc0E+0owC+S1(A*ic_rTT@+CSy5hAT2fq8SdgEWo0FZDnUS8B
znv$H9m=GTq8xtKB84(^98WJ277~t>c>*MX^>EZ6?>f-F==wNSWYh!I?X<=?=YGP~z
z%uaf`I@(&A8tQ7QD#}WV3i5KYGSX6#65?W_BEmv~0{ncuJltHI9PDhYEX+)dz@p(N
z3$TD-V9)^(phAOz$+)F|<>|Nli|1^))xG)Np5Od!k36P5>s<Eg)V6or$3OX8|JM8b
X*SYWi_<6Y6k1YDw;iIL_%3uuuYL}bE

diff --git a/addons/theme_default/static/src/img/theme/variant-ruby.gif b/addons/theme_default/static/src/img/theme/variant-ruby.gif
deleted file mode 100644
index b6a06a60cb7af2d579786e14c6c69a2aad4df7ff..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1143
zcmZ?wbhEHbG-5DfXkcJ??qkEiz@Ye_JHj_W!6mUI5lGwER}>^BXQ!4ZB&DWj=GiK}
z-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT8hBDWwnwIorYA~z?m
z*s8)-DKRBKDb)(d1_|pcDS(xfWZNn^f+Q3`b~@)5r7D=}nd&AR7#S*<Tk08_nphed
z>L?f)7#iyv8t5BY>KYnanV4G{nkhhm6417ylr*a#7dNO~K%T8qMoCG5mA-y?dAVM>
zv0i>ry1t>MrKP@sk-m|UE>MMTab;dfVufyAu`<jAm(=3qqRfJl%=|nBkco*&`K2Yc
zN<f!FypUS}H#V<W59}Si<osOyio^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi
zsro^w#rdU0$*Dl)${?!>telHd6HD@oLh|!-V4)b0kzbNuoRMFk;OwlR5uTZsl3!k|
z30CgwYvq|&T#}fVoa*Ufs{}MaFEca6%GJo+(cHk;z`zL<)UGC$&L+lA28QN_ZU&ZS
z&XyK1y)OC5rManjB{01y2)%|l^@37DZUN9{m(-%nveXo}qWoM1u#c@Wak|CG6{mSn
zy(u`|V&sNXuRhQ*`k;74if5P*F!6wx@Kg)rz|(zd9x$;N0aG>O|9^k~{QmXx$M<hv
zzkL4m@x%LfZ{NIr_438@XHTCze)RCc{d;%s+`e`5#`SAguUx)#@xu9YXV08Ib@IgV
zV@Ho1K6LQF{(XD*?B2C=$M$Vow`|_Dal`s`YuBt^wQ|MsWlNVVUbJw*{CRWd%$_xK
z#`I}Zr%awSaYBDzZ%=nuXGeQmYfE!eV?%viZB2DmWkq>eX-RQWVL^UgZccVqW=48i
zYD#iaVnTdeY)o`iWJGvaXh?8SV1U1$uaCEvr-!?ntBbRfql3Mjt&O#nrG>efsfn=>
zFgxk#>S$|eYN)HJswgWdD#**p%1BE|N{EYziU<n{3h?vs@^Eu;a<H?pvM@6-0*i*9
zEWiSSfk6jEfC>!;CgYa=m8akGFP^jIR`=$6dw%n`J@T0LtaI6`Q`_EgAOGZY{af$z
XU+2F6<LBXOKeFg!hmV#zD}yxvnNXUu

diff --git a/addons/theme_default/static/src/img/theme/variant-stone.gif b/addons/theme_default/static/src/img/theme/variant-stone.gif
deleted file mode 100644
index 6ae3a649a6c0afcbd05543effc5d5dc1afa6bc10..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1143
zcmZ?wbhEHbG-5DfXkcKNx^x)>1B2p!?g-xi1((E<L?CTrUr~^loSj;tkd&I9nP;o?
ze)oPQh0GLNrEpVU1K$GY)Qn7zs-o23D!-8As_bOT6eW8*1)B=1irj+S)RIJnirk#M
zVyg;UrNor{q*N;)8zii+qySb@l5MNx2$E0$+3B2Ll&WB=XR4cQU}UIZZmDNzYGP?<
zsH0$HU}&swXrOOoscUFxWnyk+Xr=%KN<iC+Qqrt~T-=~`0eQAc86_nJR{Hwo<>h+i
z#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mX=fTvCgZi!uvJGV}8kKqe+8<(HP&
zDgj*z@j`9^+}ONgJ+OE5lJj%*D-sLz4fPB_UV<s~^~J9=Hy5tDxFjeQ;a;o;7l%|9
zr0NHy7U!21C8q+FD}$^muyQU+O)SYT3dzsUfrVl~Mt(_taYlZDg0r)NMtEjkN`85<
zCRn+zua#$BaY<rca;m3`trE}xz0AxMD-$y}GdB}Qa|0(6M?*tb6H7A#b2oDXBTG{!
zOCuK(W0+o-{N&Qy)Vvay-V}sh3!HjEDIvE2XtPUdQD#|cid#{Bt^(M{R++fnVv5r|
zsNNLZZZX5DS0CsYeNen2#WPF@n0P=;c&Y_*;ORa!5181CfT^1C|G&R~e*gOU<NLR-
zUp{~O_~HG#w{Kp*dimn{v!_oUKYIA!{=K_*Zr{3j<NCF$S1w<=c;WoHvu949I(g#w
zv7<*0A3Ato|GvF@cJJD`WBazPTQ+anxMBUewQE+dTDfBRvZYHFFIu=@{=B(!X3v^A
zWBRnIQzlQEIHA9<x2L<Sv!lJOwWYbKv7x@Mwx+tOvZB1Kw4}JGupmD#HzzwQGb24M
zH6=MIF(E!KHYPeMG9o-IG$c4EFu>o>*T>t-)5G1()y3J#(ZSx%*2db((!$)#)Wp~b
zn4R==b+olKHPqEqRg{$!73Ae)Wu&DfCB(%<MTCU}1^D@RdAPYaIoR1)S(up^fknel
z7GMFvz@P&nK!pYalW|M`%F}Q87th&pt9$dkJ-_+e9(hcA*17D}scrALkAL#H{;l`<
XuXEr3@$+!CA6fLV!$(V<mBAVS96+07

diff --git a/addons/theme_default/static/src/scss/bootstrap_overridden.scss b/addons/theme_default/static/src/scss/bootstrap_overridden.scss
deleted file mode 100644
index 172790fc0b7..00000000000
--- a/addons/theme_default/static/src/scss/bootstrap_overridden.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-
-// TODO review BS4 gray palette for theme default
-// $gray-900: lighten(#000, 20%);
-// $gray-800: lighten(#000, 40%);
-// $gray-700: lighten(#000, 55%);
-// $gray-600: lighten(#000, 70%);
-// $gray-200: lighten(#000, 80%);
diff --git a/addons/theme_default/static/src/scss/colors.scss b/addons/theme_default/static/src/scss/colors.scss
deleted file mode 100644
index 5e58c0f4c73..00000000000
--- a/addons/theme_default/static/src/scss/colors.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.bg-blue      { background-color: $color-blue;}
-.bg-turquoise { background-color: $color-turquoise;}
-.bg-green     { background-color: $color-green;}
-.bg-yellow    { background-color: $color-yellow;}
-.bg-orange    { background-color: $color-orange;}
-.bg-red       { background-color: $color-red;}
-.bg-pink      { background-color: $color-pink;}
-.bg-purple    { background-color: $color-purple;}
-.bg-brown     { background-color: $color-brown;}
-
-.text-blue      { color: $color-blue;}
-.text-turquoise { color: $color-turquoise;}
-.text-green     { color: $color-green;}
-.text-yellow    { color: $color-yellow;}
-.text-orange    { color: $color-orange;}
-.text-red       { color: $color-red;}
-.text-pink      { color: $color-pink;}
-.text-purple    { color: $color-purple;}
-.text-brown     { color: $color-brown;}
diff --git a/addons/theme_default/static/src/scss/customize_modal.scss b/addons/theme_default/static/src/scss/customize_modal.scss
deleted file mode 100644
index ce963f659a3..00000000000
--- a/addons/theme_default/static/src/scss/customize_modal.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-#theme_customize_modal {
-    .modal-h5 {
-        color: #ffffff;
-        font-family: "Lato-Regular";
-        font-weight: normal;
-        text-transform: uppercase;
-        letter-spacing: normal;
-        font-size: 14px;
-        color: white;
-        padding: 4px 0 4px 4px;
-        background-color: #bdc3c7;
-    }
-    table {
-        width: 100%;
-        margin-bottom: 8px;
-    }
-}
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss
deleted file mode 100644
index 790d345ece7..00000000000
--- a/addons/theme_default/static/src/scss/option_color_amethyst.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* COLORED BG -------------------------------------------------------- */
-
-// .bg-primary {
-//     background-color: $color-clouds;
-// }
-// .bg-success {
-//     background-color: $color-purple;
-// }
-// .bg-info {
-//     background-color: $color-twilight;
-// }
-// .bg-warning {
-//     background-color: $color-purple-dark;
-// }
-// .bg-danger {
-//     background-color: $color-midnight;
-// }
-
-// .btn .fa {
-// 	color: white;}
-
-// .btn-secondary .fa {
-// 	color: gray('900');}
-
-// /* TRANSPARENT BG --------------------------------------------------- */
-// Used in snippets Prx Image Color and Prx Image Shade -------------
-
-// .bg-transparent-color 		{ background: $color-twilight; opacity: 0.85;}
-// .bg-transparent-shade		{ background: black; opacity: 0.5;}
-
-// /* Footer ----------------------------------------------------------- */
-
-// #wrapwrap footer {
-//    background-color: $color-concrete-dark;
-//     color: gray('600');
-//     }
-// footer ul li a {
-// 	color: $color-clouds;
-// 	}
-// footer ul li a:hover {
-// 	color: white;
-//     text-decoration: none;
-// 	}
-// footer h4 {
-// 	color: gray('200');
-// 	padding-bottom: 12px;
-//     text-transform: uppercase;
-//     }
-// footer .fa {
-//     color: $color-concrete;
-//   }
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss
deleted file mode 100644
index 5c35da75b02..00000000000
--- a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* GRAYS --------------------------------------------------------- */
-
-// $gray-900: lighten(#000, 30%);
-
-// /* TEXTS & LINKS --------------------------------------------------- */
-
-// $text-muted: $color-primary;
-// $link-color: $color-primary;
-// $link-hover-color: $color-success;
-
-// /* BUTTONS --------------------------------------------------------- */
-
-// $btn-primary-bg: $color-silver;
-// $btn-success-bg: $color-concrete;
-// $btn-info-bg: $color-purple;
-// $btn-warning-bg: $color-purple-light;
-// $btn-danger-bg: $color-red;
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss b/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss
deleted file mode 100644
index b770aadd105..00000000000
--- a/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-purple;
-$color-success:         $color-purple-dark;
-$color-info:            $color-twilight;
-$color-warning:         $color-red-dark;
-$color-danger:          $color-midnight;
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss
deleted file mode 100644
index 25fda624a32..00000000000
--- a/addons/theme_default/static/src/scss/option_color_cobalt.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* COLORED BG -------------------------------------------------------- */
-
-// .bg-primary {
-//     background-color: $color-wind;
-// }
-// .bg-success {
-//     background-color: $color-silver;
-// }
-// .bg-info {
-//     background-color: $color-blue;
-// }
-// .bg-warning {
-//     background-color: $color-blue-dark;
-// }
-// .bg-danger {
-//     background-color: $color-asphalt;
-// }
-
-// .btn .fa {
-// 	color: white;}
-
-// .btn-secondary .fa {
-// 	color: gray('900');}
-
-// /* TRANSPARENT BG --------------------------------------------------- */
-// Used in snippets Prx Image Color and Prx Image Shade -------------
-
-// .bg-transparent-color { background: $color-blue-dark; opacity: 0.9;}
-// .bg-transparent-shade { background: black; opacity: 0.5;}
-
-// /* Footer ----------------------------------------------------------- */
-
-// #wrapwrap footer {
-//    background-color: $color-midnight;
-//    color: gray('700');
-// }
-// footer ul li a {
-// 	color: $color-silver;
-// }
-
-// footer ul li a:hover {
-// 	color: $color-clouds;
-//     text-decoration: none;
-// }
-// footer h4 {
-// 	color: $color-stone;
-// 	padding-bottom: 12px;
-//     text-transform: uppercase;
-// }
-// footer .fa {
-//     color: gray('600');
-// }
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss
deleted file mode 100644
index a5faaf2411c..00000000000
--- a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* TEXTS & LINKS --------------------------------------------------- */
-
-// $text-muted:        $color-primary;
-// $link-color:        $color-primary;
-// $link-hover-color:  $color-info;
-
-// BUTTONS ---------------------------------------------------------
-
-// $btn-primary-bg:                 $color-blue;
-// $btn-success-bg:                 $color-turquoise;
-// $btn-info-bg:                    $color-green;
-// $btn-warning-bg:                 $color-orange;
-// $btn-danger-bg:                  $color-red;
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss b/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss
deleted file mode 100644
index d2aec3a8772..00000000000
--- a/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-blue;
-$color-success:         $color-turquoise;
-$color-info:            $color-green;
-$color-warning:         $color-asphalt;
-$color-danger:          $color-midnight;
diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss
deleted file mode 100644
index f1dba7d287f..00000000000
--- a/addons/theme_default/static/src/scss/option_color_emerald.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* COLORED BG -------------------------------------------------------- */
-
-// .bg-primary {
-//     background-color: $color-wind;
-// }
-// .bg-success {
-//     background-color: $color-silver;
-// }
-// .bg-info {
-//     background-color: $color-green-dark;
-// }
-// .bg-warning {
-//     background-color: $color-green;
-// }
-// .bg-danger {
-//     background-color: $color-forest;
-// }
-
-// .btn .fa {
-// 	color: white;}
-
-// .btn-secondary .fa {
-// 	color: gray('900');}
-
-// /* TRANSPARENT BG --------------------------------------------------- */
-// Used in snippets Prx Image Color and Prx Image Shade -------------
-
-// .bg-transparent-color 		{ background: $color-green-dark; opacity: 0.9;}
-// .bg-transparent-shade		{ background: black; opacity: 0.5;}
-
-// /* Footer ----------------------------------------------------------- */
-
-// #wrapwrap footer {
-//    background-color: $color-concrete-dark;
-//     color: gray('700');
-//     }
-// footer ul li a {
-// 	color: $color-clouds;
-// 	}
-// footer ul li a:hover {
-// 	color: white;
-//     text-decoration: none;
-// 	}
-// footer h4 {
-// 	color: $color-silver;
-// 	padding-bottom: 12px;
-//     text-transform: uppercase;
-//     }
-// footer .fa {
-//     color: $color-clouds;
-//   }
diff --git a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
deleted file mode 100644
index 4ff78669b81..00000000000
--- a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* TEXTS & LINKS --------------------------------------------------- */
-
-// $text-muted:        $color-success;
-// $link-color:        $color-success;
-// $link-hover-color:  $color-primary;
-
-// BUTTONS ---------------------------------------------------------
-
-// $btn-primary-bg:                 $color-green;
-// $btn-success-bg:                 $color-turquoise;
-// $btn-info-bg:                    $color-blue;
-// $btn-warning-bg:                 $color-orange;
-// $btn-danger-bg:                  $color-red;
diff --git a/addons/theme_default/static/src/scss/option_color_emerald_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_variables.scss
deleted file mode 100644
index 73f73b12dd3..00000000000
--- a/addons/theme_default/static/src/scss/option_color_emerald_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-green;
-$color-success:         $color-turquoise;
-$color-info:            $color-turquoise-dark;
-$color-warning:         $color-asphalt;
-$color-danger:          $color-midnight;
diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss
deleted file mode 100644
index ee3b64c3de5..00000000000
--- a/addons/theme_default/static/src/scss/option_color_gold.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* COLORED BG -------------------------------------------------------- */
-
-// .bg-primary {
-//     background-color: $color-sand;
-// }
-// .bg-success {
-//     background-color: $color-yellow;
-// }
-// .bg-info {
-//     background-color: $color-orange;
-// }
-// .bg-warning {
-//     background-color: $color-yellow-dark;
-// }
-// .bg-danger {
-//     background-color: $color-orange-dark;
-// }
-
-// .btn .fa {
-// 	color: white;}
-
-// .btn-secondary .fa {
-// 	color: gray('900');}
-
-// /* TRANSPARENT BG --------------------------------------------------- */
-// Used in snippets Prx Image Color and Prx Image Shade -------------
-
-// .bg-transparent-color 		{ background: $color-orange-dark; opacity: 0.85;}
-// .bg-transparent-shade		{ background: black; opacity: 0.5;}
-
-// /* Footer ----------------------------------------------------------- */
-
-// #wrapwrap footer {
-//    background-color: $color-orange-dark;
-//    color: white;
-//     }
-// footer ul li a {
-// 	color: $color-beach;
-// 	}
-// footer ul li a:hover {
-// 	color:  $color-yellow;
-//     text-decoration: none;
-// 	}
-// footer h4 {
-// 	color:  $color-beach;
-// 	padding-bottom: 12px;
-//     text-transform: uppercase;
-//     }
-// footer .fa {
-//     color:  $color-beach;
-//   }
diff --git a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss
deleted file mode 100644
index 21a94e8ffe1..00000000000
--- a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* TEXTS & LINKS ------------------------------------------------------- */
-
-// $text-muted:        gray('700');
-// $link-color:        $color-info;
-// $link-hover-color:  $color-primary;
-
-// /* BUTTONS --------------------------------------------------------- */
-
-// $btn-primary-bg:                 $color-yellow;
-// $btn-success-bg:                 $color-orange;
-// $btn-info-bg:                    $color-yellow-dark;
-// $btn-warning-bg:                 $color-orange-dark;
-// $btn-danger-bg:                  $color-red-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_gold_variables.scss b/addons/theme_default/static/src/scss/option_color_gold_variables.scss
deleted file mode 100644
index 596423eeef0..00000000000
--- a/addons/theme_default/static/src/scss/option_color_gold_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-orange;
-$color-success:         $color-red;
-$color-info:            $color-yellow-dark;
-$color-warning:         $color-red-dark;
-$color-danger:          $color-orange-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss
deleted file mode 100644
index d652a80518e..00000000000
--- a/addons/theme_default/static/src/scss/option_color_ruby.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* COLORED BG -------------------------------------------------------- */
-
-// .bg-primary {
-//     background-color: $color-sand;
-// }
-// .bg-success {
-//     background-color: $color-red;
-// }
-// .bg-info {
-//     background-color: $color-red-dark;
-// }
-// .bg-warning {
-//     background-color: $color-orange;
-// }
-// .bg-danger {
-//     background-color: $color-orange-dark;
-// }
-
-// .btn .fa {
-// 	color: white;}
-
-// .btn-secondary .fa {
-// 	color: gray('900');}
-
-// /* TRANSPARENT BG --------------------------------------------------- */
-// Used in snippets Prx Image Color and Prx Image Shade -------------
-
-// .bg-transparent-color 		{ background: $color-red-dark; opacity: 0.85;}
-// .bg-transparent-shade		{ background: black; opacity: 0.5;}
-
-// /* Footer ----------------------------------------------------------- */
-
-// #wrapwrap footer {
-//    background-color: $color-burgundy;
-//    color: gray('200');
-//     }
-// footer ul li a {
-// 	color: white;
-// 	}
-// footer ul li a:hover {
-// 	color: $color-orange;
-//     text-decoration: none;
-// 	}
-// footer h4 {
-// 	color: $color-sand;
-//     padding-bottom: 12px;
-//     text-transform: uppercase;
-//     }
-// footer .fa {
-//     color: $color-red;
-//   }
diff --git a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss
deleted file mode 100644
index 174bedbb4ec..00000000000
--- a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* GRAYS --------------------------------------------------------- */
-
-// $gray-700:                   lighten(#000, 50%);
-
-// /* TEXT & LINKS -------------------------------------------------------- */
-
-// $text-muted:        gray('700');
-// $link-color:        $color-primary;
-// $link-hover-color:  $color-success;
-
-// BUTTONS ---------------------------------------------------------
-
-// $btn-primary-bg:                 $color-red;
-// $btn-success-bg:                 $color-orange;
-// $btn-info-bg:                    $color-yellow-dark;
-// $btn-warning-bg:                 $color-orange-dark;
-// $btn-danger-bg:                  $color-red-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_ruby_variables.scss b/addons/theme_default/static/src/scss/option_color_ruby_variables.scss
deleted file mode 100644
index c780d477bda..00000000000
--- a/addons/theme_default/static/src/scss/option_color_ruby_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-red;
-$color-success:         $color-red-dark;
-$color-info:            $color-orange;
-$color-warning:         $color-purple;
-$color-danger:          $color-orange-dark;
diff --git a/addons/theme_default/static/src/scss/option_font.scss b/addons/theme_default/static/src/scss/option_font.scss
deleted file mode 100644
index c62716313f5..00000000000
--- a/addons/theme_default/static/src/scss/option_font.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
-$font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/addons/theme_default/static/src/scss/option_layout_boxed.scss b/addons/theme_default/static/src/scss/option_layout_boxed.scss
deleted file mode 100644
index eda53e8a6c0..00000000000
--- a/addons/theme_default/static/src/scss/option_layout_boxed.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-#wrapwrap {
-    @include media-breakpoint-up(md) {
-        width: 85%;
-        margin: 0 auto;
-    }
-}
diff --git a/addons/theme_default/static/src/scss/primary_variables.scss b/addons/theme_default/static/src/scss/primary_variables.scss
deleted file mode 100644
index bb7cdef0818..00000000000
--- a/addons/theme_default/static/src/scss/primary_variables.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-$color-blue: #3498DB;
-$color-turquoise: #1ABC9C;
-$color-green: #2ECC71;
-$color-yellow: #F1C40F;
-$color-orange: #E67E22;
-$color-red: #E74C3C;
-$color-pink: #f74b94;
-$color-purple: #9B59B6;
-$color-brown: #7b5844;
-
-$color-blue-dark: #2980B9;
-$color-turquoise-dark: #16A085;
-$color-green-dark: #27AE60;
-$color-yellow-dark: #f3ac12;
-$color-orange-dark: #D35400;
-$color-red-dark: #C0392B;
-$color-pink-dark: #ea3884;
-$color-purple-dark: #8E44AD;
-$color-brown-dark: #604434;
-
-$color-blue-light: lighten($color-blue, 20%);
-$color-turquoise-light: lighten($color-turquoise, 20%);
-$color-green-light: lighten($color-green, 20%);
-$color-yellow-light: lighten($color-yellow, 20%);
-$color-orange-light: lighten($color-orange, 20%);
-$color-red-light: lighten($color-red, 20%);
-$color-pink-light: lighten($color-pink, 20%);
-$color-purple-light: lighten($color-purple, 20%);
-$color-brown-light: lighten($color-brown, 20%);
-
-$color-clouds: #ECF0F1;
-$color-silver: #BDC3C7;
-$color-concrete: #95A5A6;
-$color-stone: #7F8C8D;
-$color-asphalt: #34495E;
-$color-midnight: #2C3E50;
-
-$color-concrete-dark: #445b5c;
-
-$color-wind: #f7f7f7;
-$color-clay: #e1dcd5;
-$color-sand: #c5bcb1;
-$color-beach: #f3bf91;
-$color-forest: #254c3a;
-$color-twilight: #3b2c50;
-$color-burgundy: #8e362d;
-$color-marine: #212d3a;
diff --git a/addons/theme_default/views/theme_default_templates.xml b/addons/theme_default/views/theme_default_templates.xml
deleted file mode 100644
index 35b1b1193cd..00000000000
--- a/addons/theme_default/views/theme_default_templates.xml
+++ /dev/null
@@ -1,214 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/primary_variables.scss"/>
-    </xpath>
-</template>
-<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/bootstrap_overridden.scss"/>
-    </xpath>
-</template>
-<template id="assets_frontend" inherit_id="website.assets_frontend">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/colors.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/customize_modal.scss"/>
-    </xpath>
-</template>
-
-<template id="customize_modal" inherit_id="website.theme_customize" name="theme_default modal">
-  <xpath expr="div" position="replace">
-    <div role="dialog" id="theme_customize_modal" class="modal fade">
-      <div class="modal-dialog">
-          <div class="modal-content">
-
-              <div class="loading_backdrop"></div>
-              <header class="modal-header text-center">
-                  <button type="button" class="close">×</button>
-                  <!-- <a role="button" class="btn btn-primary" href="/web#return_label=Website&amp;action=website.action_module_theme">Click here to change theme</a> -->
-                  <hr style="margin: 20px -10px 10px -10px;"/>
-                  <h4 class="modal-title">Customize this default theme</h4>
-              </header>
-              <main class="modal-body">
-                  <h5 class="modal-h5">LAYOUT</h5>
-                  <table name="layout">
-                      <tr>
-                          <td class=" text-center" width="50%">
-                              <label class=" d-block mx-auto">
-                                  <div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
-                                  <input name="layoutvar" type="radio" data-xmlid=""/>
-                              </label>
-                          </td>
-                          <td class=" text-center">
-                              <label class=" d-block mx-auto">
-                                 <div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
-                                  <input name="layoutvar" type="radio" data-xmlid="theme_default.option_layout_boxed"/>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-
-                  <h5 class="modal-h5">MAIN COLOR</h5>
-                  <table name="color">
-                      <tr>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/theme_default/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid=""/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/theme_default/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_emerald_variables,theme_default.option_color_emerald_bs_variables,theme_default.option_color_emerald"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/theme_default/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_cobalt_variables,theme_default.option_color_cobalt_bs_variables,theme_default.option_color_cobalt"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/theme_default/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_amethyst_variables,theme_default.option_color_amethyst_bs_variables,theme_default.option_color_amethyst"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/theme_default/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_ruby_variables,theme_default.option_color_ruby_bs_variables,theme_default.option_color_ruby"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/theme_default/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_gold_variables,theme_default.option_color_gold_bs_variables,theme_default.option_color_gold"/>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-
-                  <h5 class="modal-h5">FONTS COMBINATIONS</h5>
-                  <table name="font">
-                      <tr>
-                          <td width="50%">
-                              <label>
-                                  <div>
-                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
-                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
-                                  </div>
-                                  <input name="theme" type="radio" data-xmlid=""/>
-                              </label>
-                          </td>
-                          <td width="50%">
-                              <label>
-                                  <div>
-                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
-                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
-                                    <input name="theme" type="radio" data-xmlid="theme_default.option_font"/>
-                                  </div>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-              </main>
-          </div>
-      </div>
-  </div>
-  </xpath>
-</template>
-
-<!-- Option layout -->
-<template id="option_layout_boxed" inherit_id="theme_default.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_layout_boxed.scss"/>
-    </xpath>
-</template>
-
-<!-- Option color -->
-<template id="option_color_emerald_variables" inherit_id="theme_default._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_emerald_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald_bs_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_emerald" inherit_id="theme_default.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald.scss"/>
-    </xpath>
-</template>
-<template id="option_color_cobalt_variables" inherit_id="theme_default._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_cobalt_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_cobalt" inherit_id="theme_default.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt.scss"/>
-    </xpath>
-</template>
-<template id="option_color_amethyst_variables" inherit_id="theme_default._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_amethyst_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_amethyst" inherit_id="theme_default.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst.scss"/>
-    </xpath>
-</template>
-<template id="option_color_ruby_variables" inherit_id="theme_default._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_ruby_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby_bs_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_ruby" inherit_id="theme_default.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby.scss"/>
-    </xpath>
-</template>
-<template id="option_color_gold_variables" inherit_id="theme_default._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_gold_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold_bs_variables.scss"/>
-    </xpath>
-</template>
-<template id="option_color_gold" inherit_id="theme_default.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold.scss"/>
-    </xpath>
-</template>
-
-<!-- Option font -->
-<template id="option_font" inherit_id="theme_default._assets_frontend_helpers" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_font.scss"/>
-    </xpath>
-</template>
-</odoo>
diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
index fd08c94a217..6627769ff07 100644
--- a/addons/web/static/src/scss/bs_mixins_overrides.scss
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -3,36 +3,38 @@
 // Those will affect the way bootstrap is generated wherever bootstrap is used
 //------------------------------------------------------------------------------
 
+@mixin o-bg-color($color, $text-color: null, $with-muted: true) {
+    @if ($color) {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background-color: $color !important;
+        color: $-yiq-color; // not important so that text utilities still work
+
+        @if ($with-muted) {
+            .text-muted {
+                color: rgba($-yiq-color, 0.4) !important;
+            }
+        }
+    }
+}
+
 // Override background utilities so that they come with a default contrasted
 // color (especially useful in the frontend editor for example). Also modifies
 // the way .text-muted elements are rendered in those environments.
 @mixin bg-variant($parent, $color, $text-color: null) {
     #{$parent} {
-        $-yiq-color: if($text-color, $text-color, color-yiq($color));
-        background-color: $color !important;
-        color: $-yiq-color; // not important so that text utilities still work
-
-        .text-muted {
-            color: rgba($-yiq-color, 0.4) !important;
-        }
+        @include o-bg-color($color, $text-color);
     }
     a#{$parent},
     button#{$parent} {
-        $-darken-color: darken($color, 10%);
         @include hover-focus {
-            background-color: $-darken-color !important;
-            color: if($text-color, $text-color, color-yiq($-darken-color));
+            @include o-bg-color(darken($color, 10%), $text-color, false);
         }
     }
 }
 @mixin bg-gradient-variant($parent, $color, $text-color: null) {
     #{$parent} {
-        $-yiq-color: if($text-color, $text-color, color-yiq($color));
-        background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
-        color: $-yiq-color;
-
-        .text-muted {
-            color: rgba($-yiq-color, 0.4) !important;
-        }
+        @include o-bg-color($color, $text-color);
+        background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important;
+        background-repeat: repeat-x !important;
     }
 }
diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss
index 7d28bf5ccae..5c06569de5d 100644
--- a/addons/web/static/src/scss/ui.scss
+++ b/addons/web/static/src/scss/ui.scss
@@ -24,6 +24,12 @@
     }
 }
 
+// Allow to change data-toggle="collapse" text according to status
+:not(.collapsed) > .o-collapsed-label,
+.collapsed > .o-not-collapsed-label {
+    display: none;
+}
+
 // This is rtl language specific fix
 // It will fix the extra space in ui-autocomplete class
 // and flip the next and previous symbols of jquery ui.
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 476512f73bd..812abded97a 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -134,6 +134,19 @@
     }
 }
 
+// Function to remove all falsy values of a map
+@function o-map-omit($map) {
+    $-map: ();
+    @each $key, $value in $map {
+        @if $value {
+            $-map: map-merge($-map, (
+                $key: $value,
+            ));
+        }
+    }
+    @return $-map;
+}
+
 // ------- Kanban grouped mixins -------
 @mixin o-kanban-icon($base-opacity: 0.5) {
     display: block;
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 3b67e00e1b5..55392c32fdb 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -5,24 +5,26 @@
     <template id="report_assets_common">
         <t t-call="web._assets_helpers"/>
 
+        <!-- FIXME remove web_editor / portal / website dependency ..? -->
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/primary_variables.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/secondary_variables.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/bootstrap_overridden.scss"/>
+
         <t t-call="web._assets_bootstrap"/>
         <link href="/base/static/src/css/description.css" rel="stylesheet" type="text/css"/>
 
+        <!-- FIXME remove web_editor / portal / website dependency ..? -->
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/>
-
-        <!-- FIXME remove website / portal dependency ..? -->
         <link rel="stylesheet" type="text/scss" href="/portal/static/src/scss/portal.scss"/>
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.scss"/>
 
         <link href="/web/static/lib/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
 
-
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/report.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_standard.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_background.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_boxed.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_clean.scss"/>
-
     </template>
 
     <template id="report_assets_pdf">
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index edd79516154..15309f4de7f 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,13 +1,27 @@
 
+// Automatically update bootstrap colors map (unused by BS itself)
+$-palette: nth($o-color-palettes, $o-color-palette-number);
+$colors: () !default;
+$colors: map-merge($-palette, $colors);
+
 // Automatically extend bootstrap to create theme background/text/button classes
+$-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number);
+$-main-color: map-get($-palette, 'primary');
+$-main-color-lightness: lightness($-main-color);
+$-palette: map-merge($-palette, (
+    // Compatibility: alpha and beta color exist but will now always be
+    // equal to primary and secondary colors
+    alpha: $-main-color,
+    beta: map-get($-palette, 'secondary'),
+
+    // BS light and dark colors are not used for any BS component, just
+    // for color utilities. By default, we set them to a very light and
+    // very dark version of a desaturate version of the primary color 
+    light: lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
+    dark: darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
+));
 $theme-colors: () !default;
-$theme-colors: map-merge((
-    'alpha': $color-alpha,
-    'beta': $color-beta,
-    'gamma': $color-gamma,
-    'delta': $color-delta,
-    'epsilon': $color-epsilon,
-), $theme-colors);
+$theme-colors: map-merge($-palette, $theme-colors);
 
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
 // white-50 but does not allow overridding that with variables). Also add black
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
new file mode 100644
index 00000000000..114d49c8dd4
--- /dev/null
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
@@ -0,0 +1,4 @@
+
+// Hacky way to prevent our web_editor/website themes to affect the backend UI but
+// still allow to define extra colors for backend HTML editors
+$theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 51c1c4de4d1..d0c0f312b93 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -220,11 +220,24 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 // Edition colors
 
 // Colors
-$color-alpha: #1cc1a9 !default;
-$color-beta: #875A7B !default;
-$color-gamma: #BA3C3D !default;
-$color-delta: #0D6759 !default;
-$color-epsilon: #0B2E59 !default;
+$o-color-palettes: (
+    (
+        
+    ),
+) !default;
+$o-color-palette-number: 1;
+
+// Theme colors
+$o-theme-color-palettes: (
+    (
+        primary: #007bff, // BS default here but needed for compatibility (see bootstrap_overridden)
+        secondary: #6c757d, // BS default here but needed for compatibility (see bootstrap_overridden)
+        gamma: #BA3C3D,
+        delta: #0D6759,
+        epsilon: #0B2E59,
+    ),
+) !default;
+$o-theme-color-palette-number: 1;
 
 // Greyscale transparent colours
 $o-transparent-grays: (
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 3be0942206a..0f1bf4e23d0 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -69,6 +69,7 @@
 <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
     </xpath>
 </template>
 
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index ead68c28274..5689b37352c 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -365,14 +365,18 @@ class Website(Home):
 
         if get_bundle:
             context = dict(request.context, active_test=True)
-            return request.env["ir.qweb"]._get_asset('web.assets_frontend', options=context)
+            return {
+                'web.assets_common': request.env["ir.qweb"]._get_asset('web.assets_common', options=context),
+                'web.assets_frontend': request.env["ir.qweb"]._get_asset('web.assets_frontend', options=context),
+                'website.assets_editor': request.env["ir.qweb"]._get_asset('website.assets_editor', options=context),
+            }
 
         return True
 
     @http.route(['/website/theme_customize_reload'], type='http', auth="public", website=True)
-    def theme_customize_reload(self, href, enable, disable):
+    def theme_customize_reload(self, href, enable, disable, tab=0):
         self.theme_customize(enable and enable.split(",") or [], disable and disable.split(",") or [])
-        return request.redirect(href + ("&theme=true" if "#" in href else "#theme=true"))
+        return request.redirect(href + ("&theme=true" if "#" in href else "#theme=true") + ("&tab=" + tab))
 
     @http.route(['/website/multi_render'], type='json', auth="public", website=True)
     def multi_render(self, ids_or_xml_ids, values=None):
diff --git a/addons/website/static/src/img/options/layout-boxed.png b/addons/website/static/src/img/options/layout-boxed.png
new file mode 100644
index 0000000000000000000000000000000000000000..a85db91781459bbb467ed3086cee66b96df780a8
GIT binary patch
literal 371
zcmeAS@N?(olHy`uVBq!ia0vp^3xGI^gAGX9ABzPEuoOFahHwBu4M$1`kk47*5n0T@
zz;^_M8K-LVNi#4oih8;@hE&XXdubzQGlK|2V5yAbo&6rEiLy+Q>U|Sl6`!qUjwyZp
zdRP7F1)p!If99#K-?#X0?iRj!i3w8}Jtc=HVY^}*+phqxX)eG}WAJqKb6Mw<&;$TV
C)p4Ex

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/img/options/layout-full.png b/addons/website/static/src/img/options/layout-full.png
new file mode 100644
index 0000000000000000000000000000000000000000..a59be7bc33582194c801358fb457b82715dc4608
GIT binary patch
literal 352
zcmeAS@N?(olHy`uVBq!ia0vp^3xGI^gAGX9ABzPEuoOFahHwBu4M$1`kk47*5n0T@
zz;^_M8K-LVNi#4oGI_c<hE&XXd&!XTfC9q-g9H0R_yP=4zC<iq;Qrk1yR<-LDZ~FX
ihafhU)Zs~dWqA37rJ>D!XEiX07(8A5T-G@yGywpyjaDH5

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/js/tours/customize.js b/addons/website/static/src/js/tours/customize.js
new file mode 100644
index 00000000000..962f598e7c4
--- /dev/null
+++ b/addons/website/static/src/js/tours/customize.js
@@ -0,0 +1,18 @@
+odoo.define('website.tour.customize', function (require) {
+'use strict';
+
+var core = require('web.core');
+var tour = require('web_tour.tour');
+var base = require('web_editor.base');
+
+var _t = core._t;
+
+tour.register('theme_customize', {
+    url: '/',
+    wait_for: base.ready(),
+}, [{
+    trigger: 'button.o_theme_customize_color_user_primary',
+    content: _t("Click here to choose your main branding color.<br/>It will recompute the palette with suggested matching colors."),
+    position: 'bottom',
+}]);
+});
diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 8e8eb20d030..50434604677 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -3,8 +3,10 @@ odoo.define('website.theme', function (require) {
 
 var config = require('web.config');
 var core = require('web.core');
+var ColorpickerDialog = require('web.colorpicker');
 var Dialog = require('web.Dialog');
 var weContext = require('web_editor.context');
+var widgets = require('web_editor.widget');
 var websiteNavbarData = require('website.navbar');
 
 var _t = core._t;
@@ -12,18 +14,26 @@ var _t = core._t;
 var templateDef = null;
 
 var ThemeCustomizeDialog = Dialog.extend({
+    xmlDependencies: (Dialog.prototype.xmlDependencies || [])
+        .concat(['/website/static/src/xml/website.editor.xml']),
+
     template: 'website.theme_customize',
     events: {
         'change [data-xmlid], [data-enable], [data-disable]': '_onChange',
+        'click .checked [data-xmlid], .checked [data-enable], .checked [data-disable]': '_onChange',
+        'click .o_theme_customize_color': '_onColorClick',
     },
 
     /**
      * @constructor
      */
     init: function (parent, options) {
+        options = options || {};
         this._super(parent, _.extend({
             title: _t("Customize this theme"),
-        }, options || {}));
+        }, options));
+
+        this.defaultTab = options.tab || 0;
     },
     /**
      * @override
@@ -46,8 +56,20 @@ var ThemeCustomizeDialog = Dialog.extend({
     start: function () {
         var self = this;
 
+        this._generateDialogHTML();
         this.$modal.addClass('o_theme_customize_modal');
 
+        // Enable the first option tab or the given default tab
+        var $tabs = this.$('[data-toggle="tab"]');
+        this.opened().then(function () {
+            $tabs.eq(self.defaultTab).tab('show');
+        });
+
+        // Hide the tab navigation if only one tab
+        if ($tabs.length <= 1) {
+            $tabs.closest('.nav').addClass('d-none');
+        }
+
         this.$inputs = this.$('[data-xmlid], [data-enable], [data-disable]');
 
         return $.when(
@@ -60,6 +82,129 @@ var ThemeCustomizeDialog = Dialog.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     */
+    _generateDialogHTML: function () {
+        var $contents = this.$el.children('content');
+        if ($contents.length === 0) {
+            return;
+        }
+
+        $contents.remove();
+        this.$el.append(core.qweb.render('website.theme_customize_modal_layout'));
+        var $navLinksContainer = this.$('.nav');
+        var $navContents = this.$('.tab-content');
+
+        _.each($contents, function (content) {
+            var $content = $(content);
+
+            var contentID = _.uniqueId('content-');
+
+            // Build the nav tab for the content
+            $navLinksContainer.append($('<li/>', {
+                class: 'nav-item mb-1',
+            }).append($('<a/>', {
+                href: '#' + contentID,
+                class: 'nav-link',
+                'data-toggle': 'tab',
+                text: $content.attr('string'),
+            })));
+
+            // Build the tab pane for the content
+            var $navContent = $(core.qweb.render('website.theme_customize_modal_content', {
+                id: contentID,
+                title: $content.attr('title'),
+            }));
+            $navContents.append($navContent);
+            var $optionsContainer = $navContent.find('.o_options_container');
+
+            // Process content items
+            _processItems($content.children(), $optionsContainer);
+        });
+
+        this.$('[title]').tooltip();
+
+        function _processItems($items, $container) {
+            var optionsName = _.uniqueId('option-');
+
+            _.each($items, function (item) {
+                var $item = $(item);
+
+                switch (item.tagName) {
+                    case 'OPT':
+                        var colorPalette = $item.data('colorPalette');
+                        var icon = $item.data('icon');
+
+                        // Build the options template
+                        var $multiChoiceLabel = $(core.qweb.render('website.theme_customize_modal_option', {
+                            name: optionsName,
+                            id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
+
+                            string: $item.attr('string'),
+                            icon: icon,
+                            color: $item.data('color'),
+                            font: $item.data('font'),
+
+                            colorPalette: colorPalette,
+
+                            xmlid: $item.data('xmlid'),
+                            enable: $item.data('enable'),
+                            disable: $item.data('disable'),
+                            reload: $item.data('reload'),
+                        }));
+
+                        if ($container.hasClass('form-row')) {
+                            var $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
+                            $col.append($multiChoiceLabel);
+                            $container.append($col);
+                        } else {
+                            $container.append($multiChoiceLabel);
+                        }
+                        break;
+
+                    case 'MORE':
+                        var collapseID = _.uniqueId('collapse-');
+
+                        var $col = $('<div/>', {
+                            class: 'col-12',
+                        }).appendTo($container);
+
+                        var string = $item.attr('string');
+                        if (string) {
+                            var $button = $('<button/>', {
+                                'type': 'button',
+                                class: 'btn btn-primary d-block mx-auto mt-3 collapsed',
+                                'data-toggle': 'collapse',
+                                'data-target': "#" + collapseID,
+                                text: string,
+                            });
+                            $col.append($button);
+                        }
+
+                        var $collapse = $('<div/>',{
+                            id: collapseID,
+                            class: 'collapse form-row justify-content-between mt-3',
+                            'data-depends': $item.data('depends'),
+                        });
+                        $col.append($collapse);
+
+                        _processItems($item.children(), $collapse);
+                        break;
+
+                    case 'LIST':
+                        var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
+                        var $col = $('<div/>', {
+                            class: 'col-6 mt-2',
+                            'data-depends': $item.data('depends'),
+                        }).append($('<h6/>', {text: $item.attr('string')}), $listContainer);
+                        $container.append($col);
+                        _processItems($item.children(), $listContainer);
+                        break;
+                }
+            });
+        }
+    },
     /**
      * @private
      */
@@ -113,10 +258,51 @@ var ThemeCustomizeDialog = Dialog.extend({
         return xmlIDs;
     },
     /**
-     * @abstract
      * @private
      */
-    _processChange: function ($inputs, event) {},
+    _processChange: function ($inputs) {
+        var self = this;
+        this.$modal.addClass('o_theme_customize_loading');
+
+        var bodyCustomImageXMLID = 'option_custom_body_image';
+        var $inputBodyCustomImage = $inputs.filter('[data-xmlid*="website.' + bodyCustomImageXMLID + '"]');
+        if (!$inputBodyCustomImage.length) {
+            return $.when();
+        }
+
+        var def = $.Deferred();
+        var $image = $('<img/>');
+        var editor = new widgets.MediaDialog(this, {onlyImages: true, firstFilters: ['background']}, null, $image[0]);
+
+        editor.on('save', this, function (media) { // TODO use scss customization instead (like for user colors)
+            var src = $(media).attr('src');
+            self._rpc({
+                model: 'ir.model.data',
+                method: 'get_object_reference',
+                args: ['website', bodyCustomImageXMLID],
+            }).then(function (data) {
+                return self._rpc({
+                    model: 'ir.ui.view',
+                    method: 'save',
+                    args: [
+                        data[1],
+                        '#wrapwrap { background-image: url("' + src + '"); }',
+                        '//style',
+                        weContext.get(),
+                    ],
+                });
+            }).then(function () {
+                def.resolve();
+            });
+        });
+        editor.on('cancel', this, function () {
+            def.resolve();
+        });
+
+        editor.open();
+
+        return def;
+    },
     /**
      * @private
      */
@@ -144,18 +330,33 @@ var ThemeCustomizeDialog = Dialog.extend({
             }
             $set.prop('checked', checked).closest('label').toggleClass('checked', checked);
         });
+
+        // Mark the collapsed section as visible if their dependencies are met
+        var $collapsedElements = this.$('[data-depends]');
+        _.each($collapsedElements, function (collapsed) {
+            var $collapsed = $(collapsed);
+            var enabled = true;
+            if (self._getInputs($collapsed.data('depends')).not(':checked').length) {
+                enabled = false;
+            }
+
+            if ($collapsed.is('.collapse')) {
+                $collapsed.collapse(enabled ? 'show' : 'hide');
+            } else {
+                $collapsed.toggleClass('d-none', !enabled);
+            }
+        });
     },
     /**
      * @private
      */
     _updateStyle: function (enable, disable, reload) {
-        this.$modal.addClass('loading');
-
         if (reload || config.debug === 'assets') {
             window.location.href = $.param.querystring('/website/theme_customize_reload', {
                 href: window.location.href,
                 enable: enable.join(','),
                 disable: disable.join(','),
+                tab: this.$('.nav-link.active').parent().index(),
             });
             return $.Deferred();
         }
@@ -168,28 +369,32 @@ var ThemeCustomizeDialog = Dialog.extend({
                 disable: disable,
                 get_bundle: true,
             },
-        }).then(function (bundleHTML) {
-            var frontendLinkSelector = 'link[href*=".assets_frontend"]';
-            var $links = $(frontendLinkSelector);
-            var $newLinks = $(bundleHTML).filter(frontendLinkSelector);
+        }).then(function (bundles) {
+            var defs = _.map(bundles, function (bundleContent, bundleName) {
+                var linkSelector = 'link[href*="' + bundleName + '"]';
+                var $links = $(linkSelector);
+                var $newLinks = $(bundleContent).filter(linkSelector);
 
-            var linksLoaded = $.Deferred();
-            var nbLoaded = 0;
-            $newLinks.on('load', function (e) {
-                if (++nbLoaded >= $newLinks.length) {
-                    linksLoaded.resolve();
-                }
-            });
-            $newLinks.on('error', function (e) {
-                linksLoaded.reject();
-                window.location.hash = 'theme=true';
-                window.location.reload();
+                var linksLoaded = $.Deferred();
+                var nbLoaded = 0;
+                $newLinks.on('load', function (e) {
+                    if (++nbLoaded >= $newLinks.length) {
+                        linksLoaded.resolve();
+                    }
+                });
+                $newLinks.on('error', function (e) {
+                    linksLoaded.reject();
+                    window.location.hash = 'theme=true';
+                    window.location.reload();
+                });
+                $links.last().after($newLinks);
+                return linksLoaded.then(function () {
+                    $links.remove();
+                });
             });
 
-            $links.last().after($newLinks);
-            return linksLoaded.then(function () {
-                $links.remove();
-                self.$modal.removeClass('loading');
+            return $.when.apply($, defs).then(function () {
+                self.$modal.removeClass('o_theme_customize_loading');
             });
         });
     },
@@ -206,7 +411,7 @@ var ThemeCustomizeDialog = Dialog.extend({
         var self = this;
 
         // Checkout the option that changed
-        var $option = $(ev.target).find('input').addBack('input');
+        var $option = $(ev.currentTarget);
         var $options = $option;
         var checked = $option.is(':checked');
 
@@ -231,12 +436,79 @@ var ThemeCustomizeDialog = Dialog.extend({
         this._setActive();
 
         // Update the style according to the whole set of options
-        self._processChange($options, ev);
-        self._updateStyle(
-            self._getXMLIDs($enable),
-            self._getXMLIDs($disable),
-            $option.data('reload') && window.location.href.match(new RegExp($option.data('reload')))
-        );
+        self._processChange($options).then(function () {
+            self._updateStyle(
+                self._getXMLIDs($enable),
+                self._getXMLIDs($disable),
+                $option.data('reload') && window.location.href.match(new RegExp($option.data('reload')))
+            );
+        });
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onColorClick: function (ev) {
+        var self = this;
+        var $color = $(ev.currentTarget);
+        var colorName = $color.data('color');
+        var colorType = $color.data('colorType');
+
+        var colorpicker = new ColorpickerDialog(this, {
+            defaultColor: $color.find('span').css('background-color'),
+        });
+        colorpicker.on('colorpicker:saved', this, function (ev) {
+            ev.stopPropagation();
+
+            // TODO improve to be more efficient
+            self._rpc({
+                route: '/web_editor/get_assets_editor_resources',
+                params: {
+                    key: 'website.layout',
+                    get_views: false,
+                    get_scss: true,
+                    bundles: false,
+                    bundles_restriction: [],
+                },
+            }).then(function (data) {
+                var files = data.scss[0][1];
+                var file = _.find(files, function (file) {
+                    switch (colorType) {
+                        case 'theme':
+                            return file.url === '/website/static/src/scss/options/colors/user_theme_color_palette.scss';
+                        case 'typo':
+                            return file.url === '/website/static/src/scss/options/colors/user_color_palette_typo.scss';
+                    }
+                    return file.url === '/website/static/src/scss/options/colors/user_color_palette_' + colorName + '.scss';
+                });
+
+                var colors = {};
+                colors[colorName] = ev.data.hex;
+                if (colorName === 'primary') {
+                    colors['secondary'] = 'null';
+                    colors['gamma'] = 'null';
+                    colors['delta'] = 'null';
+                    colors['epsilon'] = 'null';
+                }
+
+                var updatedFileContent = file.arch;
+                _.each(colors, function (colorValue, colorName) {
+                    updatedFileContent = updatedFileContent.replace(new RegExp(colorName + ': (?:null|#[a-fA-F0-9]{6}),'), colorName + ': ' + colorValue + ',');
+                });
+
+                return self._rpc({
+                    route: '/web_editor/save_scss',
+                    params: {
+                        url: file.url,
+                        bundle_xmlid: 'web.assets_common',
+                        content: updatedFileContent,
+                    },
+                });
+            }).then(function () {
+                self.$('#' + $color.closest('.o_theme_customize_color_previews').data('depends')).click();
+            });
+        });
+        colorpicker.open();
     },
 });
 
@@ -254,7 +526,8 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
     start: function () {
         var def;
         if ((window.location.hash || '').indexOf('theme=true') > 0) {
-            def = this._openThemeCustomizeDialog();
+            var tab = window.location.hash.match(/tab=(\d+)/);
+            def = this._openThemeCustomizeDialog(tab ? tab[1] : false);
             window.location.hash = '';
         }
         return $.when(this._super.apply(this, arguments), def);
@@ -268,10 +541,11 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
      * Instantiates and opens the theme customization dialog.
      *
      * @private
+     * @param {string} tab
      * @returns {Deferred}
      */
-    _openThemeCustomizeDialog: function () {
-        return new ThemeCustomizeDialog(this).open();
+    _openThemeCustomizeDialog: function (tab) {
+        return new ThemeCustomizeDialog(this, {tab: tab}).open();
     },
 });
 
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
new file mode 100644
index 00000000000..bb22156ce9e
--- /dev/null
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -0,0 +1,9 @@
+
+$body-bg: color('body');
+
+$body-color: color('text');
+$yiq-text-dark: color('text');
+$headings-color: color('h1');
+
+$font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number);
+$headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number);
diff --git a/addons/website/static/src/scss/options/colors/option_color_user_variables.scss b/addons/website/static/src/scss/options/colors/option_color_user_variables.scss
new file mode 100644
index 00000000000..b398843ead7
--- /dev/null
+++ b/addons/website/static/src/scss/options/colors/option_color_user_variables.scss
@@ -0,0 +1,4 @@
+
+// Enable last color palette, which is the user customized color palette
+$o-color-palette-number: length($o-color-palettes);
+$o-theme-color-palette-number: length($o-theme-color-palettes);
diff --git a/addons/website/static/src/scss/options/colors/user_color_palette_body.scss b/addons/website/static/src/scss/options/colors/user_color_palette_body.scss
new file mode 100644
index 00000000000..b8687ea4887
--- /dev/null
+++ b/addons/website/static/src/scss/options/colors/user_color_palette_body.scss
@@ -0,0 +1,4 @@
+
+$o-user-color-palette: map-merge((
+    body: null,
+), o-map-omit($o-user-color-palette));
diff --git a/addons/website/static/src/scss/options/colors/user_color_palette_footer.scss b/addons/website/static/src/scss/options/colors/user_color_palette_footer.scss
new file mode 100644
index 00000000000..1fb027d61e1
--- /dev/null
+++ b/addons/website/static/src/scss/options/colors/user_color_palette_footer.scss
@@ -0,0 +1,4 @@
+
+$o-user-color-palette: map-merge((
+    footer: null,
+), o-map-omit($o-user-color-palette));
diff --git a/addons/website/static/src/scss/options/colors/user_color_palette_menu.scss b/addons/website/static/src/scss/options/colors/user_color_palette_menu.scss
new file mode 100644
index 00000000000..a9d967cb81b
--- /dev/null
+++ b/addons/website/static/src/scss/options/colors/user_color_palette_menu.scss
@@ -0,0 +1,4 @@
+
+$o-user-color-palette: map-merge((
+    menu: null,
+), o-map-omit($o-user-color-palette));
\ No newline at end of file
diff --git a/addons/website/static/src/scss/options/colors/user_color_palette_typo.scss b/addons/website/static/src/scss/options/colors/user_color_palette_typo.scss
new file mode 100644
index 00000000000..0ef3d41868c
--- /dev/null
+++ b/addons/website/static/src/scss/options/colors/user_color_palette_typo.scss
@@ -0,0 +1,10 @@
+
+$o-user-color-palette: map-merge((
+    text: null,
+    h1: null,
+    h2: null,
+    h3: null,
+    h4: null,
+    h5: null,
+    h6: null,
+), o-map-omit($o-user-color-palette));
diff --git a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
new file mode 100644
index 00000000000..dc57b44bd5d
--- /dev/null
+++ b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
@@ -0,0 +1,15 @@
+
+$o-user-theme-color-palette: map-merge((
+    // Theme colors
+    primary: null,
+    secondary: null,
+    gamma: null,
+    epsilon: null,
+    delta: null,
+
+    // BS state colors
+    success: null,
+    info: null,
+    warning: null,
+    danger: null,    
+), o-map-omit($o-user-theme-color-palette));
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_01_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_01_variables.scss
new file mode 100644
index 00000000000..00576b58826
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_body_01_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-font-number: 1; // Note: this is the default
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss
new file mode 100644
index 00000000000..f94c25093ae
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_body_02_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss
new file mode 100644
index 00000000000..81f19ea6cdd
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_body_03_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss
new file mode 100644
index 00000000000..8ab4cd6ff0e
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_body_04_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss
new file mode 100644
index 00000000000..7741683e685
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_body_05_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss
new file mode 100644
index 00000000000..013d43d9be7
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_body_06_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-font-number: 6;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_01_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_01_variables.scss
new file mode 100644
index 00000000000..18a5b3e9533
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_title_01_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-headings-font-number: 1; // Note: this is the default
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss
new file mode 100644
index 00000000000..656cf14811e
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_title_02_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-headings-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss
new file mode 100644
index 00000000000..feca6a8a29a
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_title_03_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-headings-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss
new file mode 100644
index 00000000000..325ac7de1ab
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_title_04_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-headings-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss
new file mode 100644
index 00000000000..192cee4410f
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_title_05_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-headings-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss
new file mode 100644
index 00000000000..c7d1d8d72c3
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_title_06_variables.scss
@@ -0,0 +1,2 @@
+
+$o-theme-headings-font-number: 6;
diff --git a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss b/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
new file mode 100644
index 00000000000..1e75db342be
--- /dev/null
+++ b/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
@@ -0,0 +1,5 @@
+
+#wrapwrap {
+    background-size: auto;
+    background-repeat: repeat;
+}
diff --git a/addons/website/static/src/scss/options/layout/option_layout_boxed.scss b/addons/website/static/src/scss/options/layout/option_layout_boxed.scss
new file mode 100644
index 00000000000..6463f5a5aa3
--- /dev/null
+++ b/addons/website/static/src/scss/options/layout/option_layout_boxed.scss
@@ -0,0 +1,6 @@
+
+@include media-breakpoint-up(md) {
+    #wrapwrap {
+        padding: 0 7.5%;
+    }
+}
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
new file mode 100644
index 00000000000..58ad01a6989
--- /dev/null
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -0,0 +1,61 @@
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+// Extend default color palettes with website-related colors
+$-palettes: ();
+@each $palette in $o-color-palettes {
+    $-palettes: append($-palettes, map-merge((
+        body: null, // Default to bootstrap
+        menu: #F9F9F9,
+        footer: #F9F9F9,
+        text: null, // Default to bootstrap
+        h1: null, // Default to text
+        h2: null, // Default to h1
+        h3: null, // Default to h2
+        h4: null, // Default to h3
+        h5: null, // Default to h4
+        h6: null, // Default to h5
+    ), $palette));
+}
+$o-color-palettes: $-palettes;
+
+// By default, all user color palette values are null. Each null value is automatically replaced
+// with corresponsing color of color palette 1.
+$o-user-color-palette: () !default;
+
+// By default, all user theme color palette values are null. Each null value is automatically
+// replaced with corresponsing color of theme color palette 1.
+$o-user-theme-color-palette: () !default;
+
+//------------------------------------------------------------------------------
+// Fonts
+//------------------------------------------------------------------------------
+
+$o-theme-fonts: (
+    (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), // This is BS default
+    ('Open Sans', sans-serif),
+    ('Source Sans Pro', sans-serif),
+    ('Raleway', sans-serif),
+    ('Noto Serif', serif),
+    ('Arvo', Times, serif),
+) !default;
+$o-theme-font-urls: (
+    null,
+    'Open+Sans:400,400i,700,700i',
+    'Source+Sans+Pro:400,400i,700,700i',
+    'Raleway:400,400i,700,700i',
+    'Noto+Serif:400,400i,700,700i',
+    'Arvo:400,400i,700,700i',
+) !default;
+$o-theme-font-names: (
+    'Bootstrap',
+    'Open Sans',
+    'Source Sans Pro',
+    'Raleway',
+    'Noto Serif',
+    'Arvo',
+) !default;
+$o-theme-font-number: 1 !default;
+$o-theme-headings-font-number: 1 !default;
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
new file mode 100644
index 00000000000..06b19ce4090
--- /dev/null
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -0,0 +1,25 @@
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+// By default, all user color palette values are null. Each null value is automatically
+// replaced with corresponsing color in color palette 1.
+$-palette-1: nth($o-color-palettes, 1);
+$o-color-palettes: append($o-color-palettes, map-merge($-palette-1, o-map-omit($o-user-color-palette)));
+
+// Generate default theme color scheme if primary is set
+$-primary: map-get($o-user-theme-color-palette, 'primary');
+@if ($-primary) {
+    $o-user-theme-color-palette: map-merge($o-user-theme-color-palette, map-merge((
+        secondary: lighten(desaturate($-primary, 60%), 30%),
+        gamma: desaturate(adjust-hue($-primary, -45deg), 10%),
+        delta: desaturate(adjust-hue($-primary, 45deg), 10%),
+        epsilon: desaturate(adjust-hue($-primary, 180deg), 10%),
+    ), o-map-omit($o-user-theme-color-palette)));
+}
+
+// By default, all user theme color palette values are null. Each null value is automatically
+// replaced with corresponsing color in theme color palette 1.
+$-palette-1: nth($o-theme-color-palettes, 1);
+$o-theme-color-palettes: append($o-theme-color-palettes, map-merge($-palette-1, o-map-omit($o-user-theme-color-palette)));
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 2480ed74b26..b1c02e4223f 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -1,4 +1,175 @@
 
+@each $url in $o-theme-font-urls {
+    @if $url {
+        @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
+    }
+}
+
+.modal.o_theme_customize_modal {
+
+    &.o_theme_customize_loading {
+        pointer-events: none;
+
+        &::after {
+            content: "";
+            @include o-position-absolute(0, 0, 0, 0);
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    .modal-dialog {
+        @include o-position-absolute(0, 2%);
+        width: 96%;
+        max-width: 550px;
+    }
+
+    .modal-header {
+        background-color: $o-brand-odoo;
+        color: white;
+        border-radius: 0;
+
+        * {
+            color: inherit;
+        }
+    }
+
+
+    .nav {
+        padding: 0;
+        
+        .nav-item {
+            text-align: center;
+            background-color: $o-brand-lightsecondary;
+
+            .nav-link {
+                color: $o-main-text-color;
+
+                &.active {
+                    font-weight: bold;
+                    background-color: white;
+                    border: 1px solid #d9d7d7;
+                    border-left: 1px solid #333333;
+                }
+                &:hover, &:focus {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .o_theme_customize_option {
+        position: relative;
+        width: 100%;
+
+        > img {
+            width: 100%;
+
+            + label {
+                @include o-position-absolute(0, 0, 0, 0);
+                width: auto;
+                background: transparent;
+            }
+        }
+
+        label {
+            width: 100%;
+            min-height: 24px;
+            margin: 0;
+            padding: 8px;
+            border: 2px solid transparent;
+            background-color: $o-brand-lightsecondary;
+            font-size: 14px;
+            line-height: 1;
+            cursor: pointer;
+
+            &.o_theme_customize_option_palette_label {
+                display: none !important;
+            }
+
+            &.checked {
+                border-color: $o-brand-odoo;
+                color: $o-brand-odoo;
+            }
+        }
+
+        $i: 1;
+        @each $font in $o-theme-fonts {
+            &.o_theme_customize_option_font_#{$i} {
+                font-family: if($font, $font, $font-family-base);
+
+                > label > span::before {
+                    content: nth($o-theme-font-names, $i);
+                }
+            }
+            $i: $i + 1;
+        }
+    }
+
+    .o_theme_customize_color_previews {
+        h6, a {
+            font-size: 12px;
+            margin: 4px 0 0;
+        }
+
+        .o_theme_customize_color {
+            > span {
+                display: inline-block;
+                width: 48px;
+                height: 27px;
+                border: 1px solid black;
+            }
+
+            $i: 1;
+            @each $palette in $o-theme-color-palettes {
+                @each $name, $value in map-merge($theme-colors, $palette) {
+                    &.o_theme_customize_color_#{if($i == length($o-theme-color-palettes), 'user', $i)}_#{$name} > span {
+                        background-color: $value;
+                    }
+                }
+                $i: $i + 1;
+            }
+            $i: 1;
+            @each $palette in $o-color-palettes {
+                $-text-color: if(map-get($palette, 'text'), map-get($palette, 'text'), $body-color);
+                $-h1-color: if(map-get($palette, 'h1'), map-get($palette, 'h1'), $-text-color);
+                $-h2-color: if(map-get($palette, 'h2'), map-get($palette, 'h2'), $-h1-color);
+                $-h3-color: if(map-get($palette, 'h3'), map-get($palette, 'h3'), $-h2-color);
+                $-h4-color: if(map-get($palette, 'h4'), map-get($palette, 'h4'), $-h3-color);
+                $-h5-color: if(map-get($palette, 'h5'), map-get($palette, 'h5'), $-h4-color);
+                $-h6-color: if(map-get($palette, 'h6'), map-get($palette, 'h6'), $-h5-color);
+                $-defaults: (
+                    'body': $body-bg,
+                    'text': $-text-color,
+                    'h1': $-h1-color,
+                    'h2': $-h2-color,
+                    'h3': $-h3-color,
+                    'h4': $-h4-color,
+                    'h5': $-h5-color,
+                    'h6': $-h6-color,
+                );
+
+                @each $name, $value in $palette {
+                    &.o_theme_customize_color_#{if($i == length($o-color-palettes), 'user', $i)}_#{$name} > span {
+                        background-color: if($value, $value, map-get($-defaults, $name));
+                    }
+                }
+                $i: $i + 1;
+            }
+        }
+    }
+
+    .o_theme_customize_option_input {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+        pointer-events: none;
+    }
+
+    .o_theme_customize_option_list {
+        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
+    }
+}
+
+
 .o_homepage_editor_welcome_message {
     padding-top: 128px;
     padding-bottom: 128px;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index fcbc59a0c67..7bf2000be77 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -2,10 +2,50 @@
 /// This file regroups the website design rules.
 ///
 
+$-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
+@if $-theme-font {
+    @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+}
+@if $o-theme-font-number != $o-theme-headings-font-number {
+    $-theme-font: nth($o-theme-font-urls, $o-theme-headings-font-number);
+    @if $-theme-font {
+        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+    }
+}
+
+#wrapwrap {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+}
+
 font[style*='background'], font[class*='bg-'] {
     padding: 0 2px;
 }
 
+.navbar {
+    @include o-bg-color(color('menu'));
+}
+.o_footer {
+    @include o-bg-color(color('footer'));
+}
+h2, h3, h4, h5, h6 {
+    color: color('h2');
+}
+h3, h4, h5, h6 {
+    color: color('h3');
+}
+h4, h5, h6 {
+    color: color('h4');
+}
+h5, h6 {
+    color: color('h5');
+}
+h6 {
+    color: color('h6');
+}
+
 // Odoo image background classes
 .oe_img_bg {
     background-size: cover;
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 2bdfa2632b5..4b24667ed1f 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -418,54 +418,6 @@ body .modal {
     margin: 50px auto;
 }
 
-// CUSTOMIZE THEME
-#theme_error {
-    background: #ffc;
-}
-#theme_customize_modal {
-    overflow: visible;
-    display: block;
-    .modal-dialog {
-        @include o-position-absolute($o-navbar-height + 10, 10px);
-        width: auto;
-        margin: 0;
-        font-family: Roboto;
-    }
-    .loading_backdrop {
-        display: none;
-    }
-    &.loading .loading_backdrop {
-        @include o-position-absolute(0, 0, 0, 0);
-        display: block;
-        background: black;
-        opacity: 0.3;
-        z-index: 1;
-    }
-    label {
-        display: block;
-        text-align: center;
-        > div, > img {
-            border: 1px solid #fff;
-            line-height: 30px;
-            font-size: 0.9em;
-            margin: 2px 4px;
-        }
-        &.checked > div, &.checked > img {
-            box-shadow: 2px 2px 3px #888;
-            border: 1px solid #666;
-        }
-        img {
-            width: 60px;
-            height: 35px;
-            margin: 2px;
-            border: 1px solid rgba(136, 136, 136, 0.5);
-        }
-        input {
-            display: none;
-        }
-    }
-}
-
 // ACE EDITOR
 .o_ace_view_editor {
     @include o-w-preserve-base;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 20045478c8c..0160d40182f 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -5,9 +5,69 @@
         <p class="lead d-none d-md-block">Let's start designing.</p>
         <div class="o_tooltip_container d-none d-md-block">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div>
     </div>
-
     <div t-name="website.leaving_current_page_edition">
         <p>What do you want to do?</p>
         <p class="text-muted">Your current changes will be saved automatically.</p>
     </div>
+
+
+    <div t-name="website.theme_customize_modal_layout" class="d-flex align-items-start">
+        <ul class="nav flex-column flex-shrink-0 w-25"/>
+        <div class="tab-content pl-3 pb-2 flex-grow-1"/>
+    </div>
+    <div t-name="website.theme_customize_modal_content" t-att-id="id" class="tab-pane">
+        <h5 class="mt-0"><t t-esc="title"/></h5>
+        <div class="form-row justify-content-between o_options_container"/>
+    </div>
+    <t t-name="website.theme_customize_modal_option">
+        <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''}">
+            <img t-if="icon" t-att-src="icon"/>
+            <label t-attf-class="d-flex align-items-center justify-content-center text-center #{color ? 'bg-' + color : ''} #{colorPalette ? 'o_theme_customize_option_palette_label' : ''}">
+                <input t-att-id="id" t-att-name="name" type="radio" class="o_theme_customize_option_input" t-att-data-xmlid="xmlid" t-att-data-enable="enable" t-att-data-disable="disable" t-att-data-reload="reload"/>
+                <span><t t-esc="string"/></span>
+            </label>
+            <div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id">
+                <div>
+                    <h6>Main colors</h6>
+                    <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'gamma': _t('Extra Color 1'), 'delta': _t('Extra Color 2'), 'epsilon': _t('Extra Color 3')}" t-as="color">
+                        <t t-call="website.theme_customize_color_palette_button">
+                            <t t-set="color_type" t-value="'theme'"/>
+                        </t>
+                    </t>
+                </div>
+                <div>
+                    <h6>Background colors</h6>
+                    <t t-foreach="{'body': _t('Body'), 'menu': _t('Menu'), 'footer': _t('Footer')}" t-as="color">
+                        <t t-call="website.theme_customize_color_palette_button"/>
+                    </t>
+                </div>
+                <div>
+                    <h6>Text colors</h6>
+                    <t t-foreach="{'text': _t('Text'), 'h1': _t('Headings 1'), 'h2': _t('Headings 2'), 'h3': _t('Headings 3'), 'h4': _t('Headings 4'), 'h5': _t('Headings 5'), 'h6': _t('Headings 6')}" t-as="color">
+                        <t t-call="website.theme_customize_color_palette_button">
+                            <t t-set="color_type" t-value="'typo'"/>
+                        </t>
+                    </t>
+                </div>
+                <div>
+                    <h6>State colors</h6>
+                    <t t-foreach="{'success': _t('Success'), 'info': _t('Info'), 'warning': _t('Warning'), 'danger': _t('Error')}" t-as="color">
+                        <t t-call="website.theme_customize_color_palette_button">
+                            <t t-set="color_type" t-value="'theme'"/>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="website.theme_customize_color_palette_button">
+        <button type="button"
+            t-att-disabled="colorPalette != 'user' ? 'disabled' : undefined"
+            t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{colorPalette}_#{color}"
+            t-att-data-color="color"
+            t-att-data-color-type="color_type">
+            <t t-esc="color_value"/>
+            <span/>
+        </button>
+    </t>
 </templates>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 1f202aaa21e..88fa09710b4 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1,6 +1,22 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <!-- Assets -->
+<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/primary_variables.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_body.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_footer.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_menu.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_typo.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_theme_color_palette.scss"/>
+    </xpath>
+</template>
+<template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/secondary_variables.scss"/>
+    </xpath>
+</template>
+
 <template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets (used in backend interface)">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.backend.scss"/>
@@ -18,6 +34,12 @@
     </xpath>
 </template>
 
+<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/bootstrap_overridden.scss"/>
+    </xpath>
+</template>
+
 <template id="assets_frontend" inherit_id="web.assets_frontend" name="Website Assets">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.scss"/>
@@ -59,6 +81,7 @@
     <script type="text/javascript" src="/website/static/src/js/menu/translate.js"/>
 
     <script type="text/javascript" src="/website/static/src/js/tours/banner.js"/>
+    <script type="text/javascript" src="/website/static/src/js/tours/customize.js"/>
     <script type="text/javascript" src="/website/static/src/js/tours/rte.js"/>
 
     <script type="text/javascript" src="/website/static/src/js/widgets/ace.js"/>
@@ -371,41 +394,200 @@
 </template>
 
 <!--
-    Customize Themes
+    XML template to be processed for theme customization modal.
 
-    Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
-    'data-xmlid' (optional) xml id of the template to add if the input is checked.
-        You can set a list of xml id separate by comma (all template is enable or
-        disable in same time)
-    'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
-    'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
-    'data-reload="/"' (optional) force the reloading of the page if the url match with
-        the string ( = regexp).
-        Otherwise, only the '/web/content/web.assets_frontend' is reloaded
+    Allowed tags in the root <div/> elements:
 
-    For the sets (data-enable and/or data-disable without data-xmlid), the set is
-    automatically checked if:
-    - all related fields are enabled for data-enable
-    - all related fields are disabled for data-disable
-    else unchecked
+    <content>: Declares a new set of options (a tab pane in the dialog)
+        -> string = tab's nav text
+        -> title = tab's heading
 
-    HTML apply classes:
-    - 'checked': on the parent label when input is checked
-    - 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together
-       out is added)
-    - 'out': on the container 1 second before removed from ths DOM
-    - 'loading': on the container/modal when the new css is loading
+    Allowed tags in the <content/> elements:
+
+    <opt>: Declares a new toggle option
+        -> id (optional) = an ID to associate to the option
+        -> string (optional) = option's text
+        -> data-icon (optional) = an image URL to set as option's background
+        -> data-xmlid (optional) = template(s) to enable if the input is checked (list of comma-separated xml ids)
+        -> data-enable (optional) = enable other options (list of comma-separated option ids)
+        -> data-disable (optional) = disable other options (list of comma-separated option ids)
+        -> data-reload (optional) = force the reloading of the page if the url matches the value
+                                    Otherwise, only the main assets are reloaded
+        -> data-font (optional) = indicates which fonts to use to style the option and adds
+                                  default sample text if no 'string' is specified
+                                  (see $o-theme-fonts in scss)
+        -> data-color-palette (optional) = indicates which color palette to use to style the option
+                                           (see $o-theme-color-palettes in scss)
+
+    <more>: Declares a subset of options which is hidden by default (with a button to show it)
+        -> string = button's text
+
+    <list>: Declares a subset of options showed as a list
+        -> string = list's title
 -->
-<template id="website.theme_customize" name="Theme Modal for Customization">
-  <div role="dialog" id="theme_customize_modal" class="modal fade">
-      <div class="modal-dialog">
-          <div class="modal-content">
-            <header class="modal-header text-center">
-                <h4 class="modal-title">Please install a theme in order to customize your website.</h4>
-            </header>
-          </div>
-      </div>
-  </div>
+<template id="theme_customize">
+    <div>
+        <!-- Color options -->
+        <content string="Colors" title="Choose the theme colors">
+            <opt data-xmlid="website.option_color_user_variables" data-color-palette="user" string="Choose your colors"/>
+            <opt data-xmlid="" data-color-palette="1" string="Default theme colors"/>
+
+            <list string="Menu text">
+                <opt string="Dark" data-xmlid="" data-reload="/"/>
+                <opt string="Light" data-xmlid="website.option_navbar_dark" data-reload="/"/>
+            </list>
+        </content>
+
+        <!-- Layout Options -->
+        <content string="Layout" title="Choose your layout">
+            <list string="Menu">
+                <opt string="Top Bar" data-xmlid="" data-reload="/"/>
+                <opt string="Hamburger" data-xmlid="website.option_hamburger_menu, website.no_autohide_menu" data-reload="/"/>
+            </list>
+            <more data-depends="">
+                <list string="Body">
+                    <opt string="Full" data-xmlid="website.option_layout_full" data-enable="option_no_background" data-icon="/website/static/src/img/options/layout-full.png"/>
+                    <opt id="option_layout_boxed" string="Boxed" data-xmlid="website.option_layout_boxed" data-icon="/website/static/src/img/options/layout-boxed.png"/>
+                </list>
+                <list string="Background" data-depends="option_layout_boxed">
+                    <opt id="option_no_background" string="None" data-xmlid=""/>
+                    <opt string="Choose an image" data-xmlid="website.option_custom_body_image"/>
+                    <opt string="Choose a pattern" data-xmlid="website.option_custom_body_image, website.option_custom_body_pattern"/>
+                </list>
+            </more>
+        </content>
+
+        <!-- Font options -->
+        <content string="Fonts" title="Choose your fonts">
+            <list string="Title">
+                <opt id="option_font_title_01" data-xmlid="website.option_font_title_01_variables" data-font="1"/>
+                <opt id="option_font_title_02" data-xmlid="website.option_font_title_02_variables" data-font="2"/>
+                <opt id="option_font_title_03" data-xmlid="website.option_font_title_03_variables" data-font="3"/>
+                <opt id="option_font_title_04" data-xmlid="website.option_font_title_04_variables" data-font="4"/>
+                <opt id="option_font_title_05" data-xmlid="website.option_font_title_05_variables" data-font="5"/>
+                <opt id="option_font_title_06" data-xmlid="website.option_font_title_06_variables" data-font="6"/>
+            </list>
+            <list string="Body">
+                <opt id="option_font_body_01" data-xmlid="website.option_font_body_01_variables" data-font="1"/>
+                <opt id="option_font_body_02" data-xmlid="website.option_font_body_02_variables" data-font="2"/>
+                <opt id="option_font_body_03" data-xmlid="website.option_font_body_03_variables" data-font="3"/>
+                <opt id="option_font_body_04" data-xmlid="website.option_font_body_04_variables" data-font="4"/>
+                <opt id="option_font_body_05" data-xmlid="website.option_font_body_05_variables" data-font="5"/>
+                <opt id="option_font_body_06" data-xmlid="website.option_font_body_06_variables" data-font="6"/>
+            </list>
+        </content>
+    </div>
+</template>
+
+<!-- Color options -->
+<template id="option_color_user_variables" inherit_id="website._assets_secondary_variables" active="True">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_color_user_variables.scss"/>
+    </xpath>
+</template>
+
+<!-- Menu color options -->
+<template id="option_navbar_dark" inherit_id="website.layout" active="False">
+    <xpath expr="//header/nav" position="attributes">
+        <attribute name="class" remove="navbar-light" add="navbar-dark" separator=" "/>
+    </xpath>
+</template>
+
+<!-- Menu options -->
+<template id="option_hamburger_menu" inherit_id="website.layout" active="False">
+    <xpath expr="//header/nav" position="attributes">
+        <attribute name="class" remove="navbar-expand-md" separator=" "/>
+    </xpath>
+</template>
+
+<!-- Layout options -->
+<template id="option_layout_full" inherit_id="website.assets_frontend" active="True">
+    <xpath expr="//link[last()]" position="after"/>
+</template>
+<template id="option_layout_boxed" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/layout/option_layout_boxed.scss"/>
+    </xpath>
+</template>
+
+<template id="option_custom_body_image" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <style>
+            <!-- Patched by JS option -->
+        </style>
+    </xpath>
+</template>
+
+<template id="option_custom_body_pattern" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/layout/option_custom_body_pattern.scss"/>
+    </xpath>
+</template>
+
+<!-- TODO use scss customization for fonts instead (like for user colors) -->
+
+<!-- Title font options -->
+<template id="option_font_title_01_variables" inherit_id="website._assets_primary_variables" active="True">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_01_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_title_02_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_02_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_title_03_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_03_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_title_04_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_04_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_title_05_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_05_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_title_06_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_06_variables.scss"/>
+    </xpath>
+</template>
+
+<!-- Body font options -->
+<template id="option_font_body_01_variables" inherit_id="website._assets_primary_variables" active="True">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_01_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_body_02_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_02_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_body_03_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_03_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_body_04_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_04_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_body_05_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_05_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_body_06_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_06_variables.scss"/>
+    </xpath>
 </template>
 
 <template id="kanban">
diff --git a/addons/website_theme_install/views/views.xml b/addons/website_theme_install/views/views.xml
index 3b6cd89db61..37271fa817d 100644
--- a/addons/website_theme_install/views/views.xml
+++ b/addons/website_theme_install/views/views.xml
@@ -91,8 +91,10 @@ action = {
 
     <!-- Add link to theme install in default customize modal -->
     <template id="customize_modal" inherit_id="website.theme_customize" priority="1">
-        <xpath expr="//*[hasclass('modal-header')]" position="inside">
-            <a href="/web#action=website_theme_install.theme_install_kanban_action">See themes here</a>
+        <xpath expr="//div" position="replace">
+            <div>
+                Please <a href="/web#action=website_theme_install.theme_install_kanban_action">install a theme</a> to customize your website.
+            </div>
         </xpath>
     </template>
 </odoo>