Merge branch 'prod'

app.vue

@@ -8,9 +8,6 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    themeChangeListener: null,
-    newsActivate: null,
-    newsService: null,
     watch: {
         $route: {
             handler(to) {
@@ -20,16 +17,29 @@ export default {
             }
         }
     },
-    mounted() {
+    created() {
-        this.themeChangeListener = (event) => {
+        useServerHead({
-            if (!document.startViewTransition) {
+            link: [
-                this.applyTheme(event);
+                {
-
+                    id: 'theme-link',
-                return;
+                    rel: 'stylesheet',
+                    href: '/themes/lara-light-green/theme.css'
+                },
+                {
+                    id: 'home-table-link',
+                    rel: 'stylesheet',
+                    href: '/styles/landing/themes/lara-light-green/theme.css'
                 }
+            ]
+        });
+    },
+    mounted() {
+        const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
+        const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-            document.startViewTransition(() => this.applyTheme(event));
+        if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
-        };
+            this.applyTheme({ theme: 'lara-dark-green', dark: true });
+        }
 
         EventBus.on('theme-change', this.themeChangeListener);
     },
@@ -37,10 +47,20 @@ export default {
         EventBus.off('theme-change', this.themeChangeListener);
     },
     methods: {
+        themeChangeListener(event) {
+            if (!document.startViewTransition) {
+                this.applyTheme(event);
+
+                return;
+            }
+
+            document.startViewTransition(() => this.applyTheme(event));
+        },
         applyTheme(event) {
             this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
                 this.$appState.theme = event.theme;
                 this.$appState.darkTheme = event.dark;
+
                 EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark });
             });
         }

doc/introduction/AccessibilityDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p class="mb-0">
             PrimeVue has WCAG 2.1 AA level compliance; each component has a dedicated accessibility section to document several aspects, including keyboard and screen reader support. Through communication channels such as GitHub or Discord, numerous
             accessibility experts worldwide continue to provide constant feedback to improve the accessibility features further. View the <NuxtLink to="/guides/accessibility">accessibility guide</NuxtLink> to learn more.
         </p>

doc/introduction/AddOnsDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p class="mb-0">
             PrimeVue does not require financial sponsorships from its community; instead, to be backed by a solid financial foundation, optional add-ons are offered. These include a Figma UI Kit, premium application templates, and reusable UI blocks
             called PrimeBlocks. The add-ons are optional and there is no paywall when using PrimeVue.
         </p>

doc/introduction/OverviewDoc.vue

@@ -4,7 +4,7 @@
             PrimeVue is a complete UI suite for Vue.js consisting of a rich set of UI components, icons, blocks, and application templates. The project's primary goal is to boost developer productivity by offering reusable solutions that are easy to
             tune and customize as an in-house library.
         </p>
-        <p>
+        <p class="mb-0">
             The project has been created by <a href="https://www.primetek.com.tr" class="text-primary hover:underline font-medium">PrimeTek</a> a world-renowned vendor of popular UI Component suites, including
             <a href="https://primefaces.org" class="text-primary hover:underline font-medium">PrimeFaces</a>, <a href="https://primeng.org" class="text-primary hover:underline font-medium">PrimeNG</a>, and
             <a href="https://primereact.org" class="text-primary hover:underline font-medium">PrimeReact.</a> All the members in <NuxtLink to="/team">our team</NuxtLink> are full time employees of PrimeTek who share the same passion and vision for

doc/introduction/PassThroughDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p class="mb-0">
             PassThrough is an innovative API to provide access to the internal DOM elements to add arbitrary attributes. In general, traditional UI component libraries encapsulate UI and logic with limited APIs that makes the developers dependant on
             the library maintainer to extend this API by adding new props or events. With <NuxtLink to="/passthrough">PassThrough</NuxtLink> this limitation has been eliminated since, you'll be able to access the internal of the components to add
             events and attributes. Some common use-cases are adding test attributes, additional aria attributes, custom events and styling.

doc/introduction/SupportDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p class="mb-0">
             <a href="https://github.com/orgs/primefaces/discussions" class="font-medium hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-medium hover:underline text-primary">Discord</a> are the open
             environments for the community users to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek cannot guarantee an instant response time although
             they are monitored and maintained by our staff regularly. If you need to secure our response within 1 business day in addition to other benefits, you may consider the optional <NuxtLink to="/support">PRO support</NuxtLink> service

doc/introduction/ThemingDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p class="mb-0">
             PrimeVue can be styled in two modes; styled or unstyled. Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Unstyled mode on the other hand, leaves the styling to you while
             implementing the functionality and accessibility. Unstyled mode provides full control over the styling with no boundaries by implementing a pluggable architecture to utilize CSS libraries like Tailwind CSS, Bootstrap, Bulma or your own
             custom CSS. We've even further built the <a href="tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> library to skin the UI library with utility classes of Tailwind. This design is future proof as

layouts/default.vue

@@ -92,9 +92,12 @@ export default {
 
             if (this.$appState.darkTheme) {
                 newTheme = currentTheme.replace('dark', 'light');
+                localStorage.setItem(this.$appState.colorSchemeKey, 'light');
             } else {
                 if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark');
                 else newTheme = 'lara-dark-green'; //fallback
+
+                localStorage.setItem(this.$appState.colorSchemeKey, 'dark');
             }
 
             EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });

nuxt.config.js

@@ -52,19 +52,7 @@ export default defineNuxtConfig({
                 { property: 'og:image', content: 'https://www.primefaces.org/static/social/primevue-preview.jpg' },
                 { property: 'og:ttl', content: '604800' }
             ],
-            link: [
+            link: [{ rel: 'icon', href: baseUrl + 'favicon.ico' }],
-                {
-                    id: 'home-table-link',
-                    rel: 'stylesheet',
-                    href: baseUrl + 'styles/landing/themes/lara-light-green/theme.css'
-                },
-                {
-                    id: 'theme-link',
-                    rel: 'stylesheet',
-                    href: baseUrl + 'themes/lara-light-green/theme.css'
-                },
-                { rel: 'icon', href: baseUrl + 'favicon.ico' }
-            ],
             script: [
                 {
                     src: baseUrl + 'scripts/prism.js',

pages/index.vue

@@ -53,13 +53,21 @@ export default {
             document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
         }
 
-        this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green');
+        const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
+        const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
+            this.replaceTableTheme('lara-dark-green');
+        } else {
+            this.replaceTableTheme('lara-light-green');
+        }
     },
     methods: {
         onDarkModeToggle() {
             const newTheme = this.$appState.darkTheme ? 'lara-light-green' : 'lara-dark-green';
             const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
 
+            localStorage.setItem(this.$appState.colorSchemeKey, this.$appState.darkTheme ? 'light' : 'dark');
             EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
             this.replaceTableTheme(newTableTheme);
         },

plugins/app-state.js

@@ -1,6 +1,15 @@
 const $appState = {
     install: (Vue, options) => {
-        Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-green', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
+        Vue.config.globalProperties.$appState = reactive({
+            theme: 'lara-light-green',
+            darkTheme: false,
+            codeSandbox: false,
+            sourceType: 'options-api',
+            newsActive: false,
+            announcement: null,
+            storageKey: 'primevue',
+            colorSchemeKey: 'primevue-color-scheme'
+        });
     }
 };