vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add dark switch to topbar

Browse source
This commit is contained in:
Cagatay Civici 2023-10-14 22:53:46 +03:00
parent 021dc01b89
commit 0fda0d01e7
4 changed files with 141 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

308
layouts/AppConfigurator.vue
View file

@ -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>