diff --git a/resources/css/ui.css b/resources/css/ui.css
index f0e15b2549..1bc00f0e76 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/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index b7f7415c7c..baef4d97f4 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="dark:bg-gray-800 h-full bg-white">
+    <div class="h-full">
         <div class="flex h-full min-h-0 flex-col">
             <div class="flex flex-1 flex-col gap-4 overflow-auto p-4">
                 <AssetBrowser
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index 85b35f146e..b22cfe33d2 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="h-full overflow-auto bg-white dark:bg-gray-800 focus-none p-3 pt-0">
+    <div class="h-full overflow-auto bg-content-bg dark:bg-dark-content-bg focus-none p-3 pt-0">
         <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
             <Icon name="loading" />
         </div>
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index 53f3305f51..65568c76fb 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -8,7 +8,7 @@
             :size="stackSize"
             @closed="close"
         >
-            <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 rounded-l-xl dark:bg-dark-800">
+            <div class="h-full overflow-scroll overflow-x-auto px-6 rounded-l-xl">
                 <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
                     <Icon name="loading" />
                 </div>
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index a0bbca9d93..3ccb291a6e 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -73,7 +73,7 @@
                 </div>
             </div>
 
-            <Stack v-model:open="isSelecting">
+            <Stack v-model:open="isSelecting" inset :show-close-button="false">
                 <ItemSelector
                     :name="name"
                     :filters-url="filtersUrl"
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 01d030b23b..50256f77b2 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 rounded-s-xl">
         <div class="flex h-full min-h-0 flex-col">
             <Listing
                 v-if="filters != null && view === 'list'"
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 130681f315..a2efc60a26 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -219,7 +219,7 @@ provide('closeStack', close);
                 <transition name="stack-slide">
                     <div
                         v-if="visible"
-                        class="stack-content fixed flex flex-col sm:end-1.5 bg-white dark:bg-gray-850 overflow-hidden rounded-xl shadow-[0_8px_5px_-6px_rgba(0,0,0,0.1),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.15)] dark:shadow-[0_5px_20px_rgba(0,0,0,.5)] transition-transform duration-150 ease-out"
+                        class="stack-content fixed flex flex-col sm:end-1.5 bg-content-bg dark:bg-dark-content-bg overflow-hidden rounded-xl shadow-[0_8px_5px_-6px_rgba(0,0,0,0.1),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.15)] dark:shadow-[0_5px_20px_rgba(0,0,0,.5)] transition-transform duration-150 ease-out"
                         :class="[
                             size === 'full' ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',
                             { '-translate-x-4 rtl:translate-x-4': isHovering }