diff --git a/src/theme/alert.ts b/src/theme/alert.ts
index e389cc56..49f2ac0d 100644
--- a/src/theme/alert.ts
+++ b/src/theme/alert.ts
@@ -51,13 +51,13 @@ export default (options: Required<ModuleOptions>) => ({
     color,
     variant: 'soft',
     class: {
-      root: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
+      root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
     }
   })), ...options.colors.map((color: string) => ({
     color,
     variant: 'subtle',
     class: {
-      root: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+      root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
     }
   })), {
     color: 'white',
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index b1b4642f..ea335bf3 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -245,7 +245,7 @@ exports[`Alert > renders with variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with variant soft correctly 1`] = `
-"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">
+"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col gap-1">
     <div class="text-sm font-medium">Alert</div>
@@ -269,7 +269,7 @@ exports[`Alert > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with variant subtle correctly 1`] = `
-"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
+"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500/10 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col gap-1">
     <div class="text-sm font-medium">Alert</div>