Update docs

apps/showcase/doc/tailwind/PresetsDoc.vue

@@ -1,6 +1,5 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <div class="doc-notification">Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final.</div>
         <p>
             In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
             to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.

apps/showcase/doc/theming/styled/ArchitectureDoc.vue

@@ -16,7 +16,7 @@
         <h3>Semantic Tokens</h3>
         <p>
             Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the <i>primary.color</i>. Semantic tokens map to primitive tokens or other semantic tokens. The
-            <i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like implementing dark mode.
+            <i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode.
         </p>
 
         <h3>Component Tokens</h3>

apps/showcase/doc/theming/styled/ColorsDoc.vue

@@ -3,8 +3,8 @@
         <p>
             Color palette of a preset is defined by the <i>primitive</i> design token group. The default colors are derived from the Tailwind colors with some extensions to make it consistent with the Tailwind Presets projects of the unstyled mode.
         </p>
+        <p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
     </DocSectionText>
-    <p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
     <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
     <div class="card">
         <ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">

apps/showcase/doc/theming/styled/DarkModeDoc.vue

@@ -6,11 +6,12 @@
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>
-            An example implementation of a dark mode switch, you may extend it further by involving <i>prefers-color-scheme</i> to keep it from the system initially and <i>localStorage</i> to make it stateful. See this
+            Following is a very basic example implementation of a dark mode switch, you may extend it further by involving <i>prefers-color-scheme</i> to retrieve it from the system initially and use <i>localStorage</i> to make it stateful. See this
             <a href="https://dev.to/abbeyperini/dark-mode-toggle-and-prefers-color-scheme-4f3m" target="_blank" rel="noopener noreferrer">article</a> for more information.
         </p>
         <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
         <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+        <p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
     </DocSectionText>
 </template>
 

apps/showcase/doc/theming/styled/PresetsDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Currently Aura is the only available preset and more will follow in the upcoming updates.</p>
+        <p>Currently Aura, Lara and Nora are the available presets, a new preset based on Material Design is planned by the end of 2024.</p>
     </DocSectionText>
     <div class="card">
         <Tabs value="aura">

apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue

@@ -12,8 +12,8 @@
         <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
         <h4>cssLayer</h4>
         <p>
-            Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> or not. A CSS layer would be handy to
+            Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> by default or not. A CSS layer would be
-            declare a custom cascade layer for easier customization. The default is <i>false</i>.
+            handy to declare a custom cascade layer for easier customization. The default is <i>false</i>.
         </p>
         <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>

apps/showcase/doc/theming/styled/configuration/ThemeDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>theme</i> property is used to customize the initial theme, prefer the <i>PrimeVue</i> plugin for custom configuration instead of the preconfigured <i>PrimeVueStyled</i>.</p>
+        <p>The <i>theme</i> property is used to customize the initial theme.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>

apps/showcase/pages/theming/styled/index.vue

@@ -23,7 +23,7 @@ import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
 import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
 import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
 import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
-import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
+import DarkModeDoc from '@/doc/theming/styled/DarkModeDoc.vue';
 import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
 import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
 import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
@@ -181,9 +181,9 @@ export default {
                     component: ColorsDoc
                 },
                 {
-                    id: 'darkmodetoggle',
+                    id: 'darkmode',
-                    label: 'Dark Mode Toggle',
+                    label: 'Dark Mode',
-                    component: DarkModeToggleDoc
+                    component: DarkModeDoc
                 },
                 {
                     id: 'csslayer',