From 0fda0d01e70cec7b2497c1cb3f43b94f52192b65 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 14 Oct 2023 22:53:46 +0300
Subject: [PATCH] Add dark switch to topbar

---
 layouts/AppConfigurator.vue | 308 +++++++++++++-----------------------
 layouts/AppTopBar.vue       |  18 +--
 layouts/default.vue         |  18 ++-
 pages/index.vue             |   4 +-
 4 files changed, 141 insertions(+), 207 deletions(-)

diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 984b3856a..044c1354a 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -1,5 +1,5 @@
 <template>
-    <Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config w-full sm:w-30rem" position="right">
+    <Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config w-full sm:w-25rem" position="right">
         <div class="p-2">
             <section class="mb-5">
                 <h3>Component Scale</h3>
@@ -32,265 +32,185 @@
 
             <section>
                 <h3>Themes</h3>
+                <h4>PrimeOne Design</h4>
+                <div class="grid">
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-light-indigo')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Indigo</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-light-blue')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Blue</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-light-purple')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Purple</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-light-teal')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Teal</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-dark-indigo', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Indigo</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-dark-blue', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Blue</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-dark-purple', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Purple</span>
+                    </div>
+                    <div class="col-3 flex flex-column align-items-center gap-2">
+                        <button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
+                        </button>
+                        <span class="white-space-nowrap text-sm">Lara Teal</span>
+                    </div>
+                </div>
+
                 <h4>Bootstrap</h4>
-                <div class="grid free-themes">
+                <div class="grid">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-blue')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Blue</span>
+                        <span class="white-space-nowrap text-sm">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-purple')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Purple</span>
+                        <span class="white-space-nowrap text-sm">Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-blue', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Blue</span>
+                        <span class="white-space-nowrap text-sm">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-purple', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Purple</span>
+                        <span class="white-space-nowrap text-sm">Purple</span>
                     </div>
                 </div>
 
                 <h4>Material Design</h4>
-                <div class="grid free-themes">
+                <div class="grid">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('md-light-indigo')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('md-light-indigo')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Indigo</span>
+                        <span class="white-space-nowrap text-sm">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('md-light-deeppurple')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('md-light-deeppurple')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Deep Purple</span>
+                        <span class="white-space-nowrap text-sm">Deep Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('md-dark-indigo', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Indigo</span>
+                        <span class="white-space-nowrap text-sm">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('md-dark-deeppurple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('md-dark-deeppurple', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Deep Purple</span>
+                        <span class="white-space-nowrap text-sm">Deep Purple</span>
                     </div>
                 </div>
 
                 <h4>Material Design Compact</h4>
-                <div class="grid free-themes">
+                <div class="grid">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('md-light-indigo')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('md-light-indigo')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Indigo</span>
+                        <span class="white-space-nowrap text-sm">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('mdc-light-deeppurple')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Deep Purple</span>
+                        <span class="white-space-nowrap text-sm">Deep Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('mdc-dark-indigo', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Indigo</span>
+                        <span class="white-space-nowrap text-sm">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('mdc-dark-deeppurple', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Deep Purple</span>
-                    </div>
-                </div>
-
-                <h4>Fluent UI</h4>
-                <div class="grid free-themes">
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('fluent-light')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Blue</span>
-                    </div>
-                </div>
-
-                <h4>PrimeOne Design</h4>
-                <div class="grid free-themes">
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-light-indigo')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Indigo</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-light-blue')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Blue</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-light-purple')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Purple</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-light-teal')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Teal</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Indigo</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Blue</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Purple</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Lara Teal</span>
+                        <span class="white-space-nowrap text-sm">Deep Purple</span>
                     </div>
                 </div>
 
                 <h4>Misc</h4>
-                <div class="grid free-themes">
+                <div class="grid">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('soho-light')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('soho-light')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Soho Light</span>
+                        <span class="white-space-nowrap text-sm">Soho Light</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('soho-dark', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('soho-dark', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Soho Dark</span>
+                        <span class="white-space-nowrap text-sm">Soho Dark</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('viva-light')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('viva-light')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Viva Light</span>
+                        <span class="white-space-nowrap text-sm">Viva Light</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('viva-dark', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('viva-dark', true)">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Viva Dark</span>
+                        <span class="white-space-nowrap text-sm">Viva Dark</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('mira')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('fluent-light')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Mira</span>
+                        <span class="white-space-nowrap text-sm">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('nano')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('mira')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Nano</span>
-                    </div>
-                </div>
-
-                <h4>PrimeOne Design - Legacy</h4>
-                <div class="grid free-themes">
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('saga-blue')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/saga-blue.png" alt="Saga Blue" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Saga Blue</span>
+                        <span class="white-space-nowrap text-sm">Mira</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('saga-green')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" />
+                        <button class="px-link h-2rem" @click="changeTheme('nano')">
+                            <img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-2rem border-round" />
                         </button>
-                        <span class="white-space-nowrap">Saga Green</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('saga-orange')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/saga-orange.png" alt="Saga Orange" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Saga Orange</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('saga-purple')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/saga-purple.png" alt="Saga Purple" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Saga Purple</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('vela-blue', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/vela-blue.png" alt="Vela Blue" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Vela Blue</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('vela-green', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/vela-green.png" alt="Vela Green" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Vela Green</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('vela-orange', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/vela-orange.png" alt="Vela Orange" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Vela Orange</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('vela-purple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/vela-purple.png" alt="Vela Purple" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Vela Purple</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('arya-blue', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/arya-blue.png" alt="Arya Blue" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Arya Blue</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('arya-green', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/arya-green.png" alt="Arya Green" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Arya Green</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('arya-orange', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/arya-orange.png" alt="Arya Orange" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Arya Orange</span>
-                    </div>
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('arya-purple', true)">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Arya Purple</span>
+                        <span class="white-space-nowrap text-sm">Nano</span>
                     </div>
                 </div>
             </section>
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index ff29ca8f3..4dd230506 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -94,12 +94,7 @@
                         <i class="pi pi-comments text-700"></i>
                     </a>
                 </li>
-                <li v-if="showConfigurator">
-                    <button type="button" class="p-button flex-shrink-0 flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
-                        <i class="pi pi-palette"></i>
-                    </button>
-                </li>
-                <li v-if="showDarkSwitch">
+                <li>
                     <button
                         type="button"
                         class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
@@ -108,6 +103,11 @@
                         <i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
                     </button>
                 </li>
+                <li v-if="showConfigurator">
+                    <button type="button" class="p-button flex-shrink-0 flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
+                        <i class="pi pi-palette"></i>
+                    </button>
+                </li>
                 <li class="relative">
                     <button
                         v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
@@ -130,7 +130,7 @@
                         </ul>
                     </div>
                 </li>
-                <li class="menu-button">
+                <li v-if="showMenuButton" class="menu-button">
                     <button
                         type="button"
                         class="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary menu-button"
@@ -158,9 +158,9 @@ export default {
             type: Boolean,
             default: true
         },
-        showDarkSwitch: {
+        showMenuButton: {
             type: Boolean,
-            default: false
+            default: true
         }
     },
     data() {
diff --git a/layouts/default.vue b/layouts/default.vue
index 2366d7269..d8cc02524 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
         <AppNews v-if="$appState.newsActive" />
-        <AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
+        <AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" />
         <AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
         <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
         <div class="layout-content">
@@ -20,7 +20,8 @@
 
 <script>
 import DomHandler from '@/components/lib/utils/DomHandler';
-import AppConfigurator from './AppConfigurator.vue';
+import EventBus from '@/layouts/AppEventBus';
+import AppConfigurator from './AppConfigurator';
 import AppFooter from './AppFooter.vue';
 import AppMenu from './AppMenu.vue';
 import AppNews from './AppNews.vue';
@@ -92,6 +93,19 @@ export default {
         },
         onUpdateConfigActive() {
             this.appConfigActive = false;
+        },
+        onDarkModeToggle() {
+            let newTheme = null;
+            let currentTheme = this.$appState.theme;
+
+            if (this.$appState.darkTheme) {
+                newTheme = currentTheme.replace('dark', 'light');
+            } else {
+                if (currentTheme.includes('light')) newTheme = currentTheme.replace('light', 'dark');
+                else newTheme = 'lara-dark-teal'; //fallback
+            }
+
+            EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
         }
     },
     computed: {
diff --git a/pages/index.vue b/pages/index.vue
index 499b1f09f..879b9801e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="landingClass">
         <AppNews v-if="$appState.newsActive" />
-        <AppTopBar :showConfigurator="false" showDarkSwitch @darkswitch-click="onThemeToggle" />
+        <AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
         <HeroSection />
         <FeaturesSection />
         <UsersSection />
@@ -55,7 +55,7 @@ export default {
         this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal');
     },
     methods: {
-        onThemeToggle() {
+        onDarkModeToggle() {
             const newTheme = this.$appState.darkTheme ? 'lara-light-teal' : 'lara-dark-teal';
             const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');