From 74e6de03bef36cc3b18be09de015cf91c4f4ad4f Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 30 Aug 2022 14:37:28 +0000
Subject: [PATCH 01/19] [REF] web: use `$input-bg` for `o_input`s

Partially remove visual discrepancies between odoo and Bootstrap fields,
allowing to use BS variables to control fields' design across versions
and color-schemes.

This commit is preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/static/src/legacy/scss/fields.scss              | 2 +-
 addons/web/static/src/scss/bootstrap_overridden.scss       | 2 +-
 addons/web/static/src/search/search_panel/search_view.scss | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 7fffb1ba174..fc036cdef02 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/addons/web/static/src/legacy/scss/fields.scss
@@ -35,7 +35,7 @@
     border:$input-border-width solid var(--o-input-border-color);
     border-width: 0 0 $input-border-width 0;
     padding: $o-input-padding-y $o-input-padding-x;
-    background-color: var(--o-input-background-color, unset);
+    background-color: var(--o-input-background-color, #{$input-bg});
 
     // -- Nested o_input(s)
     .o_input {
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index c1ae660db62..9c9b8ccefd3 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -251,7 +251,7 @@ $kbd-bg: $o-gray-100 !default;
 $kbd-box-shadow: 0px 1px 1px rgba($o-black, 0.2), inset 0px -1px 1px 1px rgba($o-gray-200, 0.8), inset 0px 2px 0px 0px rgba($o-white, 0.8) !default;
 
 // Input
-$input-bg: $o-white !default;
+$input-bg: $o-view-background-color !default;
 $input-focus-border-color: $o-brand-primary !default;
 $form-check-input-checked-color: $o-brand-lightsecondary !default;
 $form-check-input-checked-border-color: $o-brand-primary !default;
diff --git a/addons/web/static/src/search/search_panel/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
index 1a2ee362714..a4413e21a3c 100644
--- a/addons/web/static/src/search/search_panel/search_view.scss
+++ b/addons/web/static/src/search/search_panel/search_view.scss
@@ -69,6 +69,7 @@
         width: 75px;
         border: none;
         outline: none;
+        background-color: var(--o-input-background-color, #{$input-bg});
     }
 
     .o_searchview_autocomplete {
@@ -193,6 +194,7 @@
                 border-bottom: 1px solid $o-brand-secondary;
                 margin-bottom: 15px;
                 width: 100%;
+                background-color: var(--o-input-background-color, #{$input-bg});
             }
     
             .o_searchview_facet {

From 9c923d68b8d13589da893b9ff7101a2f5156f52c Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 31 Aug 2022 11:55:09 +0000
Subject: [PATCH 02/19] [IMP] web_editor: preserve backend's `black` and
 `white` colors

Add 'black' and 'white' color in the list of backend's $theme-colors to
preserve during website's customization.

This commit is preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web_editor/static/src/scss/bootstrap_overridden.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index b64c0690974..460d51a7424 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -35,7 +35,7 @@ $grays: () !default;
 // prevent-backend-colors-alteration for more information)
 @if variable-exists('prevent-backend-colors-alteration') and $prevent-backend-colors-alteration {
     $theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
-    $grays: map-remove($grays, '100', '200', '300', '400', '500', '600', '700', '800', '900');
+    $grays: map-remove($grays, '100', '200', '300', '400', '500', '600', '700', '800', '900', 'black', 'white');
 }
 
 // Bootstrap use standard variables to define individual colors which are then

From 17ec20ca75207a9ca080234886be45a360e21d65 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 6 Sep 2022 08:09:08 +0000
Subject: [PATCH 03/19] [IMP] web, mail: introduce `bg-view` class

Since the view's background-color has been historically white, the
`bg-white` class has been used to make match several UI components.

Despite working for the default color-scheme, this approach leads to
inconsistencies when the default view's background-color changes, eg.
dark-mode.

This commit introduce 'bg-view' to set any element to match the view's
background-color, whatever it is.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/mail/static/src/components/chatter/chatter.xml  |  2 +-
 .../src/components/message_list/message_list.xml       |  2 +-
 addons/web/static/src/legacy/xml/search_panel.xml      |  2 +-
 addons/web/static/src/scss/utilities_custom.scss       | 10 ++++++++++
 .../static/src/search/search_panel/search_panel.xml    |  2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index 0055eb2964b..7d149bec206 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.Chatter" owl="1">
         <t t-if="chatter">
-            <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-white" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-view" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="chatter.dropZoneView">
                     <DropZone
                         className="'o_Chatter_dropZone'"
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 28e560a5bfd..52e8acd10d5 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.MessageList" owl="1">
         <t t-if="messageListView">
-            <div class="o_MessageList d-flex flex-column bg-white overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
+            <div class="o_MessageList bg-view d-flex flex-column overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
                 <!-- No result messages -->
                 <t t-if="messageListView.threadViewOwner.threadCache.orderedNonEmptyMessages.length === 0">
                     <div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted fst-italic">
diff --git a/addons/web/static/src/legacy/xml/search_panel.xml b/addons/web/static/src/legacy/xml/search_panel.xml
index 04639a0a4b1..2c916d8159b 100644
--- a/addons/web/static/src/legacy/xml/search_panel.xml
+++ b/addons/web/static/src/legacy/xml/search_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="web.Legacy.SearchPanel" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto" t-att-class="props.className" t-ref="legacySearchPanel">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="props.className" t-ref="legacySearchPanel">
         <section t-foreach="model.get('sections', s => !s.empty)" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
diff --git a/addons/web/static/src/scss/utilities_custom.scss b/addons/web/static/src/scss/utilities_custom.scss
index 01ac4500901..b2647d4360b 100644
--- a/addons/web/static/src/scss/utilities_custom.scss
+++ b/addons/web/static/src/scss/utilities_custom.scss
@@ -74,6 +74,16 @@ $utilities: map-merge(
                 values: $utilities-opacity,
             ),
         ),
+        "background-color": map-merge(
+            map-get($utilities, "background-color"),
+            (
+                values: map-merge($utilities-bg-colors,
+                    (
+                      "view": $o-view-background-color,
+                    )
+                )
+            )
+        ),
         "rounded-top": (
             property: border-top-left-radius border-top-right-radius,
             class: rounded-top,
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index e4aa92df2ea..bafb24dbacd 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -11,7 +11,7 @@
 </t>
 
 <t t-name="web.SearchPanelContent" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
         <section t-foreach="sections" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >

From 9622839cc96a0d787c76c4455ecae708578a22f5 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 6 Sep 2022 11:25:32 +0000
Subject: [PATCH 04/19] [IMP] web: `PivotRenderer`, after BS5 cleanup

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/static/src/views/pivot/pivot_renderer.xml | 6 +++---
 addons/web/static/src/views/pivot/pivot_view.scss    | 9 ---------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 37f784cfa19..ba8d6ab0d30 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -54,7 +54,7 @@
 
     <t t-name="web.PivotHeader" owl="1">
         <th
-            class="text-nowrap cursor-pointer fw-normal bg-100"
+            class="text-nowrap cursor-pointer fw-normal bg-100 user-select-none"
             t-att-colspan="isXAxis ? cell.width : undefined"
             t-att-rowspan="isXAxis ? cell.height : undefined"
             t-att-class="{
@@ -91,8 +91,8 @@
 
     <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="{
-                'o_pivot_origin_row cursor-pointer': cell.originIndexes,
-                'o_pivot_measure_row cursor-pointer': !cell.originIndexes,
+                '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',
                 o_pivot_sort_order_desc: cell.order === 'desc',
             }" t-on-click.prevent="() => this.onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
diff --git a/addons/web/static/src/views/pivot/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
index d0128ba2630..6cff10dae84 100644
--- a/addons/web/static/src/views/pivot/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -8,19 +8,10 @@
         @include o-hover-text-color($body-color, $o-main-link-color);
     }
 
-    // This can be removed after the migration to BS5.
-    th,
-    td {
-        border-width: $border-width;
-    }
-
     .o_pivot_measure_row,
     .o_pivot_origin_row,
     .o_pivot_header_cell_closed,
     .o_pivot_header_cell_opened {
-        // "user-select-none" class doesn't exist in BS 4.3.1, the user-select property
-        // could be replaced by a class after the migration to BS5
-        user-select: none;
         @include o-hover-text-color($body-color, $headings-color);
 
         &:hover {

From cb8677eb05805ce160b78fe0b70c75cc31132ee0 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 7 Sep 2022 09:13:31 +0000
Subject: [PATCH 05/19] [IMP] web: introduce 'border-transparent' utility-class

Since the view's backgound-color has been historically white, white
borders have been used to adjust layout discrepancies between
components.

This commit introduces 'border-transparent' to handle the scenario
regardless by the view background color.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/static/src/core/pager/pager.xml       | 2 +-
 addons/web/static/src/scss/utilities_custom.scss | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/pager/pager.xml b/addons/web/static/src/core/pager/pager.xml
index dd61398ef58..67cc4a26b07 100644
--- a/addons/web/static/src/core/pager/pager.xml
+++ b/addons/web/static/src/core/pager/pager.xml
@@ -8,7 +8,7 @@
                     <input type="text" class="o_pager_value o_input d-inline-block w-auto text-end" size="7" t-ref="autofocus" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
                 </t>
                 <t t-else="">
-                    <span class="o_pager_value d-inline-block border-bottom border-white" t-esc="value" t-on-click="onValueClick" />
+                    <span class="o_pager_value d-inline-block border-bottom border-transparent" t-esc="value" t-on-click="onValueClick" />
                 </t>
                 <span> / </span>
                 <t t-if="props.updateTotal">
diff --git a/addons/web/static/src/scss/utilities_custom.scss b/addons/web/static/src/scss/utilities_custom.scss
index b2647d4360b..38aa93b6e37 100644
--- a/addons/web/static/src/scss/utilities_custom.scss
+++ b/addons/web/static/src/scss/utilities_custom.scss
@@ -84,6 +84,15 @@ $utilities: map-merge(
                 )
             )
         ),
+        "border-color":  map-merge(
+            map-get($utilities, "border-color"),
+            (
+                values: map-merge(
+                    map-get(map-get($utilities, "border-color"), "values"),
+                    ("transparent": transparent),
+                ),
+            ),
+        ),
         "rounded-top": (
             property: border-top-left-radius border-top-right-radius,
             class: rounded-top,

From 1ced9f10aa353afa4a7583ad2ff62e33ea3467a3 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 7 Sep 2022 09:17:26 +0000
Subject: [PATCH 06/19] [IMP] web: add 'odoo' fine-tuned text-color

The '$o-theme-text-colors' provides a list of fine-tuned text-color that
differ from the bg ones since used for text.
This commit adds `$o-brand-odoo` in the list.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/static/src/scss/primary_variables.scss           | 1 +
 addons/web/static/src/views/form/button_box/button_box.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index fcf9b54a65c..f6793ec3212 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -52,6 +52,7 @@ $o-theme-text-colors: (
     "info": #0180a5,
     "warning": #9a6b01,
     "danger": #d23f3a,
+    "odoo": $o-brand-odoo,
 )!default;
 
 $o-opacity-disabled: .5 !default;
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
index be3ef0d6dbc..c3015e265ee 100644
--- a/addons/web/static/src/views/form/button_box/button_box.scss
+++ b/addons/web/static/src/views/form/button_box/button_box.scss
@@ -68,7 +68,7 @@
 
             .o_stat_value {
                 font-weight: $font-weight-bold;
-                color: $o-brand-odoo;
+                color: map-get($o-theme-text-colors, 'odoo');
             }
 
             .o_stat_text .o_field_empty {

From 5234fad374c9c8a71fb20d9bd910411743aa2a5b Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 7 Oct 2022 09:29:34 +0000
Subject: [PATCH 07/19] [IMP] web, base: adapt for dark-mode

This commit adapts several components in order to correctly handle
color-scheme variations.

It also allows user_menu to handle switch entries

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/static/img/odoo_logo_dark.svg      | 10 +++
 .../lib/tempusdominus/tempusdominus.scss      | 22 +++---
 .../static/src/core/colorlist/colorlist.scss  |  4 +-
 .../static/src/core/errors/error_dialogs.xml  |  2 +-
 .../src/legacy/js/fields/basic_fields_owl.js  |  2 +-
 .../static/src/legacy/scss/datepicker.scss    | 11 ++-
 .../src/legacy/scss/daterangepicker.scss      | 76 +++++++++++++++++--
 .../src/legacy/scss/domain_selector.scss      |  2 +-
 .../web/static/src/legacy/scss/dropdown.scss  | 10 +++
 addons/web/static/src/legacy/scss/fields.scss |  3 +-
 .../static/src/legacy/scss/kanban_view.scss   |  2 +-
 .../web/static/src/legacy/scss/list_view.scss |  2 +-
 addons/web/static/src/legacy/scss/modal.scss  |  5 +-
 .../src/legacy/scss/name_and_signature.scss   |  4 +
 .../web/static/src/legacy/scss/popover.scss   |  1 -
 .../static/src/legacy/scss/progress_bar.scss  |  4 +-
 .../legacy/scss/tempusdominus_overridden.scss |  1 -
 addons/web/static/src/legacy/scss/utils.scss  |  2 +-
 addons/web/static/src/legacy/scss/views.scss  | 10 ++-
 addons/web/static/src/legacy/xml/base.xml     |  2 +-
 .../src/legacy/xml/name_and_signature.xml     |  2 +-
 .../static/src/scss/bootstrap_overridden.scss |  8 +-
 .../static/src/scss/primary_variables.scss    | 17 +++--
 .../static/src/scss/secondary_variables.scss  |  4 +-
 .../web/static/src/scss/utilities_custom.scss |  5 +-
 .../src/search/search_bar/search_bar.scss     | 12 +++
 .../src/search/search_bar/search_bar.xml      |  8 +-
 .../views/calendar/calendar_controller.scss   |  1 +
 .../src/views/calendar/calendar_renderer.scss | 22 +++---
 .../static/src/views/fields/ace/ace_field.js  |  3 +
 .../src/views/fields/badge/badge_field.js     |  2 +-
 .../src/views/fields/badge/badge_field.xml    |  2 +-
 .../src/views/fields/image/image_field.scss   |  9 +--
 .../src/views/fields/image/image_field.xml    | 20 ++---
 .../journal_dashboard_graph_field.js          |  7 +-
 .../src/views/form/form_controller.scss       | 21 ++---
 addons/web/static/src/views/graph/colors.js   | 38 ++++++++--
 .../src/views/graph/graph_controller.xml      | 16 ++--
 .../static/src/views/graph/graph_renderer.xml |  2 +-
 .../src/views/kanban/kanban_controller.scss   |  7 +-
 .../static/src/views/pivot/pivot_renderer.xml | 12 +--
 addons/web/static/src/views/view.scss         |  4 +-
 .../webclient/burger_menu/burger_menu.scss    | 14 ++--
 .../burger_menu/burger_menu.variables.scss    |  7 ++
 .../src/webclient/burger_menu/burger_menu.xml |  6 +-
 .../static/src/webclient/navbar/navbar.scss   |  3 +-
 .../settings_form_view.scss                   | 14 ++--
 .../settings_form_view_mobile.scss            |  4 +-
 .../src/webclient/user_menu/user_menu.js      |  3 +-
 .../src/webclient/user_menu/user_menu.xml     | 15 +++-
 .../web/static/src/webclient/webclient.scss   | 20 ++---
 .../tests/legacy/fields/basic_fields_tests.js |  8 +-
 .../relational_fields/field_one2many_tests.js |  4 +-
 .../tests/views/fields/badge_field_tests.js   |  4 +-
 .../views/fields/one2many_field_tests.js      |  4 +-
 .../static/tests/webclient/user_menu_tests.js | 22 ++++--
 .../base/static/src/scss/onboarding.scss      | 12 +++
 odoo/addons/base/views/onboarding_views.xml   | 14 ++--
 58 files changed, 369 insertions(+), 182 deletions(-)
 create mode 100644 addons/web/static/img/odoo_logo_dark.svg
 create mode 100644 addons/web/static/src/search/search_bar/search_bar.scss
 create mode 100644 addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss

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>

From 3fb351e4de9fdf6c0725befbab8f880a870abb22 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 7 Oct 2022 09:28:27 +0000
Subject: [PATCH 08/19] [IMP] mail: adapt for dark-mode

This commit adapts several components in order to correctly handle
color-scheme variations.

task-2710677

Part-of: odoo/odoo#102868
---
 .../src/components/activity/activity.scss     |  2 +-
 .../src/components/activity/activity.xml      |  8 +++---
 .../activity_menu_view.scss                   |  1 -
 .../activity_menu_view/activity_menu_view.xml |  8 +++---
 .../attachment_card/attachment_card.xml       |  6 ++---
 .../attachment_delete_confirm.xml             |  2 +-
 .../attachment_viewer/attachment_viewer.scss  | 16 +++++++++---
 .../attachment_viewer/attachment_viewer.xml   | 26 +++++++++----------
 .../call_action_list/call_action_list.scss    |  4 +++
 .../call_action_list/call_action_list.xml     | 14 +++++-----
 .../call_participant_card.scss                |  4 +--
 .../call_participant_card.xml                 |  4 +--
 ..._participant_card_popover_content_view.xml |  2 +-
 .../call_participant_video.xml                |  2 +-
 .../call_settings_menu/call_settings_menu.xml | 14 +++++-----
 .../src/components/call_view/call_view.scss   |  1 +
 .../src/components/call_view/call_view.xml    |  2 +-
 .../channel_invitation_form.xml               |  2 +-
 ...nel_invitation_form_selectable_partner.xml |  2 +-
 .../components/chat_window/chat_window.scss   |  4 +--
 .../components/chat_window/chat_window.xml    |  6 ++---
 .../chat_window_header.scss                   |  3 ++-
 .../chat_window_header/chat_window_header.xml |  2 +-
 .../chatter_topbar/chatter_topbar.xml         |  2 +-
 .../src/components/composer/composer.xml      | 12 ++++-----
 .../composer_text_input.xml                   |  2 +-
 .../delete_message_confirm.xml                |  2 +-
 .../static/src/components/discuss/discuss.xml |  4 +--
 .../src/components/drop_zone/drop_zone.xml    |  2 +-
 .../emoji_category_bar_view.scss              |  3 +++
 .../emoji_category_view.scss                  |  2 +-
 .../emoji_category_view.xml                   |  2 +-
 .../emoji_search_bar_view.xml                 |  7 +++--
 .../follower_subtype/follower_subtype.xml     |  2 +-
 .../link_preview_card_view.scss               |  4 +++
 .../link_preview_card_view.xml                |  6 ++---
 .../link_preview_delete_confirm_view.xml      |  2 +-
 .../link_preview_video_view.scss              | 12 +++++++++
 .../link_preview_video_view.xml               | 10 +++----
 .../static/src/components/message/message.xml |  2 +-
 .../message_action_list.scss                  |  8 ++++--
 .../message_action_list.xml                   |  2 +-
 .../message_action_view.scss                  |  2 +-
 .../message_reaction_group.scss               |  2 +-
 .../message_reaction_group.xml                |  2 +-
 .../messaging_menu/messaging_menu.xml         |  2 +-
 .../mobile_messaging_navbar.xml               |  2 +-
 .../notification_list_item.scss               |  2 +-
 .../persona_im_status_icon.scss               | 12 ++-------
 .../persona_im_status_icon.xml                |  6 ++---
 .../components/popover_view/popover_view.xml  |  2 +-
 .../thread_view_topbar/thread_view_topbar.xml | 12 ++++-----
 .../mail/static/src/models_data/emoji_data.js | 14 +++++-----
 .../mail/static/src/scss/activity_view.scss   |  7 +----
 addons/mail/static/src/xml/activity_view.xml  |  4 +--
 .../static/src/scss/odoobot_style.scss        |  2 +-
 .../static/src/scss/bootstrap_overridden.scss |  2 ++
 57 files changed, 160 insertions(+), 134 deletions(-)
 create mode 100644 addons/mail/static/src/components/call_action_list/call_action_list.scss
 create mode 100644 addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.scss

diff --git a/addons/mail/static/src/components/activity/activity.scss b/addons/mail/static/src/components/activity/activity.scss
index 2c1bf422d26..46a6a2b21a6 100644
--- a/addons/mail/static/src/components/activity/activity.scss
+++ b/addons/mail/static/src/components/activity/activity.scss
@@ -44,5 +44,5 @@
 }
 
 .o_Activity_iconContainer {
-    box-shadow: 0 0 0 2px currentColor;
+    box-shadow: 0 0 0 2px $o-view-background-color;
 }
diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
index 1d987648c26..8b438eb4c45 100644
--- a/addons/mail/static/src/components/activity/activity.xml
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -9,11 +9,11 @@
                         <t t-if="activityView.activity.assignee">
                             <img class="o_Activity_userAvatar rounded-circle h-100 w-100 o_object_fit_cover" t-attf-src="/web/image/res.users/{{ activityView.activity.assignee.id }}/avatar_128" t-att-alt="activityView.activity.assignee.nameOrDisplayName"/>
                         </t>
-                        <div class="o_Activity_iconContainer d-flex align-items-center justify-content-center rounded-circle w-50 h-50 text-white"
+                        <div class="o_Activity_iconContainer d-flex align-items-center justify-content-center rounded-circle w-50 h-50"
                             t-att-class="{
-                                'bg-success': activityView.activity.state === 'planned',
-                                'bg-warning': activityView.activity.state === 'today',
-                                'bg-danger': activityView.activity.state === 'overdue',
+                                'text-bg-success': activityView.activity.state === 'planned',
+                                'text-bg-warning': activityView.activity.state === 'today',
+                                'text-bg-danger': activityView.activity.state === 'overdue',
                             }"
                         >
                             <i class="o_Activity_icon fa small" t-attf-class="{{ activityView.activity.icon }}"/>
diff --git a/addons/mail/static/src/components/activity_menu_view/activity_menu_view.scss b/addons/mail/static/src/components/activity_menu_view/activity_menu_view.scss
index 0e1edcad442..db407af8a0d 100644
--- a/addons/mail/static/src/components/activity_menu_view/activity_menu_view.scss
+++ b/addons/mail/static/src/components/activity_menu_view/activity_menu_view.scss
@@ -99,7 +99,6 @@
 .o_ActivityMenuView_activityGroupNoCount {
     cursor: initial;
     align-items: center;
-    color: grey;
     opacity: 0.5;
     padding: 3px;
     min-height: inherit;
diff --git a/addons/mail/static/src/components/activity_menu_view/activity_menu_view.xml b/addons/mail/static/src/components/activity_menu_view/activity_menu_view.xml
index 86718f8706e..f1565343b58 100644
--- a/addons/mail/static/src/components/activity_menu_view/activity_menu_view.xml
+++ b/addons/mail/static/src/components/activity_menu_view/activity_menu_view.xml
@@ -6,7 +6,7 @@
             <a class="o_ActivityMenuView_dropdownToggle dropdown-toggle o-no-caret o-dropdown--narrow" t-att-aria-expanded="activityMenuView.isOpen ? 'true' : 'false'" title="Activities" href="#" role="button" t-on-click="activityMenuView.onClickDropdownToggle">
                 <i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"/> <span t-if="activityMenuView.counter > 0" class="o_ActivityMenuView_counter badge" t-esc="activityMenuView.counter"/>
             </a>
-            <div t-if="activityMenuView.isOpen" class="o_ActivityMenuView_dropdownMenu o-dropdown-menu dropdown-menu-end show" role="menu">
+            <div t-if="activityMenuView.isOpen" class="o_ActivityMenuView_dropdownMenu o-dropdown-menu dropdown-menu-end show bg-view" role="menu">
                 <div class="o_ActivityMenuView_activityGroups">
                     <t t-if="activityMenuView.activityGroupViews.length === 0">
                         <div class="o_ActivityMenuView_noActivity dropdown-item-text text-center d-flex justify-content-center">
@@ -40,11 +40,11 @@
                                 </div>
                                 <div t-if="activityGroupView.activityGroup.type == 'activity'">
                                     <button t-if="activityGroupView.activityGroup.overdue_count" type="button" class="o_ActivityMenuView_activityGroupFilterButton btn btn-link mr16" t-att-data-res_model="activityGroupView.activityGroup.irModel.model" t-att-data-model_name="activityGroupView.activityGroup.irModel.name" data-filter='overdue'><t t-esc="activityGroupView.activityGroup.overdue_count"/> Late </button>
-                                    <span t-if="!activityGroupView.activityGroup.overdue_count" class="o_ActivityMenuView_activityGroupNoCount mr16">0 Late </span>
+                                    <span t-if="!activityGroupView.activityGroup.overdue_count" class="o_ActivityMenuView_activityGroupNoCount mr16 text-muted">0 Late </span>
                                     <button t-if="activityGroupView.activityGroup.today_count" type="button" class="o_ActivityMenuView_activityGroupFilterButton btn btn-link mr16" t-att-data-res_model="activityGroupView.activityGroup.irModel.model" t-att-data-model_name="activityGroupView.activityGroup.irModel.name" data-filter='today'> <t t-esc="activityGroupView.activityGroup.today_count"/> Today </button>
-                                    <span t-if="!activityGroupView.activityGroup.today_count" class="o_ActivityMenuView_activityGroupNoCount mr16">0 Today </span>
+                                    <span t-if="!activityGroupView.activityGroup.today_count" class="o_ActivityMenuView_activityGroupNoCount mr16 text-muted">0 Today </span>
                                     <button t-if="activityGroupView.activityGroup.planned_count" type="button" class="o_ActivityMenuView_activityGroupFilterButton btn btn-link float-end" t-att-data-res_model="activityGroupView.activityGroup.irModel.model" t-att-data-model_name="activityGroupView.activityGroup.irModel.name" data-filter='upcoming_all'> <t t-esc="activityGroupView.activityGroup.planned_count"/> Future </button>
-                                    <span t-if="!activityGroupView.activityGroup.planned_count" class="o_ActivityMenuView_activityGroupNoCount float-end">0 Future</span>
+                                    <span t-if="!activityGroupView.activityGroup.planned_count" class="o_ActivityMenuView_activityGroupNoCount float-end text-muted">0 Future</span>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.xml b/addons/mail/static/src/components/attachment_card/attachment_card.xml
index d5202df4109..a75ebeb8855 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.xml
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.AttachmentCard" owl="1">
         <t t-if="attachmentCard">
             <div t-attf-class="{{ className }}" t-ref="root">
-                <div class="o_AttachmentCard o-has-card-details d-flex rounded border bg-200"
+                <div class="o_AttachmentCard o-has-card-details d-flex rounded bg-300"
                     t-att-class="{
                         'o-isUploading': attachmentCard.attachment.isUploading,
                         'o-viewable': attachmentCard.attachment.isViewable,
@@ -42,13 +42,13 @@
                         </t>
                         <!-- Remove button -->
                         <t t-if="attachmentCard.attachment.isDeletable">
-                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary transition-base' : 'bg-200' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
+                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemUnlink btn top-0 justify-content-center align-items-center d-flex w-100 h-100 rounded-0" t-attf-class="{{ attachmentCard.attachmentList.composerViewOwner ? 'o-pretty position-absolute btn-primary transition-base' : 'bg-300' }}" t-on-click="attachmentCard.onClickUnlink" title="Remove">
                                 <i class="fa fa-trash" role="img" aria-label="Remove"/>
                             </button>
                         </t>
                         <!-- Download button -->
                         <t t-if="!attachmentCard.attachmentList.composerViewOwner and !attachmentCard.attachment.isUploading">
-                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemDownload btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0 bg-200" t-on-click="attachmentCard.attachment.onClickDownload" title="Download">
+                            <button class="o_AttachmentCard_asideItem o_AttachmentCard_asideItemDownload btn d-flex justify-content-center align-items-center w-100 h-100 rounded-0 bg-300" t-on-click="attachmentCard.attachment.onClickDownload" title="Download">
                                 <i class="fa fa-download" role="img" aria-label="Download"/>
                             </button>
                         </t>
diff --git a/addons/mail/static/src/components/attachment_delete_confirm/attachment_delete_confirm.xml b/addons/mail/static/src/components/attachment_delete_confirm/attachment_delete_confirm.xml
index 5ddf94730d7..fead0c869f2 100644
--- a/addons/mail/static/src/components/attachment_delete_confirm/attachment_delete_confirm.xml
+++ b/addons/mail/static/src/components/attachment_delete_confirm/attachment_delete_confirm.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.AttachmentDeleteConfirm" owl="1">
         <t t-if="attachmentDeleteConfirmView">
-            <div class="o_AttachmentDeleteConfirm card bg-white" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_AttachmentDeleteConfirm card bg-view" t-attf-class="{{ className }}" t-ref="root">
                 <h4 class="m-3">Confirmation</h4>
                 <hr class="mt-0 mb-3"/>
                 <p class="o_AttachmentDeleteConfirm_mainText mx-3 mb-3" t-esc="attachmentDeleteConfirmView.body"/>
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
index 537e076d034..10cb6ebf7ef 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -49,11 +49,21 @@
     color: lighten($gray-400, 15%);
 }
 
-.o_AttachmentViewer_toolbarButton.o_disabled {
-    filter: brightness(1.3);
+.o_AttachmentViewer_toolbarButton {
+    background-color: var(--AttachmentViewer_toolbarButton-background-color, #{$o-gray-800});
+    color: #fff;
+
+    &:hover {
+        filter: brightness(1.3);
+    }
 }
 
 .o_AttachmentViewer_view {
-    box-shadow: 0 0 40px $black;
+    background-color: #000000;
+    box-shadow: 0 0 40px #000000;
     outline: none;
+
+    &.o_AttachmentViewer_isText {
+        background: #FFFFFF;
+    }
 }
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index ab7ea6e441b..5515ea7ce18 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -43,51 +43,51 @@
                                     <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin text-white" role="img" title="Loading"/>
                                 </div>
                             </t>
-                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 bg-black transition-base" t-on-click="attachmentViewer.onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="attachmentViewer.onLoadImage" t-att-src="attachmentViewer.attachmentViewerViewable.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachmentViewerViewable.localId" t-ref="image_{{ attachmentViewer.attachmentViewerViewable.localId }}"/>
+                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage mw-100 mh-100 transition-base" t-on-click="attachmentViewer.onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="attachmentViewer.onLoadImage" t-att-src="attachmentViewer.attachmentViewerViewable.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachmentViewerViewable.localId" t-ref="image_{{ attachmentViewer.attachmentViewerViewable.localId }}"/>
                         </div>
                     </t>
                     <t t-if="attachmentViewer.attachmentViewerViewable.isPdf">
-                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf w-75 h-100 bg-black border-0" t-ref="iframeViewerPdf" t-att-class="{ 'w-100': messaging.device.isSmall }" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource"/>
+                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf w-75 h-100 border-0" t-ref="iframeViewerPdf" t-att-class="{ 'w-100': messaging.device.isSmall }" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource"/>
                     </t>
                     <t t-if="attachmentViewer.attachmentViewerViewable.isText">
-                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text w-75 h-100 bg-white border-0" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource"/>
+                        <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_isText o_text w-75 h-100 border-0" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource"/>
                     </t>
                     <t t-if="attachmentViewer.attachmentViewerViewable.isUrlYoutube">
-                        <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube w-75 h-100 bg-black border-0" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource" height="315" width="560"/>
+                        <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube w-75 h-100 border-0" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource" height="315" width="560"/>
                     </t>
                     <t t-if="attachmentViewer.attachmentViewerViewable.isVideo">
-                        <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo w-75 h-75 bg-black" t-att-class="{ 'w-100 h-100': messaging.device.isSmall }" t-on-click="attachmentViewer.onClickVideo" controls="controls">
+                        <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo w-75 h-75" t-att-class="{ 'w-100 h-100': messaging.device.isSmall }" t-on-click="attachmentViewer.onClickVideo" controls="controls">
                             <source t-att-data-type="attachmentViewer.attachmentViewerViewable.mimetype" t-att-src="attachmentViewer.attachmentViewerViewable.defaultSource"/>
                         </video>
                     </t>
                 </div>
                 <t t-if="attachmentViewer.attachmentViewerViewable.isImage">
                     <div class="o_AttachmentViewer_toolbar position-absolute bottom-0 d-flex" role="toolbar">
-                        <div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton p-3 rounded-0" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
                             <i class="fa fa-fw fa-plus" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
+                        <div class="o_AttachmentViewer_toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
                             <i class="fa fa-fw fa-search" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
                             <i class="fa fa-fw fa-minus" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-on-click="attachmentViewer.onClickRotate" title="Rotate (r)" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton p-3 rounded-0" t-on-click="attachmentViewer.onClickRotate" title="Rotate (r)" role="button">
                             <i class="fa fa-fw fa-repeat" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0" t-on-click="attachmentViewer.onClickPrint" title="Print" role="button">
+                        <div class="o_AttachmentViewer_toolbarButton p-3 rounded-0" t-on-click="attachmentViewer.onClickPrint" title="Print" role="button">
                             <i class="fa fa-fw fa-print" role="img"/>
                         </div>
-                        <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton btn btn-dark p-3 rounded-0 cursor-pointer" t-on-click="attachmentViewer.onClickDownload" title="Download" role="button">
+                        <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton p-3 rounded-0 cursor-pointer" t-on-click="attachmentViewer.onClickDownload" title="Download" role="button">
                             <i class="fa fa-download fa-fw" role="img"/>
                         </div>
                     </div>
                 </t>
                 <t t-if="attachmentViewer.attachmentViewerViewables.length > 1">
-                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious o_AttachmentViewer_buttonNavigationPreviousIcon btn btn-dark position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click="attachmentViewer.onClickPrevious" title="Previous (Left-Arrow)" role="button">
+                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious o_AttachmentViewer_buttonNavigationPreviousIcon position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click="attachmentViewer.onClickPrevious" title="Previous (Left-Arrow)" role="button">
                         <span class="fa fa-chevron-left" role="img"/>
                     </div>
-                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext o_AttachmentViewer_buttonNavigationNextIcon btn btn-dark position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click="attachmentViewer.onClickNext" title="Next (Right-Arrow)" role="button">
+                    <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext o_AttachmentViewer_buttonNavigationNextIcon position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click="attachmentViewer.onClickNext" title="Next (Right-Arrow)" role="button">
                         <span class="fa fa-chevron-right" role="img"/>
                     </div>
                 </t>
diff --git a/addons/mail/static/src/components/call_action_list/call_action_list.scss b/addons/mail/static/src/components/call_action_list/call_action_list.scss
new file mode 100644
index 00000000000..03fa917142a
--- /dev/null
+++ b/addons/mail/static/src/components/call_action_list/call_action_list.scss
@@ -0,0 +1,4 @@
+.o_CallActionList_button:not(.btn-danger) {
+    background-color: var(--CallActionList_button-background-color, #{$o-gray-800});
+    color: #FFFFFF;
+}
diff --git a/addons/mail/static/src/components/call_action_list/call_action_list.xml b/addons/mail/static/src/components/call_action_list/call_action_list.xml
index a01eaf033b3..87e92c715d4 100644
--- a/addons/mail/static/src/components/call_action_list/call_action_list.xml
+++ b/addons/mail/static/src/components/call_action_list/call_action_list.xml
@@ -6,7 +6,7 @@
             <div class="o_CallActionList d-flex justify-content-between" t-attf-class="{{ className }}" t-ref="root">
                 <div class="o_CallActionList_buttons d-flex align-items-center flex-wrap">
                     <t t-if="callActionListView.thread.rtc and messaging.rtc.currentRtcSession">
-                        <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                        <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                             t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isMute, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
                             t-att-aria-label="callActionListView.microphoneButtonTitle"
                             t-att-title="callActionListView.microphoneButtonTitle"
@@ -20,7 +20,7 @@
                                 }"/>
                             </div>
                         </button>
-                        <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                        <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                             t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isDeaf, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
                             t-att-aria-label="callActionListView.headphoneButtonTitle"
                             t-att-title="callActionListView.headphoneButtonTitle"
@@ -34,7 +34,7 @@
                                 }"/>
                             </div>
                         </button>
-                        <button class="o_CallActionList_button o_CallActionList_videoButton btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                        <button class="o_CallActionList_button o_CallActionList_videoButton btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                             t-att-class="{
                                 'o-isActive': messaging.rtc.sendUserVideo,
                                 'o-isSmall p-2': callActionListView.isSmall,
@@ -48,7 +48,7 @@
                             </div>
                         </button>
                         <t t-if="!messaging.device.isMobileDevice">
-                            <button class="o_CallActionList_button o_CallActionList_videoButton btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                            <button class="o_CallActionList_button o_CallActionList_videoButton btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                                 t-att-class="{
                                     'o-isActive': messaging.rtc.sendDisplay,
                                     'o-isSmall p-2': callActionListView.isSmall,
@@ -63,7 +63,7 @@
                             </button>
                         </t>
                         <t t-if="!callActionListView.callView.isFullScreen">
-                            <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                            <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                                 aria-label="Activate Full Screen"
                                 title="Activate Full Screen"
                                 t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
@@ -75,7 +75,7 @@
                             </button>
                         </t>
                         <t t-if="callActionListView.callView.isFullScreen">
-                            <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                            <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                                 aria-label="Deactivate Full Screen"
                                 title="Deactivate Full Screen"
                                 t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
@@ -87,7 +87,7 @@
                             </button>
                         </t>
                         <t t-if="messaging.modelManager.isDebug">
-                            <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
+                            <button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                                     aria-label="More"
                                     title="More"
                                     t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.scss b/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
index 595d6efbe5d..072a9edf2a3 100644
--- a/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
@@ -57,6 +57,6 @@
     user-select: none;
 }
 
-.o_CallParticipantCard_name {
-    background-color: rgba(black, .75);
+.o_CallParticipantCard_avatarFrame:not(.o-isMinimized) {
+    background-color: var(--CallParticipantCard_avatarFrame-background-color, #{$o-gray-700});
 }
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.xml b/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
index 3d214a7ea1c..4e5bd8291e4 100644
--- a/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
@@ -20,7 +20,7 @@
                     <CallParticipantVideo record="callParticipantCard.callParticipantVideoView"/>
                 </t>
                 <t t-else="">
-                    <div class="o_CallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-1" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-700': !callParticipantCard.isMinimized}" draggable="false">
+                    <div class="o_CallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-1" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized }" draggable="false">
                         <img alt="Avatar"
                              t-att-class="{
                                 'o-isTalking': callParticipantCard.isTalking,
@@ -37,7 +37,7 @@
                     <!-- overlay -->
                     <span class="o_CallParticipantCard_overlay o_CallParticipantCard_overlayBottom position-absolute bottom-0 start-0 d-flex overflow-hidden">
                         <t t-if="!callParticipantCard.isMinimized">
-                            <span class="o_CallParticipantCard_name p-1 rounded-1 text-white text-truncate" t-esc="callParticipantCard.channelMember.persona.name"/>
+                            <span class="o_CallParticipantCard_name p-1 rounded-1 bg-black-75 text-truncate" t-esc="callParticipantCard.channelMember.persona.name"/>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.isScreenSharingOn and callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
                             <small class="o_CallParticipantCard_liveIndicator o-isMinimized rounded-pill text-bg-danger d-flex align-items-center fw-bolder" title="live" aria-label="live">
diff --git a/addons/mail/static/src/components/call_participant_card_popover_content_view/call_participant_card_popover_content_view.xml b/addons/mail/static/src/components/call_participant_card_popover_content_view/call_participant_card_popover_content_view.xml
index ebfba5b27cb..3a0ac8e6794 100644
--- a/addons/mail/static/src/components/call_participant_card_popover_content_view/call_participant_card_popover_content_view.xml
+++ b/addons/mail/static/src/components/call_participant_card_popover_content_view/call_participant_card_popover_content_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.CallParticipantCardPopoverContentView" owl="1">
         <div class="d-flex flex-column p-3">
-            <input type="range" min="0.0" max="1" step="0.01" t-att-value="callParticipantCardPopoverContentView.callParticipantCard.rtcSession.volume" t-on-change="callParticipantCardPopoverContentView.onChangeVolume"/>
+            <input type="range" min="0.0" max="1" step="0.01" t-att-value="callParticipantCardPopoverContentView.callParticipantCard.rtcSession.volume" t-on-change="callParticipantCardPopoverContentView.onChangeVolume" class="form-range"/>
             <t t-if="callParticipantCardPopoverContentView.hasConnectionInfo">
                 <hr class="o_CallParticipantCardPopoverContentView_volumeMenuAnchorSeparator w-100 border-top"/>
                 <div t-esc="callParticipantCardPopoverContentView.inboundConnectionTypeText"/>
diff --git a/addons/mail/static/src/components/call_participant_video/call_participant_video.xml b/addons/mail/static/src/components/call_participant_video/call_participant_video.xml
index 9c111d9226f..eab1de03c26 100644
--- a/addons/mail/static/src/components/call_participant_video/call_participant_video.xml
+++ b/addons/mail/static/src/components/call_participant_video/call_participant_video.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.CallParticipantVideo" owl="1">
         <t t-if="callParticipantVideoView">
-            <video class="o_CallParticipantVideo w-100 h-100 rounded-1 bg-black cursor-pointer"
+            <video class="o_CallParticipantVideo w-100 h-100 rounded-1 cursor-pointer"
                 t-attf-class="{{ className }}"
                 playsinline="true"
                 autoplay="true"
diff --git a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
index 72dc37541a0..88f133aef2d 100644
--- a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
+++ b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
@@ -20,7 +20,7 @@
                 </div>
                 <div class="o_CallSettingsMenu_option mb-3 d-flex align-items-center flex-wrap">
                     <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_pushToTalkOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Enable Push-to-talk" aria-label="Enable Push-to-talk">
-                        <input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="callSettingsMenu.onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''"/>
+                        <input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="callSettingsMenu.onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''" class="form-check-input"/>
                         <span class="o_CallSettingsMenu_optionName ms-2 text-truncate">Enable Push-to-talk</span>
                     </label>
                 </div>
@@ -49,7 +49,7 @@
                         <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_pushToTalkDelayOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
                             <span class="o_CallSettingsMenu_optionName me-2 text-truncate">Delay after releasing push-to-talk</span>
                             <div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
-                            <input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="callSettingsMenu.onChangeDelay"/>
+                            <input class="o_CallSettingsMenu_optionInputGroupInput form-range" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="callSettingsMenu.onChangeDelay"/>
                             </div>
                         </label>
                     </div>
@@ -59,7 +59,7 @@
                         <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_voiceThresholdOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Voice detection threshold" aria-label="Voice detection threshold">
                             <span class="o_CallSettingsMenu_optionName me-2 text-truncate">Voice detection threshold</span>
                             <div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
-                                <input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="callSettingsMenu.onChangeThreshold"/>
+                                <input class="o_CallSettingsMenu_optionInputGroupInput form-range" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="callSettingsMenu.onChangeThreshold"/>
                             </div>
                         </label>
                     </div>
@@ -69,14 +69,14 @@
                 <div class="o_CallSettingsMenu_categoryTitle py-2 fw-bolder text-700 text-truncate text-uppercase">Video Settings</div>
                 <div class="o_CallSettingsMenu_option mb-3 d-flex align-items-center flex-wrap">
                     <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_showOnlyVideoOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Show video participants only" aria-label="Show video participants only">
-                        <input type="checkbox" aria-label="toggle push-to-talk" title="Show video participants only" t-on-change="callSettingsMenu.onChangeVideoFilterCheckbox" t-att-checked="callSettingsMenu.thread.channel.showOnlyVideo ? 'checked' : ''"/>
+                        <input type="checkbox" aria-label="toggle push-to-talk" title="Show video participants only" t-on-change="callSettingsMenu.onChangeVideoFilterCheckbox" t-att-checked="callSettingsMenu.thread.channel.showOnlyVideo ? 'checked' : ''" class="form-check-input"/>
                         <span class="o_CallSettingsMenu_optionName ms-2 text-truncate">Show video participants only</span>
                     </label>
                 </div>
                 <t t-if="messaging.device.hasCanvasFilterSupport">
                     <div class="o_CallSettingsMenu_option mb-3 d-flex align-items-center flex-wrap">
                         <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_blurOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Blur video background" aria-label="Blur video background">
-                            <input type="checkbox" aria-label="Blur video background" title="Blur video background" t-on-change="callSettingsMenu.onChangeBlur" t-att-checked="messaging.userSetting.useBlur ? 'checked' : ''"/>
+                            <input type="checkbox" aria-label="Blur video background" title="Blur video background" t-on-change="callSettingsMenu.onChangeBlur" t-att-checked="messaging.userSetting.useBlur ? 'checked' : ''" class="form-check-input"/>
                             <span class="o_CallSettingsMenu_optionName ms-2 text-truncate">Blur video background</span>
                         </label>
                     </div>
@@ -86,7 +86,7 @@
                         <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_backgroundBlurIntensityOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Background blur intensity" aria-label="Background blur intensity">
                             <span class="o_CallSettingsMenu_optionName me-2 text-truncate">Background blur intensity</span>
                             <div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
-                                <input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="0" max="20" step="1" t-att-value="messaging.userSetting.backgroundBlurAmount" t-on-change="callSettingsMenu.onChangeBackgroundBlurAmount"/>
+                                <input class="o_CallSettingsMenu_optionInputGroupInput form-range" type="range" min="0" max="20" step="1" t-att-value="messaging.userSetting.backgroundBlurAmount" t-on-change="callSettingsMenu.onChangeBackgroundBlurAmount"/>
                             </div>
                         </label>
                     </div>
@@ -94,7 +94,7 @@
                         <label class="o_CallSettingsMenu_optionLabel o_CallSettingsMenu_edgeBlurIntensityOption d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Edge blur intensity" aria-label="Edge blur intensity">
                             <span class="o_CallSettingsMenu_optionName me-2 text-truncate">Edge blur intensity</span>
                             <div class="o_CallSettingsMenu_optionInputGroup d-flex w-100">
-                                <input class="o_CallSettingsMenu_optionInputGroupInput" type="range" min="0" max="20" step="1" t-att-value="messaging.userSetting.edgeBlurAmount" t-on-change="callSettingsMenu.onChangeEdgeBlurAmount"/>
+                                <input class="o_CallSettingsMenu_optionInputGroupInput form-range" type="range" min="0" max="20" step="1" t-att-value="messaging.userSetting.edgeBlurAmount" t-on-change="callSettingsMenu.onChangeEdgeBlurAmount"/>
                             </div>
                         </label>
                     </div>
diff --git a/addons/mail/static/src/components/call_view/call_view.scss b/addons/mail/static/src/components/call_view/call_view.scss
index ba18b6862a0..52604aa3461 100644
--- a/addons/mail/static/src/components/call_view/call_view.scss
+++ b/addons/mail/static/src/components/call_view/call_view.scss
@@ -4,6 +4,7 @@
 
 .o_CallView {
     min-height: 50%;
+    background: var(--CallView-background-color, #{$dark});
 
     &.o-isMinimized {
         height: 20%;
diff --git a/addons/mail/static/src/components/call_view/call_view.xml b/addons/mail/static/src/components/call_view/call_view.xml
index 177c98c3c4f..cea1714a41a 100644
--- a/addons/mail/static/src/components/call_view/call_view.xml
+++ b/addons/mail/static/src/components/call_view/call_view.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.CallView" owl="1">
     <t t-if="callView">
-        <div class="o_CallView d-flex bg-dark" t-att-class="{'o-fullScreen fixed-top vw-100 vh-100': callView.isFullScreen, 'o-isMinimized': callView.isMinimized, 'h-50': !callView.isMinimized and !callView.isFullScreen, 'position-relative': !callView.isFullScreen }" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_CallView d-flex" t-att-class="{'o-fullScreen fixed-top vw-100 vh-100': callView.isFullScreen, 'o-isMinimized': callView.isMinimized, 'h-50': !callView.isMinimized and !callView.isFullScreen, 'position-relative': !callView.isFullScreen }" t-attf-class="{{ className }}" t-ref="root">
             <!-- Used to make the component depend on the window size and trigger an update when the window size changes. -->
 
             <CallMainView record="callView.callMainView"/>
diff --git a/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml b/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
index fdcfd488f6c..747cedadfb8 100644
--- a/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
+++ b/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
@@ -7,7 +7,7 @@
                 <h3 class="mx-3 mt-3 mb-2">Invite people</h3>
                 <t t-if="!messaging.isCurrentUserGuest">
                     <div class="mx-3 my-2">
-                        <input class="o_ChannelInvitationForm_searchInput" type="text" t-att-value="channelInvitationForm.searchTerm" placeholder="Type the name of a person" t-on-input="channelInvitationForm.onInputSearch" t-ref="searchInput"/>
+                        <input class="o_ChannelInvitationForm_searchInput form-control" type="text" t-att-value="channelInvitationForm.searchTerm" placeholder="Type the name of a person" t-on-input="channelInvitationForm.onInputSearch" t-ref="searchInput"/>
                     </div>
                     <div class="d-flex flex-column flex-grow-1 mx-0 py-2 overflow-auto">
                         <t t-foreach="channelInvitationForm.selectablePartnerViews" t-as="selectablePartnerView" t-key="selectablePartnerView.localId">
diff --git a/addons/mail/static/src/components/channel_invitation_form_selectable_partner/channel_invitation_form_selectable_partner.xml b/addons/mail/static/src/components/channel_invitation_form_selectable_partner/channel_invitation_form_selectable_partner.xml
index 31ce7ff4020..6d154acf127 100644
--- a/addons/mail/static/src/components/channel_invitation_form_selectable_partner/channel_invitation_form_selectable_partner.xml
+++ b/addons/mail/static/src/components/channel_invitation_form_selectable_partner/channel_invitation_form_selectable_partner.xml
@@ -19,7 +19,7 @@
             <span class="o_ChannelInvitationFormSelectablePartner_name flex-grow-1 mx-2 text-truncate">
                 <t t-esc="channelInvitationFormSelectablePartnerView.partner.nameOrDisplayName"/>
             </span>
-            <input class="o_ChannelInvitationFormSelectablePartner_checkbox flex-shrink-0" type="checkbox" t-att-checked="channelInvitationFormSelectablePartnerView.channelInvitationFormOwner.selectedPartners.includes(channelInvitationFormSelectablePartnerView.partner) ? 'checked' : undefined" t-on-input="ev => channelInvitationFormSelectablePartnerView.channelInvitationFormOwner.onInputPartnerCheckbox(channelInvitationFormSelectablePartnerView.partner, ev)" t-ref="selection-status"/>
+            <input class="o_ChannelInvitationFormSelectablePartner_checkbox form-check-input flex-shrink-0" type="checkbox" t-att-checked="channelInvitationFormSelectablePartnerView.channelInvitationFormOwner.selectedPartners.includes(channelInvitationFormSelectablePartnerView.partner) ? 'checked' : undefined" t-on-input="ev => channelInvitationFormSelectablePartnerView.channelInvitationFormOwner.onInputPartnerCheckbox(channelInvitationFormSelectablePartnerView.partner, ev)" t-ref="selection-status"/>
         </div>
     </t>
 
diff --git a/addons/mail/static/src/components/chat_window/chat_window.scss b/addons/mail/static/src/components/chat_window/chat_window.scss
index 95b7b2e439f..f7d17eb9e81 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.scss
+++ b/addons/mail/static/src/components/chat_window/chat_window.scss
@@ -30,11 +30,11 @@
 
 .o_ChatWindow {
     background-color: $o-mail-thread-window-bg;
-    box-shadow: -5px -5px 10px rgba($black, 0.09);
+    box-shadow: -5px -5px 10px rgba(#000000, 0.09);
     outline: none;
 
     &.o-focused:not(.o-isDeviceSmall) {
-        box-shadow: -5px -5px 10px rgba($black, 0.18);
+        box-shadow: -5px -5px 10px rgba(#000000, 0.18);
     }
 
     .o_Composer {
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index 88ee0d71b9f..5af240aed3f 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.ChatWindow" owl="1">
         <t t-if="chatWindow">
-            <div class="o_ChatWindow position-absolute bottom-0 d-flex flex-column rounded-top-3 bg-white" t-attf-class="{{ className }}" tabindex="0" t-att-data-visible-index="chatWindow.visibleIndex"
+            <div class="o_ChatWindow position-absolute bottom-0 d-flex flex-column rounded-top-3 bg-view" t-attf-class="{{ className }}" tabindex="0" t-att-data-visible-index="chatWindow.visibleIndex"
                 t-att-class="{
                     'o-focused': chatWindow.isFocused,
                     'o-folded': chatWindow.isFolded,
@@ -20,10 +20,10 @@
                     record="chatWindow.chatWindowHeaderView"
                 />
                 <t t-if="chatWindow.channelMemberListView">
-                    <ChannelMemberList record="chatWindow.channelMemberListView" className="'bg-white'"/>
+                    <ChannelMemberList record="chatWindow.channelMemberListView" className="'bg-view'"/>
                 </t>
                 <t t-if="chatWindow.callSettingsMenu">
-                    <CallSettingsMenu record="chatWindow.callSettingsMenu" className="'bg-white'"/>
+                    <CallSettingsMenu record="chatWindow.callSettingsMenu" className="'bg-view'"/>
                 </t>
                 <t t-if="chatWindow.channelInvitationForm">
                     <ChannelInvitationForm className="'o_ChatWindow_channelInvitationForm'" record="chatWindow.channelInvitationForm"/>
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
index 6d80eb5fa40..196434a91a4 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -21,7 +21,8 @@
 // ------------------------------------------------------------------
 
 .o_ChatWindowHeader {
-    background-color: $o-brand-odoo;
+    background-color: var(--ChatWindowHeader-background-color, #{$o-brand-odoo});
+    color: #FFFFFF;
 }
 
 .o_ChatWindowHeader_command.o-isDeviceSmall {
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index 7b7ed8a178c..17e4fbbd138 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.ChatWindowHeader" owl="1">
         <t t-if="chatWindowHeaderView and chatWindow">
-            <div class="o_ChatWindowHeader d-flex align-items-center text-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'cursor-pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="chatWindowHeaderView.onClick" t-ref="root">
+            <div class="o_ChatWindowHeader d-flex align-items-center" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'cursor-pointer': !messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="chatWindowHeaderView.onClick" t-ref="root">
                 <t t-if="chatWindow.hasCloseAsBackButton">
                     <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose cursor-pointer d-flex align-items-center h-100 px-3 py-0 me-2" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-on-click="chatWindow.onClickClose" title="Close conversation">
                         <i class="fa fa-arrow-left"/>
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
index 838c38f79ce..e1cba4162fa 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.ChatterTopbar" owl="1">
         <t t-if="chatterTopbar">
             <div class="o_ChatterTopbar justify-content-between d-flex" t-attf-class="{{ className }}" t-ref="root">
-                <div class="o_ChatterTopbar_actions flex-fill d-flex" t-attf-class="{{ chatterTopbar.chatter.composerView ? 'o-has-active-button' : 'border-white' }}">
+                <div class="o_ChatterTopbar_actions flex-fill d-flex border-transparent">
                     <div class="o_ChatterTopbar_controllers d-flex pe-2" t-if="chatterTopbar.chatter.threadView">
                         <button class="o_ChatterTopbar_button o_ChatterTopbar_buttonSendMessage btn text-nowrap me-2"
                             type="button"
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index bc2e685defd..942c906b7d6 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -9,7 +9,7 @@
                     'o-has-current-partner-avatar pe-3 ps-1': composerView.hasCurrentPartnerAvatar,
                     'o-has-footer': composerView.hasFooter,
                     'o-has-header': composerView.hasHeader,
-                    'o-is-in-thread-view bg-white': composerView.threadView,
+                    'o-is-in-thread-view bg-view': composerView.threadView,
                     'o-is-compact': composerView.isCompact,
                     'o-messaging-in-editing': composerView.messageViewInEditing,
                     'pt-3 pb-4': composerView.hasCurrentPartnerAvatar and composerView.hasHeader,
@@ -71,7 +71,7 @@
                     class="o_Composer_coreMain d-flex flex-nowrap align-items-start flex-grow-1"
                     t-att-class="{
                         'o-composer-is-compact': composerView.isCompact,
-                        'flex-column border rounded-3 bg-white': !composerView.isCompact,
+                        'flex-column border rounded-3 bg-view': !composerView.isCompact,
                     }"
                 >
                     <ComposerTextInput
@@ -87,14 +87,14 @@
                         t-key="composerView.localId"
                     />
                     <div class="o_Composer_buttons d-flex align-items-stretch align-self-stretch flex-shrink-0" t-att-class="{ 'o-composer-is-compact': composerView.isCompact, 'h-auto w-100 px-3': !composerView.isCompact, 'o-isDeviceSmall': messaging.device.isSmall, 'o-messaging-in-editing': composerView and composerView.messageViewInEditing, 'border-end': composerView.messageViewInEditing and !composerView.hasCurrentPartnerAvatar }">
-                        <div class="o_Composer_toolButtons d-flex py-1 border-top bg-white"
+                        <div class="o_Composer_toolButtons d-flex py-1 border-top bg-view"
                             t-att-class="{
                                 'o-composer-has-current-partner-avatar': composerView.hasCurrentPartnerAvatar,
                                 'o-composer-is-compact border-bottom': composerView.isCompact,
                                 'flex-row flex-grow-1 justify-content-between': !composerView.isCompact,
                             }">
                             <div class="o_Composer_primaryToolButtons d-flex align-items-center" t-att-class="{ 'o-composer-is-compact px-2': composerView.isCompact, 'flex-column': composerView.messageViewInEditing and composerView.messageViewInEditing.isInChatWindow }">
-                                <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light border-0 rounded-pill"
+                                <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light border-0 rounded-pill bg-view"
                                     t-att-class="{
                                         'o-open bg-200': composerView.emojisPopoverView,
                                         'o-isDeviceSmall': messaging.device.isSmall,
@@ -107,11 +107,11 @@
                                 >
                                     <i class="fa fa-smile-o" role="img" aria-label="Emojis"/>
                                 </button>
-                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip border-0 rounded-pill bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ composerView.messageViewInEditing ? 'my-1' : 'mx-1' }}" title="Add attachment" aria-label="Add attachment" type="button" t-on-click="composerView.onClickAddAttachment"/>
+                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip border-0 rounded-pill bg-view" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ composerView.messageViewInEditing ? 'my-1' : 'mx-1' }}" title="Add attachment" aria-label="Add attachment" type="button" t-on-click="composerView.onClickAddAttachment"/>
                             </div>
                             <t t-if="composerView.isExpandable">
                                 <div class="o_Composer_secondaryToolButtons">
-                                    <button class="o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton btn btn-light fa fa-expand mx-1 border-0 rounded-pill bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" title="Full composer" aria-label="Full composer" type="button" t-on-click="composerView.onClickFullComposer"/>
+                                    <button class="o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton btn btn-light fa fa-expand mx-1 border-0 rounded-pill bg-view" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" title="Full composer" aria-label="Full composer" type="button" t-on-click="composerView.onClickFullComposer"/>
                                 </div>
                             </t>
                         </div>
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
index 40d4d35e90b..585dcc09351 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.ComposerTextInput" owl="1">
         <t t-if="composerTextInputView">
-            <div class="o_ComposerTextInput position-relative bg-white" t-attf-class="{{ className }} {{ composerTextInputView.owner.isCompact ? 'border border-end-0' : 'border-0' }}" t-att-class="{ 'border-start-0': composerTextInputView.owner.isInChatWindow }" t-on-paste="composerTextInputView.owner.onPasteTextInput" t-ref="root">
+            <div class="o_ComposerTextInput position-relative bg-view" t-attf-class="{{ className }} {{ composerTextInputView.owner.isCompact ? 'border border-end-0' : 'border-0' }}" t-att-class="{ 'border-start-0': composerTextInputView.owner.isInChatWindow }" t-on-paste="composerTextInputView.owner.onPasteTextInput" t-ref="root">
                 <t t-if="composerTextInputView.owner.composerSuggestionListView">
                     <ComposerSuggestionListView record="composerTextInputView.owner.composerSuggestionListView"/>
                 </t>
diff --git a/addons/mail/static/src/components/delete_message_confirm/delete_message_confirm.xml b/addons/mail/static/src/components/delete_message_confirm/delete_message_confirm.xml
index dbd86fd1ced..4742055893f 100644
--- a/addons/mail/static/src/components/delete_message_confirm/delete_message_confirm.xml
+++ b/addons/mail/static/src/components/delete_message_confirm/delete_message_confirm.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.DeleteMessageConfirm" owl="1">
         <t t-if="deleteMessageConfirmView">
-            <div class="o_DeleteMessageConfirm card bg-white" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_DeleteMessageConfirm card bg-view" t-attf-class="{{ className }}" t-ref="root">
                 <h4 class="m-3">Confirmation</h4>
                 <hr class="mt-0 mb-3"/>
                 <p class="mx-3 mb-3">Are you sure you want to delete this message?</p>
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index fa5575b4385..55d78bf5899 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.Discuss" owl="1">
         <t t-if="discussView">
             <div class="o_Discuss d-flex h-100" t-attf-class="{{ className }}"
-                t-att-class="{ 'o-isDeviceSmall flex-column align-items-center bg-white': messaging.device.isSmall }"
+                t-att-class="{ 'o-isDeviceSmall flex-column align-items-center bg-view': messaging.device.isSmall }"
                 t-ref="root"
             >
                 <t t-if="!messaging.device.isSmall">
@@ -41,7 +41,7 @@
             />
         </t>
         <t t-if="!discussView.discuss.activeThread and (!messaging.device.isSmall or discussView.discuss.activeMobileNavbarTabId === 'mailbox')">
-            <div class="o_Discuss_noThread d-flex flex-grow-1 align-items-center justify-content-center w-100 bg-white">
+            <div class="o_Discuss_noThread d-flex flex-grow-1 align-items-center justify-content-center w-100 bg-view">
                 <h4 class="text-muted"><b><i>No conversation selected.</i></b></h4>
             </div>
         </t>
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.xml b/addons/mail/static/src/components/drop_zone/drop_zone.xml
index c4a246391fc..a14499a7702 100644
--- a/addons/mail/static/src/components/drop_zone/drop_zone.xml
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.DropZone" owl="1">
-        <div class="o_DropZone position-absolute top-0 start-0 align-items-center justify-content-center d-flex w-100 h-100 border-primary bg-white-75 text-primary" t-att-class="{ 'o-dragging-inside': dropZoneView.isDraggingInside }" t-attf-class="{{ className }}" t-on-dragenter="dropZoneView.onDragenter" t-on-dragleave="dropZoneView.onDragleave" t-on-dragover="dropZoneView.onDragover" t-on-drop="dropZoneView.onDrop" t-ref="root">
+        <div class="o_DropZone position-absolute top-0 start-0 align-items-center justify-content-center d-flex w-100 h-100 border-primary bg-view text-primary opacity-75" t-att-class="{ 'o-dragging-inside': dropZoneView.isDraggingInside }" t-attf-class="{{ className }}" t-on-dragenter="dropZoneView.onDragenter" t-on-dragleave="dropZoneView.onDragleave" t-on-dragover="dropZoneView.onDragover" t-on-drop="dropZoneView.onDrop" t-ref="root">
             <h4>
                 Drag Files Here <i class="fa fa-download"/>
             </h4>
diff --git a/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.scss b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.scss
new file mode 100644
index 00000000000..6c25ad50e0a
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.scss
@@ -0,0 +1,3 @@
+.o_EmojiCategoryBarView {
+    background-color: var(--EmojiCategoryBarView-background-color, #{$o-gray-200});
+}
diff --git a/addons/mail/static/src/components/emoji_category_view/emoji_category_view.scss b/addons/mail/static/src/components/emoji_category_view/emoji_category_view.scss
index 86d8ab7b01f..1eb6a557a7c 100644
--- a/addons/mail/static/src/components/emoji_category_view/emoji_category_view.scss
+++ b/addons/mail/static/src/components/emoji_category_view/emoji_category_view.scss
@@ -1,4 +1,4 @@
 
-.o_EmojiCategoryView {
+.o_EmojiCategoryView:not(.active) {
     filter: grayscale(1);
 }
diff --git a/addons/mail/static/src/components/emoji_category_view/emoji_category_view.xml b/addons/mail/static/src/components/emoji_category_view/emoji_category_view.xml
index c58c5da5bfd..edbe7e05b93 100644
--- a/addons/mail/static/src/components/emoji_category_view/emoji_category_view.xml
+++ b/addons/mail/static/src/components/emoji_category_view/emoji_category_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.EmojiCategoryView" owl="1">
-        <span class="o_EmojiCategoryView px-2 py-1 fs-5 cursor-pointer" t-att-class="(emojiCategoryView.isHovered or emojiCategoryView.isActive) ? 'bg-200' : ''" t-att-title="emojiCategoryView.category.name" t-on-click="emojiCategoryView.onClick" t-on-mouseenter="emojiCategoryView.onMouseenter" t-on-mouseleave="emojiCategoryView.onMouseleave" t-attf-class="{{ className }}" t-ref="root">
+        <span class="o_EmojiCategoryView flex-grow-1 px-2 py-1 fs-5 cursor-pointer" t-att-class="(emojiCategoryView.isHovered or emojiCategoryView.isActive) ? 'active bg-view' : 'border-bottom'" t-att-title="emojiCategoryView.category.name" t-on-click="emojiCategoryView.onClick" t-on-mouseenter="emojiCategoryView.onMouseenter" t-on-mouseleave="emojiCategoryView.onMouseleave" t-attf-class="{{ className }}" t-ref="root">
             <t t-esc="emojiCategoryView.category.title"/>
         </span>
     </t>
diff --git a/addons/mail/static/src/components/emoji_search_bar_view/emoji_search_bar_view.xml b/addons/mail/static/src/components/emoji_search_bar_view/emoji_search_bar_view.xml
index c610b3f73a8..dae904e7b2d 100644
--- a/addons/mail/static/src/components/emoji_search_bar_view/emoji_search_bar_view.xml
+++ b/addons/mail/static/src/components/emoji_search_bar_view/emoji_search_bar_view.xml
@@ -2,12 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.EmojiSearchBarView" owl="1">
-        <div class="o_EmojiSearchBarView overflow-auto d-flex flex-shrink-0 p-2 flex-column" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_EmojiSearchBarView overflow-auto d-flex flex-shrink-0 p-2 flex-column border-bottom" t-attf-class="{{ className }}" t-ref="root">
             <div class="o_EmojiSearchBarView_inputContainer d-flex flex-grow-1 align-items-center">
-                <input class="o_EmojiSearchBarView_searchInput border-0 overflow-auto flex-fill" t-att-class="{ 'opacity-50': !emojiSearchBarView.isFocused }" t-att-placeholder="emojiSearchBarView.placeholder" t-on-focusin="emojiSearchBarView.onFocusinInput" t-on-focusout="emojiSearchBarView.onFocusoutInput" t-on-input="emojiSearchBarView.onInput" t-ref="input"/>
-                <i class="o_EmojiSearchBarView_icon oi oi-search" t-att-class="{ 'opacity-25': !emojiSearchBarView.isFocused, 'o-isFocused': emojiSearchBarView.isFocused }" title="Search..." role="img" aria-label="Search..."/>
+                <input class="o_EmojiSearchBarView_searchInput o_input form-control overflow-auto flex-fill" t-att-placeholder="emojiSearchBarView.placeholder" t-on-focusin="emojiSearchBarView.onFocusinInput" t-on-focusout="emojiSearchBarView.onFocusoutInput" t-on-input="emojiSearchBarView.onInput" t-ref="input"/>
+                <i class="o_EmojiSearchBarView_icon oi oi-search ps-2" title="Search..." role="img" aria-label="Search..."/>
             </div>
-            <hr class="o_EmojiSearchBarView_inputBar my-1" t-att-class="{ 'o-isFocused opacity-75': emojiSearchBarView.isFocused }"/>
         </div>
     </t>
 
diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.xml b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
index 5e4bf721ad0..b1f08d2d129 100644
--- a/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
+++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
@@ -5,7 +5,7 @@
         <t t-if="followerSubtypeView">
             <div class="o_FollowerSubtype" t-attf-class="{{ className }}" t-att-data-follower-subtype-id="followerSubtypeView.subtype.id" t-ref="root">
                 <label class="o_FollowerSubtype_label flex-grow-1 align-items-center d-flex mb-0 p-2 cursor-pointer">
-                    <input class="o_FollowerSubtype_checkbox me-2" type="checkbox" t-att-checked="followerSubtypeView.follower.selectedSubtypes.includes(followerSubtypeView.subtype) ? 'checked': ''" t-on-change="followerSubtypeView.onChangeCheckbox"/>
+                    <input class="o_FollowerSubtype_checkbox form-check-input me-2" type="checkbox" t-att-checked="followerSubtypeView.follower.selectedSubtypes.includes(followerSubtypeView.subtype) ? 'checked': ''" t-on-change="followerSubtypeView.onChangeCheckbox"/>
                     <t t-esc="followerSubtypeView.subtype.name"/>
                 </label>
             </div>
diff --git a/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.scss b/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.scss
index f1be2d8f4ce..ce78b3cc8f1 100644
--- a/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.scss
+++ b/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.scss
@@ -16,3 +16,7 @@
         -webkit-line-clamp: 3;
     }    
 }
+
+.o_LinkPreviewCardView_imageLinkWrap {
+    border-right: 1px solid $card-border-color;
+}
diff --git a/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.xml b/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.xml
index ec1e48b34e1..ab5916abb24 100644
--- a/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.xml
+++ b/addons/mail/static/src/components/link_preview_card_view/link_preview_card_view.xml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.LinkPreviewCardView" owl="1">
-        <div class="o_LinkPreviewCardView card position-relative w-100 mb-2 rounded border border-light bg-white shadow-sm overflow-hidden" t-att-class="{ 'me-2': !linkPreviewCardView.linkPreviewListViewOwner.messageViewOwner.isInChatWindow }" t-attf-class="{{ className }}" t-on-mouseenter="linkPreviewCardView.onMouseEnter" t-on-mouseleave="linkPreviewCardView.onMouseLeave" t-ref="root">
+        <div class="o_LinkPreviewCardView card position-relative w-100 mb-2 rounded bg-view shadow-sm overflow-hidden" t-att-class="{ 'me-2': !linkPreviewCardView.linkPreviewListViewOwner.messageViewOwner.isInChatWindow }" t-attf-class="{{ className }}" t-on-mouseenter="linkPreviewCardView.onMouseEnter" t-on-mouseleave="linkPreviewCardView.onMouseLeave" t-ref="root">
             <div class="row g-0 flex-row-reverse h-100">
                 <div class="col min-w-0" t-att-class="{ 'd-flex align-items-center': !linkPreviewCardView.linkPreview.og_description }">
-                    <div class="o_LinkPreviewCardView_content p-3 bg-white">
+                    <div class="o_LinkPreviewCardView_content p-3">
                         <h6 class="o_LinkPreviewCardView_title card-title mb-0 me-2" t-attf-class="{{ linkPreviewCardView.linkPreview.og_description ? 'text-truncate' : 'o_LinkPreviewCardView_hasMultineLines overflow-hidden' }}">
                             <a t-att-href="linkPreviewCardView.linkPreview.source_url" target="_blank" t-out="linkPreviewCardView.linkPreview.og_title"/>
                         </h6>
                         <p t-if="linkPreviewCardView.linkPreview.og_description" class="o_LinkPreviewCardView_description o_LinkPreviewCardView_hasMultineLines card-text mb-0 mt-2 text-muted small overflow-hidden" t-out="linkPreviewCardView.linkPreview.og_description"/>
                     </div>
                 </div>
-                <div class="col-4 d-block border-end border-light">
+                <div class="o_LinkPreviewCardView_imageLinkWrap col-4 d-block">
                     <a t-att-href="linkPreviewCardView.linkPreview.source_url" class="o_LinkPreviewCardView_imageLink" target="_blank">
                         <img t-if="linkPreviewCardView.linkPreview.og_image" class="o_LinkPreviewCardView_image w-100 h-100 o_object_fit_cover" t-att-src="linkPreviewCardView.linkPreview.og_image" t-att-alt="linkPreviewCardView.linkPreview.og_title"/>
                         <span t-else="" class="o_LinkPreviewCardView_imageEmpty d-flex align-items-center justify-content-center w-100 h-100 bg-100 text-300">
diff --git a/addons/mail/static/src/components/link_preview_delete_confirm_view/link_preview_delete_confirm_view.xml b/addons/mail/static/src/components/link_preview_delete_confirm_view/link_preview_delete_confirm_view.xml
index f779fa88437..e760da86f81 100644
--- a/addons/mail/static/src/components/link_preview_delete_confirm_view/link_preview_delete_confirm_view.xml
+++ b/addons/mail/static/src/components/link_preview_delete_confirm_view/link_preview_delete_confirm_view.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.LinkPreviewDeleteConfirmView" owl="1">
-        <div class="o_LinkPreviewDeleteConfirmView card bg-white" t-attf-class="{{ className }}" t-ref="root">
+        <div class="o_LinkPreviewDeleteConfirmView card bg-view" t-attf-class="{{ className }}" t-ref="root">
             <h4 class="m-3">Confirmation</h4>
             <hr class="mt-0 mb-3"/>
             <p class="o_LinkPreviewDeleteConfirmView_mainText mx-3 mb-3">Do you really want to delete this preview?</p>
diff --git a/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.scss b/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.scss
index 40edd534840..92a9d3ae925 100644
--- a/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.scss
+++ b/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.scss
@@ -16,3 +16,15 @@
         -webkit-line-clamp: 3;
     }    
 }
+
+.o_LinkPreviewVideoView_imageLinkWrap {
+    border-right: 1px solid $card-border-color;
+}
+
+.o_LinkPreviewVideoView_playBtn {
+    background: #000000;
+    
+    i {
+        color: #ffffff;
+    }
+}
diff --git a/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.xml b/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.xml
index 466a14f55c9..439b849bbe0 100644
--- a/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.xml
+++ b/addons/mail/static/src/components/link_preview_video_view/link_preview_video_view.xml
@@ -1,23 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.LinkPreviewVideoView" owl="1">
-        <div class="o_LinkPreview o_LinkPreviewVideoView card position-relative w-100 mb-2 rounded border border-light bg-white shadow-sm overflow-hidden" t-att-class="{ 'me-2': !linkPreviewVideoView.linkPreviewListViewOwner.messageViewOwner.isInChatWindow }" t-attf-class="{{ className }}" t-on-mouseenter="linkPreviewVideoView.onMouseEnter" t-on-mouseleave="linkPreviewVideoView.onMouseLeave" t-ref="root">
+        <div class="o_LinkPreview o_LinkPreviewVideoView card position-relative w-100 mb-2 rounded bg-view shadow-sm overflow-hidden" t-att-class="{ 'me-2': !linkPreviewVideoView.linkPreviewListViewOwner.messageViewOwner.isInChatWindow }" t-attf-class="{{ className }}" t-on-mouseenter="linkPreviewVideoView.onMouseEnter" t-on-mouseleave="linkPreviewVideoView.onMouseLeave" t-ref="root">
             <div class="row g-0 flex-row-reverse h-100">
                 <div class="col min-w-0" t-att-class="{ 'd-flex align-items-center': !linkPreviewVideoView.linkPreview.og_description }">
-                    <div class="o_LinkPreviewVideoView_content p-3 bg-white">
+                    <div class="o_LinkPreviewVideoView_content p-3 bg-view">
                         <h6 class="o_LinkPreviewVideoView_title card-title mb-0 me-2" t-attf-class="{{ linkPreviewVideoView.linkPreview.og_description ? 'text-truncate' : 'o_LinkPreviewVideoView_hasMultineLines overflow-hidden' }}">
                             <a t-att-href="linkPreviewVideoView.linkPreview.source_url" target="_blank" t-esc="linkPreviewVideoView.linkPreview.og_title"/>
                         </h6>
                         <p t-if="linkPreviewVideoView.linkPreview.og_description" class="o_LinkPreviewVideoView_description o_LinkPreviewVideoView_hasMultineLines card-text mb-0 mt-2 text-muted small overflow-hidden" t-out="linkPreviewVideoView.linkPreview.og_description"></p>
                     </div>
                 </div>
-                <div class="col-4 d-block border-end border-light">
+                <div class="o_LinkPreviewVideoView_imageLinkWrap col-4 d-block">
                     <a t-att-href="linkPreviewVideoView.linkPreview.source_url" class="o_LinkPreviewVideoView_imageLink" target="_blank">
                         <div t-if="linkPreviewVideoView.linkPreview.og_image" class="o_linkPreviewVideo_overlay position-relative h-100 opacity-trigger-hover">
                             <img class="o_LinkPreviewVideoView_image img-fluid h-100 rounded-bottom o_object_fit_cover" t-att-src="linkPreviewVideoView.linkPreview.og_image" t-att-alt="linkPreviewVideoView.linkPreview.og_title"/>
                             <div class="position-absolute top-50 start-50 translate-middle">
-                                <div class="btn btn-dark btn-lg rounded opacity-75 opacity-100-hover transition-base">
-                                    <i class="fa fa-play text-white"/>
+                                <div class="o_LinkPreviewVideoView_playBtn btn btn-lg rounded opacity-75 opacity-100-hover transition-base">
+                                    <i class="fa fa-play"/>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 9c1d123f783..1aadd151f45 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -10,7 +10,7 @@
                     'o-discussion': messageView.message.isDiscussionOrNotification,
                     'o-has-message-selection': messageView.messageListViewItemOwner and messageView.messageListViewItemOwner.messageListViewOwner.threadViewOwner.replyingToMessageView,
                     'o-highlighted': messageView.message.isHighlighted or messageView.isHighlighted,
-                    'o-isReplyHighlighted bg-white shadow-lg': messageView.isHighlighted,
+                    'o-isReplyHighlighted bg-view shadow-lg': messageView.isHighlighted,
                     'o-isDeviceSmall': messaging.device.isSmall,
                     'o-not-discussion': !messageView.message.isDiscussionOrNotification,
                     'o-notification': messageView.message.message_type === 'notification',
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.scss b/addons/mail/static/src/components/message_action_list/message_action_list.scss
index 26a5e292be8..385de5fb2d4 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.scss
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.scss
@@ -1,3 +1,7 @@
-.o_MessageActionList:not(.o-isDeviceSmall) {
-    font-size: 0.9rem;
+.o_MessageActionList {
+    background-color: var(--MessageActionList-background-color, #{$o-white});
+
+    &:not(.o-isDeviceSmall) {
+        font-size: 0.9rem;
+    }
 }
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.xml b/addons/mail/static/src/components/message_action_list/message_action_list.xml
index efe3fcd785f..6043080a3a9 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.xml
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.xml
@@ -2,7 +2,7 @@
 <templates>
     <t t-name="mail.MessageActionList" owl="1">
         <t t-if="messageActionList">
-            <div class="o_MessageActionList d-flex rounded-1 bg-white shadow-sm" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'flex-row-reverse': messageActionList.messageView.isInChatWindowAndIsAlignedRight }" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_MessageActionList d-flex rounded-1 shadow-sm overflow-hidden" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'flex-row-reverse': messageActionList.messageView.isInChatWindowAndIsAlignedRight }" t-attf-class="{{ className }}" t-ref="root">
                 <t t-foreach="messageActionList.messageActionViews" t-as="messageActionView" t-key="messageActionView.localId">
                     <MessageActionView record="messageActionView"/>
                 </t>
diff --git a/addons/mail/static/src/components/message_action_view/message_action_view.scss b/addons/mail/static/src/components/message_action_view/message_action_view.scss
index 0d04548d6de..6f64a62a42f 100644
--- a/addons/mail/static/src/components/message_action_view/message_action_view.scss
+++ b/addons/mail/static/src/components/message_action_view/message_action_view.scss
@@ -1,5 +1,5 @@
 .o_MessageActionView:hover {
-    background-color: mix($border-color, $white);
+    background-color: var(--MessageActionView-background-color--hover, #{mix($border-color, $white)});
 }
 
 .o_MessageActionView_actionToggleStar_active {
diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss
index 1d1bd7d375b..3a7d643802c 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss
@@ -3,5 +3,5 @@
 // ------------------------------------------------------------------
 
 .o_MessageReactionGroup.o-hasUserReacted {
-    background: mix($o-brand-primary, white, 10%);
+    background: mix($o-brand-primary, $o-view-background-color, 10%);
 }
diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
index 538ef48e999..ecbe282c4b7 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.MessageReactionGroup" owl="1">
         <t t-if="messageReactionGroup">
-            <button class="o_MessageReactionGroup btn d-flex p-0 border rounded-1" t-att-class="{'o-hasUserReacted border-primary': messageReactionGroup.hasUserReacted, 'bg-white': !messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
+            <button class="o_MessageReactionGroup btn d-flex p-0 border rounded-1" t-att-class="{'o-hasUserReacted border-primary': messageReactionGroup.hasUserReacted, 'bg-view': !messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
                 <span class="o_MessageReactionGroup_content mx-1">
                     <t t-esc="messageReactionGroup.content"/>
                 </span>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 0700359b345..30aa0efeebf 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -16,7 +16,7 @@
                     </t>
                 </a>
                 <t t-if="messagingMenu.isOpen">
-                    <div class="o_MessagingMenu_dropdownMenu o-dropdown-menu dropdown-menu-end d-flex flex-column mt-0 py-0 overflow-auto" t-att-class="{ 'o-isDeviceSmall position-fixed bottom-0 start-0 end-0 flex-grow-1 w-100 m-0 border-0': messaging.device.isSmall, 'border': !messaging.device.isSmall, 'o-messaging-not-initialized align-items-center justify-content-center': !messaging.isInitialized }" role="menu">
+                    <div class="o_MessagingMenu_dropdownMenu o-dropdown-menu dropdown-menu-end d-flex flex-column mt-0 py-0 bg-view overflow-auto" t-att-class="{ 'o-isDeviceSmall position-fixed bottom-0 start-0 end-0 flex-grow-1 w-100 m-0 border-0': messaging.device.isSmall, 'border': !messaging.device.isSmall, 'o-messaging-not-initialized align-items-center justify-content-center': !messaging.isInitialized }" role="menu">
                         <t t-if="!messaging.isInitialized">
                             <span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-circle-o-notch fa-spin me-1"/>Please wait...</span>
                         </t>
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
index 14642dc46cf..ff9f430a14b 100644
--- a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.MobileMessagingNavbar" owl="1">
         <t t-if="mobileMessagingNavbarView">
-            <div class="o_MobileMessagingNavbar d-flex flex-shrink-0 border-top bg-white shadow-lg" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_MobileMessagingNavbar d-flex flex-shrink-0 border-top bg-view shadow-lg" t-attf-class="{{ className }}" t-ref="root">
                 <t t-foreach="mobileMessagingNavbarView.tabs" t-as="tab" t-key="tab.id">
                     <div class="o_MobileMessagingNavbar_tab d-flex flex-column align-items-center flex-grow-1 p-2" t-att-class="{ 'o-active text-primary': mobileMessagingNavbarView.activeTabId === tab.id, 'border-start': tab_index !== 0 }" t-on-click="ev => mobileMessagingNavbarView.onClick(tab.id, ev)" t-att-data-tab-id="tab.id">
                         <t t-if="tab.icon">
diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss
index 4bcf2ff8e70..013be9eb86d 100644
--- a/addons/mail/static/src/components/notification_list/notification_list_item.scss
+++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss
@@ -1,4 +1,4 @@
-$o-mail-notification-list-item-background-color: $white !default;
+$o-mail-notification-list-item-background-color: $o-view-background-color !default;
 $o-mail-notification-list-item-hover-background-color:
     darken($o-mail-notification-list-item-background-color, 7%) !default;
 
diff --git a/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.scss b/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.scss
index aee0bb9038f..24ffeff7c9b 100644
--- a/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.scss
+++ b/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.scss
@@ -15,14 +15,6 @@
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
-
-.o_PersonaImStatusIcon_icon {
-
-    &.o-bot {
-        color: $o-enterprise-primary-color;
-    }
-
-    &.o-online {
-        color: $o-enterprise-primary-color;
-    }
+.o_PersonaImStatusIcon_outerBackground, .o_PersonaImStatusIcon_innerBackground {
+    color: $o-view-background-color;
 }
diff --git a/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.xml b/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.xml
index 8507972d937..cdebf687c83 100644
--- a/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.xml
+++ b/addons/mail/static/src/components/persona_im_status_icon/persona_im_status_icon.xml
@@ -17,10 +17,10 @@
             >
                 <t t-if="personaImStatusIconView.hasBackground">
                     <i class="o_PersonaImStatusIcon_outerBackground fa fa-circle fa-stack-1x"/>
-                    <i class="o_PersonaImStatusIcon_innerBackground fa fa-circle fa-stack-1x text-white"/>
+                    <i class="o_PersonaImStatusIcon_innerBackground fa fa-circle fa-stack-1x"/>
                 </t>
                 <t t-if="personaImStatusIconView.persona.im_status === 'online'">
-                    <i class="o_PersonaImStatusIcon_icon o-online fa fa-circle fa-stack-1x" title="Online" role="img" aria-label="User is online"/>
+                    <i class="o_PersonaImStatusIcon_icon o-online fa fa-circle fa-stack-1x text-primary" title="Online" role="img" aria-label="User is online"/>
                 </t>
                 <t t-if="personaImStatusIconView.persona.im_status === 'away'">
                     <i class="o_PersonaImStatusIcon_icon o-away fa fa-circle fa-stack-1x text-warning" title="Idle" role="img" aria-label="User is idle"/>
@@ -29,7 +29,7 @@
                     <i class="o_PersonaImStatusIcon_icon o-offline fa fa-circle-o fa-stack-1x text-700" title="Offline" role="img" aria-label="User is offline"/>
                 </t>
                 <t t-if="personaImStatusIconView.persona === messaging.partnerRoot.persona">
-                    <i class="o_PersonaImStatusIcon_icon o-bot fa fa-heart fa-stack-1x" title="Bot" role="img" aria-label="User is a bot"/>
+                    <i class="o_PersonaImStatusIcon_icon o-bot fa fa-heart fa-stack-1x text-primary" title="Bot" role="img" aria-label="User is a bot"/>
                 </t>
             </span>
     </t>
diff --git a/addons/mail/static/src/components/popover_view/popover_view.xml b/addons/mail/static/src/components/popover_view/popover_view.xml
index 70e3724543e..d8b27cc6646 100644
--- a/addons/mail/static/src/components/popover_view/popover_view.xml
+++ b/addons/mail/static/src/components/popover_view/popover_view.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.PopoverView" owl="1">
         <t t-if="popoverView">
-            <div class="o_PopoverView border bg-white shadow-sm" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_PopoverView border bg-view shadow-sm" t-attf-class="{{ className }}" t-ref="root">
                 <t
                     t-component="constructor.components[popoverView.contentComponentName]"
                     className="popoverView.contentClassName"
diff --git a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
index bd9cb2577c3..5593b8ecfaa 100644
--- a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
+++ b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
@@ -10,12 +10,12 @@
                 <div class="o_ThreadViewTopbar_title d-flex flex-grow-1 align-self-center align-items-center">
                     <t t-if="threadViewTopbar.thread">
                         <t t-if="!threadViewTopbar.isEditingThreadName">
-                            <div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem lead flex-shrink-0 px-1 border text-truncate fw-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-attf-class="{{ threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest ? 'o-threadNameEditable bg-white' : 'border-light' }}">
+                            <div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem lead flex-shrink-0 px-1 border text-truncate fw-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-attf-class="{{ threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest ? 'o-threadNameEditable bg-view' : 'border-light' }}">
                                 <t t-esc="threadViewTopbar.thread.displayName"/>
                             </div>
                         </t>
                         <t t-if="threadViewTopbar.isEditingThreadName">
-                            <input class="o_ThreadViewTopbar_threadNameInput lead fw-bold" type="text" t-att-value="threadViewTopbar.pendingThreadName" t-on-input="threadViewTopbar.onInputThreadNameInput" t-on-keydown="threadViewTopbar.onKeyDownThreadNameInput" t-ref="threadNameInput"/>
+                            <input class="o_ThreadViewTopbar_threadNameInput form-control lead fw-bold" type="text" t-att-value="threadViewTopbar.pendingThreadName" t-on-input="threadViewTopbar.onInputThreadNameInput" t-on-keydown="threadViewTopbar.onKeyDownThreadNameInput" t-ref="threadNameInput"/>
                         </t>
                     </t>
                     <t t-if="!threadViewTopbar.thread">
@@ -27,7 +27,7 @@
                         <div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2 py-2 border-start"/>
                         <t t-if="!threadViewTopbar.isEditingThreadDescription">
                             <t t-if="threadViewTopbar.thread.description">
-                                <div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem px-1 border text-truncate" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-attf-class="{{ threadViewTopbar.isDescriptionHighlighted ? 'o-threadDescriptionEditable bg-white' : 'border-light' }}">
+                                <div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem px-1 border text-truncate" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-attf-class="{{ threadViewTopbar.isDescriptionHighlighted ? 'o-threadDescriptionEditable bg-view' : 'border-light' }}">
                                     <t t-esc="threadViewTopbar.thread.description"/>
                                 </div>
                             </t>
@@ -38,7 +38,7 @@
                             </t>
                         </t>
                         <t t-if="threadViewTopbar.isEditingThreadDescription">
-                            <input class="o_ThreadViewTopbar_threadDescriptionInput" type="text" t-att-value="threadViewTopbar.pendingThreadDescription" t-on-input="threadViewTopbar.onInputThreadDescriptionInput" t-on-keydown="threadViewTopbar.onKeyDownThreadDescriptionInput" t-ref="threadDescriptionInput"/>
+                            <input class="o_ThreadViewTopbar_threadDescriptionInput form-control" type="text" t-att-value="threadViewTopbar.pendingThreadDescription" t-on-input="threadViewTopbar.onInputThreadDescriptionInput" t-on-keydown="threadViewTopbar.onKeyDownThreadDescriptionInput" t-ref="threadDescriptionInput"/>
                         </t>
                     </t>
                 </div>
@@ -89,12 +89,12 @@
                     <div class="o_ThreadViewTopbar_userInfo d-flex align-items-center">
                         <img class="o_ThreadViewTopbar_avatar mx-1 rounded-circle o_object_fit_cover" t-att-src="threadViewTopbar.avatarUrl" alt="Avatar"/>
                         <t t-if="!threadViewTopbar.isEditingGuestName">
-                            <span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 border fw-bold text-truncate" t-attf-class="{{ threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest ? 'o-userNameEditable bg-white' : 'border-light' }}" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
+                            <span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 border fw-bold text-truncate" t-attf-class="{{ threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest ? 'o-userNameEditable bg-view' : 'border-light' }}" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
                                 <t t-esc="messaging.isCurrentUserGuest ? messaging.currentGuest.name : messaging.currentUser.nameOrDisplayName"/>
                             </span>
                         </t>
                         <t t-if="threadViewTopbar.isEditingGuestName">
-                            <input class="o_ThreadViewTopbar_guestNameInput" type="text" t-att-value="messaging.currentGuest.name" t-on-input="threadViewTopbar.onInputGuestNameInput" t-on-keydown="threadViewTopbar.onKeyDownGuestNameInput" t-ref="guestNameInput"/>
+                            <input class="o_ThreadViewTopbar_guestNameInput form-control" type="text" t-att-value="messaging.currentGuest.name" t-on-input="threadViewTopbar.onInputGuestNameInput" t-on-keydown="threadViewTopbar.onKeyDownGuestNameInput" t-ref="guestNameInput"/>
                         </t>
                     </div>
                 </t>
diff --git a/addons/mail/static/src/models_data/emoji_data.js b/addons/mail/static/src/models_data/emoji_data.js
index 4ff7c04e321..0cc2b24773a 100644
--- a/addons/mail/static/src/models_data/emoji_data.js
+++ b/addons/mail/static/src/models_data/emoji_data.js
@@ -57,7 +57,7 @@
 export const emojiCategoriesData = JSON.parse(`[
     {
         "name": "Smileys & Emotion",
-        "title": "🤠",
+        "title": "🙂",
         "sortId": 1
     },
     {
@@ -67,32 +67,32 @@ export const emojiCategoriesData = JSON.parse(`[
     },
     {
         "name": "Animals & Nature",
-        "title": "🐘",
+        "title": "🐢",
         "sortId": 3
     },
     {
         "name": "Food & Drink",
-        "title": "🍔",
+        "title": "🍭",
         "sortId": 4
     },
     {
         "name": "Travel & Places",
-        "title": "🚍",
+        "title": "🚗",
         "sortId": 5
     },
     {
         "name": "Activities",
-        "title": "🎣",
+        "title": "🏈",
         "sortId": 6
     },
     {
         "name": "Objects",
-        "title": "🎩",
+        "title": "📕",
         "sortId": 7
     },
     {
         "name": "Symbols",
-        "title": "🚰",
+        "title": "🔠",
         "sortId": 8
     }
 ]`);
diff --git a/addons/mail/static/src/scss/activity_view.scss b/addons/mail/static/src/scss/activity_view.scss
index b17b845922e..329df6fcb4d 100644
--- a/addons/mail/static/src/scss/activity_view.scss
+++ b/addons/mail/static/src/scss/activity_view.scss
@@ -1,7 +1,6 @@
 .o_activity_view {
     height: 100%;
     > table {
-        background-color: white;
         thead > tr > th:first-of-type {
             min-width: 300px;
         }
@@ -10,7 +9,6 @@
         }
     }
     .o_activity_summary_cell {
-        background-color: #FFF;
         &.planned {
             background-color: map-get($theme-colors, 'success');
         }
@@ -38,7 +36,7 @@
                 display: none;
             }
             &:hover {
-                background-color: #eee;
+                background-color: $component-active-bg;
 
                 > i {
                     color: gray;
@@ -102,9 +100,6 @@
     .o_activity_filter_overdue {
         background-color: mix(map-get($theme-colors, 'danger'), $o-webclient-background-color, 5%);
     }
-    .o_record_selector {
-        color: $o-enterprise-primary-color;
-    }
     .o_activity_type_cell {
         padding:10px;
         min-width:100px;
diff --git a/addons/mail/static/src/xml/activity_view.xml b/addons/mail/static/src/xml/activity_view.xml
index c72658b202f..f0deed6c449 100644
--- a/addons/mail/static/src/xml/activity_view.xml
+++ b/addons/mail/static/src/xml/activity_view.xml
@@ -76,7 +76,7 @@
     <tfoot>
         <tr class="o_data_row">
             <td class="o_record_selector p-3" t-on-click.prevent.stop="() => this.trigger('schedule_activity')">
-                <span class="fa fa-plus pe-2"/><span>Schedule activity</span>
+                <span class="btn btn-link"><i class="fa fa-plus pe-2"/><span>Schedule activity</span></span>
             </td>
         </tr>
     </tfoot>
@@ -84,7 +84,7 @@
 
 <div t-name="mail.ActivityRenderer" class="o_activity_view" owl="1">
     <t t-if="!props.activity_types.length" t-call="web.NoContentHelper"/>
-    <table t-else="" class="table table-bordered mb-5">
+    <table t-else="" class="table table-bordered mb-5 bg-view">
         <t t-call="mail.ActivityViewHeader"/>
         <t t-call="mail.ActivityViewBody"/>
         <t t-call="mail.ActivityViewFooter"/>
diff --git a/addons/mail_bot/static/src/scss/odoobot_style.scss b/addons/mail_bot/static/src/scss/odoobot_style.scss
index aa5e187bb00..6f30823570b 100644
--- a/addons/mail_bot/static/src/scss/odoobot_style.scss
+++ b/addons/mail_bot/static/src/scss/odoobot_style.scss
@@ -1,5 +1,5 @@
 .o_odoobot_command {
-    background-color: lightgray;
+    background-color: $gray-200;
     border-radius: 4px;
     padding: 2px;
     padding-left: 10px;
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 76517aa9779..1fd4b2309aa 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -261,6 +261,8 @@ $form-check-input-checked-bg-color: $o-brand-primary !default;
 $form-switch-checked-color: $input-bg !default;
 $form-switch-circle-bg-color: $input-bg !default;
 
+$form-range-thumb-bg: $primary !default;
+
 // Badge
 $badge-color: inherit !default;
 $badge-padding-y: 0.25em !default;

From 45cfe93166f31a3e0ed86a35255688df4f27b031 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 7 Oct 2022 17:06:58 +0000
Subject: [PATCH 09/19] [MOV] website, web: move odoo logo in web module

Move the file in a more convenient place to be shared and customized to
match different color schemes.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/{website/static/src => web/static}/img/odoo_logo.svg | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename addons/{website/static/src => web/static}/img/odoo_logo.svg (100%)

diff --git a/addons/website/static/src/img/odoo_logo.svg b/addons/web/static/img/odoo_logo.svg
similarity index 100%
rename from addons/website/static/src/img/odoo_logo.svg
rename to addons/web/static/img/odoo_logo.svg

From f84b9b7ef3f9b0d2b3d50fd3a3e218af27407be1 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 7 Oct 2022 19:02:00 +0000
Subject: [PATCH 10/19] [IMP] website: adapt for dark-mode

This commit adapts several components in order to correctly handle
color-scheme variations.

task-2710677

Part-of: odoo/odoo#102868
---
 .../configurator/configurator.js              |   2 +-
 .../configurator/configurator.scss            |  12 +++++++-
 .../configurator/configurator.xml             |  26 ++++++------------
 .../static/src/components/dialog/seo.scss     |   5 ++--
 .../static/src/components/dialog/seo.xml      |   4 +--
 .../website_loader/website_loader.scss        |   5 ++++
 .../website_loader/website_loader.xml         |   2 +-
 ...website_dashboard_visit_demo_dark_mode.png | Bin 0 -> 34922 bytes
 .../static/src/scss/website.backend.scss      |  10 +++----
 .../static/src/systray_items/edit_website.xml |   2 +-
 .../views/res_config_settings_views.xml       |   5 ++--
 addons/website/views/website_views.xml        |   4 +--
 12 files changed, 40 insertions(+), 37 deletions(-)
 create mode 100644 addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png

diff --git a/addons/website/static/src/client_actions/configurator/configurator.js b/addons/website/static/src/client_actions/configurator/configurator.js
index 63ef0de89a9..14bfed3e957 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.js
+++ b/addons/website/static/src/client_actions/configurator/configurator.js
@@ -104,7 +104,7 @@ class DescriptionScreen extends Component {
             open: this._customizeNoResultMenuStyle.bind(this),
             focus: this._disableKeyboardNav.bind(this),
             classes: {
-                'ui-autocomplete': 'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast',
+                'ui-autocomplete': 'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast o_configurator_industry_dropdown',
             },
         });
         if (this.state.selectedIndustry) {
diff --git a/addons/website/static/src/client_actions/configurator/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
index d131615539c..4b73ac8c0c6 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.scss
+++ b/addons/website/static/src/client_actions/configurator/configurator.scss
@@ -1,6 +1,6 @@
 .o_configurator_container {
     @include o-position-absolute(0, 0, 0, 0);
-    background-color: $white;
+    background-color: $o-view-background-color;
 
     .o_configurator_screen {
 
@@ -74,6 +74,12 @@
             }
         }
 
+        .o_configurator_odoo_logo {
+            background-image: var(--configurator-logo, url(/web/static/img/odoo_logo.svg));
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+
         // ==== Screens
 
         &.o_description_screen {
@@ -127,6 +133,10 @@
                 }
             }
 
+            .o_configurator_industry_dropdown {
+                background: $dropdown-bg;
+            }
+
             .dropdown {
                 box-shadow: inset 0 -3px 0 map-get($theme-colors, primary);
 
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index a9dcdc07d26..fa34fd78239 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -9,9 +9,7 @@
 
     <t t-name="website.Configurator.WelcomeScreen" owl="1">
         <div class="o_configurator_screen h-100 d-flex flex-column o_welcome_screen">
-            <div class="container-fluid pt-3 pb-2">
-                <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-            </div>
+            <div class="o_configurator_odoo_logo mt-4 ms-4" style="height: 31px; width: 99px;"/>
             <div class="o_configurator_screen_content d-flex h-100">
                 <div class="container align-self-center o_configurator_show">
                     <div class="display-4 mb-2">Ready to build the<br class="d-none d-lg-inline"/>
@@ -28,9 +26,7 @@
 
 <t t-name="website.Configurator.DescriptionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_description_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content d-flex h-100 flex-grow-1">
             <div class="container align-self-center">
                 <div class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 o_configurator_show">
@@ -41,7 +37,7 @@
                                 <i class="text-primary" t-if="state.selectedType">
                                     <t t-esc="state.getSelectedType(state.selectedType).label"/>
                                 </i>
-                                <i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
+                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
                             </a>
                         </div>
                         <div t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
@@ -69,7 +65,7 @@
                                 <t t-if="state.selectedPurpose">
                                     <t t-esc="state.getSelectedPurpose(state.selectedPurpose).label"/>
                                 </t>
-                                <i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
+                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
                             </a>
                         </div>
                         <div class="dropdown-menu border-0 shadow-lg" role="menu">
@@ -89,9 +85,7 @@
 
 <t t-name="website.Configurator.PaletteSelectionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_palette_selection_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
             <div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
                 <div class="o_detect_logo w-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
@@ -124,7 +118,7 @@
                 </div>
                 <div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
                     <div class="border-top w-100"></div>
-                    <b class="palette_selection_or bg-white text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
+                    <b class="palette_selection_or bg-view text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
                     <div class="border-start d-none d-lg-inline h-100 mx-auto w-0"></div>
                 </div>
                 <div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
@@ -151,9 +145,7 @@
 
 <t t-name="website.Configurator.FeatureSelection" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_feature_selection_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content overflow-hidden container d-flex flex-grow-1 align-items-center">
             <div class="m-auto d-flex mh-100 flex-column">
                 <div class="o_configurator_typing_text o_configurator_show_fast">Add <b class="text-info">Pages</b> and <b class="text-warning">Features</b></div>
@@ -193,9 +185,7 @@
 
 <t t-name="website.Configurator.ThemeSelectionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_theme_selection_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content d-flex flex-column flex-grow-1 align-items-center">
             <div class="m-auto w-100 w-md-75 w-xl-100">
                 <div class="o_configurator_typing_text text-center mt-4 mb-lg-4">Choose your favorite <b>Theme</b>
diff --git a/addons/website/static/src/components/dialog/seo.scss b/addons/website/static/src/components/dialog/seo.scss
index 1817e8f4f4a..030e1c5ad7e 100644
--- a/addons/website/static/src/components/dialog/seo.scss
+++ b/addons/website/static/src/components/dialog/seo.scss
@@ -1,4 +1,6 @@
 .oe_seo_configuration {
+    --seo__preview-title-color: #1a0dab; // Google Search color
+
     #language-box {
         padding-right: 25px;
         background-color: white;
@@ -82,7 +84,7 @@
 
         .r {
             cursor: pointer;
-            color:#1a0dab;
+            color:var(--seo__preview-title-color);
             font-size: 18px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -95,7 +97,6 @@
             line-height: 18px;
             color: #545454;
             .kv {
-                color: #006621;
                 font-size: 14px;
                 line-height: 18px;
             }
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index 32d3d6053b5..d384512c5d9 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -103,8 +103,8 @@
             <t t-if="props.isIndexed">
                 <div class="r"><t t-esc="props.title"/></div>
                 <div class="s">
-                    <div class="kv"><t t-esc="props.url"/></div>
-                    <div class="st"><t t-esc="description"/></div>
+                    <div class="kv mb-1 text-muted"><t t-esc="props.url"/></div>
+                    <div class="st text-black"><t t-esc="description"/></div>
                 </div>
             </t>
             <t t-else="">
diff --git a/addons/website/static/src/components/website_loader/website_loader.scss b/addons/website/static/src/components/website_loader/website_loader.scss
index bc2b20fb474..92074abf437 100644
--- a/addons/website/static/src/components/website_loader/website_loader.scss
+++ b/addons/website/static/src/components/website_loader/website_loader.scss
@@ -1,4 +1,6 @@
 .o_website_loader_container {
+    --website-loader-color: #{$white};
+
     font-family: "Montserrat", $font-family-sans-serif;
     background-color: rgba($o-shadow-color, .9);
     pointer-events: all;
@@ -6,6 +8,7 @@
     justify-content: space-evenly;
     z-index: $zindex-modal - 1;
     padding: 7%;
+    color: var(--website-loader-color);
 
     .o_website_loader {
         position: relative;
@@ -19,6 +22,8 @@
 
     .o_website_loader_tip {
         font-size: 0.5em;
+        color: var(--website-loader-color);
+        
         @include media-breakpoint-down(md) {
             width: 50% !important;
         }
diff --git a/addons/website/static/src/components/website_loader/website_loader.xml b/addons/website/static/src/components/website_loader/website_loader.xml
index bf9ec651d8d..ded91941bfe 100644
--- a/addons/website/static/src/components/website_loader/website_loader.xml
+++ b/addons/website/static/src/components/website_loader/website_loader.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 <t t-name="website.website_loader" owl="1">
     <div t-if="state.isVisible" class="o_website_loader_container position-fixed fixed-top fixed-left
-        h-100 w-100 d-flex flex-column align-items-center text-white fw-bold text-center">
+        h-100 w-100 d-flex flex-column align-items-center fw-bold text-center">
         <t t-if="state.title" t-esc="state.title"/>
         <t t-elif="state.showTips">Building your website...</t>
         <div class="o_website_loader"/>
diff --git a/addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png b/addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee8ad9e24e30c0e576c5e7dc06f3c433efaf5a69
GIT binary patch
literal 34922
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

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index d9b74db7f5d..7c79af5c9a6 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -1,12 +1,12 @@
 .o_dashboards {
-    background-color: #ececec;
+    background-color: $o-view-background-color;
 
     &:has(iframe[src*='plausible']) {
         background-color: #f9fafb; // Copied from iframe.
     }
 
     .o_website_dashboard {
-        background-color: #ececec;
+        background-color: $o-view-background-color;
 
         &:has(iframe[src*='plausible']) {
             background-color: #f9fafb; // Copied from iframe.
@@ -156,7 +156,7 @@
                 margin-top: 16px;
                 height: 300px;
                 background-size: 100% !important;
-                background: url("/website/static/src/img/website_dashboard_visit_demo.png") no-repeat;
+                background: var(--Dashboard__demoBackground, url("/website/static/src/img/website_dashboard_visit_demo.png")) no-repeat;
                 position: relative;
 
                 .o_buttons {
@@ -164,7 +164,7 @@
                 }
 
                 .o_layer {
-                    background-color: rgba(255,255,255,.3);
+                    background-color: rgba($o-view-background-color,.3);
                     position: absolute;
                     top: 0;
                     left: 0;
@@ -197,7 +197,6 @@
 
 .o_kanban_renderer.o_theme_kanban {
     $o-theme-kanban-gray: #fcfcfc;
-    background-color: $o-theme-kanban-gray;
 
     /// Un-grouped Layout (default)
     &.o_kanban_ungrouped {
@@ -231,7 +230,6 @@
 
         .o_theme_preview_top {
             position: relative;
-            border: 1px solid darken($o-theme-kanban-gray, 20%);
             border-radius: 2px;
             transform-origin: center bottom;
             transition: all .1s ease 0s;
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index 239f321fd3b..375cbe44494 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray" owl="1">
     <div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
-        <a href="#" accesskey="a" t-on-click="startEdit">
+        <a href="#" accesskey="a" t-on-click="startEdit" class="text-reset">
             <span t-if="translatable" class="fa fa-pencil me-2"/>
             <span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
             <t t-esc="label"/>
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index c0c072a5f6a..bd8a7330255 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -20,8 +20,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('settings')]" position="inside">
                 <div class="app_settings_block" data-string="Website" string="Website" data-key="website" groups="website.group_website_designer">
-                    <div class="row app_settings_header mb-0 mt-0 ms-0 mw-100"
-                        style="background-color: #FEF0D0; margin-bottom: 0px !important; margin-top: 0px !important;">
+                    <div class="row app_settings_header my-0 ms-0 mw-100 bg-warning bg-opacity-25">
                         <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
                             <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
                                 <div class="content-group">
@@ -75,7 +74,7 @@
                                     </div>
                                     <div class="row mt8">
                                         <label class="col-lg-3" string="Favicon" for="favicon"/>
-                                        <field name="favicon" widget="image" class="float-start oe_avatar"/>
+                                        <field name="favicon" widget="image" class="float-start oe_avatar bg-view"/>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index a079fa10225..977b034858d 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -29,7 +29,7 @@
                         <group name="domain">
                             <field name="name"/>
                             <field name="domain"/>
-                            <field name="logo" widget="image" class="oe_avatar float-start"/>
+                            <field name="logo" widget="image" class="oe_avatar w-auto float-start"/>
                             <field name="language_count" invisible="1"/>
                             <field name="company_id" options="{'no_open': True, 'no_create': True}" groups="base.group_multi_company"/>
                             <field name="language_ids" widget="many2many_tags" options="{'no_open': True, 'no_create': True}"/>
@@ -319,7 +319,7 @@
                             <t t-set="has_screenshot" t-value="record.image_ids.raw_value.length > 1"/>
                             <t t-set="image_url" t-value="has_image ? '/web/image/' + record.image_ids.raw_value[0] : record.icon.value"/>
 
-                            <div class="o_theme_preview_top bg-white mb4">
+                            <div class="o_theme_preview_top bg-white mb4 border">
                                 <div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')}" t-attf-style="background-image: url(#{image_url});"/>
                                 <div t-if="record.is_installed_on_current_website.raw_value" class="o_button_area">
                                     <button type="object" name="button_refresh_theme" class="btn btn-primary">Update theme</button>

From d53d4323612de4af30a3037f12f19ccddf29412d Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 7 Oct 2022 09:38:50 +0000
Subject: [PATCH 11/19] [IMP] *: adapt for dark-mode

*: hr, hr_holidays, project, purchase, point_of_sale, rating,
spreadsheet_dashboard, stock, survey

This commit adapts modules and components in order to correctly handle
color-scheme variations.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/hr/static/src/img/icons/hatched_dark.svg   |  1 +
 addons/hr/static/src/img/icons/line_dark.svg      |  1 +
 addons/hr/static/src/img/icons/plain_dark.svg     |  1 +
 .../static/src/dashboard/time_off_card.scss       |  1 +
 .../filter_panel/calendar_filter_panel.scss       | 15 +++++++++++++++
 .../filter_panel/calendar_filter_panel.xml        |  6 +++---
 addons/hr_holidays/views/hr_views.xml             |  3 +--
 .../views/res_config_settings_views.xml           |  2 +-
 .../project_control_panel.xml                     |  2 +-
 .../project_right_side_panel.xml                  |  2 +-
 .../static/src/views/purchase_dashboard.xml       |  6 +++---
 addons/rating/views/rating_rating_views.xml       |  2 +-
 .../bundle/dashboard_action/dashboard_action.xml  |  2 +-
 .../mobile_search_panel/mobile_search_panel.xml   |  2 +-
 .../static/src/scss/report_stock_forecasted.scss  |  5 +----
 addons/survey/static/src/img/trophy-solid.svg     |  2 +-
 .../static/src/scss/survey_survey_views.scss      | 11 ++++-------
 17 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 addons/hr/static/src/img/icons/hatched_dark.svg
 create mode 100644 addons/hr/static/src/img/icons/line_dark.svg
 create mode 100644 addons/hr/static/src/img/icons/plain_dark.svg
 create mode 100644 addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss

diff --git a/addons/hr/static/src/img/icons/hatched_dark.svg b/addons/hr/static/src/img/icons/hatched_dark.svg
new file mode 100644
index 00000000000..1be4354ddc1
--- /dev/null
+++ b/addons/hr/static/src/img/icons/hatched_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M83.13,35.69a7.9,7.9,0,0,0-4.94-7.33L34.33,72.22H47.06L83.13,36.15Z" style="fill:#bb86fc"/><path d="M53.39,27.78,16.87,64.3h0a7.9,7.9,0,0,0,5.21,7.43l44-44Z" style="fill:#bb86fc"/><path d="M24.78,27.78a7.91,7.91,0,0,0-7.91,7.91V51.57L40.66,27.78Z" style="fill:#bb86fc"/><path d="M59.78,72.22H75.22a7.91,7.91,0,0,0,7.91-7.91V48.87Z" style="fill:#bb86fc"/></svg>
diff --git a/addons/hr/static/src/img/icons/line_dark.svg b/addons/hr/static/src/img/icons/line_dark.svg
new file mode 100644
index 00000000000..37846bd33f2
--- /dev/null
+++ b/addons/hr/static/src/img/icons/line_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M21.93,55H78.07a5,5,0,0,0,0-10H21.93a5,5,0,0,0,0,10Z" style="fill:#bb86fc"/></svg>
diff --git a/addons/hr/static/src/img/icons/plain_dark.svg b/addons/hr/static/src/img/icons/plain_dark.svg
new file mode 100644
index 00000000000..e45b1c3229f
--- /dev/null
+++ b/addons/hr/static/src/img/icons/plain_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="16.87" y="27.78" width="66.26" height="44.44" rx="7.91" style="fill:#bb86fc"/></svg>
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.scss b/addons/hr_holidays/static/src/dashboard/time_off_card.scss
index ef4c036603f..ac956af2e34 100644
--- a/addons/hr_holidays/static/src/dashboard/time_off_card.scss
+++ b/addons/hr_holidays/static/src/dashboard/time_off_card.scss
@@ -24,6 +24,7 @@
 
         img {
             height: 30px;
+            filter: var(--timeOffCard-icon-filter);
         }
     }
 
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
new file mode 100644
index 00000000000..64678abaf28
--- /dev/null
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
@@ -0,0 +1,15 @@
+.o_calendar_filter img {
+    width:30px;
+    
+    &.o_calendar_filter_plain {
+        content:var(--calendarFilter-icon--plain);
+    } 
+
+    &.o_calendar_filter_hatched {
+        content:var(--calendarFilter-icon--hatched);
+    } 
+    
+    &.o_calendar_filter_line {
+        content:var(--calendarFilter-icon--line);
+    } 
+}
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
index 007373e0bb8..b6af3492bdc 100644
--- a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
@@ -7,9 +7,9 @@
                 <h5>Legend</h5>
 
                 <div class="d-flex flex-column">
-                    <span><img src="/hr/static/src/img/icons/plain.svg" width="30px"/> Validated</span>
-                    <span><img src="/hr/static/src/img/icons/hatched.svg" width="30px"/> To Approve</span>
-                    <span><img src="/hr/static/src/img/icons/line.svg" width="30px"/> Refused</span>
+                    <span><img class="o_calendar_filter_plain" src="/hr/static/src/img/icons/plain.svg"/> Validated</span>
+                    <span><img class="o_calendar_filter_hatched" src="/hr/static/src/img/icons/hatched.svg"/> To Approve</span>
+                    <span><img class="o_calendar_filter_line" src="/hr/static/src/img/icons/line.svg"/> Refused</span>
                 </div>
             </div>
         </xpath>
diff --git a/addons/hr_holidays/views/hr_views.xml b/addons/hr_holidays/views/hr_views.xml
index 0f7d3fc2171..52d6fbe9beb 100644
--- a/addons/hr_holidays/views/hr_views.xml
+++ b/addons/hr_holidays/views/hr_views.xml
@@ -50,8 +50,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_card_lower_content')]" position="inside">
                     <t groups="hr_holidays.group_hr_holidays_user">
-                        <div class="row o_kanban_primary_bottom bottom_block"
-                             style="background-color: white"
+                        <div class="row o_kanban_primary_bottom bottom_block bg-view"
                              t-if="record.absence_of_today.raw_value > 0">
                             <div class="col-3">
                                 <a name="%(hr_employee_action_from_department)d" type="action" title="Absent Employee(s), Whose time off requests are either confirmed or validated on today">Absence</a>
diff --git a/addons/point_of_sale/views/res_config_settings_views.xml b/addons/point_of_sale/views/res_config_settings_views.xml
index 98c329073c1..3cbbe07b377 100644
--- a/addons/point_of_sale/views/res_config_settings_views.xml
+++ b/addons/point_of_sale/views/res_config_settings_views.xml
@@ -19,7 +19,7 @@
                 </t>
 
                 <div class="app_settings_block" data-string="Point of sale" string="Point of Sale" data-key="point_of_sale" groups="point_of_sale.group_pos_manager">
-                    <div class="app_settings_header pt-1 pb-1" style="background-color: #FEF0D0;">
+                    <div class="app_settings_header pt-1 pb-1 bg-warning bg-opacity-25">
                         <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
                             <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
                                 <div class="content-group">
diff --git a/addons/project/static/src/components/project_control_panel/project_control_panel.xml b/addons/project/static/src/components/project_control_panel/project_control_panel.xml
index 7d97a0b7e5c..0d4555ec9ac 100644
--- a/addons/project/static/src/components/project_control_panel/project_control_panel.xml
+++ b/addons/project/static/src/components/project_control_panel/project_control_panel.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="project.ProjectControlPanelContentBadge" owl="1">
-        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ms-2 bg-white" data-hotkey="y">
+        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ms-2 bg-view" data-hotkey="y">
             <span t-attf-class="o_status_bubble o_color_bubble_{{data.color}}"/>
             <span t-att-class="'fw-normal ms-1' + (data.color === 0 ? ' text-muted' : '')" t-esc="data.status"/>
         </t>
diff --git a/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml b/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml
index a7a32ce0554..82cba1e9723 100644
--- a/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml
+++ b/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="project.ProjectRightSidePanel" owl="1">
-        <div t-if="projectId" class="o_rightpanel pt-0 bg-white border-start overflow-auto">
+        <div t-if="projectId" class="o_rightpanel pt-0 bg-view border-start overflow-auto">
             <ProjectRightSidePanelSection 
                 name="'stat_buttons'"
                 header="false"
diff --git a/addons/purchase/static/src/views/purchase_dashboard.xml b/addons/purchase/static/src/views/purchase_dashboard.xml
index 01f59417263..aa9b434c27a 100644
--- a/addons/purchase/static/src/views/purchase_dashboard.xml
+++ b/addons/purchase/static/src/views/purchase_dashboard.xml
@@ -11,17 +11,17 @@
                         <div class="g-col-9 g-col-sm-10 grid gap-1">
                             <div class="g-col-4 p-0" t-on-click="setSearchContext" title="All Draft RFQs" filter_name="draft_rfqs">
                                 <a href="#" class="btn btn-primary w-100 h-100 border-0 rounded-0 text-capitalize fw-normal">
-                                    <h2 t-out="purchaseData['all_to_send']"/>To Send
+                                    <div class="fs-2" t-out="purchaseData['all_to_send']"/>To Send
                                 </a>
                             </div>
                             <div class="g-col-4 p-0" t-on-click="setSearchContext" title="All Waiting RFQs" filter_name="waiting_rfqs">
                                 <a href="#" class="btn btn-primary w-100 h-100 border-0 rounded-0 text-capitalize fw-normal">
-                                    <h2 t-out="purchaseData['all_waiting']"/>Waiting
+                                    <div class="fs-2" t-out="purchaseData['all_waiting']"/>Waiting
                                 </a>
                             </div>
                             <div class="g-col-4 p-0" t-on-click="setSearchContext" title="All Late RFQs" filter_name="late_rfqs">
                                 <a href="#" class="btn btn-primary w-100 h-100 border-0 rounded-0 text-capitalize fw-normal">
-                                    <h2 t-out="purchaseData['all_late']"/>Late
+                                    <div class="fs-2" t-out="purchaseData['all_late']"/>Late
                                 </a>
                             </div>
                         </div>
diff --git a/addons/rating/views/rating_rating_views.xml b/addons/rating/views/rating_rating_views.xml
index ab55e80e50b..2e67a51ab29 100644
--- a/addons/rating/views/rating_rating_views.xml
+++ b/addons/rating/views/rating_rating_views.xml
@@ -93,7 +93,7 @@
                             <div class="oe_kanban_global_click d-flex align-items-center justify-content-center">
                                 <div class="row oe_kanban_details">
                                     <div class="col-4 my-auto">
-                                        <field name="rating_image" widget="image"/>
+                                        <field name="rating_image" widget="image" class="bg-view" />
                                     </div>
                                     <div class="col-8 ps-1">
                                         <strong>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
index 22b52a9c03d..5d504f01bc6 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
@@ -24,7 +24,7 @@
                     groups="getDashboardGroups()"/>
             </t>
             <t t-else="">
-                <div class="o_spreadsheet_dashboard_search_panel o_search_panel flex-grow-0 border-end flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-white overflow-auto">
+                <div class="o_spreadsheet_dashboard_search_panel o_search_panel flex-grow-0 border-end flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto">
                     <section t-foreach="getDashboardGroups()" t-as="group" t-key="group.id" class="o_search_panel_section o_search_panel_category">
                         <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase o_cursor_default user-select-none">
                             <b t-esc="group.name"/>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
index a1520cc0893..f76c6f53b6a 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
@@ -11,7 +11,7 @@
                         </button>
                     </div>
                     <div class="o_mobile_search_content">
-                        <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto">
+                        <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto">
                             <section t-foreach="props.groups" t-as="group" t-key="group.id" class="o_search_panel_section o_search_panel_category">
                                 <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase cursor-default">
                                     <b t-esc="group.name"/>
diff --git a/addons/stock/static/src/scss/report_stock_forecasted.scss b/addons/stock/static/src/scss/report_stock_forecasted.scss
index 335e077614d..c66367e5433 100644
--- a/addons/stock/static/src/scss/report_stock_forecasted.scss
+++ b/addons/stock/static/src/scss/report_stock_forecasted.scss
@@ -8,9 +8,6 @@
         }
     }
 
-    .o_forecasted_row {
-        background-color: #dee2e6;
-    }
 
     .o_priority {
         display: inline-block;
@@ -29,5 +26,5 @@
     }
     .table td {
         vertical-align: middle;
-    } 
+    }
 }
diff --git a/addons/survey/static/src/img/trophy-solid.svg b/addons/survey/static/src/img/trophy-solid.svg
index 543ed227116..4e149d2b9f5 100644
--- a/addons/survey/static/src/img/trophy-solid.svg
+++ b/addons/survey/static/src/img/trophy-solid.svg
@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trophy" class="svg-inline--fa fa-trophy fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg>
\ No newline at end of file
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trophy" class="svg-inline--fa fa-trophy fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#9DA1AA" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg>
diff --git a/addons/survey/static/src/scss/survey_survey_views.scss b/addons/survey/static/src/scss/survey_survey_views.scss
index 55b90d12206..8c538050f8f 100644
--- a/addons/survey/static/src/scss/survey_survey_views.scss
+++ b/addons/survey/static/src/scss/survey_survey_views.scss
@@ -3,8 +3,8 @@
     // Common: left semi-trophy icon for certifications
     .o_survey_kanban_card_certification {
         background-image:
-            linear-gradient(rgba(255,255,255,.9),
-                            rgba(255,255,255,.9)),
+            linear-gradient(rgba($o-view-background-color,.75),
+                            rgba($o-view-background-color,.75)),
             url(/survey/static/src/img/trophy-solid.svg);
         background-repeat: no-repeat;
         background-position: bottom 6px left -45px;
@@ -31,9 +31,6 @@
             width: 100%;
             margin: 0px;
             border-top: 0px !important;
-            &:first-child {
-                border-bottom: 1px solid #dee2e6 !important;
-            }
         }
     }
 
@@ -65,8 +62,8 @@
 
         // Left semi-trophy icon for certifications: tweak display for list view
         .o_survey_kanban_card_certification {
-            background-position: bottom 6px left -30px;
-            background-size: 100%, 65px;
+            background-position: center left -35px;
+            background-size: auto 75%;
         }
 
         // Due to activity widget crashing if present twice, have to set absolute and tweak

From f37e92a0baf86c2aed18aa67ca20ebb8bc627989 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Mon, 12 Sep 2022 13:41:07 +0000
Subject: [PATCH 12/19] [MOV] web_editor: move floating toolbar variables in a
 dedicated file

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web_editor/__manifest__.py                   |  1 +
 addons/web_editor/static/src/scss/wysiwyg.scss      | 13 -------------
 .../static/src/scss/wysiwyg.variables.scss          | 12 ++++++++++++
 3 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 addons/web_editor/static/src/scss/wysiwyg.variables.scss

diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index f59d5bf2720..1170461d8cc 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -139,6 +139,7 @@ Odoo Web Editor widget.
 
         'web._assets_primary_variables': [
             'web_editor/static/src/scss/web_editor.variables.scss',
+            'web_editor/static/src/scss/wysiwyg.variables.scss',
         ],
         'web._assets_secondary_variables': [
             'web_editor/static/src/scss/secondary_variables.scss',
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 6fed08806a6..76ef597c6a5 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -1,19 +1,6 @@
 $o-we-overlay-zindex: ($zindex-fixed + $zindex-modal-backdrop) / 2 !default;
 $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
-// Floating Toolbar Variables
-$o-we-toolbar-entries-gap: $o-we-sidebar-content-field-control-item-spacing * .7;
-$o-we-toolbar-entries-border-width: 1px;
-$o-we-toolbar-entries-padding: $o-we-sidebar-content-padding-base * .7;
-
-$o-we-toolbar-bg: #FFF;
-$o-we-toolbar-bg-active: rgba($o-we-fg-light, .2);
-$o-we-toolbar-border: $o-we-fg-light;
-$o-we-toolbar-color-text: $o-we-bg-light;
-$o-we-toolbar-color-accent: #018597;
-$o-we-toolbar-color-clickable: $o-we-bg-lightest;
-$o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
-
 // Use css variables to control the default style of the editor so that an
 // external assets bundle can influence it without duplicating the css.
 :root {
diff --git a/addons/web_editor/static/src/scss/wysiwyg.variables.scss b/addons/web_editor/static/src/scss/wysiwyg.variables.scss
new file mode 100644
index 00000000000..c3265aad940
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg.variables.scss
@@ -0,0 +1,12 @@
+// Floating Toolbar Variables
+$o-we-toolbar-entries-gap: $o-we-sidebar-content-field-control-item-spacing * .7 !default;
+$o-we-toolbar-entries-border-width: 1px !default;
+$o-we-toolbar-entries-padding: $o-we-sidebar-content-padding-base * .7 !default;
+
+$o-we-toolbar-bg: #FFF !default;
+$o-we-toolbar-bg-active: rgba($o-we-fg-light, .2) !default;
+$o-we-toolbar-border: $o-we-fg-light !default;
+$o-we-toolbar-color-text: $o-we-bg-light !default;
+$o-we-toolbar-color-accent: #018597 !default;
+$o-we-toolbar-color-clickable: $o-we-bg-lightest !default;
+$o-we-toolbar-color-clickable-active: $o-we-bg-darkest !default;

From 857a7a3b84968a542f59cef9c25d3a34d32fc33b Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Mon, 12 Sep 2022 13:42:11 +0000
Subject: [PATCH 13/19] [IMP] web_editor: adapt for dark-mode

This commit adapts the module in order to correctly handle color-scheme
variations.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 .../src/js/editor/odoo-editor/src/style.scss  | 38 +++++++++--------
 .../static/src/scss/web_editor.backend.scss   | 11 ++---
 .../static/src/scss/web_editor.common.scss    |  1 +
 .../web_editor/static/src/scss/wysiwyg.scss   | 42 +++++++++----------
 4 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
index ba00266b9da..b58eb6f583a 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
@@ -48,27 +48,27 @@
     }
     .o_table_ui_menu_toggler {
         cursor: pointer;
-        background-color: white;
-        color: #6e727a;
-        border: 1px solid #C9CCD2;
+        background-color: var(--o-table-ui-bg, #{$o-white});
+        color: var(--o-table-ui-color, #{$o-main-text-color});
+        border: $border-width solid var(--o-table-ui-border, #{$border-color});
         border-radius: 5px;
         padding: 2px 3px;
     }
     .o_table_ui_menu {
         display: none;
         cursor: pointer;
-        background-color: white;
+        background-color: var(--o-table-ui-bg, #{$o-white});
         width: fit-content;
-        border: 1px solid #C9CCD2;
+        border: $border-width solid var(--o-table-ui-border, #{$border-color});
         padding: 5px 0;
         white-space: nowrap;
 
         > div:hover {
-            background-color: #ebebeb;
+            background-color: var(--o-table-ui-hover, #{$o-gray-200});
         }
         span {
             margin-right: 8px;
-            color: #6e727a;
+            color: var(--o-table-ui-color, #{$o-main-text-color});
         }
         div {
             padding: 0 8px;
@@ -229,7 +229,7 @@
 .oe-tablepicker-wrapper.oe-floating {
     padding: 3px;
     z-index: 1051;
-    background: white;
+    background-color: var(--oeTablepicker__wrapper-bg, $o-white);
 }
 .oe-tablepicker-row {
     line-height: 0;
@@ -240,7 +240,7 @@
 
     .oe-tablepicker-row .oe-tablepicker-cell {
         display: inline-block;
-        background:  #EFEFEE;
+        background-color: var(--oeTablepicker__cell-bg, $o-gray-200);
         width: 19px;
         height: 19px;
         padding: 0;
@@ -251,7 +251,7 @@
             margin-right: 0;
         }
         &.active {
-            background: #d3d1cb;
+            background-color: var(--oeTablepicker-color-accent, $o-brand-primary);
         }
     }
 }
@@ -282,7 +282,8 @@
     position: absolute;
     z-index: $zindex-modal;
     border: black;
-    background-color: white;
+    background: var(--oePowerbox__wrapper-bg, $o-white);
+    color: $o-main-text-color;
     max-height: 40vh;
     box-sizing: border-box;
     max-width: 100%;
@@ -299,10 +300,10 @@
         height: 10px;
     }
     ::-webkit-scrollbar-thumb {
-        background: #D3D1CB;
+        background: var(--oePowerbox__ScrollbarThumb-background-color, #D3D1CB);
     }
     ::-webkit-scrollbar-track {
-        background: #EDECE9;
+        background: var(--oePowerbox__ScrollbarTrack-background-color, #EDECE9);
     }
 }
 .oe-powerbox-mainWrapper {
@@ -314,7 +315,7 @@
 
 .oe-powerbox-category, .oe-powerbox-noResult {
     margin: 10px;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--oePowerbox__category-color, $o-gray-600);
     font-size: 11px;
 }
 .oe-powerbox-category {
@@ -330,7 +331,7 @@
     cursor: pointer;
 
     &.active {
-        background: #EFEFEE;
+        background: var(--oePowerbox__commandName-bg, $o-gray-100); 
     }
 }
 i.oe-powerbox-commandImg {
@@ -339,17 +340,18 @@ i.oe-powerbox-commandImg {
     width: 30px;
     align-items: center;
     justify-content: center;
-    background: white;
-    color: rgba(0, 0, 0, 0.6);
+    background: var(--oePowerbox__commandImg-bg, $o-gray-100);
+    color: var(--oePowerbox__commandImg-color, $o-gray-800);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 7px;
     font-size: 15px;
 }
 .oe-powerbox-commandName {
     font-size: 13px;
+    color: var(--oePowerbox__commandName-color, $o-main-text-color);
 }
 .oe-powerbox-commandDescription {
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--oePowerbox__commandDescription-color, $o-main-color-muted);
     font-size: 12px;
 }
 .oe-powerbox-commandRightCol {
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index 71043923ddd..f2d9e4c1de1 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -8,13 +8,6 @@
         right: 0;
     }
 
-    .note-editable {
-        font: inherit !important;
-        font-family: inherit !important;
-        line-height: inherit !important;
-        color: inherit !important;
-    }
-
     iframe {
         display: block;
         width: 100%;
@@ -40,7 +33,9 @@
     a {
         // Ensure the link is visible enough in the editor.
         $oe-link-color: o-color('o-cc3-link');
-        color: if($oe-link-color, $oe-link-color, #008f8c);
+        @if ($oe-link-color) {
+            color: $oe-link-color;
+        }
     }
 }
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index e53b9bc92ab..942f5ad4f7f 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -539,6 +539,7 @@ a.o_underline {
         width: 100px;
         height: 150px;
         opacity: .5;
+        filter: var(--WebEditor__SearchPromptArrow-filter, invert(0));
         background-image: url('/web_editor/static/src/img/curved_arrow.svg');
         background-size: 100%;
         background-repeat: no-repeat;
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 76ef597c6a5..8e61573240b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -190,17 +190,17 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     max-width: none;
     border-radius: $o-we-item-border-radius;
     padding: 0 $o-we-sidebar-content-field-control-item-spacing;
-    background-color: $o-we-toolbar-bg;
+    background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
     box-shadow: 0 0 4px rgba(#000, .1), 0 4px 18px rgba(#000, .25);
-    color: $o-we-toolbar-color-text;
+    color: var(--o-we-toolbar-color-text, #{$o-we-toolbar-color-text});
     font-family: $o-we-font-family;
 
     &.toolbar-bottom:before {
-        border-bottom-color: $o-we-toolbar-bg;
+        border-bottom-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
     }
 
     &:not(.toolbar-bottom):before {
-        border-top-color: $o-we-toolbar-bg;
+        border-top-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
     }
 
     &.noarrow::before {
@@ -212,7 +212,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
             content: "";
             width: $o-we-toolbar-entries-border-width;
             margin-right: calc(#{$o-we-toolbar-entries-gap} - #{$o-we-toolbar-entries-border-width});
-            background: $o-we-toolbar-border;
+            background: var(--o-we-toolbar-border, #{$o-we-toolbar-border});
             transform: scaleY(.6)
         }
 
@@ -225,16 +225,16 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     // Main layout of buttons
     .btn, .dropdown-item {
         padding: ($o-we-toolbar-entries-padding * .5) $o-we-toolbar-entries-padding;
-        color: $o-we-toolbar-color-clickable;
+        color: var(--o-we-toolbar-color-clickable, #{$o-we-toolbar-color-clickable});
 
         &:hover:not(.active) {
-            color: $o-we-toolbar-color-clickable-active;
+            color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
             background-color: transparent;
         }
 
         &.active {
-            background: $o-we-toolbar-bg-active;
-            box-shadow: inset 0 0 3px rgba($o-we-toolbar-bg-active, .5);
+            background: var(--o-we-toolbar-bg-active, #{$o-we-toolbar-bg-active});
+            box-shadow: inset 0 0 3px RGBA(var(--o-we-toolbar-bg-active, #{$o-we-toolbar-bg-active}), .5);
         }
     }
 
@@ -245,7 +245,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         font-weight: 400;
 
         &.active {
-            color: $o-we-toolbar-color-accent;
+            color: var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
         }
     }
 
@@ -259,7 +259,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
     .show > .btn {
         &, &:hover, &:focus {
-            color: $o-we-toolbar-color-clickable-active;
+            color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
         }
     }
 
@@ -274,8 +274,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         padding: 0;
         max-height: none;
         overflow: visible;
-        border-top: 1px solid $o-we-toolbar-border;
-        background-color: $o-we-toolbar-bg;
+        border-top: 1px solid var(--o-we-toolbar-border, #{$o-we-toolbar-border});
+        background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
         box-shadow: 0 18px 18px rgba(#000, .23);
         @include border-top-radius(0);
         @include border-bottom-radius($o-we-item-border-radius);
@@ -306,8 +306,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         }
 
         &.active {
-            &, &:hover, &:focus {
-                color: $o-we-bg-darker;
+            & > * , &:hover, &:focus {
+                color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active})
 
                 &:before {
                     top: 0;
@@ -353,10 +353,10 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
             margin-bottom: -1px;
 
             &.active {
-                border-bottom: 1px solid $o-we-toolbar-color-accent;
+                border-bottom: 1px solid var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
                 background: none;
                 box-shadow: none;
-                color: $o-we-toolbar-color-clickable-active;
+                color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
             }
 
             &.o_colorpicker_reset {
@@ -374,7 +374,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     }
 
     .colorpicker {
-        background: $o-we-toolbar-bg;
+        background: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
         box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
     }
 
@@ -390,7 +390,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         border-radius: 0;
 
         &.active {
-            background: $o-we-toolbar-color-accent;
+            background: var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
         }
     }
 }
@@ -478,7 +478,7 @@ body .modal {
         }
 
         .o_link_dialog_preview {
-            border-left: 1px solid map-get($grays, '200');
+            border-left: var(--o-link-dialog-preview-border, #{$border-width} solid #{$border-color});
         }
     }
 }
@@ -563,8 +563,6 @@ img::selection {
 .note-editable {
     border: $o-we-border-width solid $o-we-fg-light;
     overflow: auto;
-    background: white;
-    color: black;
     height: 100%;
     padding: 4px;
     min-height: 10px;

From 06948a763eff478333df079ab2b3d71809b2be40 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Tue, 13 Sep 2022 12:13:25 +0000
Subject: [PATCH 14/19] [IMP] *: adapt bundle to support dark mode switch

This commit adapt all bundle to support dark mode

task-2710677

Part-of: odoo/odoo#102868
---
 .../mailing_templates_portal_layouts.xml      | 10 ++++-
 .../point_of_sale/views/pos_assets_qunit.xml  |  7 +++-
 addons/web/__manifest__.py                    | 10 +++++
 addons/web/views/webclient_templates.xml      | 40 +++++++++++++++----
 4 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/addons/mass_mailing/views/mailing_templates_portal_layouts.xml b/addons/mass_mailing/views/mailing_templates_portal_layouts.xml
index c0659daafbf..600d026fb6f 100644
--- a/addons/mass_mailing/views/mailing_templates_portal_layouts.xml
+++ b/addons/mass_mailing/views/mailing_templates_portal_layouts.xml
@@ -4,8 +4,14 @@
     <template id="mass_mailing.layout" name="Mass Mailing Layout">
         <t t-call="web.layout">
             <t t-set="head">
-                <t t-call-assets="web.assets_common"/>
-                <t t-call-assets="web.assets_backend"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common"/>
+                    <t t-call-assets="web.dark_mode_assets_backend"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common"/>
+                    <t t-call-assets="web.assets_backend"/>
+                </t>
             </t>
             <body class="o_white_body">
                 <header>
diff --git a/addons/point_of_sale/views/pos_assets_qunit.xml b/addons/point_of_sale/views/pos_assets_qunit.xml
index 35818f16fbd..f494500035c 100644
--- a/addons/point_of_sale/views/pos_assets_qunit.xml
+++ b/addons/point_of_sale/views/pos_assets_qunit.xml
@@ -2,7 +2,12 @@
 <odoo>
 
 <template id="point_of_sale.qunit_suite_assets">
-    <t t-call-assets="web.assets_backend" t-js="false" />
+    <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+        <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+    </t>
+    <t t-else="">
+        <t t-call-assets="web.assets_backend" t-js="false"/>
+    </t>
     <t t-call-assets="point_of_sale.tests_assets" t-js="false"/>
     <t t-call-assets="point_of_sale.tests_assets" t-css="false"/>
     <style>
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index d7a1518906f..c2391df2cf9 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -515,6 +515,16 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/webclient/actions/reports/reset.min.css',
         ],
 
+        # ---------------------------------------------------------------------
+        # COLOR SCHEME BUNDLES
+        # ---------------------------------------------------------------------
+        "web.dark_mode_assets_common": [
+            ('include', 'web.assets_common'),
+        ],
+        "web.dark_mode_assets_backend": [
+            ('include', 'web.assets_backend'),
+        ],
+
         # ---------------------------------------------------------------------
         # SUB BUNDLES
         # ---------------------------------------------------------------------
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 1052f322177..08a7f739afa 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -207,8 +207,14 @@
             <t t-set="html_data" t-value="{'style': 'height: 100%;'}"/>
             <t t-set="title">Web Tests</t>
             <t t-set="head">
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.tests_assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
@@ -229,8 +235,14 @@
             <t t-set="head">
                 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.tests_assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
@@ -252,8 +264,14 @@
                 <script type="text/javascript" src="/web/static/lib/benchmarkjs/lodash.js"></script>
                 <script type="text/javascript" src="/web/static/lib/benchmarkjs/benchmark.js"></script>
 
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
@@ -318,8 +336,14 @@
                         fetch(`/web/webclient/translations/${cache_hashes.translations}?lang=${user_context.lang}`);
                     }
                 </script>
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
                 <t t-call-assets="web.assets_backend_prod_only" t-css="false"/>

From ce235f8b030355e18a529d113dbf8d9b0d52a352 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 7 Oct 2022 07:39:46 +0000
Subject: [PATCH 15/19] [IMP] web: `Tooltip`: adapt for dark mode

Commit preparatory to the introduction of dark-mode.

note: Tooltip variables should be reworked in order to correctly handle
different scenarios. For simplicity this commit will just match popover
colors.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/static/src/legacy/scss/tooltip.scss | 18 +++++++++---------
 .../web/static/src/scss/primary_variables.scss |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/addons/web/static/src/legacy/scss/tooltip.scss b/addons/web/static/src/legacy/scss/tooltip.scss
index eaae68362f1..68d6e721d89 100644
--- a/addons/web/static/src/legacy/scss/tooltip.scss
+++ b/addons/web/static/src/legacy/scss/tooltip.scss
@@ -11,7 +11,7 @@
         background-color: $o-tooltip-background-color;
         color: $o-tooltip-color;
         border-radius: $border-radius;
-        box-shadow: 0px 0px 1px 1px $o-brand-secondary;
+        box-shadow: 0px 0px 1px 1px $popover-border-color;
         margin: 5px;
         border-color: $o-tooltip-color;
 
@@ -57,11 +57,11 @@
         .tooltip-arrow {
             top: $tooltip-arrow-height;
             &::before {
-                border-bottom-color: $o-tooltip-color;
+                border-bottom-color: $popover-border-color;
                 bottom: 0;
             }
             &::after {
-                border-bottom-color: $o-tooltip-title-background-color;
+                border-bottom-color: $o-tooltip-background-color;
                 bottom: -1px;
             }
         }
@@ -70,11 +70,11 @@
         .tooltip-arrow {
             bottom: $tooltip-arrow-height;
             &::before {
-                border-top-color: $o-tooltip-color;
+                border-top-color: $popover-border-color;
                 top: 0;
             }
             &::after {
-                border-top-color: $o-tooltip-arrow-color;
+                border-top-color: $o-tooltip-background-color;
                 top: -1px;
             }
         }
@@ -83,11 +83,11 @@
         .tooltip-arrow {
             right: $tooltip-arrow-height;
             &::before {
-                border-left-color: $o-tooltip-color;
+                border-left-color: $popover-border-color;
                 left: 0;
             }
             &::after {
-                border-left-color: $o-tooltip-arrow-color;
+                border-left-color: $o-tooltip-background-color;
                 left: -1px;
             }
         }
@@ -96,11 +96,11 @@
         .tooltip-arrow {
             left: $tooltip-arrow-height;
             &::before {
-                border-right-color: $o-tooltip-color;
+                border-right-color: $popover-border-color;
                 right: 0;
             }
             &::after {
-                border-right-color: $o-tooltip-arrow-color;
+                border-right-color: $o-tooltip-background-color;
                 right: -1px;
             }
         }
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 4f478eb3993..e78fd454a4b 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -83,7 +83,7 @@ $o-list-footer-bg-color: #eee !default;
 $o-list-footer-font-weight: bold !default;
 
 $o-tooltip-background-color: $o-view-background-color !default;
-$o-tooltip-color: #666666 !default;
+$o-tooltip-color: $o-main-text-color !default;
 $o-tooltip-arrow-color: white !default;
 $o-tooltip-text-color: $o-main-text-color !default;
 $o-tooltip-title-text-color: $o-main-headings-color !default;

From 51b51c04a8f3ad3809b258d85d325f539fbc913c Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 7 Oct 2022 14:52:40 +0000
Subject: [PATCH 16/19] [IMP] web: `select2` : redefine and adapt colors

Prior to this commit, there was no common custom file to easily handle
select2 color values (e.g., dark mode).

This commit fixes this issue by redefining the values in webclient.scss.

task-2710677

Part-of: odoo/odoo#102868
---
 .../lib/select2/select2-spinner-dark.gif      | Bin 0 -> 37739 bytes
 .../web/static/src/webclient/webclient.scss   |  88 ++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 addons/web/static/lib/select2/select2-spinner-dark.gif

diff --git a/addons/web/static/lib/select2/select2-spinner-dark.gif b/addons/web/static/lib/select2/select2-spinner-dark.gif
new file mode 100644
index 0000000000000000000000000000000000000000..574f55233d647799bb86f2fbd3739da9d65898a9
GIT binary patch
literal 37739
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
QS3s|TUID!Vx4Z)X4;C@=7ytkO

literal 0
HcmV?d00001

diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index ae233df8d3d..f00a3ab3723 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -360,3 +360,91 @@ b, strong {
   border-radius: 0;
   font-size: 1em; // Override 75% of .label
 }
+
+//------------------------------------------------------------------------------
+// Select2
+//------------------------------------------------------------------------------
+// Redefine select2 dropdown color values in variables to be easily handled.
+// eg. for the dark mode
+
+.select2-container .select2-choice {
+  background-color: $dropdown-bg;
+  background-image: var(--Select2Choice-background-image, linear-gradient(to top, #eee 0%, #fff 50%));
+  color: var(--Select2Choice-color, #444);
+}
+
+.select2-container.select2-drop-above .select2-choice {
+  background-image: var(--Select2Choice__DropAbove-background-image, linear-gradient(to top, #eee 0%, #fff 90%));
+}
+
+.select2-drop-mask {
+  background-color: $o-view-background-color;
+}
+
+.select2-drop {
+  background-color: $dropdown-bg;
+  color: $o-main-text-color;
+}
+
+.select2-container:not(.select2-dropdown-open) .select2-choice .select2-arrow {
+  background: var(--Select2__Arrow-background, linear-gradient(to top, #ccc 0%, #eee 60%));
+}
+
+.select2-search input,
+html[dir="rtl"] .select2-search input,
+.select2-search input.select2-active {
+  background-color: var(--Select2__SearchInput-background-color, #fff);
+  background-repeat: no-repeat;
+}
+
+.select2-search input {
+  background-image: var(--Select2__SearchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
+  background-position: 100% -22px;
+}
+
+html[dir="rtl"] .select2-search input {
+  background-image: var(--Select2__SearchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
+  background-position: -37px -22px;
+}
+
+.select2-search input.select2-active {
+  background-image: var(--Select2__SearchInput--active-background-image, url('/web/static/lib/select2/select2-spinner.gif'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
+  background-position: 100%;
+}
+
+.select2-dropdown-open .select2-choice {
+  box-shadow: var(--Select2Choice-box-shadow, 0 1px 0 #fff inset);
+}
+
+.select2-results .select2-highlighted {
+  background: $o-brand-primary;
+  color: var(--Select2__ResultsHighlighted-color, #fff);
+}
+
+.select2-results {
+  .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
+    background: $dropdown-bg;
+    color: $o-main-text-color;
+  }
+}
+
+.select2-container .select2-choice,
+.select2-container.select2-drop-above .select2-choice,
+.select2-drop,
+.select2-drop.select2-drop-above,
+.select2-drop-auto-width,
+.select2-container .select2-choice .select2-arrow,
+html[dir="rtl"] .select2-container .select2-choice .select2-arrow,
+.select2-search input {
+  border-color: var(--Select2-border-color, #aaa);
+}
+
+.select2-drop-active,
+.select2-drop.select2-drop-above.select2-drop-active,
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices,
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices,
+.form-control.select2-container.select2-dropdown-open {
+  border-color: var(--Select2Active-border-color, #5897fb);
+}

From c8f6bbea46c660cdd31b68a6d67177c47478d02e Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 7 Oct 2022 16:06:57 +0000
Subject: [PATCH 17/19] [FIX] web, mail, lunch: remove the 'default-badge'
 border

Prior to this commit, the border of any badge was set to "1px
$o-brand-primary" in order to achieve the default badge design that
comes with transparent background.

Unfortunately this rule was affecting colored badges too, leaving no
choice rather then either remove the border (causing misalignment with
siblings default badges) or hide/re-color/keep the undesired decoration
, but with mixed results.

These commit will review the behavior applying an outline (that doesn't
affect badge's placement) to "default badges" only.

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/lunch/views/lunch_product_views.xml                  | 2 +-
 .../activity_list_view/activity_list_view.xml               | 6 +++---
 .../static/src/components/activity_box/activity_box.xml     | 6 +++---
 .../discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml     | 2 +-
 addons/mail/static/src/xml/web_kanban_activity.xml          | 2 +-
 addons/web/static/src/views/graph/graph_renderer.xml        | 2 +-
 .../settings_form_view/widgets/res_config_invite_users.xml  | 2 +-
 addons/web/static/src/webclient/webclient.scss              | 4 +++-
 8 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/addons/lunch/views/lunch_product_views.xml b/addons/lunch/views/lunch_product_views.xml
index 386a7d329e4..9befe87ea1e 100644
--- a/addons/lunch/views/lunch_product_views.xml
+++ b/addons/lunch/views/lunch_product_views.xml
@@ -125,7 +125,7 @@
                                                     <strong><span t-esc="record.name.value"/></strong>
                                                 </div>
                                                 <div class="text-odoo">
-                                                    <div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 border-0 fs-6 badge rounded-pill text-bg-success">
+                                                    <div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 fs-6 badge rounded-pill text-bg-success">
                                                         New
                                                     </div>
                                                     <field name="price" widget="monetary"/>
diff --git a/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml b/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml
index 165bc498378..b23b1336b69 100644
--- a/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml
+++ b/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml
@@ -9,7 +9,7 @@
                 <div class="d-flex bg-100 py-2 border-bottom">
                     <span class="text-danger fw-bold mx-3">Overdue</span>
                     <span class="flex-grow-1"/>
-                    <span class="badge rounded-pill text-bg-danger border-0 mx-3 align-self-center" t-esc="activityListView.overdueActivityListViewItems.length"/>
+                    <span class="badge rounded-pill text-bg-danger mx-3 align-self-center" t-esc="activityListView.overdueActivityListViewItems.length"/>
                 </div>
                 <t t-foreach="activityListView.overdueActivityListViewItems" t-as="activityListViewItem" t-key="activityListViewItem">
                     <ActivityListViewItem record="activityListViewItem"/>
@@ -19,7 +19,7 @@
                 <div class="d-flex bg-100 py-2 border-bottom">
                     <span class="text-warning fw-bold mx-3">Today</span>
                     <span class="flex-grow-1"/>
-                    <span class="badge rounded-pill text-bg-warning border-0 mx-3 align-self-center" t-esc="activityListView.todayActivityListViewItems.length"/>
+                    <span class="badge rounded-pill text-bg-warning mx-3 align-self-center" t-esc="activityListView.todayActivityListViewItems.length"/>
                 </div>
                 <t t-foreach="activityListView.todayActivityListViewItems" t-as="activityListViewItem" t-key="activityListViewItem">
                     <ActivityListViewItem record="activityListViewItem"/>
@@ -29,7 +29,7 @@
                 <div class="d-flex bg-100 py-2 border-bottom">
                     <span class="text-success fw-bold mx-3">Planned</span>
                     <span class="flex-grow-1"/>
-                    <span class="badge rounded-pill text-bg-success border-0 mx-3 align-self-center" t-esc="activityListView.plannedActivityListViewItems.length"/>
+                    <span class="badge rounded-pill text-bg-success mx-3 align-self-center" t-esc="activityListView.plannedActivityListViewItems.length"/>
                 </div>
                 <t t-foreach="activityListView.plannedActivityListViewItems" t-as="activityListViewItem" t-key="activityListViewItem">
                     <ActivityListViewItem record="activityListViewItem"/>
diff --git a/addons/mail/static/src/components/activity_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
index ade3fb81f0a..0c20f845be3 100644
--- a/addons/mail/static/src/components/activity_box/activity_box.xml
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -13,17 +13,17 @@
                     <t t-if="!activityBoxView.isActivityListVisible">
                         <span class="o_ActivityBox_titleBadges ms-2">
                             <t t-if="activityBoxView.chatter.thread.overdueActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-danger">
+                                <span class="o_ActivityBox_titleBadge me-1 badge text-bg-danger">
                                     <t t-esc="activityBoxView.chatter.thread.overdueActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.todayActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-warning">
+                                <span class="o_ActivityBox_titleBadge me-1 badge text-bg-warning">
                                     <t t-esc="activityBoxView.chatter.thread.todayActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.futureActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-success">
+                                <span class="o_ActivityBox_titleBadge me-1 badge text-bg-success">
                                     <t t-esc="activityBoxView.chatter.thread.futureActivities.length"/>
                                 </span>
                             </t>
diff --git a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
index d6a4c02c44d..1d9527d27c3 100644
--- a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
@@ -15,7 +15,7 @@
             </div>
             <div t-attf-class="o_DiscussSidebarMailbox_item flex-grow-1 {{ discussSidebarMailboxView.mailbox.counter === 0 ? 'me-3': '' }}"/>
             <t t-if="discussSidebarMailboxView.mailbox.counter > 0">
-                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge rounded-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'text-bg-primary' }} ms-1 me-3 border-0">
+                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge rounded-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'text-bg-primary' }} ms-1 me-3">
                     <t t-esc="discussSidebarMailboxView.mailbox.counter"/>
                 </div>
             </t>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index 4ab6f815766..9a08ac3ee9a 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -36,7 +36,7 @@
 
                 <li role="menuitem" t-attf-class="list-group-item list-group-item list-group-item-light d-flex justify-content-between align-items-center o_activity_color_{{key}} {{!key_first ? 'mt-2' : ''}}">
                     <strong><t t-esc="widget.selection[key]"/></strong>
-                    <span t-attf-class="badge rounded-pill bg-{{contextual_class}} border-0 me-0"><t t-esc="logs.length"/></span>
+                    <span t-attf-class="badge rounded-pill bg-{{contextual_class}} me-0"><t t-esc="logs.length"/></span>
                 </li>
                 <t t-foreach="logs" t-as="log">
                     <t t-set="edit_class" t-value="'o_edit_activity'"/>
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
index 362befcd881..ea324d3e947 100644
--- a/addons/web/static/src/views/graph/graph_renderer.xml
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -12,7 +12,7 @@
                 <tbody>
                     <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem_index">
                         <td>
-                            <span class="o_square badge p-2 rounded-0 align-middle me-2 border-0" t-attf-style="background-color: {{ tooltipItem.boxColor }}"> </span>
+                            <span class="o_square badge p-2 rounded-0 align-middle me-2" t-attf-style="background-color: {{ tooltipItem.boxColor }}"> </span>
                             <span class="o_label text-truncate d-inline-block align-middle" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label" />
                         </td>
                         <td class="o_value ps-2 text-end fw-bolder">
diff --git a/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml b/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml
index 6a05a3ee15c..abaa770bb3c 100644
--- a/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml
+++ b/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml
@@ -10,7 +10,7 @@
         <t t-if="state.invite.pending_users.length">
             <p class="o_form_label pt-3">Pending Invitations:</p>
             <span t-foreach="state.invite.pending_users" t-as="pending" t-key="pending[0]">
-                <a href="#" class="badge rounded-pill text-primary o_web_settings_user" t-on-click.prevent="(ev) => this.onClickUser(ev, pending)"> <t t-esc="pending[1]"/> </a>
+                <a href="#" class="badge rounded-pill text-primary border border-primary o_web_settings_user" t-on-click.prevent="(ev) => this.onClickUser(ev, pending)"> <t t-esc="pending[1]"/> </a>
             </span>
             <t t-if="state.invite.pending_users.length &lt; state.invite.pending_count">
                 <br/>
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index f00a3ab3723..cc126d9dc8b 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -332,7 +332,9 @@ b, strong {
 
 //== Badges
 .badge {
-  border: 1px solid $o-brand-primary;
+    &.text-bg-default, &.bg-light, &.text-bg-light, &.bg-default, &.text-primary{
+        outline: 1px solid $o-brand-primary;
+    }
 }
 
 //== Buttons

From efc30998a4151424ffd3f369aff4606a7440dab9 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Sat, 8 Oct 2022 14:50:59 +0000
Subject: [PATCH 18/19] [MOV] base,web: move onboarding variables in a
 dedicated file

Commit preparatory to the introduction of dark-mode.

task-2710677

Part-of: odoo/odoo#102868
---
 addons/web/__manifest__.py                    |  1 +
 .../base/static/src/scss/onboarding.scss      | 22 ++-----------------
 .../static/src/scss/onboarding.variables.scss | 18 +++++++++++++++
 3 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 odoo/addons/base/static/src/scss/onboarding.variables.scss

diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index c2391df2cf9..65f38ffda73 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -541,6 +541,7 @@ This module provides the core of the Odoo Web Client.
         'web._assets_primary_variables': [
             'web/static/src/scss/primary_variables.scss',
             'web/static/src/**/**/*.variables.scss',
+            'base/static/src/scss/onboarding.variables.scss',
         ],
         'web._assets_secondary_variables': [
             'web/static/src/scss/secondary_variables.scss',
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index 03e04c3081a..224d39d9b3a 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -1,26 +1,8 @@
 // = Onboarding Panel
 // ============================================================================
+$o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4 !default;
+
 .o_onboarding_main {
-    $o-onboarding-base-time: 0.5s;
-    $o-onboarding-dot-size: 20px;
-    $o-onboarding-progress-size: 2px;
-    $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4;
-
-    $o-onboarding-colors: (
-        'blue': (
-            'bg': (#60ABC3, #4187AE),
-            'ui': (#fcb157, #FBEEC8),
-        ),
-        'orange': (
-            'bg': (#DA9D77, #B9684F),
-            'ui': (#0774f4, #68B3C9),
-        ),
-        'violet': (
-            'bg': (#6070C3, #475DA4),
-            'ui': (#F39D9B, #FBEEC8),
-        ),
-    );
-
     background: white center top;
     background-size: cover;
 
diff --git a/odoo/addons/base/static/src/scss/onboarding.variables.scss b/odoo/addons/base/static/src/scss/onboarding.variables.scss
new file mode 100644
index 00000000000..6f433e6628a
--- /dev/null
+++ b/odoo/addons/base/static/src/scss/onboarding.variables.scss
@@ -0,0 +1,18 @@
+$o-onboarding-base-time: 0.5s !default;
+$o-onboarding-dot-size: 20px !default;
+$o-onboarding-progress-size: 2px !default;
+
+$o-onboarding-colors: (
+    'blue': (
+        'bg': (#60ABC3, #4187AE),
+        'ui': (#fcb157, #FBEEC8),
+    ),
+    'orange': (
+        'bg': (#DA9D77, #B9684F),
+        'ui': (#0774f4, #68B3C9),
+    ),
+    'violet': (
+        'bg': (#6070C3, #475DA4),
+        'ui': (#F39D9B, #FBEEC8),
+    ),
+) !default;

From dd9877e080a53dbeb137a9dd7947272738e7945a Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Sat, 8 Oct 2022 15:10:29 +0000
Subject: [PATCH 19/19] [REF] web,*: each module handle its own dark mode
 variables

Instead of having a dedicated module for all-things dark mode related,
this commit moves the (S)CSS files into their respecting modules and
uses `web` and `web_enterprise` to provide the base infrastructure for
the dark mode (cf. dedicated assets bundle).

Note:
Don't forget that you have to handle 2 cases:
1: SCSS variables must be placed BEFORE bright ones
2: CSS variables must be placed AFTER

task-2710677

Part-of: odoo/odoo#102868
---
 addons/hr_holidays/__manifest__.py             |  8 ++++++++
 .../src/dashboard/time_off_card.dark.scss      |  6 ++++++
 .../calendar_filter_panel.dark.scss            |  8 ++++++++
 addons/mail/__manifest__.py                    |  6 ++++++
 .../attachment_viewer.dark.scss                |  7 +++++++
 .../call_action_list.dark.scss                 |  7 +++++++
 .../call_participant_card.dark.scss            |  7 +++++++
 .../components/call_view/call_view.dark.scss   |  7 +++++++
 .../chat_window_header.dark.scss               |  7 +++++++
 .../emoji_category_bar_view.dark.scss          |  7 +++++++
 .../message_action_list.dark.scss              |  7 +++++++
 .../message_action_view.dark.scss              |  7 +++++++
 addons/web/__manifest__.py                     |  3 +++
 addons/web_editor/__manifest__.py              |  7 +++++++
 .../src/scss/odoo-editor/powerbox.dark.scss    | 16 ++++++++++++++++
 .../src/scss/odoo-editor/tablepicker.dark.scss | 13 +++++++++++++
 .../src/scss/odoo-editor/tableui.dark.scss     | 11 +++++++++++
 .../src/scss/web_editor.common.dark.scss       |  7 +++++++
 .../static/src/scss/wysiwyg.dark.scss          | 17 +++++++++++++++++
 addons/website/__manifest__.py                 | 12 ++++++++++++
 .../configurator/configurator.dark.scss        |  6 ++++++
 .../static/src/components/dialog/seo.dark.scss |  6 ++++++
 .../website_loader/website_loader.dark.scss    |  6 ++++++
 .../static/src/scss/website.backend.dark.scss  |  7 +++++++
 .../src/scss/onboarding.variables.dark.scss    | 18 ++++++++++++++++++
 25 files changed, 213 insertions(+)
 create mode 100644 addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss
 create mode 100644 addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss
 create mode 100644 addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss
 create mode 100644 addons/mail/static/src/components/call_action_list/call_action_list.dark.scss
 create mode 100644 addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss
 create mode 100644 addons/mail/static/src/components/call_view/call_view.dark.scss
 create mode 100644 addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss
 create mode 100644 addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss
 create mode 100644 addons/mail/static/src/components/message_action_list/message_action_list.dark.scss
 create mode 100644 addons/mail/static/src/components/message_action_view/message_action_view.dark.scss
 create mode 100644 addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss
 create mode 100644 addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss
 create mode 100644 addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss
 create mode 100644 addons/web_editor/static/src/scss/web_editor.common.dark.scss
 create mode 100644 addons/web_editor/static/src/scss/wysiwyg.dark.scss
 create mode 100644 addons/website/static/src/client_actions/configurator/configurator.dark.scss
 create mode 100644 addons/website/static/src/components/dialog/seo.dark.scss
 create mode 100644 addons/website/static/src/components/website_loader/website_loader.dark.scss
 create mode 100644 addons/website/static/src/scss/website.backend.dark.scss
 create mode 100644 odoo/addons/base/static/src/scss/onboarding.variables.dark.scss

diff --git a/addons/hr_holidays/__manifest__.py b/addons/hr_holidays/__manifest__.py
index 295fda03633..733d75b370f 100644
--- a/addons/hr_holidays/__manifest__.py
+++ b/addons/hr_holidays/__manifest__.py
@@ -83,6 +83,14 @@ A synchronization with an internal agenda (Meetings of the CRM module) is also p
             'hr_holidays/static/src/tours/*.js',
             'hr_holidays/static/src/radio_image_field/*.js',
             'hr_holidays/static/src/radio_image_field/*.xml',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'hr_holidays/static/src/views/**/*.dark.scss'),
+            ('remove', 'hr_holidays/static/src/dashboard/**/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'hr_holidays/static/src/views/**/*.dark.scss',
+            'hr_holidays/static/src/dashboard/**/*.dark.scss',
         ],
         'web.tests_assets': [
             'hr_holidays/static/tests/helpers/**/*',
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss b/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss
new file mode 100644
index 00000000000..18f431a8982
--- /dev/null
+++ b/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss
@@ -0,0 +1,6 @@
+// = HR Holidays
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_timeoff_card {
+    --timeOffCard-icon-filter: invert(1) brightness(2);
+}
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss
new file mode 100644
index 00000000000..5dc1764395f
--- /dev/null
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss
@@ -0,0 +1,8 @@
+// = HR Holidays
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_calendar_filter {
+    --calendarFilter-icon--plain: url("/hr/static/src/img/icons/plain_dark.svg");
+    --calendarFilter-icon--hatched: url("/hr/static/src/img/icons/hatched_dark.svg");
+    --calendarFilter-icon--line: url("/hr/static/src/img/icons/line_dark.svg");
+}
diff --git a/addons/mail/__manifest__.py b/addons/mail/__manifest__.py
index dbb66178680..5977ca97432 100644
--- a/addons/mail/__manifest__.py
+++ b/addons/mail/__manifest__.py
@@ -204,6 +204,12 @@ For more specific needs, you may also assign custom-defined actions
             'mail/static/src/webclient/commands/*.js',
             'mail/static/src/widgets/*/*.js',
             'mail/static/src/widgets/*/*.scss',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'mail/static/src/components/*/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'mail/static/src/components/*/*.dark.scss',
         ],
         'web.assets_backend_prod_only': [
             'mail/static/src/main.js',
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss
new file mode 100644
index 00000000000..2b58a834947
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss
@@ -0,0 +1,7 @@
+// = Attachment Viewer View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_AttachmentViewer_toolbarButton {
+    --AttachmentViewer_toolbarButton-background-color: #{$o-gray-200};
+}
diff --git a/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss b/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss
new file mode 100644
index 00000000000..c507d9a18e5
--- /dev/null
+++ b/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss
@@ -0,0 +1,7 @@
+// = Call Action List View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallActionList_button:not(.btn-danger) {
+    --CallActionList_button-background-color: #{$o-gray-200};
+}
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss b/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss
new file mode 100644
index 00000000000..69d8a10574a
--- /dev/null
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss
@@ -0,0 +1,7 @@
+// = Call Participant Card View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallParticipantCard_avatarFrame {
+    --CallParticipantCard_avatarFrame-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/call_view/call_view.dark.scss b/addons/mail/static/src/components/call_view/call_view.dark.scss
new file mode 100644
index 00000000000..4bbe45efd3d
--- /dev/null
+++ b/addons/mail/static/src/components/call_view/call_view.dark.scss
@@ -0,0 +1,7 @@
+// = Call View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallView {
+    --CallView-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss
new file mode 100644
index 00000000000..5e2c91aa023
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss
@@ -0,0 +1,7 @@
+// = ChatWindow Header View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_ChatWindowHeader {
+    --ChatWindowHeader-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss
new file mode 100644
index 00000000000..03421537191
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss
@@ -0,0 +1,7 @@
+// = Emoji Category Bar View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_EmojiCategoryBarView {
+    --EmojiCategoryBarView-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss b/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss
new file mode 100644
index 00000000000..3c30c5e37fe
--- /dev/null
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss
@@ -0,0 +1,7 @@
+// = Message Action List View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_MessageActionList {
+    --MessageActionList-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss b/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss
new file mode 100644
index 00000000000..f0108c8bd0e
--- /dev/null
+++ b/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss
@@ -0,0 +1,7 @@
+// = Message Action View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_MessageActionView {
+    --MessageActionView-background-color--hover: #{$o-gray-300};
+}
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 65f38ffda73..7cdcf22df13 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -524,6 +524,9 @@ This module provides the core of the Odoo Web Client.
         "web.dark_mode_assets_backend": [
             ('include', 'web.assets_backend'),
         ],
+        "web.dark_mode_variables": [
+            ('before', 'base/static/src/scss/onboarding.variables.scss', 'base/static/src/scss/onboarding.variables.dark.scss'),
+        ],
 
         # ---------------------------------------------------------------------
         # SUB BUNDLES
diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index 1170461d8cc..140b0d2aed2 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -113,6 +113,13 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/backend/**/*',
             'web_editor/static/src/xml/backend.xml',
         ],
+        "web.dark_mode_assets_backend": [
+            'web_editor/static/src/scss/odoo-editor/powerbox.dark.scss',
+            'web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss',
+            'web_editor/static/src/scss/odoo-editor/tableui.dark.scss',
+            'web_editor/static/src/scss/wysiwyg.dark.scss',
+            'web_editor/static/src/scss/web_editor.common.dark.scss',
+        ],
         'web.assets_frontend_minimal': [
             'web_editor/static/src/js/frontend/loader_loading.js',
         ],
diff --git a/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss
new file mode 100644
index 00000000000..070a9f193d9
--- /dev/null
+++ b/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss
@@ -0,0 +1,16 @@
+// = Notes powerbox
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-powerbox-wrapper {
+    --oePowerbox__wrapper-bg: #{$o-gray-300};
+
+    --oePowerbox__category-color: #{$o-gray-700};
+
+    --oePowerbox__commandName-bg: #{$o-gray-200};
+    --oePowerbox__commandName-color: #{$o-gray-900};
+    --oePowerbox__commandDescription-color: #{$o-gray-500};
+
+    --oePowerbox__commandImg-bg: #{$o-gray-400};
+    --oePowerbox__commandImg-color: #{$o-gray-900};
+}
diff --git a/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss
new file mode 100644
index 00000000000..7e31572288e
--- /dev/null
+++ b/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss
@@ -0,0 +1,13 @@
+// = Knowledge: Table
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-tablepicker-wrapper {
+    --oeTablepicker__wrapper-bg: #{$o-gray-300};
+    --oeTablepicker-color-accent: #{$o-brand-primary};
+}
+
+.oe-tablepicker {
+    --oeTablepicker__cell-bg: #{$o-gray-200};
+}
+
diff --git a/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss
new file mode 100644
index 00000000000..d7adc3b6c2c
--- /dev/null
+++ b/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss
@@ -0,0 +1,11 @@
+// = Table UI
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_table_ui {
+    --o-table-ui-bg: #{$o-gray-300};
+    --o-table-ui-color: #{$o-gray-900};
+    --o-table-ui-border: #{$o-gray-200};
+    --o-table-ui-hover: #{$o-gray-200};
+}
+
diff --git a/addons/web_editor/static/src/scss/web_editor.common.dark.scss b/addons/web_editor/static/src/scss/web_editor.common.dark.scss
new file mode 100644
index 00000000000..c8240de1971
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.dark.scss
@@ -0,0 +1,7 @@
+// = Web Editor Common Variables
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_we_search_prompt {
+    --WebEditor__SearchPromptArrow-filter: invert(1);
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg.dark.scss b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
new file mode 100644
index 00000000000..d32fab262d6
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
@@ -0,0 +1,17 @@
+// = Wysiwyg Variables
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-toolbar.oe-floating {
+    --o-we-toolbar-bg: #{$o-gray-300};
+    --o-we-toolbar-bg-active: #{$o-gray-400};
+    --o-we-toolbar-border: #{$o-gray-200};
+    --o-we-toolbar-color-text: #{$o-gray-800};
+    --o-we-toolbar-color-accent: #{$o-brand-primary};
+    --o-we-toolbar-color-clickable: #{$o-gray-800};
+    --o-we-toolbar-color-clickable-active: #{$o-black};
+}
+
+.o_link_dialog_preview {
+    --o-link-dialog-preview-border: #{$border-width} solid #{$border-color};
+}
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 7e38622b29d..94bce3fb6c2 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -182,6 +182,15 @@
             'website/static/src/components/views/*',
             'website/static/src/services/website_service.js',
             'website/static/src/js/utils.js',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'website/static/src/client_actions/*/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'website/static/src/components/dialog/*.dark.scss',
+            'website/static/src/scss/website.backend.dark.scss',
+            'website/static/src/client_actions/*/*.dark.scss',
+            'website/static/src/components/website_loader/website_loader.dark.scss'
         ],
         'web.assets_common': [
             'website/static/src/js/tours/tour_utils.js',
@@ -274,6 +283,9 @@
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/components/website_loader/*.xml',
             'website/static/src/js/backend/**/*',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'website/static/src/components/dialog/*.dark.scss'),
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/client_actions/configurator/configurator.dark.scss b/addons/website/static/src/client_actions/configurator/configurator.dark.scss
new file mode 100644
index 00000000000..c46d66cf648
--- /dev/null
+++ b/addons/website/static/src/client_actions/configurator/configurator.dark.scss
@@ -0,0 +1,6 @@
+// = Website Configuration
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_configurator_odoo_logo {
+    --configurator-logo: url(/web/static/img/odoo_logo_dark.svg);
+}
diff --git a/addons/website/static/src/components/dialog/seo.dark.scss b/addons/website/static/src/components/dialog/seo.dark.scss
new file mode 100644
index 00000000000..86a7fa019f6
--- /dev/null
+++ b/addons/website/static/src/components/dialog/seo.dark.scss
@@ -0,0 +1,6 @@
+// = Website SEO
+// ============================================================================
+// No CSS hacks, variables overrides only
+.oe_seo_configuration {
+    --seo__preview-title-color: #8ab4f8; // Google Search dark-mode color
+}
diff --git a/addons/website/static/src/components/website_loader/website_loader.dark.scss b/addons/website/static/src/components/website_loader/website_loader.dark.scss
new file mode 100644
index 00000000000..7e5d8a24230
--- /dev/null
+++ b/addons/website/static/src/components/website_loader/website_loader.dark.scss
@@ -0,0 +1,6 @@
+// = Website Loader
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_website_loader_container {
+    --website-loader-color: #FFFFFF;
+}
diff --git a/addons/website/static/src/scss/website.backend.dark.scss b/addons/website/static/src/scss/website.backend.dark.scss
new file mode 100644
index 00000000000..d3c8dc719f4
--- /dev/null
+++ b/addons/website/static/src/scss/website.backend.dark.scss
@@ -0,0 +1,7 @@
+// = Website Backend
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_demo_background {
+    --Dashboard__demoBackground: url("/website/static/src/img/website_dashboard_visit_demo_dark_mode.png");
+}
diff --git a/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss b/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss
new file mode 100644
index 00000000000..779c63f5a7f
--- /dev/null
+++ b/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss
@@ -0,0 +1,18 @@
+// = Onboarding Colors
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+$o-onboarding-colors: (
+    'blue': (
+        'bg': (#215e72, #1c3d4e),
+        'ui': (#db851e, #c0ad73),
+    ),
+    'orange': (
+        'bg': (#5c4436, #784536),
+        'ui': ($o-brand-primary, #68B3C9),
+    ),
+    'violet': (
+        'bg': (#424a7d, #333e6a),
+        'ui': (#db851e, #c0ad73),
+    ),
+) !default;