feat(docs): added global switch for dark theme

mtorromeo · Nov 6, 2023 · 09905d7 · 09905d7
1 parent fa187ba
commit 09905d7
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
@@ -21,6 +21,9 @@
           <pf-toolbar>
             <pf-toolbar-content>
               <pf-toolbar-item>header-tools</pf-toolbar-item>
+              <pf-toolbar-item align="right">
+                <pf-switch v-model:checked="darkTheme" label="Dark theme" />
+              </pf-toolbar-item>
             </pf-toolbar-content>
           </pf-toolbar>
         </pf-masthead-content>
@@ -78,6 +81,17 @@ const overflowMessage = computed(() => {
   return '';
 });
 
+const darkTheme = computed({
+  get: ()=> document.documentElement.classList.contains('pf-v5-theme-dark'),
+  set(value) {
+    if (value) {
+      document.documentElement.classList.add('pf-v5-theme-dark');
+    } else {
+      document.documentElement.classList.remove('pf-v5-theme-dark');
+    }
+  },
+});
+
 function expandAlerts() {
   maxDisplayed.value = 0;
 }