diff --git a/addons/web/static/img/odoo_logo_dark.svg b/addons/web/static/img/odoo_logo_dark.svg
new file mode 100644
index 00000000000..ead69d7324d
--- /dev/null
+++ b/addons/web/static/img/odoo_logo_dark.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="621px" height="196px" viewBox="0 0 621 196" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Odoo Logo</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="odoo_logo" fill-rule="nonzero">
+            <path d="M546,196 C504.579,196 471,162.421 471,121 C471,79.579 504.579,46 546,46 C587.421,46 621,79.579 621,121 C621,162.421 587.421,196 546,196 Z M546,165 C570.3,165 590,145.3 590,121 C590,96.7 570.3,77 546,77 C521.7,77 502,96.7 502,121 C502,145.3 521.7,165 546,165 Z M389,196 C347.579,196 314,162.421 314,121 C314,79.579 347.579,46 389,46 C430.421,46 464,79.579 464,121 C464,162.421 430.421,196 389,196 Z M389,165 C413.3,165 433,145.3 433,121 C433,96.7 413.3,77 389,77 C364.7,77 345,96.7 345,121 C345,145.3 364.7,165 389,165 Z M307,120 C307,161.935 273.408,196 231.991,196 C190.575,196 157,162.005 157,120.07 C157,78.134 187.5,46 231.991,46 C248.433,46 263.638,49.496 275.998,58.58 L276,15.09 C276,6.756 283.27,0 291.5,0 C299.728,0 307,6.762 307,15.09 L307,120 Z M232,165 C256.3,165 276,145.3 276,121 C276,96.7 256.3,77 232,77 C207.7,77 188,96.7 188,121 C188,145.3 207.7,165 232,165 Z" fill="#FFFFFF"></path>
+            <path d="M75,196 C33.579,196 0,162.421 0,121 C0,79.579 33.579,46 75,46 C116.421,46 150,79.579 150,121 C150,162.421 116.421,196 75,196 Z M75,165 C99.3,165 119,145.3 119,121 C119,96.7 99.3,77 75,77 C50.7,77 31,96.7 31,121 C31,145.3 50.7,165 75,165 Z" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
diff --git a/addons/web/static/lib/tempusdominus/tempusdominus.scss b/addons/web/static/lib/tempusdominus/tempusdominus.scss
index c38f1e87fcb..b5de3afbdf3 100644
--- a/addons/web/static/lib/tempusdominus/tempusdominus.scss
+++ b/addons/web/static/lib/tempusdominus/tempusdominus.scss
@@ -1,14 +1,14 @@
-$bs-datetimepicker-timepicker-font-size: 1.2em !default;
-$bs-datetimepicker-active-bg: $blue !default;
-$bs-datetimepicker-active-color: $white !default;
-$bs-datetimepicker-border-radius: $border-radius !default;
-$bs-datetimepicker-btn-hover-bg: $gray-200 !default;
-$bs-datetimepicker-disabled-color: $gray-600 !default;
-$bs-datetimepicker-alternate-color: $gray-600 !default;
-$bs-datetimepicker-secondary-border-color: #ccc !default;
-$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
-$bs-datetimepicker-primary-border-color: white !default;
-$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
+$bs-datetimepicker-timepicker-font-size: var(--bs-datetimepicker-timepicker-font-size, 1.2em) !default;
+$bs-datetimepicker-active-bg: var(--bs-datetimepicker-active-bg, #{$blue}) !default;
+$bs-datetimepicker-active-color: var(--bs-datetimepicker-active-color, #{$white}) !default;
+$bs-datetimepicker-border-radius: var(--bs-datetimepicker-border-radius, #{$border-radius}) !default;
+$bs-datetimepicker-btn-hover-bg: var(--bs-datetimepicker-btn-hover-bg, #{$gray-200}) !default;
+$bs-datetimepicker-disabled-color: var(--bs-datetimepicker-disabled-color, #{$gray-600}) !default;
+$bs-datetimepicker-alternate-color: var(--bs-datetimepicker-alternate-color, #{$gray-600}) !default;
+$bs-datetimepicker-secondary-border-color: var(--bs-datetimepicker-secondary-border-color, #ccc) !default;
+$bs-datetimepicker-secondary-border-color-rgba: var(--bs-datetimepicker-secondary-border-color-rgba, rgba(0, 0, 0, 0.2)) !default;
+$bs-datetimepicker-primary-border-color: var(--bs-datetimepicker-primary-border-color, white) !default;
+$bs-datetimepicker-text-shadow: var(--bs-datetimepicker-text-shadow, 0 -1px 0 rgba(0, 0, 0, 0.25)) !default;
 
 .bootstrap-datetimepicker-widget {
     list-style: none;
diff --git a/addons/web/static/src/core/colorlist/colorlist.scss b/addons/web/static/src/core/colorlist/colorlist.scss
index 56c488ca107..cd28f4e57ab 100644
--- a/addons/web/static/src/core/colorlist/colorlist.scss
+++ b/addons/web/static/src/core/colorlist/colorlist.scss
@@ -1,7 +1,7 @@
 .o_colorlist {
     button {
-        border: 1px solid white;
-        box-shadow: 0 0 0 1px #c9ccd2;
+        border: 1px solid $white;
+        box-shadow: 0 0 0 1px $gray-500;
         width: 22px;
         height: 17px;
     }
diff --git a/addons/web/static/src/core/errors/error_dialogs.xml b/addons/web/static/src/core/errors/error_dialogs.xml
index 94cac028eb4..3e5fbf2bfb1 100644
--- a/addons/web/static/src/core/errors/error_dialogs.xml
+++ b/addons/web/static/src/core/errors/error_dialogs.xml
@@ -58,7 +58,7 @@
 
 
         <button class="btn btn-link" t-on-click="() => { state.showTraceback = !state.showTraceback }">See details</button>
-        <div t-if="state.showTraceback and (props.name or props.message)" class="alert clearfix" style="background-color:#ececec;" role="alert">
+        <div t-if="state.showTraceback and (props.name or props.message)" class="alert alert-info bg-100 clearfix" role="alert">
           <code t-if="props.name" t-esc="props.name"></code>
           <p t-if="props.message" t-esc="props.message"></p>
         </div>
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index d6d6b4e3312..29024900303 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -19,7 +19,7 @@ odoo.define('web.basic_fields_owl', function (require) {
      */
     class FieldBadge extends AbstractField {
         _getClassFromDecoration(decoration) {
-            return `bg-${decoration.split('-')[1]}`;
+            return `text-bg-${decoration.split('-')[1]}`;
         }
     }
     FieldBadge.description = _lt("Badge");
diff --git a/addons/web/static/src/legacy/scss/datepicker.scss b/addons/web/static/src/legacy/scss/datepicker.scss
index 7c48ca0f14d..36676c6b127 100644
--- a/addons/web/static/src/legacy/scss/datepicker.scss
+++ b/addons/web/static/src/legacy/scss/datepicker.scss
@@ -49,13 +49,16 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
 }
 
 .bootstrap-datetimepicker-widget .datepicker table {
+    --datepicker-color: #{map-get($grays, '900')};
+    --datepicker__thead-bg: #{map-get($grays, '100')};
+
     th, td {
         border-radius: 0;
         border-bottom-width: $border-width;
         width: percentage(1/8);
         height: 30px;
         line-height: 30px;
-        color: map-get($grays, '900');
+        color: var(--datepicker-color);
 
         &.prev, &.next, &.old, &.new {
             @include o-hover-opacity(.5);
@@ -72,7 +75,7 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
     }
 
     thead tr:nth-child(2) th, td.cw {
-        background-color: map-get($grays, '100');
+        background-color: var(--datepicker__thead-bg);
         font-size: $font-size-sm;
         font-weight: $font-weight-bold;
         color: $o-main-text-color;
@@ -102,8 +105,8 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
             margin: 0;
             border-radius: 0;
             color: $o-main-text-color;
-            border-top: 1px solid $border-color;
-            box-shadow: 0 1px 0 $border-color; // overlaps with main box border
+            border-top: 1px solid var(--datepicker-border-color, #{$border-color});
+            box-shadow: 0 1px 0 var(--datepicker-border-color, #{$border-color}); // overlaps with main box border
 
             &.primary {
                 color: $o-brand-primary;
diff --git a/addons/web/static/src/legacy/scss/daterangepicker.scss b/addons/web/static/src/legacy/scss/daterangepicker.scss
index cdcdfc82342..2a750888305 100644
--- a/addons/web/static/src/legacy/scss/daterangepicker.scss
+++ b/addons/web/static/src/legacy/scss/daterangepicker.scss
@@ -1,19 +1,63 @@
 // Match DateTimePicker styling
 
-.daterangepicker {
+.daterangepicker.show-calendar {
+    --daterangepicker-border: #{$dropdown-border-width} solid #{$dropdown-border-color};
+    --daterangepicker-border-radius: #{$dropdown-border-radius};
+    --daterangepicker-bg: #{$dropdown-bg};
+    --daterangepicker-color: #{map-get($grays, '900')};
+
+    @if $enable-shadows {
+        --daterangepicker-box-shadow: #{$dropdown-box-shadow};
+    }
+
+    --daterangepicker__table-bg: #{$table-bg};
+    --daterangepicker__thead-bg: #{map-get($grays, '100')};
+
+    --daterangepicker__cell-border-color: #{$table-border-color};
+    --daterangepicker__cell-bg--hover: #{map-get($grays, '100')};
+
+    --daterangepicker__select-bg: #{$form-select-bg};
+    --daterangepicker__select-border-color: #{$input-border-color};
+    --daterangepicker__select-color: #{$form-select-color};
+
+
+    border: var(--daterangepicker-border);
+    border-radius: var(--daterangepicker-border-radius);
+    background-color: var(--daterangepicker-bg);
+    box-shadow: var(--daterangepicker-box-shadow);
     font-family: inherit;
 
+    &:before {
+        border-bottom-color: var(--daterangerpicker__arrow-border-color, #{$dropdown-border-color});
+    }
+    
+    &:after {
+        border-bottom-color: var(--daterangerpicker__arrow-background-color, #{$dropdown-bg});
+    }
+
     .calendar-table {
+        border: 0;
+        background-color: var(--daterangepicker__table-bg);
+
+        .next span, .prev span {
+            border-color: currentColor;
+        }
+
         td, th {
-            border-bottom-color: $table-border-color;
+            border-bottom-color: var(--daterangepicker__cell-border-color);
 
             &, &.start-date.end-date {
                 border-radius: 0;
             }
 
             &:not(.active) {
-                color: map-get($grays, '900');
+                color: var(--daterangepicker-color);
+
             }
+            &.available:hover {
+                background-color: var(--daterangepicker__cell-bg--hover);
+            }
+
 
             &.prev, &.next, &.off.ends {
                 @include o-hover-opacity(.5);
@@ -46,11 +90,17 @@
             }
 
             &.active,
-            &.active:hover {
+            &.active:hover,
+            &.in-range:hover {
                 background-color: $o-brand-odoo;
                 color: $white;
                 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
             }
+
+            &.off {
+                background-color: transparent;
+            }
+
         }
 
         thead tr {
@@ -63,7 +113,7 @@
                 }
             }
             &:nth-child(2) th {
-                background-color: map-get($grays, '100');
+                background-color: var(--daterangepicker__thead-bg);
                 font-size: $font-size-sm;
                 font-weight: $font-weight-bold;
                 color: $o-main-text-color;
@@ -74,14 +124,26 @@
     .calendar-time select {
         &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
             display: initial;
+            border-color: var(--daterangepicker__select-border-color);
+            background-color: var(--daterangepicker__select-bg);
+            color: var(--daterangepicker__select-color);
             -webkit-appearance: menulist-button;
             -moz-appearance: menulist-button;
             appearance: menulist-button;
         }
     }
 
-    .drp-buttons .drp-selected {
-        display: none;
+    .drp-buttons {
+        border-top: 0;
+
+        .btn {
+            text-transform: uppercase;
+            font-weight: $btn-font-weight;
+        }
+
+        .drp-selected {
+            display: none;
+        }
     }
 
     @include media-breakpoint-down(sm) {
diff --git a/addons/web/static/src/legacy/scss/domain_selector.scss b/addons/web/static/src/legacy/scss/domain_selector.scss
index 1a908719ace..04423987177 100644
--- a/addons/web/static/src/legacy/scss/domain_selector.scss
+++ b/addons/web/static/src/legacy/scss/domain_selector.scss
@@ -69,7 +69,7 @@
                 display: block;
                 margin-top: 16px;
                 padding: 8px 10px 12px;
-                background: map-get($grays, '900');
+                background: var(--DomainDebugContainer-background-colomap-get, #{$o-gray-900});
                 color: rgba(white, 0.5);
                 font-family: monospace;
                 font-weight: normal;
diff --git a/addons/web/static/src/legacy/scss/dropdown.scss b/addons/web/static/src/legacy/scss/dropdown.scss
index d08a4b6cd0b..e3d0fadb52e 100644
--- a/addons/web/static/src/legacy/scss/dropdown.scss
+++ b/addons/web/static/src/legacy/scss/dropdown.scss
@@ -3,13 +3,23 @@
 .ui-widget.ui-autocomplete {
     top: 0;       // Compute initial position
     min-width: 0; // Compute initial width
+    color: $dropdown-color;
 
     // Needed because .ui-widget are rendered at a
     // lower stacking contex compared to modals.
     z-index: $zindex-modal + 1;
 
+    &.ui-widget-content {
+        background-color: $dropdown-bg;
+        border: $dropdown-border-width solid $dropdown-border-color;
+        @include border-radius($dropdown-border-radius);
+        @include box-shadow($dropdown-box-shadow);
+    }
+
     .ui-menu-item {
         > a {
+            @include o-hover-text-color($dropdown-link-color, $dropdown-link-hover-color);
+
             &.dropdown-item {
                 padding: $o-dropdown-vpadding $o-dropdown-hpadding;
             }
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index fc036cdef02..dfcd3fc38d8 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/addons/web/static/src/legacy/scss/fields.scss
@@ -163,7 +163,8 @@
         }
         .o_m2o_avatar_empty {
             display: block;
-            background-color: #e9ecef;
+            background: $o-black;
+            opacity: .1;
         }
     }
 
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 4dc3a0af798..d538df4377d 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -407,7 +407,7 @@
         }
 
         .oe_kanban_text_red {
-            color: #A61300;
+            color: o-text-color('danger');
             font-weight: $font-weight-bold;
         }
 
diff --git a/addons/web/static/src/legacy/scss/list_view.scss b/addons/web/static/src/legacy/scss/list_view.scss
index d6ee00bfa2c..ee282697106 100644
--- a/addons/web/static/src/legacy/scss/list_view.scss
+++ b/addons/web/static/src/legacy/scss/list_view.scss
@@ -274,7 +274,7 @@
         .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier) {
             position: relative; // for o_field_translate
             &:not(.o_handle_cell) {
-                background-color: white;
+                background-color: $o-view-background-color;
             }
             .o_input {
                 border: none;
diff --git a/addons/web/static/src/legacy/scss/modal.scss b/addons/web/static/src/legacy/scss/modal.scss
index 98513ed65bb..d2a411ab3d0 100644
--- a/addons/web/static/src/legacy/scss/modal.scss
+++ b/addons/web/static/src/legacy/scss/modal.scss
@@ -86,9 +86,10 @@
                     border: none;
 
                     .modal-header {
-                        background: $o-brand-odoo;
+                        background: $o-navbar-background;
+
                         .modal-title, .o_subtitle, button.close {
-                            color: white;
+                            color: $o-navbar-entry-color;
                         }
                     }
 
diff --git a/addons/web/static/src/legacy/scss/name_and_signature.scss b/addons/web/static/src/legacy/scss/name_and_signature.scss
index b2b723e187c..76c04b59f27 100644
--- a/addons/web/static/src/legacy/scss/name_and_signature.scss
+++ b/addons/web/static/src/legacy/scss/name_and_signature.scss
@@ -3,6 +3,10 @@
     position: relative;
 }
 
+.o_web_sign_signature_group {
+    background: #ffffff;
+}
+
 /* Signature Dialog */
 // The .card selector is important to make sure the position absolute will take
 // priority over the position relative of the card.
diff --git a/addons/web/static/src/legacy/scss/popover.scss b/addons/web/static/src/legacy/scss/popover.scss
index f115f8c5ad2..5ada57d5c1d 100644
--- a/addons/web/static/src/legacy/scss/popover.scss
+++ b/addons/web/static/src/legacy/scss/popover.scss
@@ -57,7 +57,6 @@
     position: fixed;
     z-index: 1060;
     border: 1px solid $border-color;
-    background-color: #fff;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
     .o_popover_header {
diff --git a/addons/web/static/src/legacy/scss/progress_bar.scss b/addons/web/static/src/legacy/scss/progress_bar.scss
index 71af77082f6..32668382af0 100644
--- a/addons/web/static/src/legacy/scss/progress_bar.scss
+++ b/addons/web/static/src/legacy/scss/progress_bar.scss
@@ -14,10 +14,10 @@
         height: 15px;
         vertical-align: middle;
 
-        border: 1px solid lighten($o-brand-secondary, 25%);
+        border: 1px solid $o-gray-300;
         overflow: hidden;
 
-        background-color: white;
+        background-color: $o-view-background-color;
         &.o_progress_overflow {
             background-color: $o-brand-secondary;
         }
diff --git a/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss b/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
index 0c02a66f4dc..9a2e9718dfd 100644
--- a/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
+++ b/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
@@ -3,7 +3,6 @@ $bs-datetimepicker-active-bg: $o-brand-odoo;
 $bs-datetimepicker-active-color: $white;
 $bs-datetimepicker-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 $bs-datetimepicker-secondary-border-color: $dropdown-border-color;
-$bs-datetimepicker-secondary-border-color-rgba: $dropdown-border-color;
 
 // TODO remove sr-only when TempusDominus is upgraded to 6+
 .sr-only {
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index fdd48a12852..de650a25106 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -312,7 +312,7 @@
 }
 @mixin o-kanban-dropdown-open {
     position: relative;
-    background: white;
+    background: $dropdown-bg;
     border-color: $border-color;
     z-index: $zindex-dropdown + 1;
 }
diff --git a/addons/web/static/src/legacy/scss/views.scss b/addons/web/static/src/legacy/scss/views.scss
index cbf0d96092d..943f6ed0e70 100644
--- a/addons/web/static/src/legacy/scss/views.scss
+++ b/addons/web/static/src/legacy/scss/views.scss
@@ -50,9 +50,13 @@
 
 // No content helper
 .o_view_nocontent {
-    @include o-position-absolute(30%, 0, 0, 0);
+    @include o-position-absolute(0, 0, 0, 0);
     pointer-events: none;
     z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image:  radial-gradient(at 50% 50%, #{$o-view-background-color} 0px, #{rgba($o-view-background-color, 0.5)} 100%);
 
     .o_nocontent_help {
         @include o-nocontent-empty;
@@ -100,8 +104,8 @@
 
     .o_nocontent_help {
         border-radius: 20%;
-        background-color: #f9f9f9;
-        box-shadow: 0 0 120px 100px #f9f9f9;
+        background-color: $o-view-background-color;
+        box-shadow: 0 0 120px 100px $o-view-background-color;
     }
 
     .o_sample_data_disabled {
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 1ba74e6c8c7..f5c64a26020 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -1016,7 +1016,7 @@
     <div t-if="widget.mode === 'edit'" class="o_field_widget o_field_many2one" aria-atomic="true">
         <div class="o_field_many2one_selection">
             <div class="o_input_dropdown">
-                <input type="text" class="o_input"
+                <input type="text" class="o_input form-control"
                     t-att-barcode_events="widget.nodeOptions.barcode_events"
                     t-att-tabindex="widget.attrs.tabindex"
                     t-att-autofocus="widget.attrs.autofocus"
diff --git a/addons/web/static/src/legacy/xml/name_and_signature.xml b/addons/web/static/src/legacy/xml/name_and_signature.xml
index 7d6553a42b6..063a9f582b7 100644
--- a/addons/web/static/src/legacy/xml/name_and_signature.xml
+++ b/addons/web/static/src/legacy/xml/name_and_signature.xml
@@ -49,7 +49,7 @@
                 border, but we remove the padding from the body, so the canvas
                 will overflow on the corners without this rule.
             -->
-            <div class="o_web_sign_signature_group bg-white card mt-3" style="overflow: hidden;">
+            <div class="o_web_sign_signature_group position-relative mt-3 border" style="overflow: hidden;">
                 <div class="card-header">
                     <div class="row g-0">
                         <div class="col-auto">
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 9c9b8ccefd3..76517aa9779 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -15,7 +15,7 @@ $cyan: #17a2b8 !default;
 //End Restore BS4 Colors
 
 // All of those are BS default
-$white:    #fff !default;
+$white:    $o-white !default;
 $gray-100: $o-gray-100 !default;
 $gray-200: $o-gray-200 !default;
 $gray-300: $o-gray-300 !default;
@@ -26,7 +26,7 @@ $gray-700: $o-gray-700 !default;
 $gray-800: $o-gray-800 !default;
 $gray-900: $o-gray-900 !default;
 
-$black:    #000 !default;
+$black:    $o-black !default;
 
 $primary: $o-brand-primary !default;
 $secondary: $white !default;
@@ -70,7 +70,7 @@ $spacer: 1rem !default;
 //
 // Settings for the `<body>` element.
 
-$body-bg: $o-main-bg-color !default;
+$body-bg: $o-webclient-background-color !default;
 $body-color: $o-main-text-color !default;
 
 // Links
@@ -154,6 +154,7 @@ $table-th-font-weight: $headings-font-weight !default;
 //
 
 $btn-font-weight: $font-weight-bold !default;
+$btn-disabled-opacity: $o-opacity-disabled !default;
 $btn-border-radius-lg: $border-radius !default;
 
 // Dropdowns
@@ -178,6 +179,7 @@ $dropdown-item-padding-x: $o-dropdown-hpadding !default;
 
 $list-group-active-color: $o-list-group-active-color !default;
 $list-group-active-bg: $o-list-group-active-bg !default;
+$list-group-action-hover-color: $gray-900 !default;
 
 // Z-index master list
 
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index f6793ec3212..4f478eb3993 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -3,6 +3,9 @@
 /// They are available in every asset bundle.
 ///
 
+// Color-scheme
+$o-webclient-color-scheme: bright !default;
+
 // Font sizes
 $o-root-font-size: 12px !default;
 $o-font-size-base: 13rem * (1px / $o-root-font-size) !default;
@@ -79,12 +82,12 @@ $o-form-lightsecondary: #ccc !default;
 $o-list-footer-bg-color: #eee !default;
 $o-list-footer-font-weight: bold !default;
 
-$o-tooltip-background-color: white !default;
+$o-tooltip-background-color: $o-view-background-color !default;
 $o-tooltip-color: #666666 !default;
 $o-tooltip-arrow-color: white !default;
-$o-tooltip-text-color: #777777 !default;
-$o-tooltip-title-text-color: black !default;
-$o-tooltip-title-background-color: #F7F7F7 !default;
+$o-tooltip-text-color: $o-main-text-color !default;
+$o-tooltip-title-text-color: $o-main-headings-color !default;
+$o-tooltip-title-background-color: $o-view-background-color !default;
 
 // Forms
 
@@ -170,6 +173,10 @@ $o-border-radius-sm: .2rem !default;
 $o-touch-btn-padding: 7px 14px !default;
 
 // Buttons
-$o-btn-secondary-bg: white !default;
+$o-btn-secondary-bg: $o-white !default;
 $o-btn-secondary-hover-bg: $o-gray-100 !default;
 $o-btn-secondary-hover-border: $o-gray-200 !default;
+
+$o-btn-light-bg: $o-white !default;
+$o-btn-light-border: $o-btn-light-bg !default;
+$o-btn-light-background-hover: $o-gray-100 !default;
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
index 1bb16c83305..f392c790f25 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -13,8 +13,10 @@ $o-colors-secondary: #aa4b6b, #30C381, #97743a, #F7CD1F, #4285F4, #8E24AA,
                      #6be585, #999966, #e9d362, #b56969, #bdc3c7, #649173 !default;
 
 // UI custom colors, complete list
+$o-colors-complete-first: #134E5E !default;
+
 $o-colors-complete: join(
-    set-nth($o-colors, 1, #134E5E),
+    set-nth($o-colors, 1, $o-colors-complete-first),
     $o-colors-secondary
 )!default;
 
diff --git a/addons/web/static/src/scss/utilities_custom.scss b/addons/web/static/src/scss/utilities_custom.scss
index 38aa93b6e37..44c17479ed3 100644
--- a/addons/web/static/src/scss/utilities_custom.scss
+++ b/addons/web/static/src/scss/utilities_custom.scss
@@ -77,9 +77,10 @@ $utilities: map-merge(
         "background-color": map-merge(
             map-get($utilities, "background-color"),
             (
-                values: map-merge($utilities-bg-colors,
+                values: map-merge(
+                    map-get(map-get($utilities, "background-color"), "values"),
                     (
-                      "view": $o-view-background-color,
+                        "view": $o-view-background-color,
                     )
                 )
             )
diff --git a/addons/web/static/src/search/search_bar/search_bar.scss b/addons/web/static/src/search/search_bar/search_bar.scss
new file mode 100644
index 00000000000..767954f16aa
--- /dev/null
+++ b/addons/web/static/src/search/search_bar/search_bar.scss
@@ -0,0 +1,12 @@
+// = Search Bar
+// ============================================================================
+
+.o_searchview_facet {
+    .o_facet_values {
+        border: $border-width solid var(--SearchBar-facet-background, #{$o-brand-odoo});
+    }
+    .o_searchview_facet_label {
+        background: var(--SearchBar-facet-background, #{$o-brand-odoo});
+        color: var(--SearchBar-facet-color, #{$o-white});
+    }
+}
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index b6a30327e25..974603a1dcf 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -10,12 +10,12 @@
                 t-on-keydown="ev => this.onFacetKeydown(facet, facet_index, ev)"
                 >
                 <t t-if="facet.icon">
-                    <span t-attf-class="o_searchview_facet_label text-bg-odoo {{ facet.icon }}"/>
+                    <span t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
                 </t>
                 <t t-else="">
-                    <span class="o_searchview_facet_label text-bg-odoo" t-esc="facet.title"/>
+                    <span class="o_searchview_facet_label" t-esc="facet.title"/>
                 </t>
-                <div class="o_facet_values border border-odoo border-start-0">
+                <div class="o_facet_values border-start-0">
                     <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
                         <t t-if="!facetValue_first">
                             <span class="o_facet_values_sep" t-esc="facet.separator"/>
@@ -23,7 +23,7 @@
                         <span class="o_facet_value" t-esc="facetValue"/>
                     </t>
                 </div>
-                <i class="o_facet_remove oi oi-close"
+                <i class="o_facet_remove oi oi-close btn btn-link opacity-50 opacity-100-hover text-900"
                     role="img"
                     aria-label="Remove"
                     title="Remove"
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index d33c8c36055..82f8ed3c6cb 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -42,6 +42,7 @@ $o-cw-filter-avatar-size: 20px;
         margin: 0;
         width: 100%;
         padding: 0;
+        background-color: $o-view-background-color;
 
         &,
         td,
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index 86406c5cc17..fddbdd3a541 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -3,7 +3,7 @@
     min-width: 0;
     height: 100%;
     background-color: map-get($grays, "100");
-    background: linear-gradient(-45deg, map-get($grays, "100"), white);
+    background: linear-gradient(-45deg, map-get($grays, "100"), $o-view-background-color);
 
     .fc-event {
         margin: 0 1px;
@@ -410,12 +410,12 @@
                     }
 
                     &.o_attendee_status_needsAction {
-                        background-color: rgba(white, 0.9) !important;
+                        background-color: rgba($o-view-background-color, 0.9) !important;
                     }
 
                     &.o_attendee_status_declined {
                         text-decoration: line-through;
-                        background-color: rgba(white, 0.9) !important;
+                        background-color: rgba($o-view-background-color, 0.9) !important;
                     }
                 }
             }
@@ -654,19 +654,19 @@ $o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814
 
             &.o_attendee_status_alone,
             &.o_attendee_status_needsAction {
-                background-color: rgba(white, 0.9) !important;
-                color: black;
+                background-color: rgba($o-view-background-color, 0.9) !important;
+                color: $o-black;
                 .fc-bg {
-                    background-color: rgba(white, 0.9) !important;
+                    background-color: rgba($o-view-background-color, 0.9) !important;
                 }
             }
 
             &.o_attendee_status_declined {
                 text-decoration: line-through;
-                background-color: rgba(white, 0.9) !important;
-                color: black;
+                background-color: rgba($o-view-background-color, 0.9) !important;
+                color: $o-black;
                 .fc-bg {
-                    background-color: rgba(white, 0.9) !important;
+                    background-color: rgba($o-view-background-color, 0.9) !important;
                 }
             }
         }
@@ -681,7 +681,7 @@ $o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814
     }
 
     .o_cw_popover.o_calendar_color_#{$i - 1} {
-        $color-subdle: mix(white, $color, 90%);
+        $color-subdle: mix($o-white, $color, 85%);
 
         .card-header,
         .card-header .popover-header {
@@ -691,7 +691,7 @@ $o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814
 
         .card-header {
             padding-left: 2px;
-            border-color: mix($card-border-color, mix(white, $color));
+            border-color: mix($card-border-color, mix($o-white, $color));
         }
     }
 }
diff --git a/addons/web/static/src/views/fields/ace/ace_field.js b/addons/web/static/src/views/fields/ace/ace_field.js
index 561792652dd..721d1c77a34 100644
--- a/addons/web/static/src/views/fields/ace/ace_field.js
+++ b/addons/web/static/src/views/fields/ace/ace_field.js
@@ -6,8 +6,10 @@ import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { formatText } from "../formatters";
 import { standardFieldProps } from "../standard_field_props";
+import { getCookie } from "web.utils.cookies";
 
 const { Component, onWillStart, onWillUpdateProps, useEffect, useRef } = owl;
+const colorSchemeCookie = getCookie("color_scheme");
 
 export class AceField extends Component {
     setup() {
@@ -46,6 +48,7 @@ export class AceField extends Component {
         this.aceEditor.setOptions({
             maxLines: Infinity,
             showPrintMargin: false,
+            theme: (colorSchemeCookie && colorSchemeCookie === "dark" ? 'ace/theme/monokai' : ''),
         });
         this.aceEditor.$blockScrolling = true;
 
diff --git a/addons/web/static/src/views/fields/badge/badge_field.js b/addons/web/static/src/views/fields/badge/badge_field.js
index a1c176634fd..6a8f28bac57 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.js
+++ b/addons/web/static/src/views/fields/badge/badge_field.js
@@ -18,7 +18,7 @@ export class BadgeField extends Component {
     get classFromDecoration() {
         for (const decorationName in this.props.decorations) {
             if (this.props.decorations[decorationName]) {
-                return `bg-${decorationName}`;
+                return `text-bg-${decorationName}`;
             }
         }
         return "";
diff --git a/addons/web/static/src/views/fields/badge/badge_field.xml b/addons/web/static/src/views/fields/badge/badge_field.xml
index 7dab21d1af4..bfd48b173c5 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.xml
+++ b/addons/web/static/src/views/fields/badge/badge_field.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="web.BadgeField" owl="1">
-        <span t-if="props.value" class="badge rounded-pill bg-opacity-50" t-att-class="classFromDecoration" t-esc="formattedValue" />
+        <span t-if="props.value" class="badge rounded-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
     </t>
 
 </templates>
diff --git a/addons/web/static/src/views/fields/image/image_field.scss b/addons/web/static/src/views/fields/image/image_field.scss
index 8ea5752b32c..ba7dadf6d7b 100644
--- a/addons/web/static/src/views/fields/image/image_field.scss
+++ b/addons/web/static/src/views/fields/image/image_field.scss
@@ -1,19 +1,14 @@
 .o_field_image {
+    background-color: var(--ImageField-background-color, transparent);
+
     button {
         transition: opacity ease 400ms;
         width: 26px;
         height: 26px;
-        opacity: 0;
-        background: $white;
-    }
-
-    &:hover button {
-        @include o-hover-opacity(0.6, 0.9);
     }
 
     .o_mobile_controls {
         button {
-            @include o-hover-opacity(0.6, 0.9);
             width: 30px;
             height: 30px;
             padding: 6px !important;
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
index beb7e5a4010..8591e64f728 100644
--- a/addons/web/static/src/views/fields/image/image_field.xml
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ImageField" owl="1">
-        <div class="d-inline-block position-relative">
-            <div t-attf-class="position-absolute w-100 bottom-0 {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
+        <div class="d-inline-block position-relative opacity-trigger-hover">
+            <div t-attf-class="position-absolute d-flex justify-content-between w-100 bottom-0 opacity-0 opacity-100-hover {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
                 <t t-if="!props.readonly">
                     <FileUploader
                         acceptedFileExtensions="props.acceptedFileExtensions"
@@ -12,23 +12,25 @@
                     >
                         <t t-set-slot="toggler">
                             <button
-                                class="position-absolute bottom-0 start-0 border-0 rounded-circle m-1 p-1 fa fa-pencil fa-lg o_select_file_button"
+                                class="o_select_file_button btn btn-light border-0 rounded-circle m-1 p-1"
                                 data-tooltip="Edit"
-                                aria-label="Edit"
-                            />
+                                aria-label="Edit">
+                                <i class="fa fa-pencil fa-fw"/>
+                            </button>
                         </t>
                         <button
                             t-if="props.value and state.isValid"
-                            class="position-absolute bottom-0 end-0 border-0 rounded-circle m-1 p-1 fa fa-trash-o fa-lg o_clear_file_button"
+                            class="o_clear_file_button btn btn-light border-0 rounded-circle m-1 p-1"
                             data-tooltip="Clear"
                             aria-label="Clear"
-                            t-on-click="onFileRemove"
-                        />
+                            t-on-click="onFileRemove">
+                            <i class="fa fa-trash-o fa-fw"/>
+                        </button>
                     </FileUploader>
                 </t>
             </div>
             <img
-                class="img img-fluid"
+                class="img img-fluid w-100"
                 alt="Binary file"
                 t-att-src="getUrl(props.previewImage or props.name)"
                 t-att-name="props.name"
diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
index 711fdaf743a..7a93f8bae6e 100644
--- a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
+++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
@@ -2,6 +2,7 @@
 
 import { loadJS } from "@web/core/assets";
 import { registry } from "@web/core/registry";
+import { getColor, hexToRGBA } from "@web/views/graph/colors";
 import { standardFieldProps } from "../standard_field_props";
 
 const { Component, onWillStart, useEffect, useRef } = owl;
@@ -49,8 +50,8 @@ export class JournalDashboardGraphField extends Component {
         const labels = this.data[0].values.map(function (pt) {
             return pt.x;
         });
-        const borderColor = this.data[0].is_sample_data ? "#dddddd" : "#875a7b";
-        const backgroundColor = this.data[0].is_sample_data ? "#ebebeb" : "#dcd0d9";
+        const borderColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.1) : getColor(10);
+        const backgroundColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.05) : hexToRGBA(getColor(10), 0.2);
         return {
             type: "line",
             data: {
@@ -96,7 +97,7 @@ export class JournalDashboardGraphField extends Component {
             data.push(pt.value);
             labels.push(pt.label);
             const color =
-                pt.type === "past" ? "#ccbdc8" : pt.type === "future" ? "#a5d8d7" : "#ebebeb";
+                pt.type === "past" ? getColor(13) : pt.type === "future" ? getColor(19) : "#ebebeb";
             backgroundColor.push(color);
         });
         return {
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 1b1d61d9bd0..774730e67c2 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -153,21 +153,14 @@
 
     .o_form_uri {
         display: inline-block;
-        color: $link-color;
-        &:hover {
-            color: darken($link-color, 15%);
-        }
+        @include o-hover-text-color($link-color, $link-hover-color);
+
         > span {
-            color: $o-main-text-color;
-            &:hover {
-                color: $o-main-text-color;
-            }
+            @include o-hover-text-color($o-main-text-color, $o-main-text-color);
         }
+
         > span:first-child {
-            color: $link-color;
-            &:hover {
-                color: darken($link-color, 15%);
-            }
+            @include o-hover-text-color($link-color, $link-hover-color);
         }
     }
 
@@ -364,7 +357,7 @@
 
         &:hover, &:focus, &:active {
             &:after {
-                border-left-color: map-get($grays, '100');
+                border-left-color: $o-btn-light-background-hover;
             }
         }
     }
@@ -872,7 +865,7 @@
             table-layout: fixed;
             display: table;
             td {
-                border: 1px solid #dee2e6;
+                border: 1px solid $table-border-color;
             }
             th, td {
                 padding: 0.75rem 0 0.75rem 0;
diff --git a/addons/web/static/src/views/graph/colors.js b/addons/web/static/src/views/graph/colors.js
index ab0dff98cde..5f05014dc37 100644
--- a/addons/web/static/src/views/graph/colors.js
+++ b/addons/web/static/src/views/graph/colors.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
-export const COLORS = [
+import { getCookie } from "web.utils.cookies";
+
+const COLORS_BRIGHT = [
     "#1f77b4",
     "#ff7f0e",
     "#aec7e8",
@@ -11,18 +13,43 @@ export const COLORS = [
     "#ff9896",
     "#9467bd",
     "#c5b0d5",
-    "#8c564b",
+    "#875a7b", // ~ Enterprise
     "#c49c94",
     "#e377c2",
-    "#f7b6d2",
+    "#dcd0d9", // Dashboards Primary
     "#7f7f7f",
     "#c7c7c7",
     "#bcbd22",
     "#dbdb8d",
     "#17becf",
-    "#9edae5",
+    "#a5d8d7", // Dashboards Secondary
 ];
 
+const COLORS_DARK = [
+    "#00ffff",
+    "#ff6347",
+    "#00ced1",
+    "#ffd700",
+    "#29ef29",
+    "#c5fabb",
+    "#fe4b4c",
+    "#ffb6c1",
+    "#ba87e9",
+    "#eadbf6",
+    "#c568af", // ~ Enterprise
+    "#ecc1b8",
+    "#fda9e3",
+    "#BB86FC", // Dashboards Primary
+    "#808080",
+    "#f2e8e8",
+    "#fcfe2d",
+    "#f8f8bc",
+    "#17becf",
+    "#10efed", // Dashboards Secondary
+];
+
+export const COLORS = getCookie("color_scheme") === "dark" ? COLORS_DARK : COLORS_BRIGHT;
+
 /**
  * @param {number} index
  * @returns {string}
@@ -33,7 +60,8 @@ export function getColor(index) {
 
 export const DEFAULT_BG = "#d3d3d3";
 
-export const BORDER_WHITE = "rgba(255,255,255,0.6)";
+export const BORDER_WHITE =
+    getCookie("color_scheme") === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(255,255,255,0.6)";
 
 const RGB_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index ebd4e6ca7b8..eac46f7c742 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -14,41 +14,41 @@
             </div>
         </t>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
+            <button class="btn btn-light fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="() => this.onModeSelected('bar')"
                 t-att-class="{ active: model.metaData.mode === 'bar' }"
             />
-            <button class="btn btn-secondary fa fa-line-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
+            <button class="btn btn-light fa fa-line-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
                 t-on-click="() => this.onModeSelected('line')"
                 t-att-class="{ active: model.metaData.mode === 'line' }"
             />
-            <button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
+            <button class="btn btn-light fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
                 t-on-click="() => this.onModeSelected('pie')"
                 t-att-class="{ active: model.metaData.mode === 'pie' }"
             />
         </div>
         <div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+            <button class="btn btn-light fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
         </div>
         <div t-if="model.metaData.mode === 'line'" class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+            <button class="btn btn-light fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
-            <button class="btn btn-secondary fa fa-signal o_graph_button" data-tooltip="Cumulative" aria-label="Cumulative"
+            <button class="btn btn-light fa fa-signal o_graph_button" data-tooltip="Cumulative" aria-label="Cumulative"
                 t-on-click="toggleCumulated"
                 t-att-class="{ active: model.metaData.cumulated }"
             />
         </div>
         <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph" name="toggleOrderToolbar">
-            <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
+            <button class="btn btn-light fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
                 t-on-click="() => this.toggleOrder('DESC')"
                 t-att-class="{ active: model.metaData.order === 'DESC' }"
             />
-            <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
+            <button class="btn btn-light fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
                 t-on-click="() => this.toggleOrder('ASC')"
                 t-att-class="{ active: model.metaData.order === 'ASC' }"
             />
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
index 4b65698dcec..362befcd881 100644
--- a/addons/web/static/src/views/graph/graph_renderer.xml
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.GraphRenderer.CustomTooltip" owl="1">
         <div class="o_graph_custom_tooltip popover show p-2 pe-none mw-100">
-            <table class="table table-borderless table-sm overflow-hidden m-0">
+            <table class="overflow-hidden m-0">
                 <thead>
                     <tr>
                         <th class="o_measure align-baseline border-0" t-esc="measure" />
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index e61de8b079d..30562821292 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -222,6 +222,8 @@
             // (eg. Company logo badge inside a contact picture)
             .o_kanban_image_fill_left,
             .o_kanban_image {
+                background-color: var(--KanbanRecord__image-bg-color, none);
+
                 .o_kanban_image_inner_pic {
                     @include o-position-absolute($right: 0, $bottom: 0);
                     max: {
@@ -445,7 +447,7 @@
         }
 
         .oe_kanban_text_red {
-            color: #a61300;
+            color: o-text-color('danger');
             font-weight: $font-weight-bold;
         }
 
@@ -522,7 +524,8 @@
         // don't visually fold on smaller screens (aka. mobile)
         @include media-breakpoint-up(md) {
             @include o-kanban-slim-col;
-            background-color: $gray-200;
+
+            background-color: var(--KanbanGroup-grouped-bg, #{$gray-200});
 
             & + .o_kanban_group.o_column_folded {
                 margin-left: 1px;
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index ba8d6ab0d30..7e5e33646b0 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -5,18 +5,18 @@
         <div class="o_pivot table-responsive">
 
             <table
-                class="table-hover table table-sm table-bordered table-borderless bg-white"
+                class="table-hover table table-sm table-bordered table-borderless bg-view"
                 t-att-class="{ o_enable_linking: !model.metaData.disableLinking }"
                 t-ref="table"
             >
                 <thead>
-                    <tr t-foreach="table.headers" t-as="row" t-key="'header_' + row_index">
+                    <tr t-foreach="table.headers" t-as="row" t-key="'header_' + row_index" class="border-top-0">
                         <t t-foreach="row" t-as="cell" t-key="'header_row_' + cell_index">
                             <t t-if="cell.measure" t-call="web.PivotMeasure"/>
                             <t t-elif="cell.isLeaf !== undefined" t-call="web.PivotHeader">
                                 <t t-set="isXAxis" t-value="true"/>
                             </t>
-                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height" class="fw-normal bg-100"/>
+                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height" class="fw-normal border-start-0"/>
                         </t>
                     </tr>
                 </thead>
@@ -27,7 +27,7 @@
                             <t t-set="cell" t-value="row"/>
                         </t>
                         <t t-foreach="row.subGroupMeasurements" t-as="cell" t-key="'row_cell_' + cell_index">
-                            <td class="o_pivot_cell_value text-end" t-att-class="{
+                            <td class="o_pivot_cell_value text-end bg-100" t-att-class="{
                                     o_empty: cell.value === undefined,
                                     'cursor-pointer': cell.value !== undefined,
                                     'fw-bold': cell.isBold,
@@ -54,7 +54,7 @@
 
     <t t-name="web.PivotHeader" owl="1">
         <th
-            class="text-nowrap cursor-pointer fw-normal bg-100 user-select-none"
+            class="text-nowrap cursor-pointer fw-normal user-select-none border-start-0"
             t-att-colspan="isXAxis ? cell.width : undefined"
             t-att-rowspan="isXAxis ? cell.height : undefined"
             t-att-class="{
@@ -90,7 +90,7 @@
     </t>
 
     <t t-name="web.PivotMeasure" owl="1">
-        <th class="text-muted text-center text-nowrap fw-normal bg-100" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
+        <th class="text-muted text-center text-nowrap fw-normal" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
                 'o_pivot_origin_row cursor-pointer user-select-none': cell.originIndexes,
                 'o_pivot_measure_row cursor-pointer user-select-none': !cell.originIndexes,
                 o_pivot_sort_order_asc: cell.order === 'asc',
diff --git a/addons/web/static/src/views/view.scss b/addons/web/static/src/views/view.scss
index 4aac2a953ca..9c2af947dc4 100644
--- a/addons/web/static/src/views/view.scss
+++ b/addons/web/static/src/views/view.scss
@@ -11,7 +11,7 @@
 
     .o_nocontent_help {
         border-radius: 20%;
-        background-color: #f9f9f9;
-        box-shadow: 0 0 120px 100px #f9f9f9;
+        background-color: $o-view-background-color;
+        box-shadow: 0 0 120px 100px $o-view-background-color;
     }
 }
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
index 4cc226d4e23..22eab2ffe23 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
@@ -14,13 +14,11 @@
         transform: translateX(0);
     }
 
-    // Scoped variables
-    $-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode')
-    $-base-color: color-contrast($-base-bg);
-
     // ====== Top-Bar
     .o_burger_menu_topbar {
         min-height: $o-navbar-height-xs;
+        background-color: $o-burger-topbar-bg;
+        color: $o-burger-topbar-color;
         line-height: $o-navbar-height-xs;
 
         .dropdown-toggle, .o_burger_menu_close {
@@ -31,13 +29,13 @@
     // ====== Menu content container (both App's and User's entries)
     .o_burger_menu_content {
         &.o_burger_menu_dark {
-            background-color: darken($-base-bg, 5%);
+            background-color: darken($o-burger-base-bg, 5%);
         }
 
         // Menu entries size and layout
         ul {
-            background-color: rgba(invert($-base-color), .1);
-            box-shadow: inset 0 -1px 0 rgba($-base-color, .1);
+            background-color: rgba(invert($o-burger-base-color), .1);
+            box-shadow: inset 0 -1px 0 rgba($o-burger-base-color, .1);
 
             li > div, li {
                 padding-left: $o-horizontal-padding;
@@ -59,7 +57,7 @@
         }
 
         li, button {
-            @include o-hover-text-color(rgba($-base-color, .8), $-base-color);
+            @include o-hover-text-color(rgba($o-burger-base-color, .8), $o-burger-base-color);
         }
 
         // ====== 'User Menu' spefic design rules
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
new file mode 100644
index 00000000000..9711b398434
--- /dev/null
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
@@ -0,0 +1,7 @@
+// = Burger Menu Variables
+// ============================================================================
+$o-burger-topbar-bg: $o-brand-odoo !default;
+$o-burger-topbar-color: $o-white !default;
+
+$o-burger-base-bg: $o-burger-topbar-bg !default;
+$o-burger-base-color: $o-burger-topbar-color !default;
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
index 0f6615ecb69..fc8bbce3d26 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
@@ -13,9 +13,9 @@
     <t t-portal="'body'">
       <Transition name="'burgerslide'" visible="state.isBurgerOpened" leaveDuration="200" t-slot-scope="transition">
         <div class="o_burger_menu position-fixed top-0 bottom-0 start-100 d-flex flex-column flex-nowrap" t-att-class="transition.className" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd">
-          <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 text-bg-odoo fs-4"
+          <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 fs-4"
               t-on-click.stop='_toggleUserMenu'>
-              <small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-white': isUserMenuUnfolded }">
+              <small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-view': isUserMenuUnfolded }">
                   <img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
                   <span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
                   <i t-if="isUserMenuTogglable" class="fa" t-att-class="state.isUserMenuOpened ? 'fa-caret-down' : 'fa-caret-left'"/>
@@ -23,7 +23,7 @@
               <button class="o_burger_menu_close oi oi-close btn d-flex align-items-center h-100 bg-transparent border-0 fs-2 text-reset" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
           </div>
           <nav class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto"
-              t-att-class="{o_burger_menu_dark: !isUserMenuUnfolded, 'bg-white': isUserMenuUnfolded}">
+              t-att-class="{o_burger_menu_dark: !isUserMenuUnfolded, 'bg-view': isUserMenuUnfolded}">
               <!-- -->
               <t t-if="isUserMenuUnfolded">
                   <MobileSwitchCompanyMenu t-if="Object.values(company.availableCompanies).length > 1" />
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index d223a4e2fa4..9e1952dfe7f 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -104,7 +104,8 @@
                 padding: ($o-navbar-badge-padding * .5) $o-navbar-badge-padding;
                 background-color: var(--o-navbar-badge-bg, #{$o-navbar-badge-bg});
                 font-size: $o-navbar-badge-size;
-                text-shadow: 1px 1px 0 rgba(#000, .3);
+                color: var(--o-navbar-badge-color, inherit);
+                text-shadow: var(--o-navbar-badge-text-shadow, #{1px 1px 0 rgba($black, .3)});
                 transform: translate(-10%, -30%);
             }
         }
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
index d9360b2c8ac..87e13e9b38d 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
@@ -77,6 +77,11 @@
 
 // BASE SETTINGS LAYOUT
 .o_base_settings {
+   --settings__tab-bg: #{map-get($grays, '900')};
+   --settings__tab-bg--active: #{map-get($grays, '800')};
+   --settings__tab-color: #{map-get($grays, '400')};
+   --settings__title-bg: #{map-get($grays, '200')};
+
    height: 100%;
 
    .o_control_panel {
@@ -125,18 +130,17 @@
    .o_setting_container {
        display: flex;
        flex: 1 1 auto;
-
        overflow: auto;
 
        .settings_tab {
            display: flex;
            flex: 0 0 auto;
            flex-flow: column nowrap;
-           background: map-get($grays, '900');
+           background: var(--settings__tab-bg);
            overflow: auto;
 
            .selected {
-               background-color: map-get($grays, '800');
+               background-color: var(--settings__tab-bg--active);
                box-shadow: inset 2px 0 0 $o-brand-primary;
            }
 
@@ -144,7 +148,7 @@
                display: flex;
                padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                height: 40px;
-               color: map-get($grays, '400');
+               color: var(--settings__tab-color);
                font-size: 13px;
                line-height: 40px;
                cursor: pointer;
@@ -172,7 +176,7 @@
                h2 {
                    margin: 0 0 !important;
                    @include o-base-settings-horizontal-padding(.4rem);
-                   background-color: map-get($grays, '200');
+                   background-color: var(--settings__title-bg);
                    font-size: 15px;
 
                    &.o_invisible_modifier + .o_settings_container {
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
index 5b2b7b4ad7b..f2e502dfe8a 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
@@ -13,12 +13,11 @@
             .settings_tab {
                 flex: 0 0 $o-base-settings-mobile-tabs-height;
                 flex-direction: row;
-                justify-content: space-between;
                 position: relative;
                 overflow: hidden;
                 overflow-x: auto;
                 padding: 0;
-                background: #5E5E5E;
+                border-bottom: 1px solid $border-color;
 
                 .tab {
                     display: block;
@@ -49,7 +48,6 @@
                     }
 
                     &.current {
-                        color: white;
                         font-weight: bold;
 
                         // Reset default style for 'selected' tabs
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.js b/addons/web/static/src/webclient/user_menu/user_menu.js
index 0a88a4aec35..fb8a9cdc244 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.js
+++ b/addons/web/static/src/webclient/user_menu/user_menu.js
@@ -2,6 +2,7 @@
 
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { CheckBox } from "@web/core/checkbox/checkbox";
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
@@ -31,7 +32,7 @@ export class UserMenu extends Component {
     }
 }
 UserMenu.template = "web.UserMenu";
-UserMenu.components = { Dropdown, DropdownItem };
+UserMenu.components = { Dropdown, DropdownItem, CheckBox };
 
 export const systrayItem = {
     Component: UserMenu,
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index 0f629e4ffc4..6fe52d2d9dd 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -10,12 +10,21 @@
             <t t-foreach="getElements()" t-as="element" t-key="element_index">
                 <t t-if="!element.hide">
                     <DropdownItem
-                        t-if="element.type == 'item'"
+                        t-if="element.type == 'item' || element.type == 'switch'"
                         href="element.href"
                         dataset="{ menu: element.id }"
-                        t-esc="element.description"
                         onSelected="element.callback"
-                    />
+                    >
+                        <CheckBox
+                            t-if="element.type == 'switch'"
+                            value="element.isChecked"
+                            className="'form-switch d-flex flex-row-reverse justify-content-between p-0'"
+                            onChange="element.callback"
+                        >
+                            <t t-out="element.description"/>
+                        </CheckBox>
+                        <t t-else="" t-out="element.description"/>
+                    </DropdownItem>
                     <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
                 </t>
             </t>
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 30171ca424b..ae233df8d3d 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -1,4 +1,6 @@
 :root {
+  --o-webclient-color-scheme:#{$o-webclient-color-scheme};
+
   font-size: $o-root-font-size;
 }
 
@@ -22,6 +24,7 @@ tfoot {
   direction: ltr;
   position: relative; // normally useless but required by bootstrap-datepicker
   background-color: $o-webclient-background-color;
+  color-scheme: $o-webclient-color-scheme;
 }
 
 // ------------------------------------------------------------------
@@ -207,8 +210,7 @@ select {
 
 @mixin o-placeholder {
   // Rules below need to be separeted. Otherwise all browsers will discard the whole rule.
-  color: $o-brand-secondary;
-  opacity: 0.5;
+  color: $input-placeholder-color;
 }
 ::-webkit-input-placeholder {
   // WebKit, Blink, Edge
@@ -249,7 +251,7 @@ select {
   @include o-hover-text-color($link-color, $link-hover-color);
 
   &.disabled, &:disabled {
-    @include o-hover-text-color($link-color, $link-color);
+    @include o-hover-text-color($o-gray-500, $o-gray-500);
   }
 }
 
@@ -272,12 +274,12 @@ select {
   // Achieve "clickable text" elements that act like buttons once the
   // the user interacts with (eg. control-panel dropdowns);
   @include button-variant(
-    $background: #fff,
-    $border: #fff,
-    $hover-background: $o-gray-100,
-    $hover-border: $o-gray-200,
-    $active-background: $o-gray-100,
-    $active-border: $o-gray-300
+    $background: $o-btn-light-bg,
+    $border: $o-btn-light-border,
+    $hover-background: $o-btn-light-background-hover,
+    $hover-border: $o-btn-light-background-hover,
+    $active-background: $o-btn-light-background-hover,
+    $active-border: $o-btn-light-background-hover
   );
 }
 
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index 37c1d8e0bd0..20ceb4459cc 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -9289,14 +9289,14 @@ QUnit.module('Legacy basic_fields', {
         });
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-warning.bg-opacity-50');
 
         await list.reload();
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-warning.bg-opacity-50');
 
         list.destroy();
     });
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
index 78484cd2cd6..1e2e0fc4bc6 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
@@ -9908,14 +9908,14 @@ QUnit.module('Legacy fields', {}, function () {
             });
 
             assert.containsN(form, '.o_data_row', 2);
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'text-bg-warning');
 
             await testUtils.dom.click(form.$('.o_data_row .o_data_cell:first'));
             await testUtils.owlCompatibilityExtraNextTick();
             await testUtils.fields.editInput(form.$('.o_selected_row .o_field_integer'), '44');
             await testUtils.owlCompatibilityExtraNextTick();
 
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'text-bg-warning');
 
             form.destroy();
         });
diff --git a/addons/web/static/tests/views/fields/badge_field_tests.js b/addons/web/static/tests/views/fields/badge_field_tests.js
index e1fc962565a..9bdc00ccafd 100644
--- a/addons/web/static/tests/views/fields/badge_field_tests.js
+++ b/addons/web/static/tests/views/fields/badge_field_tests.js
@@ -124,7 +124,7 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.containsN(target, '.o_field_badge[name="display_name"]', 4);
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger');
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .text-bg-danger');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .text-bg-warning');
     });
 });
diff --git a/addons/web/static/tests/views/fields/one2many_field_tests.js b/addons/web/static/tests/views/fields/one2many_field_tests.js
index 5f3bdecebca..cd72bb20f04 100644
--- a/addons/web/static/tests/views/fields/one2many_field_tests.js
+++ b/addons/web/static/tests/views/fields/one2many_field_tests.js
@@ -10796,7 +10796,7 @@ QUnit.module("Fields", (hooks) => {
         assert.containsN(target, ".o_data_row", 2);
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning"
+            "text-bg-warning"
         );
 
         await click(target.querySelector(".o_data_row .o_data_cell"));
@@ -10804,7 +10804,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning"
+            "text-bg-warning"
         );
     });
 
diff --git a/addons/web/static/tests/webclient/user_menu_tests.js b/addons/web/static/tests/webclient/user_menu_tests.js
index 56f8b6466eb..9443c1678b0 100644
--- a/addons/web/static/tests/webclient/user_menu_tests.js
+++ b/addons/web/static/tests/webclient/user_menu_tests.js
@@ -57,6 +57,17 @@ QUnit.test("can be rendered", async (assert) => {
             sequence: 5,
         };
     });
+    userMenuRegistry.add("frodo_item", function () {
+        return {
+            type: "switch",
+            id: "frodo",
+            description: "Frodo",
+            callback: () => {
+                assert.step("callback frodo_item");
+            },
+            sequence: 11,
+        };
+    });
     userMenuRegistry.add("separator", function () {
         return {
             type: "separator",
@@ -93,26 +104,27 @@ QUnit.test("can be rendered", async (assert) => {
     assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron");
     assert.containsNone(target, ".dropdown-menu .dropdown-item");
     await click(target.querySelector("button.dropdown-toggle"));
-    assert.containsN(target, ".dropdown-menu .dropdown-item", 3);
+    assert.containsN(target, ".dropdown-menu .dropdown-item", 4);
+    assert.containsOnce(target, ".dropdown-menu .dropdown-item input.form-check-input");
     assert.containsOnce(target, "div.dropdown-divider");
     const children = [...(target.querySelector(".dropdown-menu").children || [])];
     assert.deepEqual(
         children.map((el) => el.tagName),
-        ["SPAN", "SPAN", "DIV", "SPAN"]
+        ["SPAN", "SPAN", "SPAN", "DIV", "SPAN"]
     );
     const items = [...target.querySelectorAll(".dropdown-menu .dropdown-item")] || [];
     assert.deepEqual(
         items.map((el) => el.dataset.menu),
-        ["ring", "bad", "eye"]
+        ["ring", "bad", "frodo", "eye"]
     );
     assert.deepEqual(
         items.map((el) => el.textContent),
-        ["Ring", "Bad", "Eye"]
+        ["Ring", "Bad", "Frodo", "Eye"]
     );
     for (const item of items) {
         click(item);
     }
-    assert.verifySteps(["callback ring_item", "callback bad_item", "callback eye_item"]);
+    assert.verifySteps(["callback ring_item", "callback bad_item", "callback frodo_item", "callback eye_item"]);
 });
 
 QUnit.test("display the correct name in debug mode", async (assert) => {
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index 13c63cace09..03e04c3081a 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -24,6 +24,10 @@
     background: white center top;
     background-size: cover;
 
+    .o_onboarding_btn_close {
+        color: #fff;
+    }
+
     // = Color Variations
     // ------------------------------------------------------------------------
     @each $key, $values in $o-onboarding-colors {
@@ -66,6 +70,7 @@
 
         .o_onboarding_step_action {
             min-width: $o-onboarding-step-width * .5;
+            border: $border-width solid #fff;
         }
 
         .o_onboarding_progress {
@@ -91,6 +96,13 @@
             display: none;
         }
 
+        .o_onboarding_step_title,
+        .o_onboarding_step_action,
+        .o_onboarding_step_action__done,
+        .o_onboarding_dot_isChecked {
+            color: #fff;
+        }
+
         // = "To do" Step Design
         // --------------------------------------------------------------------
         &[data-step-state="not_done"] {
diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml
index 837199872a2..484165647c4 100644
--- a/odoo/addons/base/views/onboarding_views.xml
+++ b/odoo/addons/base/views/onboarding_views.xml
@@ -28,7 +28,7 @@
                  t-att-style="'background-image:url(' + bg_image + ')'">
 
                 <div class="o_onboarding_wrap py-5">
-                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 text-white" title="Close the onboarding panel"><i class="oi oi-close"/></a>
+                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2" title="Close the onboarding panel"><i class="oi oi-close"/></a>
 
                     <div class="o_onboarding_steps d-flex" t-out="0"/>
 
@@ -55,24 +55,24 @@
 
             <div class="o_onboarding_step_side d-flex pt-0 flex-grow-1">
                 <div class="o_onboarding_progress position-absolute"/>
-                <span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'text-white' or ''}}"/>
+                <span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'o_onboarding_dot_isChecked' or ''}}"/>
             </div>
 
             <div class="o_onboarding_step_content py-3 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
                 <div class="o_onboarding_step_content_info mb-3">
                     <a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                        <h4 class="o_onboarding_step_title text-white" t-out="title"/>
+                        <h4 class="o_onboarding_step_title" t-out="title"/>
                     </a>
                     <p class="text-white-75 m-0" t-out="description"/>
                 </div>
-                <a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4 border border-white" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                    <span class="text-white">
+                <a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
+                    <span>
                         <t t-if="btn_text" t-out="btn_text" />
                         <t t-else="">Let's do it</t>
                     </span>
                 </a>
-                <a t-else="" class="o_onboarding_step_action__done btn text-white" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                    <span class="text-white">
+                <a t-else="" class="o_onboarding_step_action__done btn" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
+                    <span>
                         <i t-attf-class="me-2 fa #{done_icon if done_icon else 'fa-check'}" />
                         <t t-if="done_text" t-out="done_text" />
                         <t t-else="">All done!</t>