diff --git a/doc/contextmenu/TemplateDoc.vue b/doc/contextmenu/TemplateDoc.vue
index 539abd031..db624c5e4 100644
--- a/doc/contextmenu/TemplateDoc.vue
+++ b/doc/contextmenu/TemplateDoc.vue
@@ -19,7 +19,7 @@
                             <span>{{ product.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-surface-900 ml-8">${{ product.price }}</span>
+                    <span class="font-bold ml-8">${{ product.price }}</span>
                 </div>
             </li>
         </ul>
@@ -95,7 +95,7 @@ export default {
                     <span>{{ product.category }}</span>
                 </div>
             </div>
-            <span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
+            <span class="font-bold ml-8">\${{ product.price }}</span>
         </div>
     </li>
 </ul>
@@ -130,7 +130,7 @@ export default {
                             <span>{{ product.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
+                    <span class="font-bold ml-8">\${{ product.price }}</span>
                 </div>
             </li>
         </ul>
@@ -220,7 +220,7 @@ export default {
                             <span>{{ product.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
+                    <span class="font-bold ml-8">\${{ product.price }}</span>
                 </div>
             </li>
         </ul>
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index 9162ec9e3..221961f96 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -7,7 +7,7 @@
             <DataTable :value="products" tableStyle="min-width: 50rem">
                 <template #header>
                     <div class="flex flex-wrap items-center justify-between gap-2">
-                        <span class="text-xl text-surface-900 font-bold">Products</span>
+                        <span class="text-xl font-bold">Products</span>
                         <Button icon="pi pi-refresh" rounded raised />
                     </div>
                 </template>
@@ -52,7 +52,7 @@ export default {
 <DataTable :value="products" tableStyle="min-width: 50rem">
     <template #header>
         <div class="flex flex-wrap items-center justify-between gap-2">
-            <span class="text-xl text-surface-900 font-bold">Products</span>
+            <span class="text-xl font-bold">Products</span>
             <Button icon="pi pi-refresh" rounded raised />
         </div>
     </template>
@@ -87,7 +87,7 @@ export default {
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
                 <div class="flex flex-wrap items-center justify-between gap-2">
-                    <span class="text-xl text-surface-900 font-bold">Products</span>
+                    <span class="text-xl font-bold">Products</span>
                     <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
@@ -159,7 +159,7 @@ export default {
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
                 <div class="flex flex-wrap items-center justify-between gap-2">
-                    <span class="text-xl text-surface-900 font-bold">Products</span>
+                    <span class="text-xl font-bold">Products</span>
                     <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 4cfa63686..1aa9d53d6 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -16,7 +16,7 @@
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -26,7 +26,7 @@
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -64,7 +64,7 @@ export default {
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                 <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -74,7 +74,7 @@ export default {
                             </div>
                         </div>
                         <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
                                 <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -103,7 +103,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -113,7 +113,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -176,7 +176,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -186,7 +186,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index f23015b8d..e025018b3 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -26,7 +26,7 @@
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -36,7 +36,7 @@
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -62,7 +62,7 @@
                                 <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -72,7 +72,7 @@
                                     </div>
                                 </div>
                                 <div class="flex flex-col gap-6 mt-6">
-                                    <span class="text-2xl font-semibold text-surface-900">${{ item.price }}</span>
+                                    <span class="text-2xl font-semibold">${{ item.price }}</span>
                                     <div class="flex gap-2">
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                         <Button icon="pi pi-heart" outlined></Button>
@@ -122,7 +122,7 @@ export default {
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                 <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -132,7 +132,7 @@ export default {
                             </div>
                         </div>
                         <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
                                 <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -158,7 +158,7 @@ export default {
                         <div class="flex flex-row justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
+                                <div class="text-lg font-medium mt-1">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                 <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -168,7 +168,7 @@ export default {
                             </div>
                         </div>
                         <div class="flex flex-col gap-6 mt-6">
-                            <span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span>
+                            <span class="text-2xl font-semibold">\${{ item.price }}</span>
                             <div class="flex gap-2">
                                 <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                 <Button icon="pi pi-heart" outlined></Button>
@@ -207,7 +207,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -217,7 +217,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -243,7 +243,7 @@ export default {
                                 <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -253,7 +253,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col gap-6 mt-6">
-                                    <span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex gap-2">
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                         <Button icon="pi pi-heart" outlined></Button>
@@ -328,7 +328,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -338,7 +338,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -364,7 +364,7 @@ export default {
                                 <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -374,7 +374,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col gap-6 mt-6">
-                                    <span class="text-2xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex gap-2">
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
                                         <Button icon="pi pi-heart" outlined></Button>
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index c18136b9a..60892cf12 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -16,7 +16,7 @@
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -26,7 +26,7 @@
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -64,7 +64,7 @@ export default {
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                 <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -74,7 +74,7 @@ export default {
                             </div>
                         </div>
                         <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
                                 <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -103,7 +103,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -113,7 +113,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -176,7 +176,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -186,7 +186,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index bb60bd381..e6bb432a5 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -19,7 +19,7 @@
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -29,7 +29,7 @@
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -77,7 +77,7 @@ export default {
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
                                 <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                 <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -87,7 +87,7 @@ export default {
                             </div>
                         </div>
                         <div class="flex flex-col md:items-end gap-8">
-                            <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                            <span class="text-xl font-semibold">\${{ item.price }}</span>
                             <div class="flex flex-row-reverse md:flex-row gap-2">
                                 <Button icon="pi pi-heart" outlined></Button>
                                 <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -119,7 +119,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -129,7 +129,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
@@ -216,7 +216,7 @@ export default {
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
                                         <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                         <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
@@ -226,7 +226,7 @@ export default {
                                     </div>
                                 </div>
                                 <div class="flex flex-col md:items-end gap-8">
-                                    <span class="text-xl font-semibold text-surface-900">\${{ item.price }}</span>
+                                    <span class="text-xl font-semibold">\${{ item.price }}</span>
                                     <div class="flex flex-row-reverse md:flex-row gap-2">
                                         <Button icon="pi pi-heart" outlined></Button>
                                         <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
diff --git a/doc/drawer/HeadlessDoc.vue b/doc/drawer/HeadlessDoc.vue
index d11f5afbc..d6e564002 100644
--- a/doc/drawer/HeadlessDoc.vue
+++ b/doc/drawer/HeadlessDoc.vue
@@ -36,20 +36,20 @@
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">FAVORITES</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-home mr-2"></i>
                                             <span class="font-medium">Dashboard</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-bookmark mr-2"></i>
                                             <span class="font-medium">Bookmarks</span>
                                         </a>
@@ -64,7 +64,7 @@
                                                 leaveToClass: 'hidden',
                                                 leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Reports</span>
@@ -81,7 +81,7 @@
                                                         leaveToClass: 'hidden',
                                                         leaveActiveClass: 'animate-slideup'
                                                     }"
-                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                                 >
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Revenue</span>
@@ -89,13 +89,13 @@
                                                 </a>
                                                 <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                                     <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-table mr-2"></i>
                                                             <span class="font-medium">View</span>
                                                         </a>
                                                     </li>
                                                     <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-search mr-2"></i>
                                                             <span class="font-medium">Search</span>
                                                         </a>
@@ -103,7 +103,7 @@
                                                 </ul>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Expenses</span>
                                                 </a>
@@ -111,26 +111,26 @@
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-users mr-2"></i>
                                             <span class="font-medium">Team</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-comments mr-2"></i>
                                             <span class="font-medium">Messages</span>
                                             <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-calendar mr-2"></i>
                                             <span class="font-medium">Calendar</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -149,26 +149,26 @@
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">APPLICATION</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-folder mr-2"></i>
                                             <span class="font-medium">Projects</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-bar mr-2"></i>
                                             <span class="font-medium">Performance</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -179,7 +179,7 @@
                     </div>
                     <div class="mt-auto">
                         <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                             <span class="font-bold">Amy Elsner</span>
                         </a>
@@ -226,20 +226,20 @@ export default {
                                 leaveToClass: 'hidden',
                                 leaveActiveClass: 'animate-slideup'
                             }"
-                            class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                         >
                             <span class="font-medium">FAVORITES</span>
                             <i class="pi pi-chevron-down"></i>
                         </div>
                         <ul class="list-none p-0 m-0 overflow-hidden">
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-home mr-2"></i>
                                     <span class="font-medium">Dashboard</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-bookmark mr-2"></i>
                                     <span class="font-medium">Bookmarks</span>
                                 </a>
@@ -254,7 +254,7 @@ export default {
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                 >
                                     <i class="pi pi-chart-line mr-2"></i>
                                     <span class="font-medium">Reports</span>
@@ -271,7 +271,7 @@ export default {
                                                 leaveToClass: 'hidden',
                                                 leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Revenue</span>
@@ -279,13 +279,13 @@ export default {
                                         </a>
                                         <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                             <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-table mr-2"></i>
                                                     <span class="font-medium">View</span>
                                                 </a>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-search mr-2"></i>
                                                     <span class="font-medium">Search</span>
                                                 </a>
@@ -293,7 +293,7 @@ export default {
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Expenses</span>
                                         </a>
@@ -301,26 +301,26 @@ export default {
                                 </ul>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-users mr-2"></i>
                                     <span class="font-medium">Team</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-comments mr-2"></i>
                                     <span class="font-medium">Messages</span>
                                     <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-calendar mr-2"></i>
                                     <span class="font-medium">Calendar</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-cog mr-2"></i>
                                     <span class="font-medium">Settings</span>
                                 </a>
@@ -339,26 +339,26 @@ export default {
                                 leaveToClass: 'hidden',
                                 leaveActiveClass: 'animate-slideup'
                             }"
-                            class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                         >
                             <span class="font-medium">APPLICATION</span>
                             <i class="pi pi-chevron-down"></i>
                         </div>
                         <ul class="list-none p-0 m-0 overflow-hidden">
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-folder mr-2"></i>
                                     <span class="font-medium">Projects</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-chart-bar mr-2"></i>
                                     <span class="font-medium">Performance</span>
                                 </a>
                             </li>
                             <li>
-                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                     <i class="pi pi-cog mr-2"></i>
                                     <span class="font-medium">Settings</span>
                                 </a>
@@ -369,7 +369,7 @@ export default {
             </div>
             <div class="mt-auto">
                 <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                     <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </a>
@@ -415,20 +415,20 @@ export default {
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">FAVORITES</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-home mr-2"></i>
                                             <span class="font-medium">Dashboard</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-bookmark mr-2"></i>
                                             <span class="font-medium">Bookmarks</span>
                                         </a>
@@ -443,7 +443,7 @@ export default {
                                                 leaveToClass: 'hidden',
                                                 leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Reports</span>
@@ -460,7 +460,7 @@ export default {
                                                         leaveToClass: 'hidden',
                                                         leaveActiveClass: 'animate-slideup'
                                                     }"
-                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                                 >
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Revenue</span>
@@ -468,13 +468,13 @@ export default {
                                                 </a>
                                                 <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                                     <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-table mr-2"></i>
                                                             <span class="font-medium">View</span>
                                                         </a>
                                                     </li>
                                                     <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-search mr-2"></i>
                                                             <span class="font-medium">Search</span>
                                                         </a>
@@ -482,7 +482,7 @@ export default {
                                                 </ul>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Expenses</span>
                                                 </a>
@@ -490,26 +490,26 @@ export default {
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-users mr-2"></i>
                                             <span class="font-medium">Team</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-comments mr-2"></i>
                                             <span class="font-medium">Messages</span>
                                             <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-calendar mr-2"></i>
                                             <span class="font-medium">Calendar</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -528,26 +528,26 @@ export default {
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">APPLICATION</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-folder mr-2"></i>
                                             <span class="font-medium">Projects</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-bar mr-2"></i>
                                             <span class="font-medium">Performance</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -558,7 +558,7 @@ export default {
                     </div>
                     <div class="mt-auto">
                         <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                             <span class="font-bold">Amy Elsner</span>
                         </a>
@@ -616,20 +616,20 @@ export default {
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">FAVORITES</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-home mr-2"></i>
                                             <span class="font-medium">Dashboard</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-bookmark mr-2"></i>
                                             <span class="font-medium">Bookmarks</span>
                                         </a>
@@ -644,7 +644,7 @@ export default {
                                                 leaveToClass: 'hidden',
                                                 leaveActiveClass: 'animate-slideup'
                                             }"
-                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                         >
                                             <i class="pi pi-chart-line mr-2"></i>
                                             <span class="font-medium">Reports</span>
@@ -661,7 +661,7 @@ export default {
                                                         leaveToClass: 'hidden',
                                                         leaveActiveClass: 'animate-slideup'
                                                     }"
-                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple"
+                                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                                 >
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Revenue</span>
@@ -669,13 +669,13 @@ export default {
                                                 </a>
                                                 <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                                     <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-table mr-2"></i>
                                                             <span class="font-medium">View</span>
                                                         </a>
                                                     </li>
                                                     <li>
-                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                             <i class="pi pi-search mr-2"></i>
                                                             <span class="font-medium">Search</span>
                                                         </a>
@@ -683,7 +683,7 @@ export default {
                                                 </ul>
                                             </li>
                                             <li>
-                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                                     <i class="pi pi-chart-line mr-2"></i>
                                                     <span class="font-medium">Expenses</span>
                                                 </a>
@@ -691,26 +691,26 @@ export default {
                                         </ul>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-users mr-2"></i>
                                             <span class="font-medium">Team</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-comments mr-2"></i>
                                             <span class="font-medium">Messages</span>
                                             <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-calendar mr-2"></i>
                                             <span class="font-medium">Calendar</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -729,26 +729,26 @@ export default {
                                         leaveToClass: 'hidden',
                                         leaveActiveClass: 'animate-slideup'
                                     }"
-                                    class="p-4 flex items-center justify-between text-surface-600 cursor-pointer p-ripple"
+                                    class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                                 >
                                     <span class="font-medium">APPLICATION</span>
                                     <i class="pi pi-chevron-down"></i>
                                 </div>
                                 <ul class="list-none p-0 m-0 overflow-hidden">
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-folder mr-2"></i>
                                             <span class="font-medium">Projects</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-chart-bar mr-2"></i>
                                             <span class="font-medium">Performance</span>
                                         </a>
                                     </li>
                                     <li>
-                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                                        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                             <i class="pi pi-cog mr-2"></i>
                                             <span class="font-medium">Settings</span>
                                         </a>
@@ -759,7 +759,7 @@ export default {
                     </div>
                     <div class="mt-auto">
                         <hr class="mb-4 mx-4 border-t border-0 border-surface-200 dark:border-surface-700" />
-                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 duration-150 transition-colors p-ripple">
+                        <a v-ripple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                             <span class="font-bold">Amy Elsner</span>
                         </a>
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 5899c187d..a7d772510 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -5,7 +5,7 @@
         </p>
     </DocSectionText>
     <div class="card">
-        <MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-4 bg-surface-0 dark:bg-surface-950" style="border-radius: 3rem">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                     <path
@@ -14,7 +14,7 @@
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--text-color)"
+                        fill="var(--p-text-color)"
                     />
                 </svg>
             </template>
@@ -23,12 +23,12 @@
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                 </a>
-                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
                     <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                         <i :class="[item.icon, 'text-lg']"></i>
                     </span>
                     <span class="inline-flex flex-col gap-1">
-                        <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                        <span class="font-bold text-lg">{{ item.label }}</span>
                         <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
@@ -104,7 +104,7 @@ export default {
     <template #start>
         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
             <path d="..." fill="var(--p-primary-color)" />
-            <path d="..." fill="var(--text-color)" />
+            <path d="..." fill="var(--p-text-color)" />
         </svg>
     </template>
     <template #item="{ item }">
@@ -112,12 +112,12 @@ export default {
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
         </a>
-        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
             <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                 <i :class="[item.icon, 'text-lg']"></i>
             </span>
             <span class="inline-flex flex-col gap-1">
-                <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                <span class="font-bold text-lg">{{ item.label }}</span>
                 <span class="whitespace-nowrap">{{ item.subtext }}</span>
             </span>
         </a>
@@ -144,7 +144,7 @@ export default {
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--text-color)"
+                        fill="var(--p-text-color)"
                     />
                 </svg>
             </template>
@@ -153,12 +153,12 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                 </a>
-                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
                     <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                         <i :class="[item.icon, 'text-lg']"></i>
                     </span>
                     <span class="inline-flex flex-col gap-1">
-                        <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                        <span class="font-bold text-lg">{{ item.label }}</span>
                         <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
@@ -244,7 +244,7 @@ export default {
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        fill="var(--text-color)"
+                        fill="var(--p-text-color)"
                     />
                 </svg>
             </template>
@@ -253,12 +253,12 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                 </a>
-                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
+                <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
                     <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                         <i :class="[item.icon, 'text-lg']"></i>
                     </span>
                     <span class="inline-flex flex-col gap-1">
-                        <span class="font-medium text-lg text-surface-900">{{ item.label }}</span>
+                        <span class="font-bold text-lg">{{ item.label }}</span>
                         <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 84ec79566..b7639aedb 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -19,7 +19,7 @@
                             fill="var(--text-color)"
                         />
                     </svg>
-                    <span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
                 </span>
             </template>
             <template #submenuitem="{ item }">
@@ -30,11 +30,11 @@
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
                     <span class="inline-flex flex-col items-start">
                         <span class="font-bold">Amy Elsner</span>
@@ -103,7 +103,7 @@ export default {
                 <path d="..." fill="var(--p-primary-color)" />
                 <path d="..." fill="var(--text-color)" />
             </svg>
-            <span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+            <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
         </span>
     </template>
     <template #submenuitem="{ item }">
@@ -114,11 +114,11 @@ export default {
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
         </a>
     </template>
     <template #end>
-        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
+        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
             <span class="inline-flex flex-col items-start">
                 <span class="font-bold">Amy Elsner</span>
@@ -144,7 +144,7 @@ export default {
                             fill="var(--text-color)"
                         />
                     </svg>
-                    <span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
                 </span>
             </template>
             <template #submenuitem="{ item }">
@@ -155,11 +155,11 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
                     <span class="inline-flex flex-col items-start">
                         <span class="font-bold">Amy Elsner</span>
@@ -239,7 +239,7 @@ export default {
                             fill="var(--text-color)"
                         />
                     </svg>
-                    <span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
+                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
                 </span>
             </template>
             <template #submenuitem="{ item }">
@@ -250,11 +250,11 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 text-surface-700 dark:text-surface-0 hover:bg-surface-100 rounded-none cursor-pointer transition-colors duration-200">
+                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
                     <span class="inline-flex flex-col items-start">
                         <span class="font-bold">Amy Elsner</span>
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
index 37395ba9b..6bb259585 100644
--- a/doc/panelmenu/RouterDoc.vue
+++ b/doc/panelmenu/RouterDoc.vue
@@ -8,7 +8,7 @@
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                     <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                        <span class="ml-2">{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
@@ -74,7 +74,7 @@ export default {
         <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
             <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                 <span :class="item.icon" />
-                <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                <span class="ml-2">{{ item.label }}</span>
             </a>
         </router-link>
         <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
@@ -93,7 +93,7 @@ export default {
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                     <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                        <span class="ml-2">{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
@@ -164,7 +164,7 @@ export default {
                 <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
                     <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                         <span :class="item.icon" />
-                        <span class="ml-2 text-surface-700 dark:text-surface-0">{{ item.label }}</span>
+                        <span class="ml-2">{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
diff --git a/doc/popover/BasicDoc.vue b/doc/popover/BasicDoc.vue
index 6effa3aba..eee1465cb 100644
--- a/doc/popover/BasicDoc.vue
+++ b/doc/popover/BasicDoc.vue
@@ -8,7 +8,7 @@
         <Popover ref="op">
             <div class="flex flex-col gap-4 w-[25rem]">
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Share this document</span>
+                    <span class="font-medium block mb-2">Share this document</span>
                     <InputGroup>
                         <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                         <InputGroupAddon>
@@ -17,14 +17,14 @@
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
+                    <span class="font-medium block mb-2">Invite Member</span>
                     <InputGroup>
                         <InputText disabled></InputText>
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+                    <span class="font-medium block mb-2">Team Members</span>
                     <ul class="list-none p-0 m-0 flex flex-col gap-4">
                         <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                             <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
@@ -61,7 +61,7 @@ export default {
 <Popover ref="op">
     <div class="flex flex-col gap-4 w-[25rem]">
         <div>
-            <span class="font-medium text-surface-900 block mb-2">Share this document</span>
+            <span class="font-medium block mb-2">Share this document</span>
             <InputGroup>
                 <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                 <InputGroupAddon>
@@ -70,14 +70,14 @@ export default {
             </InputGroup>
         </div>
         <div>
-            <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
+            <span class="font-medium block mb-2">Invite Member</span>
             <InputGroup>
                 <InputText disabled />
                 <Button label="Invite" icon="pi pi-users"></Button>
             </InputGroup>
         </div>
         <div>
-            <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+            <span class="font-medium block mb-2">Team Members</span>
             <ul class="list-none p-0 m-0 flex flex-col gap-4">
                 <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                     <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
@@ -103,7 +103,7 @@ export default {
         <Popover ref="op">
             <div class="flex flex-col gap-4 w-[25rem]">
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Share this document</span>
+                    <span class="font-medium block mb-2">Share this document</span>
                     <InputGroup>
                         <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                         <InputGroupAddon>
@@ -112,14 +112,14 @@ export default {
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
+                    <span class="font-medium block mb-2">Invite Member</span>
                     <InputGroup>
                         <InputText disabled />
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+                    <span class="font-medium block mb-2">Team Members</span>
                     <ul class="list-none p-0 m-0 flex flex-col gap-4">
                         <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                             <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
@@ -166,7 +166,7 @@ export default {
         <Popover ref="op">
             <div class="flex flex-col gap-4 w-[25rem]">
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Share this document</span>
+                    <span class="font-medium block mb-2">Share this document</span>
                     <InputGroup>
                         <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
                         <InputGroupAddon>
@@ -175,14 +175,14 @@ export default {
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Invite Member</span>
+                    <span class="font-medium block mb-2">Invite Member</span>
                     <InputGroup>
                         <InputText disabled />
                         <Button label="Invite" icon="pi pi-users"></Button>
                     </InputGroup>
                 </div>
                 <div>
-                    <span class="font-medium text-surface-900 block mb-2">Team Members</span>
+                    <span class="font-medium block mb-2">Team Members</span>
                     <ul class="list-none p-0 m-0 flex flex-col gap-4">
                         <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
                             <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
diff --git a/doc/popover/DataTableDoc.vue b/doc/popover/DataTableDoc.vue
index b4d30b9fa..515e651fb 100644
--- a/doc/popover/DataTableDoc.vue
+++ b/doc/popover/DataTableDoc.vue
@@ -6,15 +6,15 @@
     <div class="card flex flex-col items-center gap-4">
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
+        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
             <div class="relative">
                 <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-80" />
             </div>
             <div class="flex items-center justify-between mt-4 mb-2">
-                <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-                <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
+                <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
             </div>
-            <span class="text-surface-600">{{ selectedProduct.category }}</span>
+            <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
         </div>
 
         <Popover ref="op" appendTo="body">
@@ -46,15 +46,15 @@ export default {
 <Toast />
 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
+<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
     <div class="relative">
         <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-16 shadow-sm" class="w-full sm:w-80" />
     </div>
     <div class="flex items-center justify-between mt-4 mb-2">
-        <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-        <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
+        <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
+        <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
     </div>
-    <span class="text-surface-600">{{ selectedProduct.category }}</span>
+    <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
 </div>
 
 <Popover ref="op" appendTo="body">
@@ -79,15 +79,15 @@ export default {
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
+        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
             <div class="relative">
                 <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
             </div>
             <div class="flex items-center justify-between mt-4 mb-2">
-                <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-                <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
+                <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
             </div>
-            <span class="text-surface-600">{{ selectedProduct.category }}</span>
+            <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
         </div>
 
         <Popover ref="op" appendTo="body">
@@ -141,15 +141,15 @@ export default {
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded">
+        <div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
             <div class="relative">
                 <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
             </div>
             <div class="flex items-center justify-between mt-4 mb-2">
-                <span class="text-surface-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
-                <span class="text-surface-900 text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
+                <span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
+                <span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
             </div>
-            <span class="text-surface-600">{{ selectedProduct.category }}</span>
+            <span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
         </div>
 
         <Popover ref="op" appendTo="body">
diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
index da5875c3b..addf911de 100644
--- a/doc/toast/HeadlessDoc.vue
+++ b/doc/toast/HeadlessDoc.vue
@@ -6,10 +6,10 @@
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
                 <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
-                    <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                    <i class="pi pi-cloud-upload text-green-400 text-2xl"></i>
                     <div class="flex flex-col gap-4 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
+                        <p class="m-0 text-base text-white">{{ message.detail }}</p>
                         <div class="flex flex-col gap-2">
                             <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index 0b6b4eab0..da66664b1 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -8,9 +8,9 @@
                 <div class="flex flex-col items-start" style="flex: 1">
                     <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-surface-900">Amy Elsner</span>
+                        <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
+                    <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
                     <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
@@ -32,9 +32,9 @@ export default {
         <div class="flex flex-col items-start" style="flex: 1">
             <div class="flex items-center gap-2">
                 <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold text-surface-900">Amy Elsner</span>
+                <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
             </div>
-            <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
+            <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
             <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
         </div>
     </template>
@@ -49,9 +49,9 @@ export default {
                 <div class="flex flex-col items-start" style="flex: 1">
                     <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-surface-900">Amy Elsner</span>
+                        <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
+                    <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
                     <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
@@ -93,9 +93,9 @@ export default {
                 <div class="flex flex-col items-start" style="flex: 1">
                     <div class="flex items-center gap-2">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                        <span class="font-bold text-surface-900">Amy Elsner</span>
+                        <span class="font-bold text-surface-700 dark:text-surface-0">Amy Elsner</span>
                     </div>
-                    <div class="font-medium text-lg my-4 text-surface-900">{{ slotProps.message.summary }}</div>
+                    <div class="font-medium text-lg my-4 text-surface-700 dark:text-surface-0">{{ slotProps.message.summary }}</div>
                     <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
diff --git a/doc/tree/TemplateDoc.vue b/doc/tree/TemplateDoc.vue
index b13c3cc2b..404b85c66 100644
--- a/doc/tree/TemplateDoc.vue
+++ b/doc/tree/TemplateDoc.vue
@@ -8,7 +8,7 @@
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -60,7 +60,7 @@ export default {
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -105,7 +105,7 @@ export default {
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 hover:text-primary">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-surface-700 dark:text-surface-0 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>