diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js
index f8a1a6d69..3e7fcb211 100644
--- a/components/lib/tailwind/Tailwind.js
+++ b/components/lib/tailwind/Tailwind.js
@@ -2044,15 +2044,15 @@ export default {
     dataview: {
         content: {
             class: [
-                'bg-white blue-gray-700 border-0 p-0',
+                'bg-white blue-gray-700 border-0 p-0 text-gray-700',
                 'bg-gray-900 dark:text-white/80' // Dark Mode
             ]
         },
         grid: {
-            class: 'flex flex-wrap ml-0 mr-0 mt-0'
+            class: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900'
         },
         header: {
-            class: 'bg-gray-100 text-blue-gray-800 border-gray-200 border-t border-b p-4 font-bold'
+            class: 'bg-gray-100 dark:bg-gray-800 text-blue-gray-800 text-gray-700 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
         }
     },
     dataviewlayoutoptions: {
diff --git a/doc/carousel/theming/UnstyledDoc.vue b/doc/carousel/theming/UnstyledDoc.vue
index 70fb5fc31..295dcfe5a 100644
--- a/doc/carousel/theming/UnstyledDoc.vue
+++ b/doc/carousel/theming/UnstyledDoc.vue
@@ -3,9 +3,11 @@
         <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
     <DocSectionCode :code="code" embedded />
+    <DocSectionCode :code="code" :service="['ProductService']" embedded />
 </template>
 
 <script>
+import { ProductService } from '@/service/ProductService';
 export default {
     data() {
         return {
@@ -15,17 +17,17 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 rounded-lg m-2 text-center py-5 px-3">
                     <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-1/2 shadow-sm" />
                     </div>
                     <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
+                        <h4 class="mb-1 text-gray-700 dark:text-white/80">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3 text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-search" rounded class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
                         </div>
                     </div>
                 </div>
@@ -80,6 +82,9 @@ const getSeverity = (status) => {
 <\/script>`
             }
         };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
     }
 };
 </script>
diff --git a/doc/dataview/theming/UnstyledDoc.vue b/doc/dataview/theming/UnstyledDoc.vue
index 7147f4a26..7cdc43fbe 100644
--- a/doc/dataview/theming/UnstyledDoc.vue
+++ b/doc/dataview/theming/UnstyledDoc.vue
@@ -19,31 +19,31 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
-                <div class="flex justify-end">
+                <div class="flex justify-end bg-gray-100 dark:bg-gray-800">
                     <DataViewLayoutOptions v-model="layout" />
                 </div>
             </template>
 
             <template #list="slotProps">
                 <div class="flex-initial shrink-0 w-full">
-                    <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4">
-                        <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                    <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4 bg-white dark:bg-gray-900">
+                        <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md " :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
                         <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
                             <div class="flex flex-col items-center sm:items-start gap-3">
-                                <div class="text-2xl font-bold text-900">
+                                <div class="text-2xl font-bold text-gray-700 dark:text-white/80">
                                     {{ slotProps.data.name }}
                                 </div>
                                 <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
                                 <div class="flex items-center gap-3">
                                     <span class="flex items-center gap-2">
-                                        <i class="pi pi-tag"></i>
-                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                        <i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
+                                        <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.data.category }}</span>
                                     </span>
                                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
                                 </div>
                             </div>
                             <div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
-                                <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                                <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</span>
                                 <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
@@ -53,21 +53,21 @@ export default {
 
             <template #grid="slotProps">
                 <div class="flex-initial shrink-0 w-full sm:w-1/2 lg:w-full xl:w-1/3 p-2">
-                    <div class="p-4 border surface-border surface-card rounded">
+                    <div class="p-4 border rounded-md bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40">
                         <div class="flex flex-wrap items-center justify-between gap-2">
                             <div class="flex items-center gap-2">
-                                <i class="pi pi-tag"></i>
-                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                <i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
+                                <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.data.category }}</span>
                             </div>
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
                         </div>
                         <div class="flex flex-col items-center gap-3 py-5">
-                            <img class="w-3/4 shadow-md rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
-                            <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                            <img class="w-3/4 shadow-md rounded-md" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                            <div class="text-2xl font-bold text-gray-700 dark:text-white/80">{{ slotProps.data.name }}</div>
                             <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                            <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</span>
                             <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </div>
                     </div>
diff --git a/doc/galleria/theming/UnstyledDoc.vue b/doc/galleria/theming/UnstyledDoc.vue
index a3e8019dc..23dd1fa14 100644
--- a/doc/galleria/theming/UnstyledDoc.vue
+++ b/doc/galleria/theming/UnstyledDoc.vue
@@ -3,16 +3,18 @@
         <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
     </DocSectionText>
     <DocSectionCode :code="code" embedded />
+    <DocSectionCode :code="code" :service="['PhotoService']" embedded />
 </template>
 
 <script>
+import { PhotoService } from '@/service/PhotoService';
 export default {
     data() {
         return {
             code: {
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card md:flex md:justify-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@@ -60,6 +62,9 @@ const responsiveOptions = ref([
         `
             }
         };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (images.value = data));
     }
 };
 </script>
diff --git a/doc/orderlist/theming/UnstyledDoc.vue b/doc/orderlist/theming/UnstyledDoc.vue
index 6fe4f50f2..545d4268d 100644
--- a/doc/orderlist/theming/UnstyledDoc.vue
+++ b/doc/orderlist/theming/UnstyledDoc.vue
@@ -21,13 +21,13 @@ export default {
                 <div class="flex flex-wrap p-2 items-center gap-3">
                     <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-col gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
                         <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
+                            <i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
+                            <span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                    <span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
                 </div>
             </template>
         </OrderList>
diff --git a/doc/picklist/theming/UnstyledDoc.vue b/doc/picklist/theming/UnstyledDoc.vue
index f9e89aea1..6bcff37fc 100644
--- a/doc/picklist/theming/UnstyledDoc.vue
+++ b/doc/picklist/theming/UnstyledDoc.vue
@@ -21,15 +21,15 @@ export default {
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 items-center gap-3">
-                    <img class="w-16 shadow-md shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-col gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
                         <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
+                            <i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
+                            <span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
                         </div>
                     </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                    <span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
                 </div>
             </template>
         </PickList>