diff --git a/addons/hr/static/src/img/icons/hatched_dark.svg b/addons/hr/static/src/img/icons/hatched_dark.svg
new file mode 100644
index 00000000000..1be4354ddc1
--- /dev/null
+++ b/addons/hr/static/src/img/icons/hatched_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M83.13,35.69a7.9,7.9,0,0,0-4.94-7.33L34.33,72.22H47.06L83.13,36.15Z" style="fill:#bb86fc"/><path d="M53.39,27.78,16.87,64.3h0a7.9,7.9,0,0,0,5.21,7.43l44-44Z" style="fill:#bb86fc"/><path d="M24.78,27.78a7.91,7.91,0,0,0-7.91,7.91V51.57L40.66,27.78Z" style="fill:#bb86fc"/><path d="M59.78,72.22H75.22a7.91,7.91,0,0,0,7.91-7.91V48.87Z" style="fill:#bb86fc"/></svg>
diff --git a/addons/hr/static/src/img/icons/line_dark.svg b/addons/hr/static/src/img/icons/line_dark.svg
new file mode 100644
index 00000000000..37846bd33f2
--- /dev/null
+++ b/addons/hr/static/src/img/icons/line_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M21.93,55H78.07a5,5,0,0,0,0-10H21.93a5,5,0,0,0,0,10Z" style="fill:#bb86fc"/></svg>
diff --git a/addons/hr/static/src/img/icons/plain_dark.svg b/addons/hr/static/src/img/icons/plain_dark.svg
new file mode 100644
index 00000000000..e45b1c3229f
--- /dev/null
+++ b/addons/hr/static/src/img/icons/plain_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="16.87" y="27.78" width="66.26" height="44.44" rx="7.91" style="fill:#bb86fc"/></svg>
diff --git a/addons/hr_holidays/__manifest__.py b/addons/hr_holidays/__manifest__.py
index 295fda03633..733d75b370f 100644
--- a/addons/hr_holidays/__manifest__.py
+++ b/addons/hr_holidays/__manifest__.py
@@ -83,6 +83,14 @@ A synchronization with an internal agenda (Meetings of the CRM module) is also p
             'hr_holidays/static/src/tours/*.js',
             'hr_holidays/static/src/radio_image_field/*.js',
             'hr_holidays/static/src/radio_image_field/*.xml',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'hr_holidays/static/src/views/**/*.dark.scss'),
+            ('remove', 'hr_holidays/static/src/dashboard/**/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'hr_holidays/static/src/views/**/*.dark.scss',
+            'hr_holidays/static/src/dashboard/**/*.dark.scss',
         ],
         'web.tests_assets': [
             'hr_holidays/static/tests/helpers/**/*',
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss b/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss
new file mode 100644
index 00000000000..18f431a8982
--- /dev/null
+++ b/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss
@@ -0,0 +1,6 @@
+// = HR Holidays
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_timeoff_card {
+    --timeOffCard-icon-filter: invert(1) brightness(2);
+}
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.scss b/addons/hr_holidays/static/src/dashboard/time_off_card.scss
index ef4c036603f..ac956af2e34 100644
--- a/addons/hr_holidays/static/src/dashboard/time_off_card.scss
+++ b/addons/hr_holidays/static/src/dashboard/time_off_card.scss
@@ -24,6 +24,7 @@
 
         img {
             height: 30px;
+            filter: var(--timeOffCard-icon-filter);
         }
     }
 
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss
new file mode 100644
index 00000000000..5dc1764395f
--- /dev/null
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss
@@ -0,0 +1,8 @@
+// = HR Holidays
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_calendar_filter {
+    --calendarFilter-icon--plain: url("/hr/static/src/img/icons/plain_dark.svg");
+    --calendarFilter-icon--hatched: url("/hr/static/src/img/icons/hatched_dark.svg");
+    --calendarFilter-icon--line: url("/hr/static/src/img/icons/line_dark.svg");
+}
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
new file mode 100644
index 00000000000..64678abaf28
--- /dev/null
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.scss
@@ -0,0 +1,15 @@
+.o_calendar_filter img {
+    width:30px;
+    
+    &.o_calendar_filter_plain {
+        content:var(--calendarFilter-icon--plain);
+    } 
+
+    &.o_calendar_filter_hatched {
+        content:var(--calendarFilter-icon--hatched);
+    } 
+    
+    &.o_calendar_filter_line {
+        content:var(--calendarFilter-icon--line);
+    } 
+}
diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
index 007373e0bb8..b6af3492bdc 100644
--- a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
+++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.xml
@@ -7,9 +7,9 @@
                 <h5>Legend</h5>
 
                 <div class="d-flex flex-column">
-                    <span><img src="/hr/static/src/img/icons/plain.svg" width="30px"/> Validated</span>
-                    <span><img src="/hr/static/src/img/icons/hatched.svg" width="30px"/> To Approve</span>
-                    <span><img src="/hr/static/src/img/icons/line.svg" width="30px"/> Refused</span>
+                    <span><img class="o_calendar_filter_plain" src="/hr/static/src/img/icons/plain.svg"/> Validated</span>
+                    <span><img class="o_calendar_filter_hatched" src="/hr/static/src/img/icons/hatched.svg"/> To Approve</span>
+                    <span><img class="o_calendar_filter_line" src="/hr/static/src/img/icons/line.svg"/> Refused</span>
                 </div>
             </div>
         </xpath>
diff --git a/addons/hr_holidays/views/hr_views.xml b/addons/hr_holidays/views/hr_views.xml
index 0f7d3fc2171..52d6fbe9beb 100644
--- a/addons/hr_holidays/views/hr_views.xml
+++ b/addons/hr_holidays/views/hr_views.xml
@@ -50,8 +50,7 @@
 
                 <xpath expr="//div[hasclass('o_kanban_card_lower_content')]" position="inside">
                     <t groups="hr_holidays.group_hr_holidays_user">
-                        <div class="row o_kanban_primary_bottom bottom_block"
-                             style="background-color: white"
+                        <div class="row o_kanban_primary_bottom bottom_block bg-view"
                              t-if="record.absence_of_today.raw_value > 0">
                             <div class="col-3">
                                 <a name="%(hr_employee_action_from_department)d" type="action" title="Absent Employee(s), Whose time off requests are either confirmed or validated on today">Absence</a>
diff --git a/addons/lunch/views/lunch_product_views.xml b/addons/lunch/views/lunch_product_views.xml
index 386a7d329e4..9befe87ea1e 100644
--- a/addons/lunch/views/lunch_product_views.xml
+++ b/addons/lunch/views/lunch_product_views.xml
@@ -125,7 +125,7 @@
                                                     <strong><span t-esc="record.name.value"/></strong>
                                                 </div>
                                                 <div class="text-odoo">
-                                                    <div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 border-0 fs-6 badge rounded-pill text-bg-success">
+                                                    <div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 fs-6 badge rounded-pill text-bg-success">
                                                         New
                                                     </div>
                                                     <field name="price" widget="monetary"/>
diff --git a/addons/mail/__manifest__.py b/addons/mail/__manifest__.py
index dbb66178680..5977ca97432 100644
--- a/addons/mail/__manifest__.py
+++ b/addons/mail/__manifest__.py
@@ -204,6 +204,12 @@ For more specific needs, you may also assign custom-defined actions
             'mail/static/src/webclient/commands/*.js',
             'mail/static/src/widgets/*/*.js',
             'mail/static/src/widgets/*/*.scss',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'mail/static/src/components/*/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'mail/static/src/components/*/*.dark.scss',
         ],
         'web.assets_backend_prod_only': [
             'mail/static/src/main.js',
diff --git a/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml b/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml
index 165bc498378..b23b1336b69 100644
--- a/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml
+++ b/addons/mail/static/src/backend_components/activity_list_view/activity_list_view.xml
@@ -9,7 +9,7 @@
                 <div class="d-flex bg-100 py-2 border-bottom">
                     <span class="text-danger fw-bold mx-3">Overdue</span>
                     <span class="flex-grow-1"/>
-                    <span class="badge rounded-pill text-bg-danger border-0 mx-3 align-self-center" t-esc="activityListView.overdueActivityListViewItems.length"/>
+                    <span class="badge rounded-pill text-bg-danger mx-3 align-self-center" t-esc="activityListView.overdueActivityListViewItems.length"/>
                 </div>
                 <t t-foreach="activityListView.overdueActivityListViewItems" t-as="activityListViewItem" t-key="activityListViewItem">
                     <ActivityListViewItem record="activityListViewItem"/>
@@ -19,7 +19,7 @@
                 <div class="d-flex bg-100 py-2 border-bottom">
                     <span class="text-warning fw-bold mx-3">Today</span>
                     <span class="flex-grow-1"/>
-                    <span class="badge rounded-pill text-bg-warning border-0 mx-3 align-self-center" t-esc="activityListView.todayActivityListViewItems.length"/>
+                    <span class="badge rounded-pill text-bg-warning mx-3 align-self-center" t-esc="activityListView.todayActivityListViewItems.length"/>
                 </div>
                 <t t-foreach="activityListView.todayActivityListViewItems" t-as="activityListViewItem" t-key="activityListViewItem">
                     <ActivityListViewItem record="activityListViewItem"/>
@@ -29,7 +29,7 @@
                 <div class="d-flex bg-100 py-2 border-bottom">
                     <span class="text-success fw-bold mx-3">Planned</span>
                     <span class="flex-grow-1"/>
-                    <span class="badge rounded-pill text-bg-success border-0 mx-3 align-self-center" t-esc="activityListView.plannedActivityListViewItems.length"/>
+                    <span class="badge rounded-pill text-bg-success mx-3 align-self-center" t-esc="activityListView.plannedActivityListViewItems.length"/>
                 </div>
                 <t t-foreach="activityListView.plannedActivityListViewItems" t-as="activityListViewItem" t-key="activityListViewItem">
                     <ActivityListViewItem record="activityListViewItem"/>
diff --git a/addons/mail/static/src/components/activity/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_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
index ade3fb81f0a..0c20f845be3 100644
--- a/addons/mail/static/src/components/activity_box/activity_box.xml
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -13,17 +13,17 @@
                     <t t-if="!activityBoxView.isActivityListVisible">
                         <span class="o_ActivityBox_titleBadges ms-2">
                             <t t-if="activityBoxView.chatter.thread.overdueActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-danger">
+                                <span class="o_ActivityBox_titleBadge me-1 badge text-bg-danger">
                                     <t t-esc="activityBoxView.chatter.thread.overdueActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.todayActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-warning">
+                                <span class="o_ActivityBox_titleBadge me-1 badge text-bg-warning">
                                     <t t-esc="activityBoxView.chatter.thread.todayActivities.length"/>
                                 </span>
                             </t>
                             <t t-if="activityBoxView.chatter.thread.futureActivities.length > 0">
-                                <span class="o_ActivityBox_titleBadge me-1 badge border-0 text-bg-success">
+                                <span class="o_ActivityBox_titleBadge me-1 badge text-bg-success">
                                     <t t-esc="activityBoxView.chatter.thread.futureActivities.length"/>
                                 </span>
                             </t>
diff --git a/addons/mail/static/src/components/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.dark.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss
new file mode 100644
index 00000000000..2b58a834947
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss
@@ -0,0 +1,7 @@
+// = Attachment Viewer View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_AttachmentViewer_toolbarButton {
+    --AttachmentViewer_toolbarButton-background-color: #{$o-gray-200};
+}
diff --git a/addons/mail/static/src/components/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.dark.scss b/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss
new file mode 100644
index 00000000000..c507d9a18e5
--- /dev/null
+++ b/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss
@@ -0,0 +1,7 @@
+// = Call Action List View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallActionList_button:not(.btn-danger) {
+    --CallActionList_button-background-color: #{$o-gray-200};
+}
diff --git a/addons/mail/static/src/components/call_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.dark.scss b/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss
new file mode 100644
index 00000000000..69d8a10574a
--- /dev/null
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss
@@ -0,0 +1,7 @@
+// = Call Participant Card View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallParticipantCard_avatarFrame {
+    --CallParticipantCard_avatarFrame-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/call_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.dark.scss b/addons/mail/static/src/components/call_view/call_view.dark.scss
new file mode 100644
index 00000000000..4bbe45efd3d
--- /dev/null
+++ b/addons/mail/static/src/components/call_view/call_view.dark.scss
@@ -0,0 +1,7 @@
+// = Call View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_CallView {
+    --CallView-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/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.dark.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss
new file mode 100644
index 00000000000..5e2c91aa023
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss
@@ -0,0 +1,7 @@
+// = ChatWindow Header View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_ChatWindowHeader {
+    --ChatWindowHeader-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/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/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index 0055eb2964b..7d149bec206 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.Chatter" owl="1">
         <t t-if="chatter">
-            <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-white" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_Chatter position-relative flex-grow-1 flex-column d-flex w-100 bg-view" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="chatter.dropZoneView">
                     <DropZone
                         className="'o_Chatter_dropZone'"
diff --git a/addons/mail/static/src/components/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/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
index d6a4c02c44d..1d9527d27c3 100644
--- a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
@@ -15,7 +15,7 @@
             </div>
             <div t-attf-class="o_DiscussSidebarMailbox_item flex-grow-1 {{ discussSidebarMailboxView.mailbox.counter === 0 ? 'me-3': '' }}"/>
             <t t-if="discussSidebarMailboxView.mailbox.counter > 0">
-                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge rounded-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'text-bg-primary' }} ms-1 me-3 border-0">
+                <div t-attf-class="o_DiscussSidebarMailbox_counter o_DiscussSidebarMailbox_item badge rounded-pill {{ discussSidebarMailboxView.mailbox === messaging.starred ? 'bg-400 text-light' : 'text-bg-primary' }} ms-1 me-3">
                     <t t-esc="discussSidebarMailboxView.mailbox.counter"/>
                 </div>
             </t>
diff --git a/addons/mail/static/src/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.dark.scss b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss
new file mode 100644
index 00000000000..03421537191
--- /dev/null
+++ b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss
@@ -0,0 +1,7 @@
+// = Emoji Category Bar View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_EmojiCategoryBarView {
+    --EmojiCategoryBarView-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/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.dark.scss b/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss
new file mode 100644
index 00000000000..3c30c5e37fe
--- /dev/null
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss
@@ -0,0 +1,7 @@
+// = Message Action List View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_MessageActionList {
+    --MessageActionList-background-color: #{$o-gray-100};
+}
diff --git a/addons/mail/static/src/components/message_action_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.dark.scss b/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss
new file mode 100644
index 00000000000..f0108c8bd0e
--- /dev/null
+++ b/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss
@@ -0,0 +1,7 @@
+// = Message Action View
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_MessageActionView {
+    --MessageActionView-background-color--hover: #{$o-gray-300};
+}
diff --git a/addons/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_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index 28e560a5bfd..52e8acd10d5 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.MessageList" owl="1">
         <t t-if="messageListView">
-            <div class="o_MessageList d-flex flex-column bg-white overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
+            <div class="o_MessageList bg-view d-flex flex-column overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
                 <!-- No result messages -->
                 <t t-if="messageListView.threadViewOwner.threadCache.orderedNonEmptyMessages.length === 0">
                     <div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted fst-italic">
diff --git a/addons/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/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index 4ab6f815766..9a08ac3ee9a 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -36,7 +36,7 @@
 
                 <li role="menuitem" t-attf-class="list-group-item list-group-item list-group-item-light d-flex justify-content-between align-items-center o_activity_color_{{key}} {{!key_first ? 'mt-2' : ''}}">
                     <strong><t t-esc="widget.selection[key]"/></strong>
-                    <span t-attf-class="badge rounded-pill bg-{{contextual_class}} border-0 me-0"><t t-esc="logs.length"/></span>
+                    <span t-attf-class="badge rounded-pill bg-{{contextual_class}} me-0"><t t-esc="logs.length"/></span>
                 </li>
                 <t t-foreach="logs" t-as="log">
                     <t t-set="edit_class" t-value="'o_edit_activity'"/>
diff --git a/addons/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/mass_mailing/views/mailing_templates_portal_layouts.xml b/addons/mass_mailing/views/mailing_templates_portal_layouts.xml
index c0659daafbf..600d026fb6f 100644
--- a/addons/mass_mailing/views/mailing_templates_portal_layouts.xml
+++ b/addons/mass_mailing/views/mailing_templates_portal_layouts.xml
@@ -4,8 +4,14 @@
     <template id="mass_mailing.layout" name="Mass Mailing Layout">
         <t t-call="web.layout">
             <t t-set="head">
-                <t t-call-assets="web.assets_common"/>
-                <t t-call-assets="web.assets_backend"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common"/>
+                    <t t-call-assets="web.dark_mode_assets_backend"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common"/>
+                    <t t-call-assets="web.assets_backend"/>
+                </t>
             </t>
             <body class="o_white_body">
                 <header>
diff --git a/addons/point_of_sale/views/pos_assets_qunit.xml b/addons/point_of_sale/views/pos_assets_qunit.xml
index 35818f16fbd..f494500035c 100644
--- a/addons/point_of_sale/views/pos_assets_qunit.xml
+++ b/addons/point_of_sale/views/pos_assets_qunit.xml
@@ -2,7 +2,12 @@
 <odoo>
 
 <template id="point_of_sale.qunit_suite_assets">
-    <t t-call-assets="web.assets_backend" t-js="false" />
+    <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+        <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+    </t>
+    <t t-else="">
+        <t t-call-assets="web.assets_backend" t-js="false"/>
+    </t>
     <t t-call-assets="point_of_sale.tests_assets" t-js="false"/>
     <t t-call-assets="point_of_sale.tests_assets" t-css="false"/>
     <style>
diff --git a/addons/point_of_sale/views/res_config_settings_views.xml b/addons/point_of_sale/views/res_config_settings_views.xml
index 98c329073c1..3cbbe07b377 100644
--- a/addons/point_of_sale/views/res_config_settings_views.xml
+++ b/addons/point_of_sale/views/res_config_settings_views.xml
@@ -19,7 +19,7 @@
                 </t>
 
                 <div class="app_settings_block" data-string="Point of sale" string="Point of Sale" data-key="point_of_sale" groups="point_of_sale.group_pos_manager">
-                    <div class="app_settings_header pt-1 pb-1" style="background-color: #FEF0D0;">
+                    <div class="app_settings_header pt-1 pb-1 bg-warning bg-opacity-25">
                         <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
                             <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
                                 <div class="content-group">
diff --git a/addons/project/static/src/components/project_control_panel/project_control_panel.xml b/addons/project/static/src/components/project_control_panel/project_control_panel.xml
index 7d97a0b7e5c..0d4555ec9ac 100644
--- a/addons/project/static/src/components/project_control_panel/project_control_panel.xml
+++ b/addons/project/static/src/components/project_control_panel/project_control_panel.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="project.ProjectControlPanelContentBadge" owl="1">
-        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ms-2 bg-white" data-hotkey="y">
+        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ms-2 bg-view" data-hotkey="y">
             <span t-attf-class="o_status_bubble o_color_bubble_{{data.color}}"/>
             <span t-att-class="'fw-normal ms-1' + (data.color === 0 ? ' text-muted' : '')" t-esc="data.status"/>
         </t>
diff --git a/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml b/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml
index a7a32ce0554..82cba1e9723 100644
--- a/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml
+++ b/addons/project/static/src/components/project_right_side_panel/project_right_side_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="project.ProjectRightSidePanel" owl="1">
-        <div t-if="projectId" class="o_rightpanel pt-0 bg-white border-start overflow-auto">
+        <div t-if="projectId" class="o_rightpanel pt-0 bg-view border-start overflow-auto">
             <ProjectRightSidePanelSection 
                 name="'stat_buttons'"
                 header="false"
diff --git a/addons/purchase/static/src/views/purchase_dashboard.xml b/addons/purchase/static/src/views/purchase_dashboard.xml
index 01f59417263..aa9b434c27a 100644
--- a/addons/purchase/static/src/views/purchase_dashboard.xml
+++ b/addons/purchase/static/src/views/purchase_dashboard.xml
@@ -11,17 +11,17 @@
                         <div class="g-col-9 g-col-sm-10 grid gap-1">
                             <div class="g-col-4 p-0" t-on-click="setSearchContext" title="All Draft RFQs" filter_name="draft_rfqs">
                                 <a href="#" class="btn btn-primary w-100 h-100 border-0 rounded-0 text-capitalize fw-normal">
-                                    <h2 t-out="purchaseData['all_to_send']"/>To Send
+                                    <div class="fs-2" t-out="purchaseData['all_to_send']"/>To Send
                                 </a>
                             </div>
                             <div class="g-col-4 p-0" t-on-click="setSearchContext" title="All Waiting RFQs" filter_name="waiting_rfqs">
                                 <a href="#" class="btn btn-primary w-100 h-100 border-0 rounded-0 text-capitalize fw-normal">
-                                    <h2 t-out="purchaseData['all_waiting']"/>Waiting
+                                    <div class="fs-2" t-out="purchaseData['all_waiting']"/>Waiting
                                 </a>
                             </div>
                             <div class="g-col-4 p-0" t-on-click="setSearchContext" title="All Late RFQs" filter_name="late_rfqs">
                                 <a href="#" class="btn btn-primary w-100 h-100 border-0 rounded-0 text-capitalize fw-normal">
-                                    <h2 t-out="purchaseData['all_late']"/>Late
+                                    <div class="fs-2" t-out="purchaseData['all_late']"/>Late
                                 </a>
                             </div>
                         </div>
diff --git a/addons/rating/views/rating_rating_views.xml b/addons/rating/views/rating_rating_views.xml
index ab55e80e50b..2e67a51ab29 100644
--- a/addons/rating/views/rating_rating_views.xml
+++ b/addons/rating/views/rating_rating_views.xml
@@ -93,7 +93,7 @@
                             <div class="oe_kanban_global_click d-flex align-items-center justify-content-center">
                                 <div class="row oe_kanban_details">
                                     <div class="col-4 my-auto">
-                                        <field name="rating_image" widget="image"/>
+                                        <field name="rating_image" widget="image" class="bg-view" />
                                     </div>
                                     <div class="col-8 ps-1">
                                         <strong>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
index 22b52a9c03d..5d504f01bc6 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
@@ -24,7 +24,7 @@
                     groups="getDashboardGroups()"/>
             </t>
             <t t-else="">
-                <div class="o_spreadsheet_dashboard_search_panel o_search_panel flex-grow-0 border-end flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-white overflow-auto">
+                <div class="o_spreadsheet_dashboard_search_panel o_search_panel flex-grow-0 border-end flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto">
                     <section t-foreach="getDashboardGroups()" t-as="group" t-key="group.id" class="o_search_panel_section o_search_panel_category">
                         <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase o_cursor_default user-select-none">
                             <b t-esc="group.name"/>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
index a1520cc0893..f76c6f53b6a 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
@@ -11,7 +11,7 @@
                         </button>
                     </div>
                     <div class="o_mobile_search_content">
-                        <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto">
+                        <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto">
                             <section t-foreach="props.groups" t-as="group" t-key="group.id" class="o_search_panel_section o_search_panel_category">
                                 <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase cursor-default">
                                     <b t-esc="group.name"/>
diff --git a/addons/stock/static/src/scss/report_stock_forecasted.scss b/addons/stock/static/src/scss/report_stock_forecasted.scss
index 335e077614d..c66367e5433 100644
--- a/addons/stock/static/src/scss/report_stock_forecasted.scss
+++ b/addons/stock/static/src/scss/report_stock_forecasted.scss
@@ -8,9 +8,6 @@
         }
     }
 
-    .o_forecasted_row {
-        background-color: #dee2e6;
-    }
 
     .o_priority {
         display: inline-block;
@@ -29,5 +26,5 @@
     }
     .table td {
         vertical-align: middle;
-    } 
+    }
 }
diff --git a/addons/survey/static/src/img/trophy-solid.svg b/addons/survey/static/src/img/trophy-solid.svg
index 543ed227116..4e149d2b9f5 100644
--- a/addons/survey/static/src/img/trophy-solid.svg
+++ b/addons/survey/static/src/img/trophy-solid.svg
@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trophy" class="svg-inline--fa fa-trophy fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg>
\ No newline at end of file
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trophy" class="svg-inline--fa fa-trophy fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#9DA1AA" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg>
diff --git a/addons/survey/static/src/scss/survey_survey_views.scss b/addons/survey/static/src/scss/survey_survey_views.scss
index 55b90d12206..8c538050f8f 100644
--- a/addons/survey/static/src/scss/survey_survey_views.scss
+++ b/addons/survey/static/src/scss/survey_survey_views.scss
@@ -3,8 +3,8 @@
     // Common: left semi-trophy icon for certifications
     .o_survey_kanban_card_certification {
         background-image:
-            linear-gradient(rgba(255,255,255,.9),
-                            rgba(255,255,255,.9)),
+            linear-gradient(rgba($o-view-background-color,.75),
+                            rgba($o-view-background-color,.75)),
             url(/survey/static/src/img/trophy-solid.svg);
         background-repeat: no-repeat;
         background-position: bottom 6px left -45px;
@@ -31,9 +31,6 @@
             width: 100%;
             margin: 0px;
             border-top: 0px !important;
-            &:first-child {
-                border-bottom: 1px solid #dee2e6 !important;
-            }
         }
     }
 
@@ -65,8 +62,8 @@
 
         // Left semi-trophy icon for certifications: tweak display for list view
         .o_survey_kanban_card_certification {
-            background-position: bottom 6px left -30px;
-            background-size: 100%, 65px;
+            background-position: center left -35px;
+            background-size: auto 75%;
         }
 
         // Due to activity widget crashing if present twice, have to set absolute and tweak
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index d7a1518906f..7cdcf22df13 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -515,6 +515,19 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/webclient/actions/reports/reset.min.css',
         ],
 
+        # ---------------------------------------------------------------------
+        # COLOR SCHEME BUNDLES
+        # ---------------------------------------------------------------------
+        "web.dark_mode_assets_common": [
+            ('include', 'web.assets_common'),
+        ],
+        "web.dark_mode_assets_backend": [
+            ('include', 'web.assets_backend'),
+        ],
+        "web.dark_mode_variables": [
+            ('before', 'base/static/src/scss/onboarding.variables.scss', 'base/static/src/scss/onboarding.variables.dark.scss'),
+        ],
+
         # ---------------------------------------------------------------------
         # SUB BUNDLES
         # ---------------------------------------------------------------------
@@ -531,6 +544,7 @@ This module provides the core of the Odoo Web Client.
         'web._assets_primary_variables': [
             'web/static/src/scss/primary_variables.scss',
             'web/static/src/**/**/*.variables.scss',
+            'base/static/src/scss/onboarding.variables.scss',
         ],
         'web._assets_secondary_variables': [
             'web/static/src/scss/secondary_variables.scss',
diff --git a/addons/website/static/src/img/odoo_logo.svg b/addons/web/static/img/odoo_logo.svg
similarity index 100%
rename from addons/website/static/src/img/odoo_logo.svg
rename to addons/web/static/img/odoo_logo.svg
diff --git a/addons/web/static/img/odoo_logo_dark.svg b/addons/web/static/img/odoo_logo_dark.svg
new file mode 100644
index 00000000000..ead69d7324d
--- /dev/null
+++ b/addons/web/static/img/odoo_logo_dark.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="621px" height="196px" viewBox="0 0 621 196" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Odoo Logo</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="odoo_logo" fill-rule="nonzero">
+            <path d="M546,196 C504.579,196 471,162.421 471,121 C471,79.579 504.579,46 546,46 C587.421,46 621,79.579 621,121 C621,162.421 587.421,196 546,196 Z M546,165 C570.3,165 590,145.3 590,121 C590,96.7 570.3,77 546,77 C521.7,77 502,96.7 502,121 C502,145.3 521.7,165 546,165 Z M389,196 C347.579,196 314,162.421 314,121 C314,79.579 347.579,46 389,46 C430.421,46 464,79.579 464,121 C464,162.421 430.421,196 389,196 Z M389,165 C413.3,165 433,145.3 433,121 C433,96.7 413.3,77 389,77 C364.7,77 345,96.7 345,121 C345,145.3 364.7,165 389,165 Z M307,120 C307,161.935 273.408,196 231.991,196 C190.575,196 157,162.005 157,120.07 C157,78.134 187.5,46 231.991,46 C248.433,46 263.638,49.496 275.998,58.58 L276,15.09 C276,6.756 283.27,0 291.5,0 C299.728,0 307,6.762 307,15.09 L307,120 Z M232,165 C256.3,165 276,145.3 276,121 C276,96.7 256.3,77 232,77 C207.7,77 188,96.7 188,121 C188,145.3 207.7,165 232,165 Z" fill="#FFFFFF"></path>
+            <path d="M75,196 C33.579,196 0,162.421 0,121 C0,79.579 33.579,46 75,46 C116.421,46 150,79.579 150,121 C150,162.421 116.421,196 75,196 Z M75,165 C99.3,165 119,145.3 119,121 C119,96.7 99.3,77 75,77 C50.7,77 31,96.7 31,121 C31,145.3 50.7,165 75,165 Z" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
diff --git a/addons/web/static/lib/select2/select2-spinner-dark.gif b/addons/web/static/lib/select2/select2-spinner-dark.gif
new file mode 100644
index 00000000000..574f55233d6
Binary files /dev/null and b/addons/web/static/lib/select2/select2-spinner-dark.gif differ
diff --git a/addons/web/static/lib/tempusdominus/tempusdominus.scss b/addons/web/static/lib/tempusdominus/tempusdominus.scss
index c38f1e87fcb..b5de3afbdf3 100644
--- a/addons/web/static/lib/tempusdominus/tempusdominus.scss
+++ b/addons/web/static/lib/tempusdominus/tempusdominus.scss
@@ -1,14 +1,14 @@
-$bs-datetimepicker-timepicker-font-size: 1.2em !default;
-$bs-datetimepicker-active-bg: $blue !default;
-$bs-datetimepicker-active-color: $white !default;
-$bs-datetimepicker-border-radius: $border-radius !default;
-$bs-datetimepicker-btn-hover-bg: $gray-200 !default;
-$bs-datetimepicker-disabled-color: $gray-600 !default;
-$bs-datetimepicker-alternate-color: $gray-600 !default;
-$bs-datetimepicker-secondary-border-color: #ccc !default;
-$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
-$bs-datetimepicker-primary-border-color: white !default;
-$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
+$bs-datetimepicker-timepicker-font-size: var(--bs-datetimepicker-timepicker-font-size, 1.2em) !default;
+$bs-datetimepicker-active-bg: var(--bs-datetimepicker-active-bg, #{$blue}) !default;
+$bs-datetimepicker-active-color: var(--bs-datetimepicker-active-color, #{$white}) !default;
+$bs-datetimepicker-border-radius: var(--bs-datetimepicker-border-radius, #{$border-radius}) !default;
+$bs-datetimepicker-btn-hover-bg: var(--bs-datetimepicker-btn-hover-bg, #{$gray-200}) !default;
+$bs-datetimepicker-disabled-color: var(--bs-datetimepicker-disabled-color, #{$gray-600}) !default;
+$bs-datetimepicker-alternate-color: var(--bs-datetimepicker-alternate-color, #{$gray-600}) !default;
+$bs-datetimepicker-secondary-border-color: var(--bs-datetimepicker-secondary-border-color, #ccc) !default;
+$bs-datetimepicker-secondary-border-color-rgba: var(--bs-datetimepicker-secondary-border-color-rgba, rgba(0, 0, 0, 0.2)) !default;
+$bs-datetimepicker-primary-border-color: var(--bs-datetimepicker-primary-border-color, white) !default;
+$bs-datetimepicker-text-shadow: var(--bs-datetimepicker-text-shadow, 0 -1px 0 rgba(0, 0, 0, 0.25)) !default;
 
 .bootstrap-datetimepicker-widget {
     list-style: none;
diff --git a/addons/web/static/src/core/colorlist/colorlist.scss b/addons/web/static/src/core/colorlist/colorlist.scss
index 56c488ca107..cd28f4e57ab 100644
--- a/addons/web/static/src/core/colorlist/colorlist.scss
+++ b/addons/web/static/src/core/colorlist/colorlist.scss
@@ -1,7 +1,7 @@
 .o_colorlist {
     button {
-        border: 1px solid white;
-        box-shadow: 0 0 0 1px #c9ccd2;
+        border: 1px solid $white;
+        box-shadow: 0 0 0 1px $gray-500;
         width: 22px;
         height: 17px;
     }
diff --git a/addons/web/static/src/core/errors/error_dialogs.xml b/addons/web/static/src/core/errors/error_dialogs.xml
index 94cac028eb4..3e5fbf2bfb1 100644
--- a/addons/web/static/src/core/errors/error_dialogs.xml
+++ b/addons/web/static/src/core/errors/error_dialogs.xml
@@ -58,7 +58,7 @@
 
 
         <button class="btn btn-link" t-on-click="() => { state.showTraceback = !state.showTraceback }">See details</button>
-        <div t-if="state.showTraceback and (props.name or props.message)" class="alert clearfix" style="background-color:#ececec;" role="alert">
+        <div t-if="state.showTraceback and (props.name or props.message)" class="alert alert-info bg-100 clearfix" role="alert">
           <code t-if="props.name" t-esc="props.name"></code>
           <p t-if="props.message" t-esc="props.message"></p>
         </div>
diff --git a/addons/web/static/src/core/pager/pager.xml b/addons/web/static/src/core/pager/pager.xml
index dd61398ef58..67cc4a26b07 100644
--- a/addons/web/static/src/core/pager/pager.xml
+++ b/addons/web/static/src/core/pager/pager.xml
@@ -8,7 +8,7 @@
                     <input type="text" class="o_pager_value o_input d-inline-block w-auto text-end" size="7" t-ref="autofocus" t-att-value="value" t-on-blur="onInputBlur" t-on-change="onInputChange" t-on-keydown.stop="onInputKeydown" />
                 </t>
                 <t t-else="">
-                    <span class="o_pager_value d-inline-block border-bottom border-white" t-esc="value" t-on-click="onValueClick" />
+                    <span class="o_pager_value d-inline-block border-bottom border-transparent" t-esc="value" t-on-click="onValueClick" />
                 </t>
                 <span> / </span>
                 <t t-if="props.updateTotal">
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index d6d6b4e3312..29024900303 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -19,7 +19,7 @@ odoo.define('web.basic_fields_owl', function (require) {
      */
     class FieldBadge extends AbstractField {
         _getClassFromDecoration(decoration) {
-            return `bg-${decoration.split('-')[1]}`;
+            return `text-bg-${decoration.split('-')[1]}`;
         }
     }
     FieldBadge.description = _lt("Badge");
diff --git a/addons/web/static/src/legacy/scss/datepicker.scss b/addons/web/static/src/legacy/scss/datepicker.scss
index 7c48ca0f14d..36676c6b127 100644
--- a/addons/web/static/src/legacy/scss/datepicker.scss
+++ b/addons/web/static/src/legacy/scss/datepicker.scss
@@ -49,13 +49,16 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
 }
 
 .bootstrap-datetimepicker-widget .datepicker table {
+    --datepicker-color: #{map-get($grays, '900')};
+    --datepicker__thead-bg: #{map-get($grays, '100')};
+
     th, td {
         border-radius: 0;
         border-bottom-width: $border-width;
         width: percentage(1/8);
         height: 30px;
         line-height: 30px;
-        color: map-get($grays, '900');
+        color: var(--datepicker-color);
 
         &.prev, &.next, &.old, &.new {
             @include o-hover-opacity(.5);
@@ -72,7 +75,7 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
     }
 
     thead tr:nth-child(2) th, td.cw {
-        background-color: map-get($grays, '100');
+        background-color: var(--datepicker__thead-bg);
         font-size: $font-size-sm;
         font-weight: $font-weight-bold;
         color: $o-main-text-color;
@@ -102,8 +105,8 @@ div.dropdown-menu.bootstrap-datetimepicker-widget {
             margin: 0;
             border-radius: 0;
             color: $o-main-text-color;
-            border-top: 1px solid $border-color;
-            box-shadow: 0 1px 0 $border-color; // overlaps with main box border
+            border-top: 1px solid var(--datepicker-border-color, #{$border-color});
+            box-shadow: 0 1px 0 var(--datepicker-border-color, #{$border-color}); // overlaps with main box border
 
             &.primary {
                 color: $o-brand-primary;
diff --git a/addons/web/static/src/legacy/scss/daterangepicker.scss b/addons/web/static/src/legacy/scss/daterangepicker.scss
index cdcdfc82342..2a750888305 100644
--- a/addons/web/static/src/legacy/scss/daterangepicker.scss
+++ b/addons/web/static/src/legacy/scss/daterangepicker.scss
@@ -1,19 +1,63 @@
 // Match DateTimePicker styling
 
-.daterangepicker {
+.daterangepicker.show-calendar {
+    --daterangepicker-border: #{$dropdown-border-width} solid #{$dropdown-border-color};
+    --daterangepicker-border-radius: #{$dropdown-border-radius};
+    --daterangepicker-bg: #{$dropdown-bg};
+    --daterangepicker-color: #{map-get($grays, '900')};
+
+    @if $enable-shadows {
+        --daterangepicker-box-shadow: #{$dropdown-box-shadow};
+    }
+
+    --daterangepicker__table-bg: #{$table-bg};
+    --daterangepicker__thead-bg: #{map-get($grays, '100')};
+
+    --daterangepicker__cell-border-color: #{$table-border-color};
+    --daterangepicker__cell-bg--hover: #{map-get($grays, '100')};
+
+    --daterangepicker__select-bg: #{$form-select-bg};
+    --daterangepicker__select-border-color: #{$input-border-color};
+    --daterangepicker__select-color: #{$form-select-color};
+
+
+    border: var(--daterangepicker-border);
+    border-radius: var(--daterangepicker-border-radius);
+    background-color: var(--daterangepicker-bg);
+    box-shadow: var(--daterangepicker-box-shadow);
     font-family: inherit;
 
+    &:before {
+        border-bottom-color: var(--daterangerpicker__arrow-border-color, #{$dropdown-border-color});
+    }
+    
+    &:after {
+        border-bottom-color: var(--daterangerpicker__arrow-background-color, #{$dropdown-bg});
+    }
+
     .calendar-table {
+        border: 0;
+        background-color: var(--daterangepicker__table-bg);
+
+        .next span, .prev span {
+            border-color: currentColor;
+        }
+
         td, th {
-            border-bottom-color: $table-border-color;
+            border-bottom-color: var(--daterangepicker__cell-border-color);
 
             &, &.start-date.end-date {
                 border-radius: 0;
             }
 
             &:not(.active) {
-                color: map-get($grays, '900');
+                color: var(--daterangepicker-color);
+
             }
+            &.available:hover {
+                background-color: var(--daterangepicker__cell-bg--hover);
+            }
+
 
             &.prev, &.next, &.off.ends {
                 @include o-hover-opacity(.5);
@@ -46,11 +90,17 @@
             }
 
             &.active,
-            &.active:hover {
+            &.active:hover,
+            &.in-range:hover {
                 background-color: $o-brand-odoo;
                 color: $white;
                 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
             }
+
+            &.off {
+                background-color: transparent;
+            }
+
         }
 
         thead tr {
@@ -63,7 +113,7 @@
                 }
             }
             &:nth-child(2) th {
-                background-color: map-get($grays, '100');
+                background-color: var(--daterangepicker__thead-bg);
                 font-size: $font-size-sm;
                 font-weight: $font-weight-bold;
                 color: $o-main-text-color;
@@ -74,14 +124,26 @@
     .calendar-time select {
         &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
             display: initial;
+            border-color: var(--daterangepicker__select-border-color);
+            background-color: var(--daterangepicker__select-bg);
+            color: var(--daterangepicker__select-color);
             -webkit-appearance: menulist-button;
             -moz-appearance: menulist-button;
             appearance: menulist-button;
         }
     }
 
-    .drp-buttons .drp-selected {
-        display: none;
+    .drp-buttons {
+        border-top: 0;
+
+        .btn {
+            text-transform: uppercase;
+            font-weight: $btn-font-weight;
+        }
+
+        .drp-selected {
+            display: none;
+        }
     }
 
     @include media-breakpoint-down(sm) {
diff --git a/addons/web/static/src/legacy/scss/domain_selector.scss b/addons/web/static/src/legacy/scss/domain_selector.scss
index 1a908719ace..04423987177 100644
--- a/addons/web/static/src/legacy/scss/domain_selector.scss
+++ b/addons/web/static/src/legacy/scss/domain_selector.scss
@@ -69,7 +69,7 @@
                 display: block;
                 margin-top: 16px;
                 padding: 8px 10px 12px;
-                background: map-get($grays, '900');
+                background: var(--DomainDebugContainer-background-colomap-get, #{$o-gray-900});
                 color: rgba(white, 0.5);
                 font-family: monospace;
                 font-weight: normal;
diff --git a/addons/web/static/src/legacy/scss/dropdown.scss b/addons/web/static/src/legacy/scss/dropdown.scss
index d08a4b6cd0b..e3d0fadb52e 100644
--- a/addons/web/static/src/legacy/scss/dropdown.scss
+++ b/addons/web/static/src/legacy/scss/dropdown.scss
@@ -3,13 +3,23 @@
 .ui-widget.ui-autocomplete {
     top: 0;       // Compute initial position
     min-width: 0; // Compute initial width
+    color: $dropdown-color;
 
     // Needed because .ui-widget are rendered at a
     // lower stacking contex compared to modals.
     z-index: $zindex-modal + 1;
 
+    &.ui-widget-content {
+        background-color: $dropdown-bg;
+        border: $dropdown-border-width solid $dropdown-border-color;
+        @include border-radius($dropdown-border-radius);
+        @include box-shadow($dropdown-box-shadow);
+    }
+
     .ui-menu-item {
         > a {
+            @include o-hover-text-color($dropdown-link-color, $dropdown-link-hover-color);
+
             &.dropdown-item {
                 padding: $o-dropdown-vpadding $o-dropdown-hpadding;
             }
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 7fffb1ba174..dfcd3fc38d8 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/addons/web/static/src/legacy/scss/fields.scss
@@ -35,7 +35,7 @@
     border:$input-border-width solid var(--o-input-border-color);
     border-width: 0 0 $input-border-width 0;
     padding: $o-input-padding-y $o-input-padding-x;
-    background-color: var(--o-input-background-color, unset);
+    background-color: var(--o-input-background-color, #{$input-bg});
 
     // -- Nested o_input(s)
     .o_input {
@@ -163,7 +163,8 @@
         }
         .o_m2o_avatar_empty {
             display: block;
-            background-color: #e9ecef;
+            background: $o-black;
+            opacity: .1;
         }
     }
 
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 4dc3a0af798..d538df4377d 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -407,7 +407,7 @@
         }
 
         .oe_kanban_text_red {
-            color: #A61300;
+            color: o-text-color('danger');
             font-weight: $font-weight-bold;
         }
 
diff --git a/addons/web/static/src/legacy/scss/list_view.scss b/addons/web/static/src/legacy/scss/list_view.scss
index d6ee00bfa2c..ee282697106 100644
--- a/addons/web/static/src/legacy/scss/list_view.scss
+++ b/addons/web/static/src/legacy/scss/list_view.scss
@@ -274,7 +274,7 @@
         .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier) {
             position: relative; // for o_field_translate
             &:not(.o_handle_cell) {
-                background-color: white;
+                background-color: $o-view-background-color;
             }
             .o_input {
                 border: none;
diff --git a/addons/web/static/src/legacy/scss/modal.scss b/addons/web/static/src/legacy/scss/modal.scss
index 98513ed65bb..d2a411ab3d0 100644
--- a/addons/web/static/src/legacy/scss/modal.scss
+++ b/addons/web/static/src/legacy/scss/modal.scss
@@ -86,9 +86,10 @@
                     border: none;
 
                     .modal-header {
-                        background: $o-brand-odoo;
+                        background: $o-navbar-background;
+
                         .modal-title, .o_subtitle, button.close {
-                            color: white;
+                            color: $o-navbar-entry-color;
                         }
                     }
 
diff --git a/addons/web/static/src/legacy/scss/name_and_signature.scss b/addons/web/static/src/legacy/scss/name_and_signature.scss
index b2b723e187c..76c04b59f27 100644
--- a/addons/web/static/src/legacy/scss/name_and_signature.scss
+++ b/addons/web/static/src/legacy/scss/name_and_signature.scss
@@ -3,6 +3,10 @@
     position: relative;
 }
 
+.o_web_sign_signature_group {
+    background: #ffffff;
+}
+
 /* Signature Dialog */
 // The .card selector is important to make sure the position absolute will take
 // priority over the position relative of the card.
diff --git a/addons/web/static/src/legacy/scss/popover.scss b/addons/web/static/src/legacy/scss/popover.scss
index f115f8c5ad2..5ada57d5c1d 100644
--- a/addons/web/static/src/legacy/scss/popover.scss
+++ b/addons/web/static/src/legacy/scss/popover.scss
@@ -57,7 +57,6 @@
     position: fixed;
     z-index: 1060;
     border: 1px solid $border-color;
-    background-color: #fff;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 
     .o_popover_header {
diff --git a/addons/web/static/src/legacy/scss/progress_bar.scss b/addons/web/static/src/legacy/scss/progress_bar.scss
index 71af77082f6..32668382af0 100644
--- a/addons/web/static/src/legacy/scss/progress_bar.scss
+++ b/addons/web/static/src/legacy/scss/progress_bar.scss
@@ -14,10 +14,10 @@
         height: 15px;
         vertical-align: middle;
 
-        border: 1px solid lighten($o-brand-secondary, 25%);
+        border: 1px solid $o-gray-300;
         overflow: hidden;
 
-        background-color: white;
+        background-color: $o-view-background-color;
         &.o_progress_overflow {
             background-color: $o-brand-secondary;
         }
diff --git a/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss b/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
index 0c02a66f4dc..9a2e9718dfd 100644
--- a/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
+++ b/addons/web/static/src/legacy/scss/tempusdominus_overridden.scss
@@ -3,7 +3,6 @@ $bs-datetimepicker-active-bg: $o-brand-odoo;
 $bs-datetimepicker-active-color: $white;
 $bs-datetimepicker-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 $bs-datetimepicker-secondary-border-color: $dropdown-border-color;
-$bs-datetimepicker-secondary-border-color-rgba: $dropdown-border-color;
 
 // TODO remove sr-only when TempusDominus is upgraded to 6+
 .sr-only {
diff --git a/addons/web/static/src/legacy/scss/tooltip.scss b/addons/web/static/src/legacy/scss/tooltip.scss
index eaae68362f1..68d6e721d89 100644
--- a/addons/web/static/src/legacy/scss/tooltip.scss
+++ b/addons/web/static/src/legacy/scss/tooltip.scss
@@ -11,7 +11,7 @@
         background-color: $o-tooltip-background-color;
         color: $o-tooltip-color;
         border-radius: $border-radius;
-        box-shadow: 0px 0px 1px 1px $o-brand-secondary;
+        box-shadow: 0px 0px 1px 1px $popover-border-color;
         margin: 5px;
         border-color: $o-tooltip-color;
 
@@ -57,11 +57,11 @@
         .tooltip-arrow {
             top: $tooltip-arrow-height;
             &::before {
-                border-bottom-color: $o-tooltip-color;
+                border-bottom-color: $popover-border-color;
                 bottom: 0;
             }
             &::after {
-                border-bottom-color: $o-tooltip-title-background-color;
+                border-bottom-color: $o-tooltip-background-color;
                 bottom: -1px;
             }
         }
@@ -70,11 +70,11 @@
         .tooltip-arrow {
             bottom: $tooltip-arrow-height;
             &::before {
-                border-top-color: $o-tooltip-color;
+                border-top-color: $popover-border-color;
                 top: 0;
             }
             &::after {
-                border-top-color: $o-tooltip-arrow-color;
+                border-top-color: $o-tooltip-background-color;
                 top: -1px;
             }
         }
@@ -83,11 +83,11 @@
         .tooltip-arrow {
             right: $tooltip-arrow-height;
             &::before {
-                border-left-color: $o-tooltip-color;
+                border-left-color: $popover-border-color;
                 left: 0;
             }
             &::after {
-                border-left-color: $o-tooltip-arrow-color;
+                border-left-color: $o-tooltip-background-color;
                 left: -1px;
             }
         }
@@ -96,11 +96,11 @@
         .tooltip-arrow {
             left: $tooltip-arrow-height;
             &::before {
-                border-right-color: $o-tooltip-color;
+                border-right-color: $popover-border-color;
                 right: 0;
             }
             &::after {
-                border-right-color: $o-tooltip-arrow-color;
+                border-right-color: $o-tooltip-background-color;
                 right: -1px;
             }
         }
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index fdd48a12852..de650a25106 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -312,7 +312,7 @@
 }
 @mixin o-kanban-dropdown-open {
     position: relative;
-    background: white;
+    background: $dropdown-bg;
     border-color: $border-color;
     z-index: $zindex-dropdown + 1;
 }
diff --git a/addons/web/static/src/legacy/scss/views.scss b/addons/web/static/src/legacy/scss/views.scss
index cbf0d96092d..943f6ed0e70 100644
--- a/addons/web/static/src/legacy/scss/views.scss
+++ b/addons/web/static/src/legacy/scss/views.scss
@@ -50,9 +50,13 @@
 
 // No content helper
 .o_view_nocontent {
-    @include o-position-absolute(30%, 0, 0, 0);
+    @include o-position-absolute(0, 0, 0, 0);
     pointer-events: none;
     z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image:  radial-gradient(at 50% 50%, #{$o-view-background-color} 0px, #{rgba($o-view-background-color, 0.5)} 100%);
 
     .o_nocontent_help {
         @include o-nocontent-empty;
@@ -100,8 +104,8 @@
 
     .o_nocontent_help {
         border-radius: 20%;
-        background-color: #f9f9f9;
-        box-shadow: 0 0 120px 100px #f9f9f9;
+        background-color: $o-view-background-color;
+        box-shadow: 0 0 120px 100px $o-view-background-color;
     }
 
     .o_sample_data_disabled {
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 1ba74e6c8c7..f5c64a26020 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -1016,7 +1016,7 @@
     <div t-if="widget.mode === 'edit'" class="o_field_widget o_field_many2one" aria-atomic="true">
         <div class="o_field_many2one_selection">
             <div class="o_input_dropdown">
-                <input type="text" class="o_input"
+                <input type="text" class="o_input form-control"
                     t-att-barcode_events="widget.nodeOptions.barcode_events"
                     t-att-tabindex="widget.attrs.tabindex"
                     t-att-autofocus="widget.attrs.autofocus"
diff --git a/addons/web/static/src/legacy/xml/name_and_signature.xml b/addons/web/static/src/legacy/xml/name_and_signature.xml
index 7d6553a42b6..063a9f582b7 100644
--- a/addons/web/static/src/legacy/xml/name_and_signature.xml
+++ b/addons/web/static/src/legacy/xml/name_and_signature.xml
@@ -49,7 +49,7 @@
                 border, but we remove the padding from the body, so the canvas
                 will overflow on the corners without this rule.
             -->
-            <div class="o_web_sign_signature_group bg-white card mt-3" style="overflow: hidden;">
+            <div class="o_web_sign_signature_group position-relative mt-3 border" style="overflow: hidden;">
                 <div class="card-header">
                     <div class="row g-0">
                         <div class="col-auto">
diff --git a/addons/web/static/src/legacy/xml/search_panel.xml b/addons/web/static/src/legacy/xml/search_panel.xml
index 04639a0a4b1..2c916d8159b 100644
--- a/addons/web/static/src/legacy/xml/search_panel.xml
+++ b/addons/web/static/src/legacy/xml/search_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="web.Legacy.SearchPanel" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto" t-att-class="props.className" t-ref="legacySearchPanel">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="props.className" t-ref="legacySearchPanel">
         <section t-foreach="model.get('sections', s => !s.empty)" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index c1ae660db62..1fd4b2309aa 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -15,7 +15,7 @@ $cyan: #17a2b8 !default;
 //End Restore BS4 Colors
 
 // All of those are BS default
-$white:    #fff !default;
+$white:    $o-white !default;
 $gray-100: $o-gray-100 !default;
 $gray-200: $o-gray-200 !default;
 $gray-300: $o-gray-300 !default;
@@ -26,7 +26,7 @@ $gray-700: $o-gray-700 !default;
 $gray-800: $o-gray-800 !default;
 $gray-900: $o-gray-900 !default;
 
-$black:    #000 !default;
+$black:    $o-black !default;
 
 $primary: $o-brand-primary !default;
 $secondary: $white !default;
@@ -70,7 +70,7 @@ $spacer: 1rem !default;
 //
 // Settings for the `<body>` element.
 
-$body-bg: $o-main-bg-color !default;
+$body-bg: $o-webclient-background-color !default;
 $body-color: $o-main-text-color !default;
 
 // Links
@@ -154,6 +154,7 @@ $table-th-font-weight: $headings-font-weight !default;
 //
 
 $btn-font-weight: $font-weight-bold !default;
+$btn-disabled-opacity: $o-opacity-disabled !default;
 $btn-border-radius-lg: $border-radius !default;
 
 // Dropdowns
@@ -178,6 +179,7 @@ $dropdown-item-padding-x: $o-dropdown-hpadding !default;
 
 $list-group-active-color: $o-list-group-active-color !default;
 $list-group-active-bg: $o-list-group-active-bg !default;
+$list-group-action-hover-color: $gray-900 !default;
 
 // Z-index master list
 
@@ -251,7 +253,7 @@ $kbd-bg: $o-gray-100 !default;
 $kbd-box-shadow: 0px 1px 1px rgba($o-black, 0.2), inset 0px -1px 1px 1px rgba($o-gray-200, 0.8), inset 0px 2px 0px 0px rgba($o-white, 0.8) !default;
 
 // Input
-$input-bg: $o-white !default;
+$input-bg: $o-view-background-color !default;
 $input-focus-border-color: $o-brand-primary !default;
 $form-check-input-checked-color: $o-brand-lightsecondary !default;
 $form-check-input-checked-border-color: $o-brand-primary !default;
@@ -259,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;
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index fcf9b54a65c..e78fd454a4b 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -3,6 +3,9 @@
 /// They are available in every asset bundle.
 ///
 
+// Color-scheme
+$o-webclient-color-scheme: bright !default;
+
 // Font sizes
 $o-root-font-size: 12px !default;
 $o-font-size-base: 13rem * (1px / $o-root-font-size) !default;
@@ -52,6 +55,7 @@ $o-theme-text-colors: (
     "info": #0180a5,
     "warning": #9a6b01,
     "danger": #d23f3a,
+    "odoo": $o-brand-odoo,
 )!default;
 
 $o-opacity-disabled: .5 !default;
@@ -78,12 +82,12 @@ $o-form-lightsecondary: #ccc !default;
 $o-list-footer-bg-color: #eee !default;
 $o-list-footer-font-weight: bold !default;
 
-$o-tooltip-background-color: white !default;
-$o-tooltip-color: #666666 !default;
+$o-tooltip-background-color: $o-view-background-color !default;
+$o-tooltip-color: $o-main-text-color !default;
 $o-tooltip-arrow-color: white !default;
-$o-tooltip-text-color: #777777 !default;
-$o-tooltip-title-text-color: black !default;
-$o-tooltip-title-background-color: #F7F7F7 !default;
+$o-tooltip-text-color: $o-main-text-color !default;
+$o-tooltip-title-text-color: $o-main-headings-color !default;
+$o-tooltip-title-background-color: $o-view-background-color !default;
 
 // Forms
 
@@ -169,6 +173,10 @@ $o-border-radius-sm: .2rem !default;
 $o-touch-btn-padding: 7px 14px !default;
 
 // Buttons
-$o-btn-secondary-bg: white !default;
+$o-btn-secondary-bg: $o-white !default;
 $o-btn-secondary-hover-bg: $o-gray-100 !default;
 $o-btn-secondary-hover-border: $o-gray-200 !default;
+
+$o-btn-light-bg: $o-white !default;
+$o-btn-light-border: $o-btn-light-bg !default;
+$o-btn-light-background-hover: $o-gray-100 !default;
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
index 1bb16c83305..f392c790f25 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -13,8 +13,10 @@ $o-colors-secondary: #aa4b6b, #30C381, #97743a, #F7CD1F, #4285F4, #8E24AA,
                      #6be585, #999966, #e9d362, #b56969, #bdc3c7, #649173 !default;
 
 // UI custom colors, complete list
+$o-colors-complete-first: #134E5E !default;
+
 $o-colors-complete: join(
-    set-nth($o-colors, 1, #134E5E),
+    set-nth($o-colors, 1, $o-colors-complete-first),
     $o-colors-secondary
 )!default;
 
diff --git a/addons/web/static/src/scss/utilities_custom.scss b/addons/web/static/src/scss/utilities_custom.scss
index 01ac4500901..44c17479ed3 100644
--- a/addons/web/static/src/scss/utilities_custom.scss
+++ b/addons/web/static/src/scss/utilities_custom.scss
@@ -74,6 +74,26 @@ $utilities: map-merge(
                 values: $utilities-opacity,
             ),
         ),
+        "background-color": map-merge(
+            map-get($utilities, "background-color"),
+            (
+                values: map-merge(
+                    map-get(map-get($utilities, "background-color"), "values"),
+                    (
+                        "view": $o-view-background-color,
+                    )
+                )
+            )
+        ),
+        "border-color":  map-merge(
+            map-get($utilities, "border-color"),
+            (
+                values: map-merge(
+                    map-get(map-get($utilities, "border-color"), "values"),
+                    ("transparent": transparent),
+                ),
+            ),
+        ),
         "rounded-top": (
             property: border-top-left-radius border-top-right-radius,
             class: rounded-top,
diff --git a/addons/web/static/src/search/search_bar/search_bar.scss b/addons/web/static/src/search/search_bar/search_bar.scss
new file mode 100644
index 00000000000..767954f16aa
--- /dev/null
+++ b/addons/web/static/src/search/search_bar/search_bar.scss
@@ -0,0 +1,12 @@
+// = Search Bar
+// ============================================================================
+
+.o_searchview_facet {
+    .o_facet_values {
+        border: $border-width solid var(--SearchBar-facet-background, #{$o-brand-odoo});
+    }
+    .o_searchview_facet_label {
+        background: var(--SearchBar-facet-background, #{$o-brand-odoo});
+        color: var(--SearchBar-facet-color, #{$o-white});
+    }
+}
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index b6a30327e25..974603a1dcf 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -10,12 +10,12 @@
                 t-on-keydown="ev => this.onFacetKeydown(facet, facet_index, ev)"
                 >
                 <t t-if="facet.icon">
-                    <span t-attf-class="o_searchview_facet_label text-bg-odoo {{ facet.icon }}"/>
+                    <span t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
                 </t>
                 <t t-else="">
-                    <span class="o_searchview_facet_label text-bg-odoo" t-esc="facet.title"/>
+                    <span class="o_searchview_facet_label" t-esc="facet.title"/>
                 </t>
-                <div class="o_facet_values border border-odoo border-start-0">
+                <div class="o_facet_values border-start-0">
                     <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
                         <t t-if="!facetValue_first">
                             <span class="o_facet_values_sep" t-esc="facet.separator"/>
@@ -23,7 +23,7 @@
                         <span class="o_facet_value" t-esc="facetValue"/>
                     </t>
                 </div>
-                <i class="o_facet_remove oi oi-close"
+                <i class="o_facet_remove oi oi-close btn btn-link opacity-50 opacity-100-hover text-900"
                     role="img"
                     aria-label="Remove"
                     title="Remove"
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index e4aa92df2ea..bafb24dbacd 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -11,7 +11,7 @@
 </t>
 
 <t t-name="web.SearchPanelContent" owl="1">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-white overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
         <section t-foreach="sections" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
             >
diff --git a/addons/web/static/src/search/search_panel/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
index 1a2ee362714..a4413e21a3c 100644
--- a/addons/web/static/src/search/search_panel/search_view.scss
+++ b/addons/web/static/src/search/search_panel/search_view.scss
@@ -69,6 +69,7 @@
         width: 75px;
         border: none;
         outline: none;
+        background-color: var(--o-input-background-color, #{$input-bg});
     }
 
     .o_searchview_autocomplete {
@@ -193,6 +194,7 @@
                 border-bottom: 1px solid $o-brand-secondary;
                 margin-bottom: 15px;
                 width: 100%;
+                background-color: var(--o-input-background-color, #{$input-bg});
             }
     
             .o_searchview_facet {
diff --git a/addons/web/static/src/views/calendar/calendar_controller.scss b/addons/web/static/src/views/calendar/calendar_controller.scss
index d33c8c36055..82f8ed3c6cb 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller.scss
@@ -42,6 +42,7 @@ $o-cw-filter-avatar-size: 20px;
         margin: 0;
         width: 100%;
         padding: 0;
+        background-color: $o-view-background-color;
 
         &,
         td,
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index 86406c5cc17..fddbdd3a541 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -3,7 +3,7 @@
     min-width: 0;
     height: 100%;
     background-color: map-get($grays, "100");
-    background: linear-gradient(-45deg, map-get($grays, "100"), white);
+    background: linear-gradient(-45deg, map-get($grays, "100"), $o-view-background-color);
 
     .fc-event {
         margin: 0 1px;
@@ -410,12 +410,12 @@
                     }
 
                     &.o_attendee_status_needsAction {
-                        background-color: rgba(white, 0.9) !important;
+                        background-color: rgba($o-view-background-color, 0.9) !important;
                     }
 
                     &.o_attendee_status_declined {
                         text-decoration: line-through;
-                        background-color: rgba(white, 0.9) !important;
+                        background-color: rgba($o-view-background-color, 0.9) !important;
                     }
                 }
             }
@@ -654,19 +654,19 @@ $o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814
 
             &.o_attendee_status_alone,
             &.o_attendee_status_needsAction {
-                background-color: rgba(white, 0.9) !important;
-                color: black;
+                background-color: rgba($o-view-background-color, 0.9) !important;
+                color: $o-black;
                 .fc-bg {
-                    background-color: rgba(white, 0.9) !important;
+                    background-color: rgba($o-view-background-color, 0.9) !important;
                 }
             }
 
             &.o_attendee_status_declined {
                 text-decoration: line-through;
-                background-color: rgba(white, 0.9) !important;
-                color: black;
+                background-color: rgba($o-view-background-color, 0.9) !important;
+                color: $o-black;
                 .fc-bg {
-                    background-color: rgba(white, 0.9) !important;
+                    background-color: rgba($o-view-background-color, 0.9) !important;
                 }
             }
         }
@@ -681,7 +681,7 @@ $o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814
     }
 
     .o_cw_popover.o_calendar_color_#{$i - 1} {
-        $color-subdle: mix(white, $color, 90%);
+        $color-subdle: mix($o-white, $color, 85%);
 
         .card-header,
         .card-header .popover-header {
@@ -691,7 +691,7 @@ $o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814
 
         .card-header {
             padding-left: 2px;
-            border-color: mix($card-border-color, mix(white, $color));
+            border-color: mix($card-border-color, mix($o-white, $color));
         }
     }
 }
diff --git a/addons/web/static/src/views/fields/ace/ace_field.js b/addons/web/static/src/views/fields/ace/ace_field.js
index 561792652dd..721d1c77a34 100644
--- a/addons/web/static/src/views/fields/ace/ace_field.js
+++ b/addons/web/static/src/views/fields/ace/ace_field.js
@@ -6,8 +6,10 @@ import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { formatText } from "../formatters";
 import { standardFieldProps } from "../standard_field_props";
+import { getCookie } from "web.utils.cookies";
 
 const { Component, onWillStart, onWillUpdateProps, useEffect, useRef } = owl;
+const colorSchemeCookie = getCookie("color_scheme");
 
 export class AceField extends Component {
     setup() {
@@ -46,6 +48,7 @@ export class AceField extends Component {
         this.aceEditor.setOptions({
             maxLines: Infinity,
             showPrintMargin: false,
+            theme: (colorSchemeCookie && colorSchemeCookie === "dark" ? 'ace/theme/monokai' : ''),
         });
         this.aceEditor.$blockScrolling = true;
 
diff --git a/addons/web/static/src/views/fields/badge/badge_field.js b/addons/web/static/src/views/fields/badge/badge_field.js
index a1c176634fd..6a8f28bac57 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.js
+++ b/addons/web/static/src/views/fields/badge/badge_field.js
@@ -18,7 +18,7 @@ export class BadgeField extends Component {
     get classFromDecoration() {
         for (const decorationName in this.props.decorations) {
             if (this.props.decorations[decorationName]) {
-                return `bg-${decorationName}`;
+                return `text-bg-${decorationName}`;
             }
         }
         return "";
diff --git a/addons/web/static/src/views/fields/badge/badge_field.xml b/addons/web/static/src/views/fields/badge/badge_field.xml
index 7dab21d1af4..bfd48b173c5 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.xml
+++ b/addons/web/static/src/views/fields/badge/badge_field.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="web.BadgeField" owl="1">
-        <span t-if="props.value" class="badge rounded-pill bg-opacity-50" t-att-class="classFromDecoration" t-esc="formattedValue" />
+        <span t-if="props.value" class="badge rounded-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
     </t>
 
 </templates>
diff --git a/addons/web/static/src/views/fields/image/image_field.scss b/addons/web/static/src/views/fields/image/image_field.scss
index 8ea5752b32c..ba7dadf6d7b 100644
--- a/addons/web/static/src/views/fields/image/image_field.scss
+++ b/addons/web/static/src/views/fields/image/image_field.scss
@@ -1,19 +1,14 @@
 .o_field_image {
+    background-color: var(--ImageField-background-color, transparent);
+
     button {
         transition: opacity ease 400ms;
         width: 26px;
         height: 26px;
-        opacity: 0;
-        background: $white;
-    }
-
-    &:hover button {
-        @include o-hover-opacity(0.6, 0.9);
     }
 
     .o_mobile_controls {
         button {
-            @include o-hover-opacity(0.6, 0.9);
             width: 30px;
             height: 30px;
             padding: 6px !important;
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
index beb7e5a4010..8591e64f728 100644
--- a/addons/web/static/src/views/fields/image/image_field.xml
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ImageField" owl="1">
-        <div class="d-inline-block position-relative">
-            <div t-attf-class="position-absolute w-100 bottom-0 {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
+        <div class="d-inline-block position-relative opacity-trigger-hover">
+            <div t-attf-class="position-absolute d-flex justify-content-between w-100 bottom-0 opacity-0 opacity-100-hover {{isMobile ? 'o_mobile_controls' : ''}}" aria-atomic="true" t-att-style="sizeStyle">
                 <t t-if="!props.readonly">
                     <FileUploader
                         acceptedFileExtensions="props.acceptedFileExtensions"
@@ -12,23 +12,25 @@
                     >
                         <t t-set-slot="toggler">
                             <button
-                                class="position-absolute bottom-0 start-0 border-0 rounded-circle m-1 p-1 fa fa-pencil fa-lg o_select_file_button"
+                                class="o_select_file_button btn btn-light border-0 rounded-circle m-1 p-1"
                                 data-tooltip="Edit"
-                                aria-label="Edit"
-                            />
+                                aria-label="Edit">
+                                <i class="fa fa-pencil fa-fw"/>
+                            </button>
                         </t>
                         <button
                             t-if="props.value and state.isValid"
-                            class="position-absolute bottom-0 end-0 border-0 rounded-circle m-1 p-1 fa fa-trash-o fa-lg o_clear_file_button"
+                            class="o_clear_file_button btn btn-light border-0 rounded-circle m-1 p-1"
                             data-tooltip="Clear"
                             aria-label="Clear"
-                            t-on-click="onFileRemove"
-                        />
+                            t-on-click="onFileRemove">
+                            <i class="fa fa-trash-o fa-fw"/>
+                        </button>
                     </FileUploader>
                 </t>
             </div>
             <img
-                class="img img-fluid"
+                class="img img-fluid w-100"
                 alt="Binary file"
                 t-att-src="getUrl(props.previewImage or props.name)"
                 t-att-name="props.name"
diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
index 711fdaf743a..7a93f8bae6e 100644
--- a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
+++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
@@ -2,6 +2,7 @@
 
 import { loadJS } from "@web/core/assets";
 import { registry } from "@web/core/registry";
+import { getColor, hexToRGBA } from "@web/views/graph/colors";
 import { standardFieldProps } from "../standard_field_props";
 
 const { Component, onWillStart, useEffect, useRef } = owl;
@@ -49,8 +50,8 @@ export class JournalDashboardGraphField extends Component {
         const labels = this.data[0].values.map(function (pt) {
             return pt.x;
         });
-        const borderColor = this.data[0].is_sample_data ? "#dddddd" : "#875a7b";
-        const backgroundColor = this.data[0].is_sample_data ? "#ebebeb" : "#dcd0d9";
+        const borderColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.1) : getColor(10);
+        const backgroundColor = this.data[0].is_sample_data ? hexToRGBA(getColor(10), 0.05) : hexToRGBA(getColor(10), 0.2);
         return {
             type: "line",
             data: {
@@ -96,7 +97,7 @@ export class JournalDashboardGraphField extends Component {
             data.push(pt.value);
             labels.push(pt.label);
             const color =
-                pt.type === "past" ? "#ccbdc8" : pt.type === "future" ? "#a5d8d7" : "#ebebeb";
+                pt.type === "past" ? getColor(13) : pt.type === "future" ? getColor(19) : "#ebebeb";
             backgroundColor.push(color);
         });
         return {
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
index be3ef0d6dbc..c3015e265ee 100644
--- a/addons/web/static/src/views/form/button_box/button_box.scss
+++ b/addons/web/static/src/views/form/button_box/button_box.scss
@@ -68,7 +68,7 @@
 
             .o_stat_value {
                 font-weight: $font-weight-bold;
-                color: $o-brand-odoo;
+                color: map-get($o-theme-text-colors, 'odoo');
             }
 
             .o_stat_text .o_field_empty {
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 1b1d61d9bd0..774730e67c2 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -153,21 +153,14 @@
 
     .o_form_uri {
         display: inline-block;
-        color: $link-color;
-        &:hover {
-            color: darken($link-color, 15%);
-        }
+        @include o-hover-text-color($link-color, $link-hover-color);
+
         > span {
-            color: $o-main-text-color;
-            &:hover {
-                color: $o-main-text-color;
-            }
+            @include o-hover-text-color($o-main-text-color, $o-main-text-color);
         }
+
         > span:first-child {
-            color: $link-color;
-            &:hover {
-                color: darken($link-color, 15%);
-            }
+            @include o-hover-text-color($link-color, $link-hover-color);
         }
     }
 
@@ -364,7 +357,7 @@
 
         &:hover, &:focus, &:active {
             &:after {
-                border-left-color: map-get($grays, '100');
+                border-left-color: $o-btn-light-background-hover;
             }
         }
     }
@@ -872,7 +865,7 @@
             table-layout: fixed;
             display: table;
             td {
-                border: 1px solid #dee2e6;
+                border: 1px solid $table-border-color;
             }
             th, td {
                 padding: 0.75rem 0 0.75rem 0;
diff --git a/addons/web/static/src/views/graph/colors.js b/addons/web/static/src/views/graph/colors.js
index ab0dff98cde..5f05014dc37 100644
--- a/addons/web/static/src/views/graph/colors.js
+++ b/addons/web/static/src/views/graph/colors.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
-export const COLORS = [
+import { getCookie } from "web.utils.cookies";
+
+const COLORS_BRIGHT = [
     "#1f77b4",
     "#ff7f0e",
     "#aec7e8",
@@ -11,18 +13,43 @@ export const COLORS = [
     "#ff9896",
     "#9467bd",
     "#c5b0d5",
-    "#8c564b",
+    "#875a7b", // ~ Enterprise
     "#c49c94",
     "#e377c2",
-    "#f7b6d2",
+    "#dcd0d9", // Dashboards Primary
     "#7f7f7f",
     "#c7c7c7",
     "#bcbd22",
     "#dbdb8d",
     "#17becf",
-    "#9edae5",
+    "#a5d8d7", // Dashboards Secondary
 ];
 
+const COLORS_DARK = [
+    "#00ffff",
+    "#ff6347",
+    "#00ced1",
+    "#ffd700",
+    "#29ef29",
+    "#c5fabb",
+    "#fe4b4c",
+    "#ffb6c1",
+    "#ba87e9",
+    "#eadbf6",
+    "#c568af", // ~ Enterprise
+    "#ecc1b8",
+    "#fda9e3",
+    "#BB86FC", // Dashboards Primary
+    "#808080",
+    "#f2e8e8",
+    "#fcfe2d",
+    "#f8f8bc",
+    "#17becf",
+    "#10efed", // Dashboards Secondary
+];
+
+export const COLORS = getCookie("color_scheme") === "dark" ? COLORS_DARK : COLORS_BRIGHT;
+
 /**
  * @param {number} index
  * @returns {string}
@@ -33,7 +60,8 @@ export function getColor(index) {
 
 export const DEFAULT_BG = "#d3d3d3";
 
-export const BORDER_WHITE = "rgba(255,255,255,0.6)";
+export const BORDER_WHITE =
+    getCookie("color_scheme") === "dark" ? "rgba(0, 0, 0, 0.6)" : "rgba(255,255,255,0.6)";
 
 const RGB_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index ebd4e6ca7b8..eac46f7c742 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -14,41 +14,41 @@
             </div>
         </t>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
+            <button class="btn btn-light fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="() => this.onModeSelected('bar')"
                 t-att-class="{ active: model.metaData.mode === 'bar' }"
             />
-            <button class="btn btn-secondary fa fa-line-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
+            <button class="btn btn-light fa fa-line-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
                 t-on-click="() => this.onModeSelected('line')"
                 t-att-class="{ active: model.metaData.mode === 'line' }"
             />
-            <button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
+            <button class="btn btn-light fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
                 t-on-click="() => this.onModeSelected('pie')"
                 t-att-class="{ active: model.metaData.mode === 'pie' }"
             />
         </div>
         <div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+            <button class="btn btn-light fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
         </div>
         <div t-if="model.metaData.mode === 'line'" class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+            <button class="btn btn-light fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
-            <button class="btn btn-secondary fa fa-signal o_graph_button" data-tooltip="Cumulative" aria-label="Cumulative"
+            <button class="btn btn-light fa fa-signal o_graph_button" data-tooltip="Cumulative" aria-label="Cumulative"
                 t-on-click="toggleCumulated"
                 t-att-class="{ active: model.metaData.cumulated }"
             />
         </div>
         <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph" name="toggleOrderToolbar">
-            <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
+            <button class="btn btn-light fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
                 t-on-click="() => this.toggleOrder('DESC')"
                 t-att-class="{ active: model.metaData.order === 'DESC' }"
             />
-            <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
+            <button class="btn btn-light fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
                 t-on-click="() => this.toggleOrder('ASC')"
                 t-att-class="{ active: model.metaData.order === 'ASC' }"
             />
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
index 4b65698dcec..ea324d3e947 100644
--- a/addons/web/static/src/views/graph/graph_renderer.xml
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.GraphRenderer.CustomTooltip" owl="1">
         <div class="o_graph_custom_tooltip popover show p-2 pe-none mw-100">
-            <table class="table table-borderless table-sm overflow-hidden m-0">
+            <table class="overflow-hidden m-0">
                 <thead>
                     <tr>
                         <th class="o_measure align-baseline border-0" t-esc="measure" />
@@ -12,7 +12,7 @@
                 <tbody>
                     <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem_index">
                         <td>
-                            <span class="o_square badge p-2 rounded-0 align-middle me-2 border-0" t-attf-style="background-color: {{ tooltipItem.boxColor }}"> </span>
+                            <span class="o_square badge p-2 rounded-0 align-middle me-2" t-attf-style="background-color: {{ tooltipItem.boxColor }}"> </span>
                             <span class="o_label text-truncate d-inline-block align-middle" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label" />
                         </td>
                         <td class="o_value ps-2 text-end fw-bolder">
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index e61de8b079d..30562821292 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -222,6 +222,8 @@
             // (eg. Company logo badge inside a contact picture)
             .o_kanban_image_fill_left,
             .o_kanban_image {
+                background-color: var(--KanbanRecord__image-bg-color, none);
+
                 .o_kanban_image_inner_pic {
                     @include o-position-absolute($right: 0, $bottom: 0);
                     max: {
@@ -445,7 +447,7 @@
         }
 
         .oe_kanban_text_red {
-            color: #a61300;
+            color: o-text-color('danger');
             font-weight: $font-weight-bold;
         }
 
@@ -522,7 +524,8 @@
         // don't visually fold on smaller screens (aka. mobile)
         @include media-breakpoint-up(md) {
             @include o-kanban-slim-col;
-            background-color: $gray-200;
+
+            background-color: var(--KanbanGroup-grouped-bg, #{$gray-200});
 
             & + .o_kanban_group.o_column_folded {
                 margin-left: 1px;
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 37f784cfa19..7e5e33646b0 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -5,18 +5,18 @@
         <div class="o_pivot table-responsive">
 
             <table
-                class="table-hover table table-sm table-bordered table-borderless bg-white"
+                class="table-hover table table-sm table-bordered table-borderless bg-view"
                 t-att-class="{ o_enable_linking: !model.metaData.disableLinking }"
                 t-ref="table"
             >
                 <thead>
-                    <tr t-foreach="table.headers" t-as="row" t-key="'header_' + row_index">
+                    <tr t-foreach="table.headers" t-as="row" t-key="'header_' + row_index" class="border-top-0">
                         <t t-foreach="row" t-as="cell" t-key="'header_row_' + cell_index">
                             <t t-if="cell.measure" t-call="web.PivotMeasure"/>
                             <t t-elif="cell.isLeaf !== undefined" t-call="web.PivotHeader">
                                 <t t-set="isXAxis" t-value="true"/>
                             </t>
-                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height" class="fw-normal bg-100"/>
+                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height" class="fw-normal border-start-0"/>
                         </t>
                     </tr>
                 </thead>
@@ -27,7 +27,7 @@
                             <t t-set="cell" t-value="row"/>
                         </t>
                         <t t-foreach="row.subGroupMeasurements" t-as="cell" t-key="'row_cell_' + cell_index">
-                            <td class="o_pivot_cell_value text-end" t-att-class="{
+                            <td class="o_pivot_cell_value text-end bg-100" t-att-class="{
                                     o_empty: cell.value === undefined,
                                     'cursor-pointer': cell.value !== undefined,
                                     'fw-bold': cell.isBold,
@@ -54,7 +54,7 @@
 
     <t t-name="web.PivotHeader" owl="1">
         <th
-            class="text-nowrap cursor-pointer fw-normal bg-100"
+            class="text-nowrap cursor-pointer fw-normal user-select-none border-start-0"
             t-att-colspan="isXAxis ? cell.width : undefined"
             t-att-rowspan="isXAxis ? cell.height : undefined"
             t-att-class="{
@@ -90,9 +90,9 @@
     </t>
 
     <t t-name="web.PivotMeasure" owl="1">
-        <th class="text-muted text-center text-nowrap fw-normal bg-100" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
-                'o_pivot_origin_row cursor-pointer': cell.originIndexes,
-                'o_pivot_measure_row cursor-pointer': !cell.originIndexes,
+        <th class="text-muted text-center text-nowrap fw-normal" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
+                'o_pivot_origin_row cursor-pointer user-select-none': cell.originIndexes,
+                'o_pivot_measure_row cursor-pointer user-select-none': !cell.originIndexes,
                 o_pivot_sort_order_asc: cell.order === 'asc',
                 o_pivot_sort_order_desc: cell.order === 'desc',
             }" t-on-click.prevent="() => this.onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
diff --git a/addons/web/static/src/views/pivot/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
index d0128ba2630..6cff10dae84 100644
--- a/addons/web/static/src/views/pivot/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -8,19 +8,10 @@
         @include o-hover-text-color($body-color, $o-main-link-color);
     }
 
-    // This can be removed after the migration to BS5.
-    th,
-    td {
-        border-width: $border-width;
-    }
-
     .o_pivot_measure_row,
     .o_pivot_origin_row,
     .o_pivot_header_cell_closed,
     .o_pivot_header_cell_opened {
-        // "user-select-none" class doesn't exist in BS 4.3.1, the user-select property
-        // could be replaced by a class after the migration to BS5
-        user-select: none;
         @include o-hover-text-color($body-color, $headings-color);
 
         &:hover {
diff --git a/addons/web/static/src/views/view.scss b/addons/web/static/src/views/view.scss
index 4aac2a953ca..9c2af947dc4 100644
--- a/addons/web/static/src/views/view.scss
+++ b/addons/web/static/src/views/view.scss
@@ -11,7 +11,7 @@
 
     .o_nocontent_help {
         border-radius: 20%;
-        background-color: #f9f9f9;
-        box-shadow: 0 0 120px 100px #f9f9f9;
+        background-color: $o-view-background-color;
+        box-shadow: 0 0 120px 100px $o-view-background-color;
     }
 }
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
index 4cc226d4e23..22eab2ffe23 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
@@ -14,13 +14,11 @@
         transform: translateX(0);
     }
 
-    // Scoped variables
-    $-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode')
-    $-base-color: color-contrast($-base-bg);
-
     // ====== Top-Bar
     .o_burger_menu_topbar {
         min-height: $o-navbar-height-xs;
+        background-color: $o-burger-topbar-bg;
+        color: $o-burger-topbar-color;
         line-height: $o-navbar-height-xs;
 
         .dropdown-toggle, .o_burger_menu_close {
@@ -31,13 +29,13 @@
     // ====== Menu content container (both App's and User's entries)
     .o_burger_menu_content {
         &.o_burger_menu_dark {
-            background-color: darken($-base-bg, 5%);
+            background-color: darken($o-burger-base-bg, 5%);
         }
 
         // Menu entries size and layout
         ul {
-            background-color: rgba(invert($-base-color), .1);
-            box-shadow: inset 0 -1px 0 rgba($-base-color, .1);
+            background-color: rgba(invert($o-burger-base-color), .1);
+            box-shadow: inset 0 -1px 0 rgba($o-burger-base-color, .1);
 
             li > div, li {
                 padding-left: $o-horizontal-padding;
@@ -59,7 +57,7 @@
         }
 
         li, button {
-            @include o-hover-text-color(rgba($-base-color, .8), $-base-color);
+            @include o-hover-text-color(rgba($o-burger-base-color, .8), $o-burger-base-color);
         }
 
         // ====== 'User Menu' spefic design rules
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
new file mode 100644
index 00000000000..9711b398434
--- /dev/null
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss
@@ -0,0 +1,7 @@
+// = Burger Menu Variables
+// ============================================================================
+$o-burger-topbar-bg: $o-brand-odoo !default;
+$o-burger-topbar-color: $o-white !default;
+
+$o-burger-base-bg: $o-burger-topbar-bg !default;
+$o-burger-base-color: $o-burger-topbar-color !default;
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
index 0f6615ecb69..fc8bbce3d26 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
@@ -13,9 +13,9 @@
     <t t-portal="'body'">
       <Transition name="'burgerslide'" visible="state.isBurgerOpened" leaveDuration="200" t-slot-scope="transition">
         <div class="o_burger_menu position-fixed top-0 bottom-0 start-100 d-flex flex-column flex-nowrap" t-att-class="transition.className" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd">
-          <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 text-bg-odoo fs-4"
+          <div class="o_burger_menu_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 fs-4"
               t-on-click.stop='_toggleUserMenu'>
-              <small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-white': isUserMenuUnfolded }">
+              <small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-view': isUserMenuUnfolded }">
                   <img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
                   <span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
                   <i t-if="isUserMenuTogglable" class="fa" t-att-class="state.isUserMenuOpened ? 'fa-caret-down' : 'fa-caret-left'"/>
@@ -23,7 +23,7 @@
               <button class="o_burger_menu_close oi oi-close btn d-flex align-items-center h-100 bg-transparent border-0 fs-2 text-reset" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
           </div>
           <nav class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto"
-              t-att-class="{o_burger_menu_dark: !isUserMenuUnfolded, 'bg-white': isUserMenuUnfolded}">
+              t-att-class="{o_burger_menu_dark: !isUserMenuUnfolded, 'bg-view': isUserMenuUnfolded}">
               <!-- -->
               <t t-if="isUserMenuUnfolded">
                   <MobileSwitchCompanyMenu t-if="Object.values(company.availableCompanies).length > 1" />
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index d223a4e2fa4..9e1952dfe7f 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -104,7 +104,8 @@
                 padding: ($o-navbar-badge-padding * .5) $o-navbar-badge-padding;
                 background-color: var(--o-navbar-badge-bg, #{$o-navbar-badge-bg});
                 font-size: $o-navbar-badge-size;
-                text-shadow: 1px 1px 0 rgba(#000, .3);
+                color: var(--o-navbar-badge-color, inherit);
+                text-shadow: var(--o-navbar-badge-text-shadow, #{1px 1px 0 rgba($black, .3)});
                 transform: translate(-10%, -30%);
             }
         }
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
index d9360b2c8ac..87e13e9b38d 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
@@ -77,6 +77,11 @@
 
 // BASE SETTINGS LAYOUT
 .o_base_settings {
+   --settings__tab-bg: #{map-get($grays, '900')};
+   --settings__tab-bg--active: #{map-get($grays, '800')};
+   --settings__tab-color: #{map-get($grays, '400')};
+   --settings__title-bg: #{map-get($grays, '200')};
+
    height: 100%;
 
    .o_control_panel {
@@ -125,18 +130,17 @@
    .o_setting_container {
        display: flex;
        flex: 1 1 auto;
-
        overflow: auto;
 
        .settings_tab {
            display: flex;
            flex: 0 0 auto;
            flex-flow: column nowrap;
-           background: map-get($grays, '900');
+           background: var(--settings__tab-bg);
            overflow: auto;
 
            .selected {
-               background-color: map-get($grays, '800');
+               background-color: var(--settings__tab-bg--active);
                box-shadow: inset 2px 0 0 $o-brand-primary;
            }
 
@@ -144,7 +148,7 @@
                display: flex;
                padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                height: 40px;
-               color: map-get($grays, '400');
+               color: var(--settings__tab-color);
                font-size: 13px;
                line-height: 40px;
                cursor: pointer;
@@ -172,7 +176,7 @@
                h2 {
                    margin: 0 0 !important;
                    @include o-base-settings-horizontal-padding(.4rem);
-                   background-color: map-get($grays, '200');
+                   background-color: var(--settings__title-bg);
                    font-size: 15px;
 
                    &.o_invisible_modifier + .o_settings_container {
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss b/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
index 5b2b7b4ad7b..f2e502dfe8a 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
@@ -13,12 +13,11 @@
             .settings_tab {
                 flex: 0 0 $o-base-settings-mobile-tabs-height;
                 flex-direction: row;
-                justify-content: space-between;
                 position: relative;
                 overflow: hidden;
                 overflow-x: auto;
                 padding: 0;
-                background: #5E5E5E;
+                border-bottom: 1px solid $border-color;
 
                 .tab {
                     display: block;
@@ -49,7 +48,6 @@
                     }
 
                     &.current {
-                        color: white;
                         font-weight: bold;
 
                         // Reset default style for 'selected' tabs
diff --git a/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml b/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml
index 6a05a3ee15c..abaa770bb3c 100644
--- a/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml
+++ b/addons/web/static/src/webclient/settings_form_view/widgets/res_config_invite_users.xml
@@ -10,7 +10,7 @@
         <t t-if="state.invite.pending_users.length">
             <p class="o_form_label pt-3">Pending Invitations:</p>
             <span t-foreach="state.invite.pending_users" t-as="pending" t-key="pending[0]">
-                <a href="#" class="badge rounded-pill text-primary o_web_settings_user" t-on-click.prevent="(ev) => this.onClickUser(ev, pending)"> <t t-esc="pending[1]"/> </a>
+                <a href="#" class="badge rounded-pill text-primary border border-primary o_web_settings_user" t-on-click.prevent="(ev) => this.onClickUser(ev, pending)"> <t t-esc="pending[1]"/> </a>
             </span>
             <t t-if="state.invite.pending_users.length &lt; state.invite.pending_count">
                 <br/>
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.js b/addons/web/static/src/webclient/user_menu/user_menu.js
index 0a88a4aec35..fb8a9cdc244 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.js
+++ b/addons/web/static/src/webclient/user_menu/user_menu.js
@@ -2,6 +2,7 @@
 
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { CheckBox } from "@web/core/checkbox/checkbox";
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
@@ -31,7 +32,7 @@ export class UserMenu extends Component {
     }
 }
 UserMenu.template = "web.UserMenu";
-UserMenu.components = { Dropdown, DropdownItem };
+UserMenu.components = { Dropdown, DropdownItem, CheckBox };
 
 export const systrayItem = {
     Component: UserMenu,
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index 0f629e4ffc4..6fe52d2d9dd 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -10,12 +10,21 @@
             <t t-foreach="getElements()" t-as="element" t-key="element_index">
                 <t t-if="!element.hide">
                     <DropdownItem
-                        t-if="element.type == 'item'"
+                        t-if="element.type == 'item' || element.type == 'switch'"
                         href="element.href"
                         dataset="{ menu: element.id }"
-                        t-esc="element.description"
                         onSelected="element.callback"
-                    />
+                    >
+                        <CheckBox
+                            t-if="element.type == 'switch'"
+                            value="element.isChecked"
+                            className="'form-switch d-flex flex-row-reverse justify-content-between p-0'"
+                            onChange="element.callback"
+                        >
+                            <t t-out="element.description"/>
+                        </CheckBox>
+                        <t t-else="" t-out="element.description"/>
+                    </DropdownItem>
                     <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
                 </t>
             </t>
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 30171ca424b..cc126d9dc8b 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -1,4 +1,6 @@
 :root {
+  --o-webclient-color-scheme:#{$o-webclient-color-scheme};
+
   font-size: $o-root-font-size;
 }
 
@@ -22,6 +24,7 @@ tfoot {
   direction: ltr;
   position: relative; // normally useless but required by bootstrap-datepicker
   background-color: $o-webclient-background-color;
+  color-scheme: $o-webclient-color-scheme;
 }
 
 // ------------------------------------------------------------------
@@ -207,8 +210,7 @@ select {
 
 @mixin o-placeholder {
   // Rules below need to be separeted. Otherwise all browsers will discard the whole rule.
-  color: $o-brand-secondary;
-  opacity: 0.5;
+  color: $input-placeholder-color;
 }
 ::-webkit-input-placeholder {
   // WebKit, Blink, Edge
@@ -249,7 +251,7 @@ select {
   @include o-hover-text-color($link-color, $link-hover-color);
 
   &.disabled, &:disabled {
-    @include o-hover-text-color($link-color, $link-color);
+    @include o-hover-text-color($o-gray-500, $o-gray-500);
   }
 }
 
@@ -272,12 +274,12 @@ select {
   // Achieve "clickable text" elements that act like buttons once the
   // the user interacts with (eg. control-panel dropdowns);
   @include button-variant(
-    $background: #fff,
-    $border: #fff,
-    $hover-background: $o-gray-100,
-    $hover-border: $o-gray-200,
-    $active-background: $o-gray-100,
-    $active-border: $o-gray-300
+    $background: $o-btn-light-bg,
+    $border: $o-btn-light-border,
+    $hover-background: $o-btn-light-background-hover,
+    $hover-border: $o-btn-light-background-hover,
+    $active-background: $o-btn-light-background-hover,
+    $active-border: $o-btn-light-background-hover
   );
 }
 
@@ -330,7 +332,9 @@ b, strong {
 
 //== Badges
 .badge {
-  border: 1px solid $o-brand-primary;
+    &.text-bg-default, &.bg-light, &.text-bg-light, &.bg-default, &.text-primary{
+        outline: 1px solid $o-brand-primary;
+    }
 }
 
 //== Buttons
@@ -358,3 +362,91 @@ b, strong {
   border-radius: 0;
   font-size: 1em; // Override 75% of .label
 }
+
+//------------------------------------------------------------------------------
+// Select2
+//------------------------------------------------------------------------------
+// Redefine select2 dropdown color values in variables to be easily handled.
+// eg. for the dark mode
+
+.select2-container .select2-choice {
+  background-color: $dropdown-bg;
+  background-image: var(--Select2Choice-background-image, linear-gradient(to top, #eee 0%, #fff 50%));
+  color: var(--Select2Choice-color, #444);
+}
+
+.select2-container.select2-drop-above .select2-choice {
+  background-image: var(--Select2Choice__DropAbove-background-image, linear-gradient(to top, #eee 0%, #fff 90%));
+}
+
+.select2-drop-mask {
+  background-color: $o-view-background-color;
+}
+
+.select2-drop {
+  background-color: $dropdown-bg;
+  color: $o-main-text-color;
+}
+
+.select2-container:not(.select2-dropdown-open) .select2-choice .select2-arrow {
+  background: var(--Select2__Arrow-background, linear-gradient(to top, #ccc 0%, #eee 60%));
+}
+
+.select2-search input,
+html[dir="rtl"] .select2-search input,
+.select2-search input.select2-active {
+  background-color: var(--Select2__SearchInput-background-color, #fff);
+  background-repeat: no-repeat;
+}
+
+.select2-search input {
+  background-image: var(--Select2__SearchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
+  background-position: 100% -22px;
+}
+
+html[dir="rtl"] .select2-search input {
+  background-image: var(--Select2__SearchInput-background-image, url('/web/static/lib/select2/select2.png'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
+  background-position: -37px -22px;
+}
+
+.select2-search input.select2-active {
+  background-image: var(--Select2__SearchInput--active-background-image, url('/web/static/lib/select2/select2-spinner.gif'), linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0);
+  background-position: 100%;
+}
+
+.select2-dropdown-open .select2-choice {
+  box-shadow: var(--Select2Choice-box-shadow, 0 1px 0 #fff inset);
+}
+
+.select2-results .select2-highlighted {
+  background: $o-brand-primary;
+  color: var(--Select2__ResultsHighlighted-color, #fff);
+}
+
+.select2-results {
+  .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
+    background: $dropdown-bg;
+    color: $o-main-text-color;
+  }
+}
+
+.select2-container .select2-choice,
+.select2-container.select2-drop-above .select2-choice,
+.select2-drop,
+.select2-drop.select2-drop-above,
+.select2-drop-auto-width,
+.select2-container .select2-choice .select2-arrow,
+html[dir="rtl"] .select2-container .select2-choice .select2-arrow,
+.select2-search input {
+  border-color: var(--Select2-border-color, #aaa);
+}
+
+.select2-drop-active,
+.select2-drop.select2-drop-above.select2-drop-active,
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices,
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices,
+.form-control.select2-container.select2-dropdown-open {
+  border-color: var(--Select2Active-border-color, #5897fb);
+}
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index 37c1d8e0bd0..20ceb4459cc 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -9289,14 +9289,14 @@ QUnit.module('Legacy basic_fields', {
         });
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-warning.bg-opacity-50');
 
         await list.reload();
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].text-bg-warning.bg-opacity-50');
 
         list.destroy();
     });
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
index 78484cd2cd6..1e2e0fc4bc6 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
@@ -9908,14 +9908,14 @@ QUnit.module('Legacy fields', {}, function () {
             });
 
             assert.containsN(form, '.o_data_row', 2);
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'text-bg-warning');
 
             await testUtils.dom.click(form.$('.o_data_row .o_data_cell:first'));
             await testUtils.owlCompatibilityExtraNextTick();
             await testUtils.fields.editInput(form.$('.o_selected_row .o_field_integer'), '44');
             await testUtils.owlCompatibilityExtraNextTick();
 
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'text-bg-warning');
 
             form.destroy();
         });
diff --git a/addons/web/static/tests/views/fields/badge_field_tests.js b/addons/web/static/tests/views/fields/badge_field_tests.js
index e1fc962565a..9bdc00ccafd 100644
--- a/addons/web/static/tests/views/fields/badge_field_tests.js
+++ b/addons/web/static/tests/views/fields/badge_field_tests.js
@@ -124,7 +124,7 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.containsN(target, '.o_field_badge[name="display_name"]', 4);
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger');
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .text-bg-danger');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .text-bg-warning');
     });
 });
diff --git a/addons/web/static/tests/views/fields/one2many_field_tests.js b/addons/web/static/tests/views/fields/one2many_field_tests.js
index 5f3bdecebca..cd72bb20f04 100644
--- a/addons/web/static/tests/views/fields/one2many_field_tests.js
+++ b/addons/web/static/tests/views/fields/one2many_field_tests.js
@@ -10796,7 +10796,7 @@ QUnit.module("Fields", (hooks) => {
         assert.containsN(target, ".o_data_row", 2);
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning"
+            "text-bg-warning"
         );
 
         await click(target.querySelector(".o_data_row .o_data_cell"));
@@ -10804,7 +10804,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning"
+            "text-bg-warning"
         );
     });
 
diff --git a/addons/web/static/tests/webclient/user_menu_tests.js b/addons/web/static/tests/webclient/user_menu_tests.js
index 56f8b6466eb..9443c1678b0 100644
--- a/addons/web/static/tests/webclient/user_menu_tests.js
+++ b/addons/web/static/tests/webclient/user_menu_tests.js
@@ -57,6 +57,17 @@ QUnit.test("can be rendered", async (assert) => {
             sequence: 5,
         };
     });
+    userMenuRegistry.add("frodo_item", function () {
+        return {
+            type: "switch",
+            id: "frodo",
+            description: "Frodo",
+            callback: () => {
+                assert.step("callback frodo_item");
+            },
+            sequence: 11,
+        };
+    });
     userMenuRegistry.add("separator", function () {
         return {
             type: "separator",
@@ -93,26 +104,27 @@ QUnit.test("can be rendered", async (assert) => {
     assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron");
     assert.containsNone(target, ".dropdown-menu .dropdown-item");
     await click(target.querySelector("button.dropdown-toggle"));
-    assert.containsN(target, ".dropdown-menu .dropdown-item", 3);
+    assert.containsN(target, ".dropdown-menu .dropdown-item", 4);
+    assert.containsOnce(target, ".dropdown-menu .dropdown-item input.form-check-input");
     assert.containsOnce(target, "div.dropdown-divider");
     const children = [...(target.querySelector(".dropdown-menu").children || [])];
     assert.deepEqual(
         children.map((el) => el.tagName),
-        ["SPAN", "SPAN", "DIV", "SPAN"]
+        ["SPAN", "SPAN", "SPAN", "DIV", "SPAN"]
     );
     const items = [...target.querySelectorAll(".dropdown-menu .dropdown-item")] || [];
     assert.deepEqual(
         items.map((el) => el.dataset.menu),
-        ["ring", "bad", "eye"]
+        ["ring", "bad", "frodo", "eye"]
     );
     assert.deepEqual(
         items.map((el) => el.textContent),
-        ["Ring", "Bad", "Eye"]
+        ["Ring", "Bad", "Frodo", "Eye"]
     );
     for (const item of items) {
         click(item);
     }
-    assert.verifySteps(["callback ring_item", "callback bad_item", "callback eye_item"]);
+    assert.verifySteps(["callback ring_item", "callback bad_item", "callback frodo_item", "callback eye_item"]);
 });
 
 QUnit.test("display the correct name in debug mode", async (assert) => {
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 1052f322177..08a7f739afa 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -207,8 +207,14 @@
             <t t-set="html_data" t-value="{'style': 'height: 100%;'}"/>
             <t t-set="title">Web Tests</t>
             <t t-set="head">
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.tests_assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
@@ -229,8 +235,14 @@
             <t t-set="head">
                 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.tests_assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
@@ -252,8 +264,14 @@
                 <script type="text/javascript" src="/web/static/lib/benchmarkjs/lodash.js"></script>
                 <script type="text/javascript" src="/web/static/lib/benchmarkjs/benchmark.js"></script>
 
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
 
@@ -318,8 +336,14 @@
                         fetch(`/web/webclient/translations/${cache_hashes.translations}?lang=${user_context.lang}`);
                     }
                 </script>
-                <t t-call-assets="web.assets_common" t-js="false"/>
-                <t t-call-assets="web.assets_backend" t-js="false"/>
+                <t t-if="request.httprequest.cookies.get('color_scheme') == 'dark'">
+                    <t t-call-assets="web.dark_mode_assets_common" t-js="false"/>
+                    <t t-call-assets="web.dark_mode_assets_backend" t-js="false"/>
+                </t>
+                <t t-else="">
+                    <t t-call-assets="web.assets_common" t-js="false"/>
+                    <t t-call-assets="web.assets_backend" t-js="false"/>
+                </t>
                 <t t-call-assets="web.assets_common" t-css="false"/>
                 <t t-call-assets="web.assets_backend" t-css="false"/>
                 <t t-call-assets="web.assets_backend_prod_only" t-css="false"/>
diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index f59d5bf2720..140b0d2aed2 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -113,6 +113,13 @@ Odoo Web Editor widget.
             'web_editor/static/src/js/backend/**/*',
             'web_editor/static/src/xml/backend.xml',
         ],
+        "web.dark_mode_assets_backend": [
+            'web_editor/static/src/scss/odoo-editor/powerbox.dark.scss',
+            'web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss',
+            'web_editor/static/src/scss/odoo-editor/tableui.dark.scss',
+            'web_editor/static/src/scss/wysiwyg.dark.scss',
+            'web_editor/static/src/scss/web_editor.common.dark.scss',
+        ],
         'web.assets_frontend_minimal': [
             'web_editor/static/src/js/frontend/loader_loading.js',
         ],
@@ -139,6 +146,7 @@ Odoo Web Editor widget.
 
         'web._assets_primary_variables': [
             'web_editor/static/src/scss/web_editor.variables.scss',
+            'web_editor/static/src/scss/wysiwyg.variables.scss',
         ],
         'web._assets_secondary_variables': [
             'web_editor/static/src/scss/secondary_variables.scss',
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
index ba00266b9da..b58eb6f583a 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
@@ -48,27 +48,27 @@
     }
     .o_table_ui_menu_toggler {
         cursor: pointer;
-        background-color: white;
-        color: #6e727a;
-        border: 1px solid #C9CCD2;
+        background-color: var(--o-table-ui-bg, #{$o-white});
+        color: var(--o-table-ui-color, #{$o-main-text-color});
+        border: $border-width solid var(--o-table-ui-border, #{$border-color});
         border-radius: 5px;
         padding: 2px 3px;
     }
     .o_table_ui_menu {
         display: none;
         cursor: pointer;
-        background-color: white;
+        background-color: var(--o-table-ui-bg, #{$o-white});
         width: fit-content;
-        border: 1px solid #C9CCD2;
+        border: $border-width solid var(--o-table-ui-border, #{$border-color});
         padding: 5px 0;
         white-space: nowrap;
 
         > div:hover {
-            background-color: #ebebeb;
+            background-color: var(--o-table-ui-hover, #{$o-gray-200});
         }
         span {
             margin-right: 8px;
-            color: #6e727a;
+            color: var(--o-table-ui-color, #{$o-main-text-color});
         }
         div {
             padding: 0 8px;
@@ -229,7 +229,7 @@
 .oe-tablepicker-wrapper.oe-floating {
     padding: 3px;
     z-index: 1051;
-    background: white;
+    background-color: var(--oeTablepicker__wrapper-bg, $o-white);
 }
 .oe-tablepicker-row {
     line-height: 0;
@@ -240,7 +240,7 @@
 
     .oe-tablepicker-row .oe-tablepicker-cell {
         display: inline-block;
-        background:  #EFEFEE;
+        background-color: var(--oeTablepicker__cell-bg, $o-gray-200);
         width: 19px;
         height: 19px;
         padding: 0;
@@ -251,7 +251,7 @@
             margin-right: 0;
         }
         &.active {
-            background: #d3d1cb;
+            background-color: var(--oeTablepicker-color-accent, $o-brand-primary);
         }
     }
 }
@@ -282,7 +282,8 @@
     position: absolute;
     z-index: $zindex-modal;
     border: black;
-    background-color: white;
+    background: var(--oePowerbox__wrapper-bg, $o-white);
+    color: $o-main-text-color;
     max-height: 40vh;
     box-sizing: border-box;
     max-width: 100%;
@@ -299,10 +300,10 @@
         height: 10px;
     }
     ::-webkit-scrollbar-thumb {
-        background: #D3D1CB;
+        background: var(--oePowerbox__ScrollbarThumb-background-color, #D3D1CB);
     }
     ::-webkit-scrollbar-track {
-        background: #EDECE9;
+        background: var(--oePowerbox__ScrollbarTrack-background-color, #EDECE9);
     }
 }
 .oe-powerbox-mainWrapper {
@@ -314,7 +315,7 @@
 
 .oe-powerbox-category, .oe-powerbox-noResult {
     margin: 10px;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--oePowerbox__category-color, $o-gray-600);
     font-size: 11px;
 }
 .oe-powerbox-category {
@@ -330,7 +331,7 @@
     cursor: pointer;
 
     &.active {
-        background: #EFEFEE;
+        background: var(--oePowerbox__commandName-bg, $o-gray-100); 
     }
 }
 i.oe-powerbox-commandImg {
@@ -339,17 +340,18 @@ i.oe-powerbox-commandImg {
     width: 30px;
     align-items: center;
     justify-content: center;
-    background: white;
-    color: rgba(0, 0, 0, 0.6);
+    background: var(--oePowerbox__commandImg-bg, $o-gray-100);
+    color: var(--oePowerbox__commandImg-color, $o-gray-800);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 7px;
     font-size: 15px;
 }
 .oe-powerbox-commandName {
     font-size: 13px;
+    color: var(--oePowerbox__commandName-color, $o-main-text-color);
 }
 .oe-powerbox-commandDescription {
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--oePowerbox__commandDescription-color, $o-main-color-muted);
     font-size: 12px;
 }
 .oe-powerbox-commandRightCol {
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index b64c0690974..460d51a7424 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -35,7 +35,7 @@ $grays: () !default;
 // prevent-backend-colors-alteration for more information)
 @if variable-exists('prevent-backend-colors-alteration') and $prevent-backend-colors-alteration {
     $theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
-    $grays: map-remove($grays, '100', '200', '300', '400', '500', '600', '700', '800', '900');
+    $grays: map-remove($grays, '100', '200', '300', '400', '500', '600', '700', '800', '900', 'black', 'white');
 }
 
 // Bootstrap use standard variables to define individual colors which are then
diff --git a/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss
new file mode 100644
index 00000000000..070a9f193d9
--- /dev/null
+++ b/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss
@@ -0,0 +1,16 @@
+// = Notes powerbox
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-powerbox-wrapper {
+    --oePowerbox__wrapper-bg: #{$o-gray-300};
+
+    --oePowerbox__category-color: #{$o-gray-700};
+
+    --oePowerbox__commandName-bg: #{$o-gray-200};
+    --oePowerbox__commandName-color: #{$o-gray-900};
+    --oePowerbox__commandDescription-color: #{$o-gray-500};
+
+    --oePowerbox__commandImg-bg: #{$o-gray-400};
+    --oePowerbox__commandImg-color: #{$o-gray-900};
+}
diff --git a/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss
new file mode 100644
index 00000000000..7e31572288e
--- /dev/null
+++ b/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss
@@ -0,0 +1,13 @@
+// = Knowledge: Table
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-tablepicker-wrapper {
+    --oeTablepicker__wrapper-bg: #{$o-gray-300};
+    --oeTablepicker-color-accent: #{$o-brand-primary};
+}
+
+.oe-tablepicker {
+    --oeTablepicker__cell-bg: #{$o-gray-200};
+}
+
diff --git a/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss
new file mode 100644
index 00000000000..d7adc3b6c2c
--- /dev/null
+++ b/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss
@@ -0,0 +1,11 @@
+// = Table UI
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_table_ui {
+    --o-table-ui-bg: #{$o-gray-300};
+    --o-table-ui-color: #{$o-gray-900};
+    --o-table-ui-border: #{$o-gray-200};
+    --o-table-ui-hover: #{$o-gray-200};
+}
+
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index 71043923ddd..f2d9e4c1de1 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -8,13 +8,6 @@
         right: 0;
     }
 
-    .note-editable {
-        font: inherit !important;
-        font-family: inherit !important;
-        line-height: inherit !important;
-        color: inherit !important;
-    }
-
     iframe {
         display: block;
         width: 100%;
@@ -40,7 +33,9 @@
     a {
         // Ensure the link is visible enough in the editor.
         $oe-link-color: o-color('o-cc3-link');
-        color: if($oe-link-color, $oe-link-color, #008f8c);
+        @if ($oe-link-color) {
+            color: $oe-link-color;
+        }
     }
 }
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.dark.scss b/addons/web_editor/static/src/scss/web_editor.common.dark.scss
new file mode 100644
index 00000000000..c8240de1971
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.dark.scss
@@ -0,0 +1,7 @@
+// = Web Editor Common Variables
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_we_search_prompt {
+    --WebEditor__SearchPromptArrow-filter: invert(1);
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index e53b9bc92ab..942f5ad4f7f 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -539,6 +539,7 @@ a.o_underline {
         width: 100px;
         height: 150px;
         opacity: .5;
+        filter: var(--WebEditor__SearchPromptArrow-filter, invert(0));
         background-image: url('/web_editor/static/src/img/curved_arrow.svg');
         background-size: 100%;
         background-repeat: no-repeat;
diff --git a/addons/web_editor/static/src/scss/wysiwyg.dark.scss b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
new file mode 100644
index 00000000000..d32fab262d6
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg.dark.scss
@@ -0,0 +1,17 @@
+// = Wysiwyg Variables
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.oe-toolbar.oe-floating {
+    --o-we-toolbar-bg: #{$o-gray-300};
+    --o-we-toolbar-bg-active: #{$o-gray-400};
+    --o-we-toolbar-border: #{$o-gray-200};
+    --o-we-toolbar-color-text: #{$o-gray-800};
+    --o-we-toolbar-color-accent: #{$o-brand-primary};
+    --o-we-toolbar-color-clickable: #{$o-gray-800};
+    --o-we-toolbar-color-clickable-active: #{$o-black};
+}
+
+.o_link_dialog_preview {
+    --o-link-dialog-preview-border: #{$border-width} solid #{$border-color};
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 6fed08806a6..8e61573240b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -1,19 +1,6 @@
 $o-we-overlay-zindex: ($zindex-fixed + $zindex-modal-backdrop) / 2 !default;
 $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
-// Floating Toolbar Variables
-$o-we-toolbar-entries-gap: $o-we-sidebar-content-field-control-item-spacing * .7;
-$o-we-toolbar-entries-border-width: 1px;
-$o-we-toolbar-entries-padding: $o-we-sidebar-content-padding-base * .7;
-
-$o-we-toolbar-bg: #FFF;
-$o-we-toolbar-bg-active: rgba($o-we-fg-light, .2);
-$o-we-toolbar-border: $o-we-fg-light;
-$o-we-toolbar-color-text: $o-we-bg-light;
-$o-we-toolbar-color-accent: #018597;
-$o-we-toolbar-color-clickable: $o-we-bg-lightest;
-$o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
-
 // Use css variables to control the default style of the editor so that an
 // external assets bundle can influence it without duplicating the css.
 :root {
@@ -203,17 +190,17 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
     max-width: none;
     border-radius: $o-we-item-border-radius;
     padding: 0 $o-we-sidebar-content-field-control-item-spacing;
-    background-color: $o-we-toolbar-bg;
+    background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
     box-shadow: 0 0 4px rgba(#000, .1), 0 4px 18px rgba(#000, .25);
-    color: $o-we-toolbar-color-text;
+    color: var(--o-we-toolbar-color-text, #{$o-we-toolbar-color-text});
     font-family: $o-we-font-family;
 
     &.toolbar-bottom:before {
-        border-bottom-color: $o-we-toolbar-bg;
+        border-bottom-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
     }
 
     &:not(.toolbar-bottom):before {
-        border-top-color: $o-we-toolbar-bg;
+        border-top-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
     }
 
     &.noarrow::before {
@@ -225,7 +212,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
             content: "";
             width: $o-we-toolbar-entries-border-width;
             margin-right: calc(#{$o-we-toolbar-entries-gap} - #{$o-we-toolbar-entries-border-width});
-            background: $o-we-toolbar-border;
+            background: var(--o-we-toolbar-border, #{$o-we-toolbar-border});
             transform: scaleY(.6)
         }
 
@@ -238,16 +225,16 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
     // Main layout of buttons
     .btn, .dropdown-item {
         padding: ($o-we-toolbar-entries-padding * .5) $o-we-toolbar-entries-padding;
-        color: $o-we-toolbar-color-clickable;
+        color: var(--o-we-toolbar-color-clickable, #{$o-we-toolbar-color-clickable});
 
         &:hover:not(.active) {
-            color: $o-we-toolbar-color-clickable-active;
+            color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
             background-color: transparent;
         }
 
         &.active {
-            background: $o-we-toolbar-bg-active;
-            box-shadow: inset 0 0 3px rgba($o-we-toolbar-bg-active, .5);
+            background: var(--o-we-toolbar-bg-active, #{$o-we-toolbar-bg-active});
+            box-shadow: inset 0 0 3px RGBA(var(--o-we-toolbar-bg-active, #{$o-we-toolbar-bg-active}), .5);
         }
     }
 
@@ -258,7 +245,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
         font-weight: 400;
 
         &.active {
-            color: $o-we-toolbar-color-accent;
+            color: var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
         }
     }
 
@@ -272,7 +259,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
 
     .show > .btn {
         &, &:hover, &:focus {
-            color: $o-we-toolbar-color-clickable-active;
+            color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
         }
     }
 
@@ -287,8 +274,8 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
         padding: 0;
         max-height: none;
         overflow: visible;
-        border-top: 1px solid $o-we-toolbar-border;
-        background-color: $o-we-toolbar-bg;
+        border-top: 1px solid var(--o-we-toolbar-border, #{$o-we-toolbar-border});
+        background-color: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
         box-shadow: 0 18px 18px rgba(#000, .23);
         @include border-top-radius(0);
         @include border-bottom-radius($o-we-item-border-radius);
@@ -319,8 +306,8 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
         }
 
         &.active {
-            &, &:hover, &:focus {
-                color: $o-we-bg-darker;
+            & > * , &:hover, &:focus {
+                color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active})
 
                 &:before {
                     top: 0;
@@ -366,10 +353,10 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
             margin-bottom: -1px;
 
             &.active {
-                border-bottom: 1px solid $o-we-toolbar-color-accent;
+                border-bottom: 1px solid var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
                 background: none;
                 box-shadow: none;
-                color: $o-we-toolbar-color-clickable-active;
+                color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active});
             }
 
             &.o_colorpicker_reset {
@@ -387,7 +374,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
     }
 
     .colorpicker {
-        background: $o-we-toolbar-bg;
+        background: var(--o-we-toolbar-bg, #{$o-we-toolbar-bg});
         box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
     }
 
@@ -403,7 +390,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
         border-radius: 0;
 
         &.active {
-            background: $o-we-toolbar-color-accent;
+            background: var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent});
         }
     }
 }
@@ -491,7 +478,7 @@ body .modal {
         }
 
         .o_link_dialog_preview {
-            border-left: 1px solid map-get($grays, '200');
+            border-left: var(--o-link-dialog-preview-border, #{$border-width} solid #{$border-color});
         }
     }
 }
@@ -576,8 +563,6 @@ img::selection {
 .note-editable {
     border: $o-we-border-width solid $o-we-fg-light;
     overflow: auto;
-    background: white;
-    color: black;
     height: 100%;
     padding: 4px;
     min-height: 10px;
diff --git a/addons/web_editor/static/src/scss/wysiwyg.variables.scss b/addons/web_editor/static/src/scss/wysiwyg.variables.scss
new file mode 100644
index 00000000000..c3265aad940
--- /dev/null
+++ b/addons/web_editor/static/src/scss/wysiwyg.variables.scss
@@ -0,0 +1,12 @@
+// Floating Toolbar Variables
+$o-we-toolbar-entries-gap: $o-we-sidebar-content-field-control-item-spacing * .7 !default;
+$o-we-toolbar-entries-border-width: 1px !default;
+$o-we-toolbar-entries-padding: $o-we-sidebar-content-padding-base * .7 !default;
+
+$o-we-toolbar-bg: #FFF !default;
+$o-we-toolbar-bg-active: rgba($o-we-fg-light, .2) !default;
+$o-we-toolbar-border: $o-we-fg-light !default;
+$o-we-toolbar-color-text: $o-we-bg-light !default;
+$o-we-toolbar-color-accent: #018597 !default;
+$o-we-toolbar-color-clickable: $o-we-bg-lightest !default;
+$o-we-toolbar-color-clickable-active: $o-we-bg-darkest !default;
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 7e38622b29d..94bce3fb6c2 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -182,6 +182,15 @@
             'website/static/src/components/views/*',
             'website/static/src/services/website_service.js',
             'website/static/src/js/utils.js',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'website/static/src/client_actions/*/*.dark.scss'),
+        ],
+        "web.dark_mode_assets_backend": [
+            'website/static/src/components/dialog/*.dark.scss',
+            'website/static/src/scss/website.backend.dark.scss',
+            'website/static/src/client_actions/*/*.dark.scss',
+            'website/static/src/components/website_loader/website_loader.dark.scss'
         ],
         'web.assets_common': [
             'website/static/src/js/tours/tour_utils.js',
@@ -274,6 +283,9 @@
             'website/static/src/client_actions/*/*.xml',
             'website/static/src/components/website_loader/*.xml',
             'website/static/src/js/backend/**/*',
+
+            # Don't include dark mode files in light mode
+            ('remove', 'website/static/src/components/dialog/*.dark.scss'),
         ],
         'website.test_bundle': [
             '/web/static/lib/qweb/qweb2.js',
diff --git a/addons/website/static/src/client_actions/configurator/configurator.dark.scss b/addons/website/static/src/client_actions/configurator/configurator.dark.scss
new file mode 100644
index 00000000000..c46d66cf648
--- /dev/null
+++ b/addons/website/static/src/client_actions/configurator/configurator.dark.scss
@@ -0,0 +1,6 @@
+// = Website Configuration
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_configurator_odoo_logo {
+    --configurator-logo: url(/web/static/img/odoo_logo_dark.svg);
+}
diff --git a/addons/website/static/src/client_actions/configurator/configurator.js b/addons/website/static/src/client_actions/configurator/configurator.js
index 63ef0de89a9..14bfed3e957 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.js
+++ b/addons/website/static/src/client_actions/configurator/configurator.js
@@ -104,7 +104,7 @@ class DescriptionScreen extends Component {
             open: this._customizeNoResultMenuStyle.bind(this),
             focus: this._disableKeyboardNav.bind(this),
             classes: {
-                'ui-autocomplete': 'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast',
+                'ui-autocomplete': 'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast o_configurator_industry_dropdown',
             },
         });
         if (this.state.selectedIndustry) {
diff --git a/addons/website/static/src/client_actions/configurator/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
index d131615539c..4b73ac8c0c6 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.scss
+++ b/addons/website/static/src/client_actions/configurator/configurator.scss
@@ -1,6 +1,6 @@
 .o_configurator_container {
     @include o-position-absolute(0, 0, 0, 0);
-    background-color: $white;
+    background-color: $o-view-background-color;
 
     .o_configurator_screen {
 
@@ -74,6 +74,12 @@
             }
         }
 
+        .o_configurator_odoo_logo {
+            background-image: var(--configurator-logo, url(/web/static/img/odoo_logo.svg));
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+
         // ==== Screens
 
         &.o_description_screen {
@@ -127,6 +133,10 @@
                 }
             }
 
+            .o_configurator_industry_dropdown {
+                background: $dropdown-bg;
+            }
+
             .dropdown {
                 box-shadow: inset 0 -3px 0 map-get($theme-colors, primary);
 
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index a9dcdc07d26..fa34fd78239 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -9,9 +9,7 @@
 
     <t t-name="website.Configurator.WelcomeScreen" owl="1">
         <div class="o_configurator_screen h-100 d-flex flex-column o_welcome_screen">
-            <div class="container-fluid pt-3 pb-2">
-                <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-            </div>
+            <div class="o_configurator_odoo_logo mt-4 ms-4" style="height: 31px; width: 99px;"/>
             <div class="o_configurator_screen_content d-flex h-100">
                 <div class="container align-self-center o_configurator_show">
                     <div class="display-4 mb-2">Ready to build the<br class="d-none d-lg-inline"/>
@@ -28,9 +26,7 @@
 
 <t t-name="website.Configurator.DescriptionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_description_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content d-flex h-100 flex-grow-1">
             <div class="container align-self-center">
                 <div class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 o_configurator_show">
@@ -41,7 +37,7 @@
                                 <i class="text-primary" t-if="state.selectedType">
                                     <t t-esc="state.getSelectedType(state.selectedType).label"/>
                                 </i>
-                                <i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
+                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
                             </a>
                         </div>
                         <div t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
@@ -69,7 +65,7 @@
                                 <t t-if="state.selectedPurpose">
                                     <t t-esc="state.getSelectedPurpose(state.selectedPurpose).label"/>
                                 </t>
-                                <i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
+                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
                             </a>
                         </div>
                         <div class="dropdown-menu border-0 shadow-lg" role="menu">
@@ -89,9 +85,7 @@
 
 <t t-name="website.Configurator.PaletteSelectionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_palette_selection_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
             <div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
                 <div class="o_detect_logo w-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
@@ -124,7 +118,7 @@
                 </div>
                 <div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
                     <div class="border-top w-100"></div>
-                    <b class="palette_selection_or bg-white text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
+                    <b class="palette_selection_or bg-view text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
                     <div class="border-start d-none d-lg-inline h-100 mx-auto w-0"></div>
                 </div>
                 <div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
@@ -151,9 +145,7 @@
 
 <t t-name="website.Configurator.FeatureSelection" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_feature_selection_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content overflow-hidden container d-flex flex-grow-1 align-items-center">
             <div class="m-auto d-flex mh-100 flex-column">
                 <div class="o_configurator_typing_text o_configurator_show_fast">Add <b class="text-info">Pages</b> and <b class="text-warning">Features</b></div>
@@ -193,9 +185,7 @@
 
 <t t-name="website.Configurator.ThemeSelectionScreen" owl="1">
     <div class="o_configurator_screen h-100 d-flex flex-column o_theme_selection_screen">
-        <div class="container-fluid pt-3 pb-2">
-            <img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
-        </div>
+        <div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
         <div class="o_configurator_screen_content d-flex flex-column flex-grow-1 align-items-center">
             <div class="m-auto w-100 w-md-75 w-xl-100">
                 <div class="o_configurator_typing_text text-center mt-4 mb-lg-4">Choose your favorite <b>Theme</b>
diff --git a/addons/website/static/src/components/dialog/seo.dark.scss b/addons/website/static/src/components/dialog/seo.dark.scss
new file mode 100644
index 00000000000..86a7fa019f6
--- /dev/null
+++ b/addons/website/static/src/components/dialog/seo.dark.scss
@@ -0,0 +1,6 @@
+// = Website SEO
+// ============================================================================
+// No CSS hacks, variables overrides only
+.oe_seo_configuration {
+    --seo__preview-title-color: #8ab4f8; // Google Search dark-mode color
+}
diff --git a/addons/website/static/src/components/dialog/seo.scss b/addons/website/static/src/components/dialog/seo.scss
index 1817e8f4f4a..030e1c5ad7e 100644
--- a/addons/website/static/src/components/dialog/seo.scss
+++ b/addons/website/static/src/components/dialog/seo.scss
@@ -1,4 +1,6 @@
 .oe_seo_configuration {
+    --seo__preview-title-color: #1a0dab; // Google Search color
+
     #language-box {
         padding-right: 25px;
         background-color: white;
@@ -82,7 +84,7 @@
 
         .r {
             cursor: pointer;
-            color:#1a0dab;
+            color:var(--seo__preview-title-color);
             font-size: 18px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -95,7 +97,6 @@
             line-height: 18px;
             color: #545454;
             .kv {
-                color: #006621;
                 font-size: 14px;
                 line-height: 18px;
             }
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index 32d3d6053b5..d384512c5d9 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -103,8 +103,8 @@
             <t t-if="props.isIndexed">
                 <div class="r"><t t-esc="props.title"/></div>
                 <div class="s">
-                    <div class="kv"><t t-esc="props.url"/></div>
-                    <div class="st"><t t-esc="description"/></div>
+                    <div class="kv mb-1 text-muted"><t t-esc="props.url"/></div>
+                    <div class="st text-black"><t t-esc="description"/></div>
                 </div>
             </t>
             <t t-else="">
diff --git a/addons/website/static/src/components/website_loader/website_loader.dark.scss b/addons/website/static/src/components/website_loader/website_loader.dark.scss
new file mode 100644
index 00000000000..7e5d8a24230
--- /dev/null
+++ b/addons/website/static/src/components/website_loader/website_loader.dark.scss
@@ -0,0 +1,6 @@
+// = Website Loader
+// ============================================================================
+// No CSS hacks, variables overrides only
+.o_website_loader_container {
+    --website-loader-color: #FFFFFF;
+}
diff --git a/addons/website/static/src/components/website_loader/website_loader.scss b/addons/website/static/src/components/website_loader/website_loader.scss
index bc2b20fb474..92074abf437 100644
--- a/addons/website/static/src/components/website_loader/website_loader.scss
+++ b/addons/website/static/src/components/website_loader/website_loader.scss
@@ -1,4 +1,6 @@
 .o_website_loader_container {
+    --website-loader-color: #{$white};
+
     font-family: "Montserrat", $font-family-sans-serif;
     background-color: rgba($o-shadow-color, .9);
     pointer-events: all;
@@ -6,6 +8,7 @@
     justify-content: space-evenly;
     z-index: $zindex-modal - 1;
     padding: 7%;
+    color: var(--website-loader-color);
 
     .o_website_loader {
         position: relative;
@@ -19,6 +22,8 @@
 
     .o_website_loader_tip {
         font-size: 0.5em;
+        color: var(--website-loader-color);
+        
         @include media-breakpoint-down(md) {
             width: 50% !important;
         }
diff --git a/addons/website/static/src/components/website_loader/website_loader.xml b/addons/website/static/src/components/website_loader/website_loader.xml
index bf9ec651d8d..ded91941bfe 100644
--- a/addons/website/static/src/components/website_loader/website_loader.xml
+++ b/addons/website/static/src/components/website_loader/website_loader.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 <t t-name="website.website_loader" owl="1">
     <div t-if="state.isVisible" class="o_website_loader_container position-fixed fixed-top fixed-left
-        h-100 w-100 d-flex flex-column align-items-center text-white fw-bold text-center">
+        h-100 w-100 d-flex flex-column align-items-center fw-bold text-center">
         <t t-if="state.title" t-esc="state.title"/>
         <t t-elif="state.showTips">Building your website...</t>
         <div class="o_website_loader"/>
diff --git a/addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png b/addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png
new file mode 100644
index 00000000000..ee8ad9e24e3
Binary files /dev/null and b/addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png differ
diff --git a/addons/website/static/src/scss/website.backend.dark.scss b/addons/website/static/src/scss/website.backend.dark.scss
new file mode 100644
index 00000000000..d3c8dc719f4
--- /dev/null
+++ b/addons/website/static/src/scss/website.backend.dark.scss
@@ -0,0 +1,7 @@
+// = Website Backend
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+.o_demo_background {
+    --Dashboard__demoBackground: url("/website/static/src/img/website_dashboard_visit_demo_dark_mode.png");
+}
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index d9b74db7f5d..7c79af5c9a6 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -1,12 +1,12 @@
 .o_dashboards {
-    background-color: #ececec;
+    background-color: $o-view-background-color;
 
     &:has(iframe[src*='plausible']) {
         background-color: #f9fafb; // Copied from iframe.
     }
 
     .o_website_dashboard {
-        background-color: #ececec;
+        background-color: $o-view-background-color;
 
         &:has(iframe[src*='plausible']) {
             background-color: #f9fafb; // Copied from iframe.
@@ -156,7 +156,7 @@
                 margin-top: 16px;
                 height: 300px;
                 background-size: 100% !important;
-                background: url("/website/static/src/img/website_dashboard_visit_demo.png") no-repeat;
+                background: var(--Dashboard__demoBackground, url("/website/static/src/img/website_dashboard_visit_demo.png")) no-repeat;
                 position: relative;
 
                 .o_buttons {
@@ -164,7 +164,7 @@
                 }
 
                 .o_layer {
-                    background-color: rgba(255,255,255,.3);
+                    background-color: rgba($o-view-background-color,.3);
                     position: absolute;
                     top: 0;
                     left: 0;
@@ -197,7 +197,6 @@
 
 .o_kanban_renderer.o_theme_kanban {
     $o-theme-kanban-gray: #fcfcfc;
-    background-color: $o-theme-kanban-gray;
 
     /// Un-grouped Layout (default)
     &.o_kanban_ungrouped {
@@ -231,7 +230,6 @@
 
         .o_theme_preview_top {
             position: relative;
-            border: 1px solid darken($o-theme-kanban-gray, 20%);
             border-radius: 2px;
             transform-origin: center bottom;
             transition: all .1s ease 0s;
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index 239f321fd3b..375cbe44494 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray" owl="1">
     <div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
-        <a href="#" accesskey="a" t-on-click="startEdit">
+        <a href="#" accesskey="a" t-on-click="startEdit" class="text-reset">
             <span t-if="translatable" class="fa fa-pencil me-2"/>
             <span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
             <t t-esc="label"/>
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index c0c072a5f6a..bd8a7330255 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -20,8 +20,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('settings')]" position="inside">
                 <div class="app_settings_block" data-string="Website" string="Website" data-key="website" groups="website.group_website_designer">
-                    <div class="row app_settings_header mb-0 mt-0 ms-0 mw-100"
-                        style="background-color: #FEF0D0; margin-bottom: 0px !important; margin-top: 0px !important;">
+                    <div class="row app_settings_header my-0 ms-0 mw-100 bg-warning bg-opacity-25">
                         <div class="col-xs-12 col-md-6 ms-0 o_setting_box">
                             <div class="o_setting_right_pane border-start-0 ms-0 ps-0">
                                 <div class="content-group">
@@ -75,7 +74,7 @@
                                     </div>
                                     <div class="row mt8">
                                         <label class="col-lg-3" string="Favicon" for="favicon"/>
-                                        <field name="favicon" widget="image" class="float-start oe_avatar"/>
+                                        <field name="favicon" widget="image" class="float-start oe_avatar bg-view"/>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
index a079fa10225..977b034858d 100644
--- a/addons/website/views/website_views.xml
+++ b/addons/website/views/website_views.xml
@@ -29,7 +29,7 @@
                         <group name="domain">
                             <field name="name"/>
                             <field name="domain"/>
-                            <field name="logo" widget="image" class="oe_avatar float-start"/>
+                            <field name="logo" widget="image" class="oe_avatar w-auto float-start"/>
                             <field name="language_count" invisible="1"/>
                             <field name="company_id" options="{'no_open': True, 'no_create': True}" groups="base.group_multi_company"/>
                             <field name="language_ids" widget="many2many_tags" options="{'no_open': True, 'no_create': True}"/>
@@ -319,7 +319,7 @@
                             <t t-set="has_screenshot" t-value="record.image_ids.raw_value.length > 1"/>
                             <t t-set="image_url" t-value="has_image ? '/web/image/' + record.image_ids.raw_value[0] : record.icon.value"/>
 
-                            <div class="o_theme_preview_top bg-white mb4">
+                            <div class="o_theme_preview_top bg-white mb4 border">
                                 <div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')}" t-attf-style="background-image: url(#{image_url});"/>
                                 <div t-if="record.is_installed_on_current_website.raw_value" class="o_button_area">
                                     <button type="object" name="button_refresh_theme" class="btn btn-primary">Update theme</button>
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index 13c63cace09..224d39d9b3a 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -1,29 +1,15 @@
 // = Onboarding Panel
 // ============================================================================
+$o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4 !default;
+
 .o_onboarding_main {
-    $o-onboarding-base-time: 0.5s;
-    $o-onboarding-dot-size: 20px;
-    $o-onboarding-progress-size: 2px;
-    $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4;
-
-    $o-onboarding-colors: (
-        'blue': (
-            'bg': (#60ABC3, #4187AE),
-            'ui': (#fcb157, #FBEEC8),
-        ),
-        'orange': (
-            'bg': (#DA9D77, #B9684F),
-            'ui': (#0774f4, #68B3C9),
-        ),
-        'violet': (
-            'bg': (#6070C3, #475DA4),
-            'ui': (#F39D9B, #FBEEC8),
-        ),
-    );
-
     background: white center top;
     background-size: cover;
 
+    .o_onboarding_btn_close {
+        color: #fff;
+    }
+
     // = Color Variations
     // ------------------------------------------------------------------------
     @each $key, $values in $o-onboarding-colors {
@@ -66,6 +52,7 @@
 
         .o_onboarding_step_action {
             min-width: $o-onboarding-step-width * .5;
+            border: $border-width solid #fff;
         }
 
         .o_onboarding_progress {
@@ -91,6 +78,13 @@
             display: none;
         }
 
+        .o_onboarding_step_title,
+        .o_onboarding_step_action,
+        .o_onboarding_step_action__done,
+        .o_onboarding_dot_isChecked {
+            color: #fff;
+        }
+
         // = "To do" Step Design
         // --------------------------------------------------------------------
         &[data-step-state="not_done"] {
diff --git a/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss b/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss
new file mode 100644
index 00000000000..779c63f5a7f
--- /dev/null
+++ b/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss
@@ -0,0 +1,18 @@
+// = Onboarding Colors
+// ============================================================================
+// No CSS hacks, variables overrides only
+
+$o-onboarding-colors: (
+    'blue': (
+        'bg': (#215e72, #1c3d4e),
+        'ui': (#db851e, #c0ad73),
+    ),
+    'orange': (
+        'bg': (#5c4436, #784536),
+        'ui': ($o-brand-primary, #68B3C9),
+    ),
+    'violet': (
+        'bg': (#424a7d, #333e6a),
+        'ui': (#db851e, #c0ad73),
+    ),
+) !default;
diff --git a/odoo/addons/base/static/src/scss/onboarding.variables.scss b/odoo/addons/base/static/src/scss/onboarding.variables.scss
new file mode 100644
index 00000000000..6f433e6628a
--- /dev/null
+++ b/odoo/addons/base/static/src/scss/onboarding.variables.scss
@@ -0,0 +1,18 @@
+$o-onboarding-base-time: 0.5s !default;
+$o-onboarding-dot-size: 20px !default;
+$o-onboarding-progress-size: 2px !default;
+
+$o-onboarding-colors: (
+    'blue': (
+        'bg': (#60ABC3, #4187AE),
+        'ui': (#fcb157, #FBEEC8),
+    ),
+    'orange': (
+        'bg': (#DA9D77, #B9684F),
+        'ui': (#0774f4, #68B3C9),
+    ),
+    'violet': (
+        'bg': (#6070C3, #475DA4),
+        'ui': (#F39D9B, #FBEEC8),
+    ),
+) !default;
diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml
index 837199872a2..484165647c4 100644
--- a/odoo/addons/base/views/onboarding_views.xml
+++ b/odoo/addons/base/views/onboarding_views.xml
@@ -28,7 +28,7 @@
                  t-att-style="'background-image:url(' + bg_image + ')'">
 
                 <div class="o_onboarding_wrap py-5">
-                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 text-white" title="Close the onboarding panel"><i class="oi oi-close"/></a>
+                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2" title="Close the onboarding panel"><i class="oi oi-close"/></a>
 
                     <div class="o_onboarding_steps d-flex" t-out="0"/>
 
@@ -55,24 +55,24 @@
 
             <div class="o_onboarding_step_side d-flex pt-0 flex-grow-1">
                 <div class="o_onboarding_progress position-absolute"/>
-                <span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'text-white' or ''}}"/>
+                <span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'o_onboarding_dot_isChecked' or ''}}"/>
             </div>
 
             <div class="o_onboarding_step_content py-3 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
                 <div class="o_onboarding_step_content_info mb-3">
                     <a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                        <h4 class="o_onboarding_step_title text-white" t-out="title"/>
+                        <h4 class="o_onboarding_step_title" t-out="title"/>
                     </a>
                     <p class="text-white-75 m-0" t-out="description"/>
                 </div>
-                <a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4 border border-white" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                    <span class="text-white">
+                <a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
+                    <span>
                         <t t-if="btn_text" t-out="btn_text" />
                         <t t-else="">Let's do it</t>
                     </span>
                 </a>
-                <a t-else="" class="o_onboarding_step_action__done btn text-white" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                    <span class="text-white">
+                <a t-else="" class="o_onboarding_step_action__done btn" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
+                    <span>
                         <i t-attf-class="me-2 fa #{done_icon if done_icon else 'fa-check'}" />
                         <t t-if="done_text" t-out="done_text" />
                         <t t-else="">All done!</t>