diff --git a/addons/event_booth/data/event_booth_category_data.xml b/addons/event_booth/data/event_booth_category_data.xml
index 69123f1e6a8..fc9c1bcb159 100644
--- a/addons/event_booth/data/event_booth_category_data.xml
+++ b/addons/event_booth/data/event_booth_category_data.xml
@@ -7,14 +7,14 @@
         <field name="image_1920" type="base64" file="event_booth/static/src/img/standard-booth.jpeg"/>
         <field name="description" type="html">
             <div class="card text-center shadow-sm mt32">
-                <div class="card-header p-4 bg-600">
+                <div class="o_wevent_theme_bg_dark card-header p-4">
                     <h4 class="text-white m-0">Standard</h4>
                 </div>
                 <ul class="list-group list-group-flush">
                     <li class="list-group-item">
                         <span>1 Branded Booth</span>
                     </li>
-                    <li class="list-group-item bg-600">
+                    <li class="o_wevent_theme_bg_dark list-group-item">
                         <span class="text-white">4m²</span>
                     </li>
                     <li class="list-group-item">
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index 250ab5174ae..7c9c529b938 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -10,7 +10,7 @@
                 <p class="lead mb-3">Every year we invite our community, partners and end-users to come and meet us! It's the ideal event to get together and present new features, roadmap of future versions, achievements of the software, workshops, training sessions, etc....</p>
                 <p class="mb-3">This event is also an opportunity to showcase our partners' case studies, methodology or developments. Be there and see directly from the source the features of the version 12!
                 </p>
-                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-0"><i class="fa fa-info-circle me-2"/>This event and all the conferences are in <b>English</b>!</p>
                 </div>
                 <h5 class="mb-2">What's new?</h5>
@@ -27,11 +27,11 @@
                     <li><b>Business Room</b> - To discuss implementation methodologies, best sales practices, etc.</li>
                     <li><b>Workshop Room</b> - Mainly for developers.</li>
                 </ul>
-                <div class="bg-light rounded-end border-start border-secondary p-3 mb-3" style="border-start-width: 3px !important;">
+                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-3" style="border-start-width: 3px !important;">
                     <p class="mb-0"><em>If you wish to make a presentation, please send your topic proposal as soon as possible for approval to Mr. Famke Jenssens at ngh (a) yourcompany (dot) com. The presentations should be, for example, a presentation of a community module, a case study, methodology feedback, technical, etc. Each presentation must be in English.</em></p>
                 </div>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-0">OpenElec Applications reserves the right to cancel, re-name or re-locate the event or change the dates on which it is held.</p>
                 </div>
             </div>
@@ -51,7 +51,7 @@
                 <p class="lead mb-3">Around one hundred ballons will simultaneously take flight and turn the sky into a beautiful canvas of colours.</p>
                 <p class="lead mb-3">This is the perfect place for spending a nice day with your family, we guarantee you will be leaving with beautiful everlasting memories !</p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                     <p class="mb0">The safety of our attendees and our aeronauts comes first !</p>
                 </div>
@@ -84,7 +84,7 @@
 
     <p>For any additional information, please contact us at <a href="mailto:events@odoo.com">events@odoo.com</a></p>
 
-    <section class="s_we_speaker bg-200 p-3 mb-4" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
+    <section class="s_we_speaker o_wevent_theme_bg_light p-3 mb-4" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
         <span class="badge text-bg-secondary o_wevent_badge float-end">SPEAKER</span>
         <img src="/mail/static/src/img/odoobot.png" width="70" class="img-fluid rounded-circle float-start me-3" alt=""/>
         <div class="overflow-hidden">
@@ -112,7 +112,7 @@
                 <p class="lead mb-3">Bands like Bar Fighters, Led Slippers and Link Floyd will offer you the show of the century during our three day event.</p>
                 <p class="lead mb-3">This is the perfect place for spending a nice time with your friends while listening to some of the most iconic rock songs of all times!</p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                 </div>
             </div>
@@ -137,7 +137,7 @@
                 to chat with experienced players and trainers once the tournament is over !
                 </p>
                 <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@yourcompany.com">events@yourcompany.com</a>.</p>
-                <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+                <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
                     <p class="mb-1">We reserve the right to cancel, re-name or re-locate the event or change the dates on which it is held in case the weather fails us.</p>
                 </div>
             </div>
@@ -163,7 +163,7 @@
         Special discount codes will be handed out during the various streams, make sure to be there on time.
     </p>
     <p class="mb-3">For any additional information, please contact us at <a href="mailto:events@openwood.example.com">events@penwood.example.com</a>.</p>
-    <div class="bg-light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
+    <div class="o_wevent_theme_bg_light rounded-end border-start border-secondary p-3 mb-5" style="border-start-width: 3px !important;">
         <p class="mb-1">This event is fully online and FREE, if you have paid for tickets, you should get a refund.<br/>
         It will require a good Internet connection to get the best video quality.</p>
     </div>
diff --git a/addons/website_event/static/src/scss/event_templates_common.scss b/addons/website_event/static/src/scss/event_templates_common.scss
index 41b6e26af59..4ff4597787e 100644
--- a/addons/website_event/static/src/scss/event_templates_common.scss
+++ b/addons/website_event/static/src/scss/event_templates_common.scss
@@ -1,3 +1,25 @@
+$o-wevent-color-ratio-bg: 15%;
+$o-wevent-bg-color-base: mix(map-get($theme-colors, 'primary'), $body-bg, $o-wevent-color-ratio-bg);
+$o-wevent-bg-color-base-contrast: color-contrast($o-wevent-bg-color-base);
+$o-wevent-bg-color-light: mix($o-wevent-bg-color-base, #E9ECEF);
+$o-wevent-bg-color-dark: mix($o-wevent-bg-color-base, #24363a);
+$o-wevent-color: mix(map-get($theme-colors, 'primary'), $body-color, $o-wevent-color-ratio-bg);
+
+.o_wevent_theme_bg_base {
+    background-color: $o-wevent-bg-color-base !important;
+    color: $o-wevent-color;
+}
+
+.o_wevent_theme_bg_light {
+    background-color: $o-wevent-bg-color-light !important;
+    color: $o-wevent-color;
+}
+
+.o_wevent_theme_bg_dark {
+    background-color: $o-wevent-bg-color-dark !important;
+    color: $o-wevent-color;
+}
+
 .o_wevent_index, .o_wevent_event {
 
     // Simple colored tags according to assigned background color
@@ -24,11 +46,11 @@
     // Complex colored tags according to assigned background color with hover effect
     @for $size from 1 through length($o-colors) {
         .o_tag_color_hovered_#{$size - 1} {
-            $background-color: white;
+            $background-color: $o-wevent-bg-color-base;
             // no color selected
             @if $size == 1 {
                 & {
-                    color: black;
+                    color: color-contrast($background-color);
                     background-color: $background-color;
                     box-shadow: inset 0 0 0 1px nth($o-colors, $size);
                 }
@@ -53,8 +75,8 @@
 
     .o_wevent_index_topbar_filters {
         .dropdown-toggle {
-            border: $border-width solid map-get($grays, '400');
-            @include o-bg-color(map-get($grays, 'white'), $with-extras: false);
+            border: $border-width solid mix(map-get($theme-colors, 'primary'), map-get($grays, '400'));
+            @extend .o_wevent_theme_bg_light;
             @include border-radius($dropdown-border-radius);
             &:hover, &:focus {
                 border-color: map-get($theme-colors, 'primary');
@@ -66,7 +88,7 @@
             }
             .fa {
                 margin-right: .4em;
-                color: map-get($theme-colors, 'primary');
+                color: $o-wevent-color;
             }
         }
         .dropdown-menu {
@@ -74,9 +96,14 @@
             min-width: 12rem;
             max-height: 250px;
             overflow-y: auto;
+            @extend .o_wevent_theme_bg_light;
         }
     }
 
+    .o_wevent_event_searchbar_form > input {
+        @extend .o_wevent_theme_bg_light;
+    }
+
     /*
      * COMMON TO ALL ONLINE-* PAGES
      */
@@ -87,10 +114,6 @@
             opacity: 0.4;
         }
         // background color-based for new styling
-        .event_color_0 {
-            // bg-100 background but DO NOT extend bg-100 as it messes with text-muted colors
-            background-color: #F8F9FA;
-        }
         .event_color_1 {
             background-color: rgba(240, 96, 80, 0.2);
         }
@@ -143,7 +166,7 @@
 
             // Left panel
             .o_wevent_online_page_aside {
-
+                @extend .o_wevent_theme_bg_base;
                 // Left panel: content display
                 .o_wevent_online_page_aside_content {
                     border: 1px solid $border-color;
diff --git a/addons/website_event/static/src/scss/event_templates_list.scss b/addons/website_event/static/src/scss/event_templates_list.scss
index dbda8f159dd..b3f945a5c15 100644
--- a/addons/website_event/static/src/scss/event_templates_list.scss
+++ b/addons/website_event/static/src/scss/event_templates_list.scss
@@ -33,11 +33,6 @@
                 min-width: 0;
             }
         }
-        &.opt_event_list_cards_bg {
-            @if (map-get($colors, 'body') == $o-portal-default-body-bg) {
-                @extend .bg-200;
-            }
-        }
         .opt_events_list_columns {
             header {
                 height: 200px;
@@ -66,6 +61,8 @@
             height: 4rem;
             border-radius: 50%;
             text-align: center;
+            background-color: $o-wevent-bg-color-base;
+            color: $o-wevent-color;
 
             .o_wevent_event_day {
                 font-size: 1.125rem;
@@ -86,8 +83,13 @@
             padding: $card-spacer-y $card-spacer-x;
             text-align: right;
         }
-        .card-title {
-            color: $body-color;
+        article {
+            background-color: $o-wevent-bg-color-base;
+            color: $o-wevent-color;
+            .card-body {
+                background-color: $o-wevent-bg-color-base !important;
+                color: $o-wevent-color;
+            }
         }
     }
     .o_wevent_sidebar_title {
@@ -115,4 +117,8 @@
             color: #fff;
         }
     }
+    .o_half_screen_height {
+        // Set min-height to the same value as the header
+        min-height: 200px !important;
+    }
 }
diff --git a/addons/website_event/static/src/scss/event_templates_page.scss b/addons/website_event/static/src/scss/event_templates_page.scss
index 3aeb0d5c5b0..97bf69295a5 100644
--- a/addons/website_event/static/src/scss/event_templates_page.scss
+++ b/addons/website_event/static/src/scss/event_templates_page.scss
@@ -99,8 +99,8 @@
  */
 
 .o_wevent_event .event_color_0 {
-    background-color: white;
-    color: #5a5a5a;
+    background-color: $o-wevent-bg-color-base;
+    color: $o-wevent-color;
 }
 .o_wevent_event .event_color_1 {
     background-color: #cccccc;
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index c164c5adbae..4df8ca970b8 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -15,7 +15,7 @@
             <!-- Drag/Drop Area -->
             <div id="oe_structure_we_index_1" class="oe_structure oe_empty"/>
             <!-- Content -->
-            <div t-attf-class="o_wevent_events_list #{opt_events_list_cards and 'opt_event_list_cards_bg'}">
+            <div class="o_wevent_events_list">
                 <div class="container">
                     <div class="d-flex mx-n3">
                         <t t-call="website_event.searched_tags"/>
@@ -79,7 +79,7 @@
 <template id="searched_tags" name="Searched tags">
     <div class="d-flex align-items-center mt16">
         <t t-foreach="search_tags" t-as="tag">
-            <span class="align-items-baseline border d-inline-flex ps-2 rounded ml16 mb-2 bg-white">
+            <span t-attf-class="align-items-baseline border d-inline-flex ps-2 rounded ml16 mb-2 #{'o_tag_color_%s' % tag.color if tag.color else ''}">
                 <i class="fa fa-tag me-2 text-muted"/>
                 <t t-out="tag.display_name"/>
                 <a t-att-href="'/event?%s' % keep_query('*', tags=str((search_tags - tag).ids))" class="btn border-0 py-1">&#215;</a>
@@ -172,7 +172,7 @@
                                 <t t-set="_record" t-value="event"/>
 
                                 <!-- Short Date -->
-                                <div class="o_wevent_event_date position-absolute bg-white shadow-sm text-dark">
+                                <div class="o_wevent_event_date position-absolute shadow-sm">
                                     <span t-field="event.date_begin" t-options="{'tz_name': event.date_tz, 'format': 'LLL'}" class="o_wevent_event_month"/>
                                     <span t-field="event.date_begin" t-options="{'tz_name': event.date_tz, 'format': 'dd'}" class="o_wevent_event_day oe_hide_on_date_edit"/>
                                 </div>
@@ -218,11 +218,11 @@
                     </div>
                     <!-- Footer -->
                     <footer t-if="not event.event_registrations_open or event.event_registrations_sold_out"
-                        t-att-class="'small align-self-end w-100 %s %s' % (
+                        t-att-class="'alert-secondary small align-self-end w-100 %s %s' % (
                             opt_events_list_cards and 'card-footer' or (not opt_events_list_columns and 'mx-4 mt-auto pt-2') or 'py-2',
                             opt_events_list_cards and 'border-top' or '',
                         )">
-                        <span t-if="not event.event_registrations_open" class="text-danger">
+                        <span t-if="not event.event_registrations_open">
                             <t t-if="not event.event_registrations_started">
                                 Registrations not yet open
                             </t>
diff --git a/addons/website_event/views/event_templates_page.xml b/addons/website_event/views/event_templates_page.xml
index c2022c0e80d..c115060fd05 100644
--- a/addons/website_event/views/event_templates_page.xml
+++ b/addons/website_event/views/event_templates_page.xml
@@ -11,18 +11,18 @@
                 <nav class="navbar navbar-light border-top shadow-sm d-print-none">
                     <div class="container align-items-baseline justify-content-start">
                         <a href="/event" class="navbar-brand h4 my-0 me-0 me-md-4">
-                            <i class="fa fa-long-arrow-left text-primary me-2"/>
+                            <i class="fa fa-long-arrow-left me-2"/>
                             <span>All Events</span>
                         </a>
                         <ul class="navbar-nav flex-row ms-md-auto ms-0">
                             <li t-if="opt_events_list_categories" class="nav-item me-3">
                                 <a t-attf-href="/event?type=#{event.event_type_id.id}" t-if="event.event_type_id" class="nav-link">
-                                    <i class="fa fa-folder-open text-primary me-2"/><span t-field="event.event_type_id"/>
+                                    <i class="fa fa-folder-open me-2"/><span t-field="event.event_type_id"/>
                                 </a>
                             </li>
                             <li t-if="event.country_id" class="nav-item me-3">
                                 <a t-attf-href="/event?country=#{event.country_id.id}" class="nav-link">
-                                    <i class="fa fa-map-marker text-primary me-2"/><span t-field="event.country_id"/>
+                                    <i class="fa fa-map-marker me-2"/><span t-field="event.country_id"/>
                                 </a>
                             </li>
                         </ul>
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index 0931f5bbf35..8025c6f50c1 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -30,14 +30,14 @@
 <!-- Event - Description -->
 <template id="event_description_full" name="Event Description" track="1">
     <t t-call="website_event.event_details">
-        <section class="bg-200 mt-n5" t-cache="event if not editable and event.website_published else None">
+        <section class="mt-n5" t-cache="event if not editable and event.website_published else None">
             <div class="container overflow-hidden">
                 <div class="row g-0 mt-n4 mb-3">
                     <!-- Description -->
-                    <div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-3 pt-5 pb-0 shadow-sm">
+                    <div id="o_wevent_event_main_col" class="o_wevent_theme_bg_base col-lg-8 px-3 pt-5 pb-0 shadow-sm">
                         <span t-field="event.description" itemprop="description"/>
                     </div>
-                    <div class="col-lg-4 bg-light shadow-sm d-print-none">
+                    <div class="o_wevent_theme_bg_light col-lg-4 shadow-sm d-print-none">
                         <!-- Date & Time -->
                         <div class="o_wevent_sidebar_block">
                             <h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
@@ -118,7 +118,7 @@
 <!-- Event - Registration -->
 <template id="registration_template" name="Registration">
     <div t-if="toast_message" class="o_wevent_register_toaster d-none" t-att-data-message="toast_message"/>
-    <div t-if="not event.event_registrations_open" class="bg-white mb-5">
+    <div t-if="not event.event_registrations_open" class="o_wevent_theme_bg_base mb-5">
         <div class="alert alert-info mb-0 row g-0 justify-content-between align-items-center" role="status">
             <t t-if="not event.event_registrations_started and not event.event_registrations_sold_out">
                 <div class="col col-md-8 d-flex">
@@ -150,7 +150,7 @@
         t-attf-action="/event/#{slug(event)}/registration/new" method="post"
         itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-        <div id="o_wevent_tickets" class="bg-white shadow-sm o_wevent_js_ticket_details" data-folded-by-default="0">
+        <div id="o_wevent_tickets" class="o_wevent_theme_bg_base shadow-sm o_wevent_js_ticket_details" data-folded-by-default="0">
             <t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
             <!-- If some tickets expired and there is only one type left, we keep the same layout -->
             <t t-if="len(event.event_ticket_ids) &gt; 1 or tickets.description">
@@ -169,7 +169,7 @@
                 </div>
                 <div id="o_wevent_tickets_collapse" class="collapse show">
                     <div t-foreach="tickets" t-as="ticket"
-                         class="row px-3 py-3 mx-0 bg-light border-bottom o_wevent_ticket_selector"
+                         class="o_wevent_theme_bg_light row px-3 py-3 mx-0 border-bottom o_wevent_ticket_selector"
                          t-att-name="ticket.name">
                         <div class="col-md-8 col-xs-12 p-0" itemscope="itemscope" itemtype="http://schema.org/Offer">
                             <h5 itemprop="name" t-field="ticket.name" class="my-0"/>
@@ -287,7 +287,7 @@
                     <t t-foreach="tickets" t-as="ticket" t-if="availability_check">
                         <t t-foreach="range(1, ticket['quantity'] + 1)" t-as="att_counter" name="attendee_loop">
                             <t t-set="counter" t-value="counter + 1"/>
-                            <div class="modal-body bg-light border-bottom">
+                            <div class="modal-body border-bottom">
                                 <h5 class="mt-1 pb-2 border-bottom">Ticket #<span t-out="counter"/> <small class="text-muted">- <span t-out="ticket['name']"/></small></h5>
                                 <div class="row">
                                     <div class="col-lg my-2">
@@ -312,7 +312,7 @@
                         <t t-set="counter_type" t-value="counter_type + 1"/>
                     </t>
                     <t t-if="not availability_check">
-                        <div class="modal-body bg-light border-bottom">
+                        <div class="modal-body border-bottom">
                             <strong> You ordered more tickets than available seats</strong>
                         </div>
                     </t>
diff --git a/addons/website_event/views/snippets/s_events.xml b/addons/website_event/views/snippets/s_events.xml
index fbb0c7adaba..809516b74a6 100644
--- a/addons/website_event/views/snippets/s_events.xml
+++ b/addons/website_event/views/snippets/s_events.xml
@@ -47,13 +47,13 @@
                     <t t-set="_resize_height" t-value="256"/>
                     <t t-set="_resize_width" t-value="256"/>
 
-                    <div class="s_events_event_date position-absolute bg-white shadow-sm text-dark">
+                    <div class="s_events_event_date o_wevent_theme_bg_base position-absolute shadow-sm text-dark">
                         <span t-field="record.date_begin" t-options="{'format': 'LLL'}" class="s_events_event_month"/>
                         <span t-field="record.date_begin" t-options="{'format': 'dd'}" class="s_events_event_day"/>
                     </div>
                 </t>
             </a>
-            <div class="card-body p-3">
+            <div class="o_wevent_theme_bg_base card-body p-3">
                 <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                 <h5 class="mb-0 text-truncate" t-field="record.name"/>
                 <time itemprop="startDate" t-att-datetime="record.date_begin">
diff --git a/addons/website_event_booth/static/src/scss/website_event_booth.scss b/addons/website_event_booth/static/src/scss/website_event_booth.scss
index 569310991d5..066bf9513c9 100644
--- a/addons/website_event_booth/static/src/scss/website_event_booth.scss
+++ b/addons/website_event_booth/static/src/scss/website_event_booth.scss
@@ -22,7 +22,7 @@ label.o_wbooth_category_unavailable {
 
     & > input + div {
         padding: 10px;
-        border: 5px solid #e9ecef;
+        border: 5px solid mix(map-get($theme-colors, 'secondary'), #e9ecef);
     }
 
     &:not(.o_wbooth_category_unavailable) > input + div {
@@ -30,21 +30,21 @@ label.o_wbooth_category_unavailable {
     }
 
     &:not(.o_wbooth_category_unavailable):hover > input + div {
-        border-color: #6c757d;
+        border-color: map-get($theme-colors, 'secondary');
     }
 
     &:hover > input + div:before {
-        color: #6c757d;
+        color: map-get($theme-colors, 'secondary');
     }
 
     & > input:checked + div,
     &:hover > input:checked + div {
-        border-color: $o-enterprise-primary-color;
+        border-color: map-get($theme-colors, 'primary');
     }
 
     & > input:checked + div:before,
     &:hover > input:checked + div:before {
-        color: $o-enterprise-primary-color;
+        color: map-get($theme-colors, 'primary');
     }
 
     & > input:checked + div:before,
@@ -57,7 +57,7 @@ label.o_wbooth_category_unavailable {
         line-height: 40px;
         top: -16px;
         right: -16px;
-        background-color: white;
+        background-color: $o-wevent-bg-color-base;
         font-size: 2em;
         text-align: center;
     }
@@ -67,3 +67,7 @@ label.o_wbooth_category_unavailable {
     }
 
 }
+
+.o_wevent_booth_category {
+    background-color: $o-wevent-bg-color-light;
+}
diff --git a/addons/website_event_booth/views/event_booth_templates.xml b/addons/website_event_booth/views/event_booth_templates.xml
index 65df2059926..cd8a3aadb5b 100644
--- a/addons/website_event_booth/views/event_booth_templates.xml
+++ b/addons/website_event_booth/views/event_booth_templates.xml
@@ -17,7 +17,7 @@
                 </t>
                 <section class="mt-n5">
                     <div class="container overflow-hidden">
-                        <div class="row mb64 bg-white g-0 rounded shadow-sm">
+                        <div class="o_wevent_theme_bg_base row mb64 g-0 rounded shadow-sm">
                             <t t-out="0"/>
                         </div>
                     </div>
@@ -110,7 +110,7 @@
                         </div>
                     </form>
                 </div>
-                <div t-if="available_booth_category_ids" class="col-lg-3 bg-200 hidden-sm hidden-xs p-4">
+                <div t-if="available_booth_category_ids" class="o_wevent_booth_category col-lg-3 hidden-sm hidden-xs p-4">
                     <t t-foreach="event.event_booth_category_ids" t-as="booth_category">
                         <div t-attf-id="o_wbooth_booth_description_#{booth_category.id}"
                              class="o_wbooth_booth_description d-none" t-field="booth_category.description"/>
diff --git a/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss b/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss
index 81229906db4..b0175e638a8 100644
--- a/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss
+++ b/addons/website_event_exhibitor/static/src/scss/event_exhibitor_templates.scss
@@ -21,6 +21,8 @@
     .o_wesponsor_card {
         .card-body {
             padding: 1rem;
+            background-color: $o-wevent-bg-color-base !important;
+            color: $o-wevent-color;
         }
 
         .card-footer {
@@ -81,6 +83,8 @@
      */
 
     .o_wevent_online_page_container {
+        background-color: $o-wevent-bg-color-base;
+        color: $o-wevent-color;
 
         // Jitsi container
         #o_wsponsor_jitsi_iframe {
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
index e06a87df472..76d3daf9272 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
@@ -179,7 +179,7 @@
                     </div>
                 </div>
             </header>
-            <div class="col-12 h-100">
+            <div class="o_wevent_theme_bg_base col-12 h-100">
                 <main class="card-body">
                     <!-- Title -->
                     <h5 class="card-title mt-0 mb-0 d-flex align-items-start">
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
index d3105147136..d7df2ee8728 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
@@ -30,7 +30,7 @@
 <!-- ============================================================ -->
 
 <template id="exhibitor_main" name="Exhibitor: Main Content">
-    <div t-att-class="'col-12 o_wevent_online_page_main o_wesponsor_exhibitor_main bg-white p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
+    <div t-att-class="'col-12 o_wevent_online_page_main o_wesponsor_exhibitor_main p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
         <!-- EVENT NOT STARTED ALERTS -->
         <t t-if="not sponsor.event_id.is_ongoing">
             <div t-if="sponsor.event_id.is_done" class="alert alert-warning rounded-0 text-center" role="alert">
@@ -168,7 +168,7 @@
 
 <template id="exhibitor_aside" name="Exhibitor: Aside">
     <div t-att-class="'col-12 ps-0 pe-0 o_wevent_online_page_aside o_wesponsor_exhibitor_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
-        <div class="bg-white o_wevent_online_page_aside_content">
+        <div class="o_wevent_online_page_aside_content">
             <div class="d-flex align-items-center justify-content-between mx-2">
                 <span class="h5 mb-0 pt-0 pt-md-3 pb-0 pb-md-2">Other exhibitors</span>
                 <a href="#collapse_exhibitor_aside" data-bs-toggle="collapse"
diff --git a/addons/website_event_meet/static/src/scss/event_meet_templates.scss b/addons/website_event_meet/static/src/scss/event_meet_templates.scss
index dffd340dc0d..ce7a4e8f434 100644
--- a/addons/website_event_meet/static/src/scss/event_meet_templates.scss
+++ b/addons/website_event_meet/static/src/scss/event_meet_templates.scss
@@ -15,6 +15,10 @@
             height: 85vh;
         }
     }
+
+    .o_wevent_meeting_room_card {
+        background-color: $o-wevent-bg-color-base;
+    }
 }
 
 /*
diff --git a/addons/website_event_meet/views/event_meet_templates_list.xml b/addons/website_event_meet/views/event_meet_templates_list.xml
index 4f45ea28855..c52e94b2dee 100644
--- a/addons/website_event_meet/views/event_meet_templates_list.xml
+++ b/addons/website_event_meet/views/event_meet_templates_list.xml
@@ -29,7 +29,7 @@
         <h2 class="d-flex flex-row justify-content-between">
             <span>Join a room</span>
             <div class="dropdown">
-                <a class="dropdown-toggle o-no-caret btn p-0" title="Languages Menu"
+                <a class="dropdown-toggle o-no-caret btn btn-outline-secondary py-0 px-1" title="Languages Menu"
                     aria-label="Dropdown menu" data-bs-display="static" data-bs-toggle="dropdown" href="#" role="button">
                     <span t-out="current_lang.name if current_lang else 'All Languages'"/> ▼</a>
                 <div class="dropdown-menu" role="menu">
@@ -116,10 +116,10 @@
     </t>
 
     <a t-if="is_event_user or not meeting_room.room_is_full"
+        class="card o_wevent_meeting_room_card w-100 my-2 d-block text-decoration-none rounded-0"
         t-att-data-meeting-room-id="meeting_room.id"
         t-att-data-open-room="opened"
         t-att-data-is-event-manager="int(is_event_user)"
-        t-attf-class="card o_wevent_meeting_room_card w-100 my-2 bg-light d-block text-decoration-none rounded-0"
         t-att-href="meeting_room_href"
         t-att-data-bs-toggle="meeting_room_data_toggle"
         t-att-data-bs-target="meeting_room_data_target">
diff --git a/addons/website_event_meet/views/event_meet_templates_page.xml b/addons/website_event_meet/views/event_meet_templates_page.xml
index 5d905798244..3951865d2b4 100644
--- a/addons/website_event_meet/views/event_meet_templates_page.xml
+++ b/addons/website_event_meet/views/event_meet_templates_page.xml
@@ -30,7 +30,7 @@
 <!-- ============================================================ -->
 
 <template id="meeting_room_main" name="Meeting Room: Main Content">
-    <div t-att-class="'col-12 o_wevent_online_page_main o_wemeet_room_main bg-white p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
+    <div t-att-class="'col-12 o_wevent_online_page_main o_wemeet_room_main o_wevent_theme_bg_base p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
         <!-- EVENT NOT STARTED ALERTS -->
         <t t-if="not meeting_room.event_id.is_ongoing">
             <div t-if="meeting_room.event_id.is_done" class="alert alert-warning text-center">
@@ -102,7 +102,7 @@
 
 <template id="meeting_room_aside" name="Meeting Room: Aside">
     <div t-att-class="'col-12 ps-0 pe-0 o_wevent_online_page_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
-        <div class="bg-white o_wevent_online_page_aside_content">
+        <div class="o_wevent_online_page_aside_content">
             <div class="d-flex align-items-center justify-content-between mx-2">
                 <span class="h5 mb-0 pt-0 pt-md-3 pb-0 pb-md-2">Other Rooms</span>
                 <a href="#collapse_meet_room_aside" data-bs-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
diff --git a/addons/website_event_questions/views/event_templates.xml b/addons/website_event_questions/views/event_templates.xml
index 8ad6e4a5826..d4f1c650d87 100644
--- a/addons/website_event_questions/views/event_templates.xml
+++ b/addons/website_event_questions/views/event_templates.xml
@@ -17,7 +17,7 @@
     <!-- Generic questions -->
     <xpath expr="//*[hasclass('modal-footer')]" position="before">
         <t t-if="event.general_question_ids">
-            <div class="modal-body bg-light border-bottom o_wevent_registration_question_global">
+            <div class="modal-body border-bottom o_wevent_registration_question_global">
                 <div t-foreach="event.general_question_ids" t-as="question" class="row" t-att-name="question.title">
                     <div class="col-lg-6 mt-2">
                         <t t-call="website_event_questions.registration_event_question">
diff --git a/addons/website_event_track/static/src/scss/event_track_templates.scss b/addons/website_event_track/static/src/scss/event_track_templates.scss
index 1c6e2b2e3c2..9f2b8e1e760 100644
--- a/addons/website_event_track/static/src/scss/event_track_templates.scss
+++ b/addons/website_event_track/static/src/scss/event_track_templates.scss
@@ -15,6 +15,8 @@
     i {
         &.fa-bell {
             color: gold;
+            -webkit-text-stroke-width: 0.5px;
+            -webkit-text-stroke-color: black;
         }
         &.fa-bell-o {
             color: black;
@@ -22,13 +24,18 @@
     }
 }
 
-
 /*
  * AGENDA
  */
+
+ .o_weagenda_index {
+    hr {
+        border-color: lighten($o-wevent-bg-color-base-contrast, 50%);
+    }
+}
+
 .o_we_online_agenda {
     overflow-x: auto;
-
     table {
         border-collapse: separate;
         border-spacing: 0em 0em;
@@ -39,14 +46,13 @@
                 td.active {
                     padding: 0em 0.5em;
                     font-size: smaller;
-                    border-top: 1px solid lightgrey;
+                    border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
                 }
             }
         }
         th.active, td:not(.active) {
-            background-color: rgba(211, 211, 211, 0.1);
             border: 0px;
-            border-right: 1em solid white;
+            border-right: 1em solid $body-bg;
             vertical-align: middle;
             span {
                 word-break: break-word;
@@ -77,7 +83,6 @@
                 position: sticky;
                 left: 0;
                 min-width: 100px;
-                background-color: white;
             }
             div.o_we_agenda_card_content {
                 height: 100%;
@@ -114,11 +119,11 @@
             }
             &.o_we_agenda_time_slot_main > div {
                 padding: 0.3em;
-                border-top: 1px solid lightgrey;
+                border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
             }
             &.o_we_agenda_time_slot_half > div {
                 padding: 0.3em;
-                border-top: 1px dashed lightgrey;
+                border-top: 1px dashed lighten($o-wevent-bg-color-base-contrast, 50%);
             }
             &.event_track {
                 position: relative;
@@ -129,7 +134,17 @@
                     width: 100%;
                     position: absolute;
                     top: 0;
-                    border-top: 1px solid lightgrey;
+                    border-top: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
+                }
+                &::after {
+                    content: "";
+                    display: block;
+                    width: 100%;
+                    position: absolute;
+                    bottom: 0;
+                    border-bottom: 1px solid lighten($o-wevent-bg-color-base-contrast, 50%);
+                    margin-bottom: -1px;
+                    z-index: 1;
                 }
                 > div {
                     padding: 0.3em;
@@ -141,43 +156,6 @@
 
 
             }
-            // Remove me in master
-            &.event_color_0 {
-                background-color: rgba(211, 211, 211, 0.5);
-            }
-            &.event_color_1 {
-                background-color: rgba(240, 96, 80, 0.2);
-            }
-            &.event_color_2 {
-                background-color: rgba(244, 164, 96, 0.2);
-            }
-            &.event_color_3 {
-                background-color: rgba(247, 205, 31, 0.2);
-            }
-            &.event_color_4 {
-                background-color: rgba(108,193,237,0.2);
-            }
-            &.event_color_5 {
-                background-color: rgba(129,73,104,0.2);
-            }
-            &.event_color_6 {
-                background-color: rgba(235,126,127,0.2);
-            }
-            &.event_color_7 {
-                background-color: rgba(44,131,151,0.2);
-            }
-            &.event_color_8 {
-                background-color: rgba(71,85,119,0.2);
-            }
-            &.event_color_9 {
-                background-color: rgba(214,20,95,0.2);
-            }
-            &.event_color_10 {
-                background-color: rgba(48,195,129,0.2);
-            }
-            &.event_color_11 {
-                background-color: rgba(147,101,184,0.2);
-            }
         }
     }
 }
diff --git a/addons/website_event_track/static/src/scss/event_track_templates_online.scss b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
index 176912f93aa..8b8d52a922b 100644
--- a/addons/website_event_track/static/src/scss/event_track_templates_online.scss
+++ b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
@@ -15,12 +15,18 @@
 
     // Track card
     .o_wesession_track_card {
+        background-color: $o-wevent-bg-color-base;
+        color: $o-wevent-color;
         .card-body {
             padding: 1rem;
+            background-color: $o-wevent-bg-color-base !important;
         }
 
         .card-footer {
             padding: 0.75rem 1rem;
+            div {
+                color: $o-wevent-color;
+            }
         }
 
         .o_wesession_track_card_header_badge {
diff --git a/addons/website_event_track/views/event_track_templates_agenda.xml b/addons/website_event_track/views/event_track_templates_agenda.xml
index 13bcfced8c1..257baa4be47 100644
--- a/addons/website_event_track/views/event_track_templates_agenda.xml
+++ b/addons/website_event_track/views/event_track_templates_agenda.xml
@@ -97,7 +97,7 @@
         <table id="table_search" class="table table-sm border-0 h-100">
             <!--Header-->
             <tr>
-                <th class="border-0 bg-white position-sticky"/>
+                <th class="border-0 position-sticky"/>
                 <t t-foreach="locations" t-as="location">
                     <th t-if="location" class="active text-center">
                         <span t-out="location and location.name or 'Unknown'"/>
@@ -122,7 +122,7 @@
                             <t t-foreach="tracks" t-as="track">
                                 <t t-set="_classes"
                                     t-value="'text-center %s %s %s' % (
-                                        'event_color_%s' % (track.color) if track.color else 'bg-100',
+                                        'event_color_%s' % (track.color or 0),
                                         'event_track h-100' if track else '',
                                         'o_location_size_%d' % len(locations),
                                     )"/>
diff --git a/addons/website_event_track/views/event_track_templates_page.xml b/addons/website_event_track/views/event_track_templates_page.xml
index 20837c3eba8..dd8cbcf8ded 100644
--- a/addons/website_event_track/views/event_track_templates_page.xml
+++ b/addons/website_event_track/views/event_track_templates_page.xml
@@ -48,7 +48,7 @@
 
 <template id="event_track_content" name="Track: Main Description">
     <div name="o_wesession_track_main"
-         t-att-class="'col-12 o_wevent_online_page_main o_wesession_track_main bg-white p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
+         t-att-class="'col-12 o_wevent_online_page_main o_wesession_track_main o_wevent_theme_bg_base p-0 %s' % ('col-md-9 col-lg-10' if option_widescreen else 'col-md-8 col-lg-9')">
         <!-- LIVE INFORMATIONS -->
         <div t-if="not track.event_id.is_ongoing and track.event_id.start_remaining" class="pt-3">
             <div class="mx-3 alert alert-warning">
@@ -167,7 +167,7 @@
 
 <template id="event_track_aside" name="Track: Aside">
     <div t-att-class="'col-12 ps-0 pe-0 o_wevent_online_page_aside o_wesession_track_aside %s' % ('col-md-3 col-lg-2' if option_widescreen else 'col-md-4 col-lg-3')">
-        <div class="bg-white pt-0 pt-md-3 o_wevent_online_page_aside_content">
+        <div class="o_wevent_theme_bg_base pt-0 pt-md-3 o_wevent_online_page_aside_content">
             <div class="mx-2" t-if="track.date and track.website_cta">
                 <t t-set="cta_coundown" t-value="bool(track.website_cta_start_remaining)"/>
                 <div t-if="cta_coundown" class="text-center mt-2 mt-md-0 w-100 btn btn-primary d-none">
diff --git a/addons/website_event_track/views/event_track_templates_proposal.xml b/addons/website_event_track/views/event_track_templates_proposal.xml
index 81247a9a874..8e65220f19d 100644
--- a/addons/website_event_track/views/event_track_templates_proposal.xml
+++ b/addons/website_event_track/views/event_track_templates_proposal.xml
@@ -111,9 +111,9 @@
                     <div class="oe_structure" id="oe_structure_website_event_track_proposal_2"/>
                 </div>
                 <div class="col-lg-3">
-                    <div class="card mb-3 text-bg-secondary">
-                        <h4 class="card-header">Talks Types</h4>
-                        <div class="card-body">
+                    <div class="card mb-3 border-0">
+                        <h4 class="o_wevent_theme_bg_base card-header">Talks Types</h4>
+                        <div class="o_wevent_theme_bg_light card-body">
                             <ul class="list-unstyled">
                                 <li>
                                     <strong>Regular Talks</strong>. These are standard talks with slides,
@@ -125,9 +125,9 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="card text-bg-secondary">
-                        <h4 class="card-header">Submission Agreement</h4>
-                        <div class="card-body">
+                    <div class="card border-0">
+                        <h4 class="o_wevent_theme_bg_base card-header">Submission Agreement</h4>
+                        <div class="o_wevent_theme_bg_light card-body">
                             <p>
                             We require speakers to accept an agreement in which they commit to:
                             </p>
diff --git a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
index 88d078405d9..6f1a3bd3365 100644
--- a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
+++ b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
@@ -3,7 +3,7 @@
 
 <template id="event_leaderboard" name="Leaderboard">
     <t t-call="website_event.layout">
-        <div t-if="visitors" class="bg-light pt32 pb32 o_wevent_quiz_leaderboard">
+        <div t-if="visitors" class="o_wevent_theme_bg_light pt32 pb32 o_wevent_quiz_leaderboard">
             <t t-call="website_event_track_quiz.leaderboard_search_bar"/>
             <div class="container mt32">
                 <div t-if="not search" class="row mb-3">
@@ -13,7 +13,7 @@
                 </div>
                 <table class="table table-sm">
                     <tr t-foreach="visitors" t-as="visitor"
-                        t-attf-class="#{'alert-info' if visitor['visitor'] == current_visitor else 'bg-white'} #{'o_wevent_quiz_scroll_to' if scroll_to_position and visitor['visitor'] == current_visitor else ''}">
+                        t-attf-class="#{'alert-info' if visitor['visitor'] == current_visitor else 'o_wevent_theme_bg_base'} #{'o_wevent_quiz_scroll_to' if scroll_to_position and visitor['visitor'] == current_visitor else ''}">
                         <t t-call="website_event_track_quiz.all_visitor_card"/>
                     </tr>
                 </table>
@@ -26,7 +26,7 @@
             <t t-call="website_event_track_quiz.leaderboard_search_bar"/>
             <div class='alert alert-warning mt32'>No user found for <strong><t t-out="search"/></strong>. Try another search.</div>
         </div>
-        <div t-if="not visitors and not search" class="vh-100 bg-light d-flex justify-content-center align-items-center">
+        <div t-if="not visitors and not search" class="vh-100 o_wevent_theme_bg_light d-flex justify-content-center align-items-center">
             <h4 class="text-muted fw-bold">There is currently no leaderboard available</h4>
         </div>
     </t>
diff --git a/addons/website_event_track_quiz/views/event_track_templates_page.xml b/addons/website_event_track_quiz/views/event_track_templates_page.xml
index 6d425fad012..a14854e7469 100644
--- a/addons/website_event_track_quiz/views/event_track_templates_page.xml
+++ b/addons/website_event_track_quiz/views/event_track_templates_page.xml
@@ -6,7 +6,7 @@
     inherit_id="website_event_track.event_track_content">
     <xpath expr="//div[hasclass('o_wesession_track_main_description')]" position="after">
         <div id="we_track_quiz_container" t-if="track.quiz_id"
-             t-att-class="'o_quiz_js_quiz_container o_quiz_main border-top bg-white px-2 pt-4 pb-4 col-12 %s' % ('' if track.is_quiz_completed else 'd-none')"
+             t-att-class="'o_quiz_js_quiz_container o_quiz_main border-top o_wevent_theme_bg_base px-2 pt-4 pb-4 col-12 %s' % ('' if track.is_quiz_completed else 'd-none')"
              t-att-data-object-id="track.id">
             <h3 class="col-12">Quiz</h3>
             <t t-call="website_event_track_quiz.quiz_content">