diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.html b/src/@fuse/services/confirmation/dialog/dialog.component.html
index af0fee6d..f8de9884 100644
--- a/src/@fuse/services/confirmation/dialog/dialog.component.html
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.html
@@ -20,14 +20,14 @@
         <ng-container *ngIf="data.icon.show">
             <div
                 class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
-                [ngClass]="{'text-primary-600 bg-primary-100': data.icon.color === 'primary',
-                            'text-accent-600 bg-accent-100': data.icon.color === 'accent',
-                            'text-warn-600 bg-warn-100': data.icon.color === 'warn',
-                            'text-gray-600 bg-gray-100': data.icon.color === 'basic',
-                            'text-blue-600 bg-blue-100': data.icon.color === 'info',
-                            'text-green-500 bg-green-100': data.icon.color === 'success',
-                            'text-amber-500 bg-amber-100': data.icon.color === 'warning',
-                            'text-red-600 bg-red-100': data.icon.color === 'error'
+                [ngClass]="{'text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600': data.icon.color === 'primary',
+                            'text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600': data.icon.color === 'accent',
+                            'text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600': data.icon.color === 'warn',
+                            'text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600': data.icon.color === 'basic',
+                            'text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600': data.icon.color === 'info',
+                            'text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500': data.icon.color === 'success',
+                            'text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': data.icon.color === 'warning',
+                            'text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600': data.icon.color === 'error'
                             }">
                 <mat-icon
                     class="text-current"
@@ -56,9 +56,9 @@
 
     </div>
 
-    <!-- Buttons -->
+    <!-- Actions -->
     <ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
-        <div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50">
+        <div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50 dark:bg-black dark:bg-opacity-10">
 
             <!-- Cancel -->
             <ng-container *ngIf="data.actions.cancel.show">