diff --git a/resources/js/components/collections/DeleteEntryConfirmation.vue b/resources/js/components/collections/DeleteEntryConfirmation.vue
index 1cf7db3dec..db737514c2 100644
--- a/resources/js/components/collections/DeleteEntryConfirmation.vue
+++ b/resources/js/components/collections/DeleteEntryConfirmation.vue
@@ -5,18 +5,18 @@
             <div class="text-lg font-medium p-4 pb-0">
                 {{ __('Delete Entry') }}
             </div>
-            <div class="flex-1 px-4 py-6 text-gray">
+            <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
                 <p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
                 <label class="flex items-center" v-if="children">
                     <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="shouldDeleteChildren" />
                     {{ __n('Delete child entry|Delete :count child entries', children) }}
                 </label>
             </div>
-            <div class="p-4 bg-gray-200 border-t flex items-center justify-end text-sm">
-                <button class="text-gray hover:text-gray-900"
+            <div class="p-4 bg-gray-200 dark:bg-dark-550 border-t dark:border-dark-900 flex items-center justify-end text-sm">
+                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
                     @click="$emit('cancel')"
                     v-text="__('Cancel')" />
-                <button class="btn rtl:mr-4 ltr:ml-4 btn-danger"
+                <button class="rtl:mr-4 ltr:ml-4 btn-danger"
                     @click="$emit('confirm', shouldDeleteChildren)"
                     v-text="__('Delete')" />
             </div>
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 183366caca..8283a94432 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -5,7 +5,7 @@
             <div class="text-lg font-medium p-4 pb-0">
                 {{ __('Delete') }}
             </div>
-            <div class="flex-1 px-4 py-6 text-gray">
+            <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
                 <div class="publish-fields">
                     <div class="form-group" :class="{ 'has-error': this.error }">
                         <div class="field-inner">
@@ -27,11 +27,11 @@
                     </div>
                 </div>
             </div>
-            <div class="p-4 bg-gray-200 border-t flex items-center justify-end text-sm">
-                <button class="text-gray hover:text-gray-900"
+            <div class="p-4 bg-gray-200 dark:bg-dark-550 border-t dark:border-dark-900 flex items-center justify-end text-sm">
+                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
                     @click="$emit('cancel')"
                     v-text="__('Cancel')" />
-                <button class="btn rtl:mr-4 ltr:ml-4 btn-danger"
+                <button class="rtl:mr-4 ltr:ml-4 btn-danger"
                     @click="confirm"
                     v-text="__('Confirm')" />
             </div>
diff --git a/resources/js/components/navigation/RemovePageConfirmation.vue b/resources/js/components/navigation/RemovePageConfirmation.vue
index 3372c78376..acf5418349 100644
--- a/resources/js/components/navigation/RemovePageConfirmation.vue
+++ b/resources/js/components/navigation/RemovePageConfirmation.vue
@@ -5,7 +5,7 @@
             <div class="text-lg font-medium p-4 pb-0">
                 {{ __('Remove Page') }}
             </div>
-            <div class="flex-1 px-4 py-6 text-gray">
+            <div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
                 <p class="mb-4" v-text="__('Are you sure you want to remove this page?')" />
                 <p class="mb-4" v-text="__('Only the references will be removed. Entries will not be deleted.')" />
                 <label class="flex items-center" v-if="children">
@@ -13,11 +13,11 @@
                     {{ __n('Remove child page|Remove :count child pages', children) }}
                 </label>
             </div>
-            <div class="p-4 bg-gray-200 border-t flex items-center justify-end text-sm">
-                <button class="text-gray hover:text-gray-900"
+            <div class="p-4 bg-gray-200 dark:bg-dark-550 border-t dark:border-dark-900 flex items-center justify-end text-sm">
+                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
                     @click="$emit('cancel')"
                     v-text="__('Cancel')" />
-                <button class="btn rtl:mr-4 ltr:ml-4 btn-danger"
+                <button class="rtl:mr-4 ltr:ml-4 btn-danger"
                     @click="$emit('confirm', shouldDeleteChildren)"
                     v-text="__('Remove')" />
             </div>