vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add dark switch to topbar

pull/4615/head
Cagatay Civici 2023-10-14 22:53:46 +03:00
parent 021dc01b89
commit 0fda0d01e7
4 changed files with 141 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
layouts/AppConfigurator.vue
View File

@ -1,5 +1,5 @@
<template> <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"> <div class="p-2">
<section class="mb-5"> <section class="mb-5">
<h3>Component Scale</h3> <h3>Component Scale</h3>
@ -32,265 +32,185 @@
<section> <section>
<h3>Themes</h3> <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> <h4>Bootstrap</h4>
<div class="grid free-themes"> <div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-blue')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Blue</span> <span class="white-space-nowrap text-sm">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-purple')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Purple</span> <span class="white-space-nowrap text-sm">Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Blue</span> <span class="white-space-nowrap text-sm">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Purple</span> <span class="white-space-nowrap text-sm">Purple</span>
</div> </div>
</div> </div>
<h4>Material Design</h4> <h4>Material Design</h4>
<div class="grid free-themes"> <div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('md-light-indigo')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap text-sm">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('md-light-deeppurple')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap text-sm">Deep Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('md-dark-indigo', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap text-sm">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('md-dark-deeppurple', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap text-sm">Deep Purple</span>
</div> </div>
</div> </div>
<h4>Material Design Compact</h4> <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"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('md-light-indigo')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap text-sm">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('mdc-light-deeppurple')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap text-sm">Deep Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Indigo</span> <span class="white-space-nowrap text-sm">Indigo</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)"> <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-3rem border-round" /> <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> </button>
<span class="white-space-nowrap">Deep Purple</span> <span class="white-space-nowrap text-sm">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>
</div> </div>
</div> </div>
<h4>Misc</h4> <h4>Misc</h4>
<div class="grid free-themes"> <div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('soho-light')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Soho Light</span> <span class="white-space-nowrap text-sm">Soho Light</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('soho-dark', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Soho Dark</span> <span class="white-space-nowrap text-sm">Soho Dark</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('viva-light')"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Viva Light</span> <span class="white-space-nowrap text-sm">Viva Light</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('viva-dark', true)"> <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-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Viva Dark</span> <span class="white-space-nowrap text-sm">Viva Dark</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('mira')"> <button class="px-link h-2rem" @click="changeTheme('fluent-light')">
<img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Mira</span> <span class="white-space-nowrap text-sm">Blue</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('nano')"> <button class="px-link h-2rem" @click="changeTheme('mira')">
<img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Nano</span> <span class="white-space-nowrap text-sm">Mira</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>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-3rem" @click="changeTheme('saga-green')"> <button class="px-link h-2rem" @click="changeTheme('nano')">
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap">Saga Green</span> <span class="white-space-nowrap text-sm">Nano</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>
</div> </div>
</div> </div>
</section> </section>

18
layouts/AppTopBar.vue
View File

@ -94,12 +94,7 @@
<i class="pi pi-comments text-700"></i> <i class="pi pi-comments text-700"></i>
</a> </a>
</li> </li>
<li v-if="showConfigurator"> <li>
<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">
<button <button
type="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" 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> <i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
</button> </button>
</li> </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"> <li class="relative">
<button <button
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
@ -130,7 +130,7 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="menu-button"> <li v-if="showMenuButton" class="menu-button">
<button <button
type="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" 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, type: Boolean,
default: true default: true
}, },
showDarkSwitch: { showMenuButton: {
type: Boolean, type: Boolean,
default: false default: true
} }
}, },
data() { data() {

18
layouts/default.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme"> <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<AppNews v-if="$appState.newsActive" /> <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" /> <AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div> <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content"> <div class="layout-content">
@ -20,7 +20,8 @@
<script> <script>
import DomHandler from '@/components/lib/utils/DomHandler'; 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 AppFooter from './AppFooter.vue';
import AppMenu from './AppMenu.vue'; import AppMenu from './AppMenu.vue';
import AppNews from './AppNews.vue'; import AppNews from './AppNews.vue';
@ -92,6 +93,19 @@ export default {
}, },
onUpdateConfigActive() { onUpdateConfigActive() {
this.appConfigActive = false; 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: { computed: {

4
pages/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="landingClass"> <div :class="landingClass">
<AppNews v-if="$appState.newsActive" /> <AppNews v-if="$appState.newsActive" />
<AppTopBar :showConfigurator="false" showDarkSwitch @darkswitch-click="onThemeToggle" /> <AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
<HeroSection /> <HeroSection />
<FeaturesSection /> <FeaturesSection />
<UsersSection /> <UsersSection />
@ -55,7 +55,7 @@ export default {
this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal'); this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal');
}, },
methods: { methods: {
onThemeToggle() { onDarkModeToggle() {
const newTheme = this.$appState.darkTheme ? 'lara-light-teal' : 'lara-dark-teal'; 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'); const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');