Add dark switch to topbar
Cagatay Civici
parent
021dc01b89
commit
0fda0d01e7
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue