diff --git a/front/src/components/ui/Popover.vue b/front/src/components/ui/Popover.vue
index 4eb1c3184..09bfc5b8f 100644
--- a/front/src/components/ui/Popover.vue
+++ b/front/src/components/ui/Popover.vue
@@ -4,9 +4,12 @@ import { whenever, useElementBounding, onClickOutside } from '@vueuse/core'
 
 import { isMobileView, useScreenSize } from '~/composables/screen'
 import { POPOVER_INJECTION_KEY, POPOVER_CONTEXT_INJECTION_KEY } from '~/injection-keys'
+import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
 
 const open = defineModel('open', { default: false })
-const { positioning = 'vertical' }  = defineProps<{ positioning?:'horizontal' | 'vertical' }>()
+const { positioning = 'vertical', ...colorProps }  = defineProps<{
+  positioning?:'horizontal' | 'vertical'
+} & ColorProps & DefaultProps>()
 
 // Template refs
 const popover = ref()
@@ -110,7 +113,11 @@ watch(open, (isOpen) => {
 </script>
 
 <template>
-  <div ref="slot" class="funkwhale popover-container">
+  <div
+    ref="slot"
+    class="funkwhale popover-container"
+    v-bind="propsToColor({ solid:true, ...colorProps })"
+  >
     <slot
       :isOpen="open"
       :toggleOpen="() => open = !open"
diff --git a/front/src/components/ui/popover.scss b/front/src/components/ui/popover.scss
index 35a58444e..bfefdf506 100644
--- a/front/src/components/ui/popover.scss
+++ b/front/src/components/ui/popover.scss
@@ -18,7 +18,7 @@
 .funkwhale {
   &.popover {
     border: 1px solid var(--fw-border-color);
-    background: var(--fw-bg-color);
+    background: var(--background-color);
 
     hr {
       border-bottom: 1px solid var(--fw-border-color);