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] [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;