diff --git a/resources/css/ui.css b/resources/css/ui.css
index 643e6714879..37ceee23761 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -22,6 +22,7 @@
 
     --color-body-bg: var(--theme-color-body-bg);
     --color-body-border: var(--theme-color-body-border);
+    --color-content-bg: var(--theme-color-content-bg);
     --color-content-border: var(--theme-color-content-border);
     --color-global-header-bg: var(--theme-color-global-header-bg);
     --color-progress-bar: var(--theme-color-progress-bar);
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 01d030b23b6..2e914ae5b60 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dark:bg-dark-800 h-full bg-white rounded-s-xl">
+    <div class="h-full bg-content-bg dark:bg-dark-content-bg rounded-s-xl">
         <div class="flex h-full min-h-0 flex-col">
             <Listing
                 v-if="filters != null && view === 'list'"