From ef45334c222bf123861be00769f4655bed4c58f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 2 Aug 2023 17:03:56 +0300
Subject: [PATCH] Unstyled demo fixes

---
 doc/blockui/theming/UnstyledDoc.vue          |  2 +-
 doc/card/theming/UnstyledDoc.vue             |  2 +-
 doc/divider/theming/UnstyledDoc.vue          |  2 +-
 doc/dock/theming/UnstyledDoc.vue             | 14 ++++-
 doc/inplace/theming/UnstyledDoc.vue          |  6 +-
 doc/inputnumber/theming/UnstyledDoc.vue      |  8 +--
 doc/radiobutton/theming/UnstyledDoc.vue      |  8 +--
 doc/scrollpanel/theming/UnstyledDoc.vue      |  6 +-
 doc/selectbutton/BasicDoc.vue                |  4 +-
 doc/selectbutton/theming/UnstyledDoc.vue     |  2 +-
 doc/sidebar/theming/UnstyledDoc.vue          |  2 +-
 doc/skeleton/theming/UnstyledDoc.vue         | 66 ++++++++++----------
 doc/tabmenu/BasicDoc.vue                     | 10 +--
 doc/tabmenu/theming/UnstyledDoc.vue          | 10 +--
 doc/tag/theming/UnstyledDoc.vue              |  2 +-
 doc/terminal/theming/UnstyledDoc.vue         |  4 +-
 doc/timeline/theming/UnstyledDoc.vue         | 12 +++-
 doc/toolbar/theming/UnstyledDoc.vue          |  2 +-
 doc/tristatecheckbox/theming/UnstyledDoc.vue |  4 +-
 pages/tabmenu/Calendar.vue                   |  2 +-
 pages/tabmenu/Documentation.vue              |  2 +-
 pages/tabmenu/Edit.vue                       |  2 +-
 pages/tabmenu/Settings.vue                   |  2 +-
 pages/tabmenu/index.vue                      |  2 +-
 24 files changed, 97 insertions(+), 79 deletions(-)

diff --git a/doc/blockui/theming/UnstyledDoc.vue b/doc/blockui/theming/UnstyledDoc.vue
index 117961fa0..350c1e9a6 100644
--- a/doc/blockui/theming/UnstyledDoc.vue
+++ b/doc/blockui/theming/UnstyledDoc.vue
@@ -19,7 +19,7 @@ export default {
         </div>
         <BlockUI :blocked="blocked">
             <Panel header="Basic">
-                <p class="m-0">
+                <p class="text-gray-700 dark:text-white/80 m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </p>
diff --git a/doc/card/theming/UnstyledDoc.vue b/doc/card/theming/UnstyledDoc.vue
index aa6fcced8..c3d1e30cf 100644
--- a/doc/card/theming/UnstyledDoc.vue
+++ b/doc/card/theming/UnstyledDoc.vue
@@ -12,7 +12,7 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card flex align-items-center justify-content-center">
+    <div class="card flex items-center justify-center">
         <Card style="width: 25em">
             <template #header>
                 <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
diff --git a/doc/divider/theming/UnstyledDoc.vue b/doc/divider/theming/UnstyledDoc.vue
index 0cb326da0..c4c9aa780 100644
--- a/doc/divider/theming/UnstyledDoc.vue
+++ b/doc/divider/theming/UnstyledDoc.vue
@@ -12,7 +12,7 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card">
+    <div class="card text-gray-700 dark:text-white/80">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
             aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/doc/dock/theming/UnstyledDoc.vue b/doc/dock/theming/UnstyledDoc.vue
index 50183cf9b..74dda0179 100644
--- a/doc/dock/theming/UnstyledDoc.vue
+++ b/doc/dock/theming/UnstyledDoc.vue
@@ -16,7 +16,7 @@ export default {
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex items-center">
                 <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
-                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
+                <label :for="pos.label" class="text-gray-700 dark:text-white/80 ml-2"> {{ pos.label }} </label>
             </div>
         </div>
         <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
@@ -71,6 +71,18 @@ const positions = ref([
 ]);
 
 <\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+</style>
 `
             }
         };
diff --git a/doc/inplace/theming/UnstyledDoc.vue b/doc/inplace/theming/UnstyledDoc.vue
index 26dd6f833..1360956c2 100644
--- a/doc/inplace/theming/UnstyledDoc.vue
+++ b/doc/inplace/theming/UnstyledDoc.vue
@@ -14,9 +14,11 @@ export default {
 <template>
     <div class="card">
         <Inplace>
-            <template #display> View Content </template>
+            <template #display>
+                <span class="text-gray-700 dark:text-white/80"> View Content </span>    
+            </template>
             <template #content>
-                <p class="m-0">
+                <p class="text-gray-700 dark:text-white/80 m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </p>
diff --git a/doc/inputnumber/theming/UnstyledDoc.vue b/doc/inputnumber/theming/UnstyledDoc.vue
index 93ac360a3..170dc793e 100644
--- a/doc/inputnumber/theming/UnstyledDoc.vue
+++ b/doc/inputnumber/theming/UnstyledDoc.vue
@@ -14,19 +14,19 @@ export default {
 <template>
     <div class="card flex flex-wrap">
         <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
             <InputNumber v-model="value1" inputId="integeronly" />
         </div>
         <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <label for="withoutgrouping" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Without Grouping </label>
             <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
         </div>
         <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <label for="minmaxfraction" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Fraction Digits </label>
             <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
         </div>
         <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <label for="minmax" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Boundaries </label>
             <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
         </div>
     </div>
diff --git a/doc/radiobutton/theming/UnstyledDoc.vue b/doc/radiobutton/theming/UnstyledDoc.vue
index 584a3ae92..928cb7b28 100644
--- a/doc/radiobutton/theming/UnstyledDoc.vue
+++ b/doc/radiobutton/theming/UnstyledDoc.vue
@@ -16,19 +16,19 @@ export default {
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
-                <label for="ingredient1" class="ml-2">Cheese</label>
+                <label for="ingredient1" class="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
             </div>
             <div class="flex align-items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
-                <label for="ingredient2" class="ml-2">Mushroom</label>
+                <label for="ingredient2" class="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
             </div>
             <div class="flex align-items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
-                <label for="ingredient3" class="ml-2">Pepper</label>
+                <label for="ingredient3" class="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
             </div>
             <div class="flex align-items-center">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4" class="ml-2">Onion</label>
+                <label for="ingredient4" class="text-gray-700 dark:text-white/80 ml-2">Onion</label>
             </div>
         </div>
     </div>
diff --git a/doc/scrollpanel/theming/UnstyledDoc.vue b/doc/scrollpanel/theming/UnstyledDoc.vue
index dec1e3bdd..30ea753d2 100644
--- a/doc/scrollpanel/theming/UnstyledDoc.vue
+++ b/doc/scrollpanel/theming/UnstyledDoc.vue
@@ -14,15 +14,15 @@ export default {
 <template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
-            <p>
+            <p class="text-gray-700 dark:text-white/80">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
-            <p>
+            <p class="text-gray-700 dark:text-white/80">
                 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
                 voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
             </p>
-            <p class="m-0">
+            <p class="text-gray-700 dark:text-white/80 m-0">
                 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
             </p>
diff --git a/doc/selectbutton/BasicDoc.vue b/doc/selectbutton/BasicDoc.vue
index ae7174aed..5ccb6a922 100644
--- a/doc/selectbutton/BasicDoc.vue
+++ b/doc/selectbutton/BasicDoc.vue
@@ -32,7 +32,7 @@ export default {
 export default {
     data() {
         return {
-            value: 'off',
+            value: 'Off',
             options: ['Off', 'On']
         }
     }
@@ -48,7 +48,7 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('off');
+const value = ref('Off');
 const options = ref(['Off', 'On']);
 <\/script>`
             }
diff --git a/doc/selectbutton/theming/UnstyledDoc.vue b/doc/selectbutton/theming/UnstyledDoc.vue
index 0481024f1..d61aa8c15 100644
--- a/doc/selectbutton/theming/UnstyledDoc.vue
+++ b/doc/selectbutton/theming/UnstyledDoc.vue
@@ -20,7 +20,7 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('off');
+const value = ref('Off');
 const options = ref(['Off', 'On']);
 <\/script>`
             }
diff --git a/doc/sidebar/theming/UnstyledDoc.vue b/doc/sidebar/theming/UnstyledDoc.vue
index 6eccade75..3607cca6f 100644
--- a/doc/sidebar/theming/UnstyledDoc.vue
+++ b/doc/sidebar/theming/UnstyledDoc.vue
@@ -13,7 +13,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex gap-2 justify-content-center">
+        <div class="flex gap-2 justify-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
             <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
             <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
diff --git a/doc/skeleton/theming/UnstyledDoc.vue b/doc/skeleton/theming/UnstyledDoc.vue
index 52fb81e61..bff62021a 100644
--- a/doc/skeleton/theming/UnstyledDoc.vue
+++ b/doc/skeleton/theming/UnstyledDoc.vue
@@ -12,41 +12,39 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card">
-        <div class="">
-            <div class="w-full">
-                <h5>Rectangle</h5>
-                <Skeleton class="mb-2"></Skeleton>
-                <Skeleton width="10rem" class="mb-2"></Skeleton>
-                <Skeleton width="5rem" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2"></Skeleton>
-                <Skeleton width="10rem" height="4rem"></Skeleton>
+    <div class="card text-gray-700 dark:text-white/80">
+        <div class="w-full">
+            <h5>Rectangle</h5>
+            <Skeleton class="mb-2"></Skeleton>
+            <Skeleton width="10rem" class="mb-2"></Skeleton>
+            <Skeleton width="5rem" class="mb-2"></Skeleton>
+            <Skeleton height="2rem" class="mb-2"></Skeleton>
+            <Skeleton width="10rem" height="4rem"></Skeleton>
+        </div>
+        <div class="w-full">
+            <h5>Rounded</h5>
+            <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+            <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+            <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+            <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+            <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+        </div>
+        <div class="w-full">
+            <h5 class="mt-3">Square</h5>
+            <div class="flex items-end">
+                <Skeleton size="2rem" class="mr-2"></Skeleton>
+                <Skeleton size="3rem" class="mr-2"></Skeleton>
+                <Skeleton size="4rem" class="mr-2"></Skeleton>
+                <Skeleton size="5rem"></Skeleton>
             </div>
-            <div class="w-full">
-                <h5>Rounded</h5>
-                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
-                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
-                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
-            </div>
-            <div class="w-full">
-                <h5 class="mt-3">Square</h5>
-                <div class="flex items-end">
-                    <Skeleton size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton size="5rem"></Skeleton>
-                </div>
-            </div>
-            <div class="w-full">
-                <h5 class="mt-3">Circle</h5>
-                <div class="flex items-end">
-                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                    <Skeleton shape="circle" size="5rem"></Skeleton>
-                </div>
+        </div>
+        <div class="w-full">
+            <h5 class="mt-3">Circle</h5>
+            <div class="flex items-end">
+                <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                <Skeleton shape="circle" size="5rem"></Skeleton>
             </div>
         </div>
     </div>
diff --git a/doc/tabmenu/BasicDoc.vue b/doc/tabmenu/BasicDoc.vue
index 29c4913b5..9afb5d82f 100644
--- a/doc/tabmenu/BasicDoc.vue
+++ b/doc/tabmenu/BasicDoc.vue
@@ -112,7 +112,7 @@ const items = ref([
                         tabName: 'HomeDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Home Component Content</h5>
     </div>
 </template>
@@ -128,7 +128,7 @@ export default {
                         tabName: 'CalendarDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Calendar Component Content</h5>
     </div>
 </template>
@@ -144,7 +144,7 @@ export default {
                         tabName: 'EditDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Edit Component Content</h5>
     </div>
 </template>
@@ -160,7 +160,7 @@ export default {
                         tabName: 'DocumentationDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Documentation Component Content</h5>
     </div>
 </template>
@@ -176,7 +176,7 @@ export default {
                         tabName: 'SettingsDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Settings Component Content</h5>
     </div>
 </template>
diff --git a/doc/tabmenu/theming/UnstyledDoc.vue b/doc/tabmenu/theming/UnstyledDoc.vue
index a72b03772..0ce7fe617 100644
--- a/doc/tabmenu/theming/UnstyledDoc.vue
+++ b/doc/tabmenu/theming/UnstyledDoc.vue
@@ -55,7 +55,7 @@ const items = ref([
                         tabName: 'HomeDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Home Component Content</h5>
     </div>
 </template>
@@ -71,7 +71,7 @@ export default {
                         tabName: 'CalendarDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Calendar Component Content</h5>
     </div>
 </template>
@@ -87,7 +87,7 @@ export default {
                         tabName: 'EditDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Edit Component Content</h5>
     </div>
 </template>
@@ -103,7 +103,7 @@ export default {
                         tabName: 'DocumentationDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Documentation Component Content</h5>
     </div>
 </template>
@@ -119,7 +119,7 @@ export default {
                         tabName: 'SettingsDemo',
                         content: `
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h5>Settings Component Content</h5>
     </div>
 </template>
diff --git a/doc/tag/theming/UnstyledDoc.vue b/doc/tag/theming/UnstyledDoc.vue
index 7fd0c5762..c9951b979 100644
--- a/doc/tag/theming/UnstyledDoc.vue
+++ b/doc/tag/theming/UnstyledDoc.vue
@@ -12,7 +12,7 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="flex flex-wrap justify-content-center gap-2">
+    <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
         <Tag severity="info" value="Info"></Tag>
diff --git a/doc/terminal/theming/UnstyledDoc.vue b/doc/terminal/theming/UnstyledDoc.vue
index 2a08fa439..1883ccf58 100644
--- a/doc/terminal/theming/UnstyledDoc.vue
+++ b/doc/terminal/theming/UnstyledDoc.vue
@@ -12,8 +12,8 @@ export default {
             code: {
                 composition: `
 <template>
-    <div>
-        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+    <div class="card">
+        <p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
     </div>
 </template>
diff --git a/doc/timeline/theming/UnstyledDoc.vue b/doc/timeline/theming/UnstyledDoc.vue
index 4b01bb956..7e7ba5975 100644
--- a/doc/timeline/theming/UnstyledDoc.vue
+++ b/doc/timeline/theming/UnstyledDoc.vue
@@ -15,19 +15,25 @@ export default {
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-80">
             <template #content="slotProps">
-                {{ slotProps.item.status }}
+                <span class="text-gray-700 dark:text-white/80">
+                    {{ slotProps.item.status }}
+                </span>
             </template>
         </Timeline>
 
         <Timeline :value="events" align="right" class="w-full md:w-80">
             <template #content="slotProps">
-                {{ slotProps.item.status }}
+                <span class="text-gray-700 dark:text-white/80">
+                    {{ slotProps.item.status }}
+                </span>
             </template>
         </Timeline>
 
         <Timeline :value="events" align="alternate" class="w-full md:w-80">
             <template #content="slotProps">
-                {{ slotProps.item.status }}
+                <span class="text-gray-700 dark:text-white/80">
+                    {{ slotProps.item.status }}
+                </span>
             </template>
         </Timeline>
     </div>
diff --git a/doc/toolbar/theming/UnstyledDoc.vue b/doc/toolbar/theming/UnstyledDoc.vue
index a83f34469..e0b9a4584 100644
--- a/doc/toolbar/theming/UnstyledDoc.vue
+++ b/doc/toolbar/theming/UnstyledDoc.vue
@@ -17,7 +17,7 @@ export default {
             <template #start>
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
                 <Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
-                <i class="pi pi-bars p-toolbar-separator mr-2" />
+                <i class="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
             </template>
 
diff --git a/doc/tristatecheckbox/theming/UnstyledDoc.vue b/doc/tristatecheckbox/theming/UnstyledDoc.vue
index 601efd1c7..23a4183c3 100644
--- a/doc/tristatecheckbox/theming/UnstyledDoc.vue
+++ b/doc/tristatecheckbox/theming/UnstyledDoc.vue
@@ -12,9 +12,9 @@ export default {
             code: {
                 composition: `
 <template>
-    <div class="card flex flex-column align-center">
+    <div class="card flex flex-col items-center">
         <TriStateCheckbox v-model="value" />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
+        <label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
     </div>  
 </template>
 
diff --git a/pages/tabmenu/Calendar.vue b/pages/tabmenu/Calendar.vue
index 96953ef3d..66e22b018 100755
--- a/pages/tabmenu/Calendar.vue
+++ b/pages/tabmenu/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h3>Calendar Component Content</h3>
     </div>
 </template>
diff --git a/pages/tabmenu/Documentation.vue b/pages/tabmenu/Documentation.vue
index 0d63505fa..92ce7b82d 100755
--- a/pages/tabmenu/Documentation.vue
+++ b/pages/tabmenu/Documentation.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h3>Documentation Component Content</h3>
     </div>
 </template>
diff --git a/pages/tabmenu/Edit.vue b/pages/tabmenu/Edit.vue
index 01fe6766e..1dd70c31f 100755
--- a/pages/tabmenu/Edit.vue
+++ b/pages/tabmenu/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h3>Edit Component Content</h3>
     </div>
 </template>
diff --git a/pages/tabmenu/Settings.vue b/pages/tabmenu/Settings.vue
index c8117714f..b0c6d8ae4 100755
--- a/pages/tabmenu/Settings.vue
+++ b/pages/tabmenu/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h3>Settings Component Content</h3>
     </div>
 </template>
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index 93fcc1019..467345483 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="p-4">
         <h3>Home Component Content</h3>
     </div>
 </template>