diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 6eee3def5f4..eb3f346595f 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -18,9 +18,9 @@ $-palette: map-merge((
 
     // 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
+    // very dark version of a desaturate version of the main color
+    'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
+    'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
 ), o-map-omit($-palette));
 @if $-is-backend {
     $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index ffbb01e7e68..c926dfe6df7 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -32,8 +32,15 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
     }
 }
 
-.navbar {
-    @include o-bg-color(color('menu'));
+.navbar-light {
+    // Style only navbar-light which Odoo is only supposed to use in standard
+    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
+    // Note: this only works because navbar-light is defined before navbar-dark,
+    // we may want to use a safest way when possible.
+    background-color: color('menu') !important;
+    @if (color-yiq(color('menu')) != $yiq-text-dark) {
+        @extend .navbar-dark;
+    }
 
     .nav-item {
         transition: opacity 1000ms ease 0s;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 5b3f456caf9..46174daaf72 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -37,7 +37,7 @@
                 </div>
                 <div>
                     <h6>Background colors</h6>
-                    <t t-foreach="{'body': _t('Body'), 'menu': _t('Menu'), 'footer': _t('Footer')}" t-as="color">
+                    <t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color">
                         <t t-call="website.theme_customize_color_palette_button"/>
                     </t>
                 </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 034dc3f30c5..d0c203e1117 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -464,11 +464,6 @@
         <!-- Color options -->
         <content id="theme_customize_content_colors" string="Colors" title="Choose the theme colors">
             <opt data-xmlid="" data-color-palette="user" string="Choose your 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 -->
@@ -517,13 +512,6 @@
     </div>
 </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>
-
 <!-- Layout options -->
 <template id="option_layout_boxed_variables" inherit_id="website._assets_primary_variables" active="False">
     <xpath expr="//link[last()]" position="after">
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index 88286065add..fb03fd8154e 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -102,7 +102,7 @@
                         </t>
                     </div>
                     <!-- Fixed bottom navbar -->
-                    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
+                    <div class="navbar navbar-light bg-light navbar-fixed-bottom" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
                         <div class="container-fluid oe_slides_panel_footer">
                             <div class="row" style="padding-top:15px;">
                                 <div class="col-xl-2 col-lg-2 col-md-2 col-2 text-left">