From 1f5b3498aa263f0e7eaff931ffd04fb17be64d64 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 31 Mar 2024 16:58:07 +0300
Subject: [PATCH] Add dark mode doc

---
 doc/theming/styled/DarkModeToggleDoc.vue | 44 +++++++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/doc/theming/styled/DarkModeToggleDoc.vue b/doc/theming/styled/DarkModeToggleDoc.vue
index a4c9e2788..10594c08d 100644
--- a/doc/theming/styled/DarkModeToggleDoc.vue
+++ b/doc/theming/styled/DarkModeToggleDoc.vue
@@ -1,18 +1,52 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>CSS Layer.</p>
+        <p>
+            PrimeVue uses the <i>system</i> as the default <i>darkModeSelector</i> in theme configuration. If you have a dark mode switch in your application, set the <i>darkModeSelector</i> to the selector you utilize such as <i>.my-app-dark</i> so
+            that PrimeVue can fit in seamlessly with your light-dark toggle.
+        </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
+            <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 />
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `
-html {
-    font-size: 14px;
+import PrimeVue from 'primevue/config';
+import PrimeOne from 'primevue/themes/primeone';
+import Aura from 'primevue/themes/primeone/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    // Default theme configuration
+    theme: {
+        base: PrimeOne,
+        preset: Aura,
+        options: {
+            darkModeSelector: 'my-app-dark',
+        }
+    }
+ });
+`
+            },
+            code2: {
+                basic: `
+<Button label="Toggle Color Scheme" @click="toggleColorScheme()" />
+`
+            },
+            code3: {
+                basic: `
+const toggleColorScheme() {
+    document.body.classList.toggle("my-app-dark");
 }
 `
             }