From b4f2c00dce18a60de868426f94f6c77883634e3b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 30 Dec 2023 22:38:03 +0300
Subject: [PATCH 1/2] Adjust spacing

---
 doc/introduction/AccessibilityDoc.vue | 2 +-
 doc/introduction/AddOnsDoc.vue        | 2 +-
 doc/introduction/OverviewDoc.vue      | 2 +-
 doc/introduction/PassThroughDoc.vue   | 2 +-
 doc/introduction/SupportDoc.vue       | 2 +-
 doc/introduction/ThemingDoc.vue       | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/doc/introduction/AccessibilityDoc.vue b/doc/introduction/AccessibilityDoc.vue
index a2dde6924..843dd2d01 100644
--- a/doc/introduction/AccessibilityDoc.vue
+++ b/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>
diff --git a/doc/introduction/AddOnsDoc.vue b/doc/introduction/AddOnsDoc.vue
index 60ce746be..bbaee2c22 100644
--- a/doc/introduction/AddOnsDoc.vue
+++ b/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>
diff --git a/doc/introduction/OverviewDoc.vue b/doc/introduction/OverviewDoc.vue
index 6219af4ac..e93cf862a 100644
--- a/doc/introduction/OverviewDoc.vue
+++ b/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
diff --git a/doc/introduction/PassThroughDoc.vue b/doc/introduction/PassThroughDoc.vue
index 0ef90b466..c88b3307a 100644
--- a/doc/introduction/PassThroughDoc.vue
+++ b/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.
diff --git a/doc/introduction/SupportDoc.vue b/doc/introduction/SupportDoc.vue
index 247a725b4..00a179633 100644
--- a/doc/introduction/SupportDoc.vue
+++ b/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
diff --git a/doc/introduction/ThemingDoc.vue b/doc/introduction/ThemingDoc.vue
index 1a7fe400e..49c56c636 100644
--- a/doc/introduction/ThemingDoc.vue
+++ b/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

From 65c6403accb5d6efefe3cfc48e010f30d53785ce Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 31 Dec 2023 01:26:14 +0300
Subject: [PATCH 2/2] Stateful dark mode

---
 app.vue              | 42 +++++++++++++++++++++++++++++++-----------
 layouts/default.vue  |  3 +++
 nuxt.config.js       | 14 +-------------
 pages/index.vue      | 10 +++++++++-
 plugins/app-state.js | 11 ++++++++++-
 5 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/app.vue b/app.vue
index 770079c23..912a811fd 100644
--- a/app.vue
+++ b/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 {
             }
         }
     },
+    created() {
+        useServerHead({
+            link: [
+                {
+                    id: 'theme-link',
+                    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() {
-        this.themeChangeListener = (event) => {
-            if (!document.startViewTransition) {
-                this.applyTheme(event);
+        const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
+        const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-                return;
-            }
-
-            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 });
             });
         }
diff --git a/layouts/default.vue b/layouts/default.vue
index c92dc3448..55e1d67e2 100644
--- a/layouts/default.vue
+++ b/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 });
diff --git a/nuxt.config.js b/nuxt.config.js
index e53278897..b30c190fa 100644
--- a/nuxt.config.js
+++ b/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: [
-                {
-                    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' }
-            ],
+            link: [{ rel: 'icon', href: baseUrl + 'favicon.ico' }],
             script: [
                 {
                     src: baseUrl + 'scripts/prism.js',
diff --git a/pages/index.vue b/pages/index.vue
index 626176e45..fe054347e 100644
--- a/pages/index.vue
+++ b/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);
         },
diff --git a/plugins/app-state.js b/plugins/app-state.js
index 90afbf7b8..69ba8baa1 100644
--- a/plugins/app-state.js
+++ b/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'
+        });
     }
 };