conference_main/static/conference_main/styles/_schedule.sass

@@ -407,6 +407,7 @@ body.is-scrolled
 
 .event
   +box-card
+
   display: flex
   flex-direction: column
   +margin(3, bottom)
@@ -414,7 +415,7 @@ body.is-scrolled
   transition: background-color var(--transition-speed) ease-in-out, opacity 250ms ease-in-out
 
   &:hover
-    background-color: white !important
+    background-color: var(--box-bg-color-hover)
     text-decoration: none
 
   &[data-filtered]
@@ -631,9 +632,26 @@ body.is-scrolled
   position: absolute
   right: 0
 
+  .event
+    backdrop-filter: brightness(110%)
+    background-color: transparent
+    transition: backdrop-filter var(--transition-speed)
+
+    &:hover
+      backdrop-filter: brightness(115%)
+
   .schedule-filters-container
     +padding(2, y)
 
+[data-theme="dark"]
+  .schedule-container
+    &.horizontal
+      .event
+        backdrop-filter: brightness(90%)
+
+        &:hover
+          backdrop-filter: brightness(85%)
+
 .scroll-horizontal
   padding-top: var(--time-slots-height)
   overflow-x: auto

conference_main/static/conference_main/styles/main.sass

@@ -23,6 +23,8 @@ html[data-theme="light"]
 	--body-color-bg: #e9ecef
 	--color-bg: var(--body-color-bg)
 
+	--box-bg-color-hover: white
+
 \:root
 	// TODO: check if component variables table colours are needed
 	--table-border-color: var(--color-bg-tertiary)
@@ -41,6 +43,9 @@ html[data-theme="light"]
 	+media-sm
 		--page-with-header-content-offset: calc(var(--spacer) * 8)
 
+html[data-theme="dark"]
+	--box-bg-color-hover: var(--color-bg-secondary)
+
 body.is-scrolled
 	.navbar
 		box-shadow: none

conference_main/templates/conference_main/presentations/schedule_horizontal.pug

@@ -63,7 +63,6 @@
             | {% for event in events %}
             a.event.js-time-slot(
               style="
-                background-color: hsl(var(--location-hue-{{ location }}), 60%, 97%);
                 left: calc(calc({{ event.start_time_in_minutes}} - {{ events_per_day_per_location_with_range.range_minutes.start }}) * 10px);
                 width: calc({{ event.duration_minutes}}px * {{ events_per_day_per_location_with_range.minute_to_pixel_multiplier }})"
               id="#event-{{ event.id }}",