starred/UpSnap
1
0
Fork 0
mirror of https://github.com/seriousm4x/UpSnap.git synced 2026-06-05 06:31:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

add 'colorful' theme by @Raulmora22 #540

Browse Source
This commit is contained in:
Maxi Quoß
2024-04-23 10:01:07 +02:00
parent 33724e80fb
commit 5ebdecbe48
2 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/lib/components/Navbar.svelte
View File

@@ -51,7 +51,8 @@
'winter',
'dim',
'nord',
'sunset'
'sunset',
'colorful'
];
let activeTheme: string | null = '';
let avatar = $pocketbase.authStore.model?.avatar;
@@ -99,7 +100,7 @@
<ul
id="mobile-menu"
tabindex="-1"
class="menu dropdown-content z-[1] mt-3 w-max gap-1 rounded-box bg-base-300 p-2 shadow"
class="menu dropdown-content rounded-box bg-base-300 z-[1] mt-3 w-max gap-1 p-2 shadow"
>
{#if $settingsPub?.website_title}
<div class="menu-title">
@@ -140,14 +141,14 @@
{#each availableThemes as theme}
<li>
<button
class="overflow-hidden rounded-lg text-left outline-base-content"
class="outline-base-content overflow-hidden rounded-lg text-left"
data-set-theme={theme}
on:click={() => (activeTheme = theme)}
on:keydown={() => (activeTheme = theme)}
>
<div
data-theme={theme}
class="w-full cursor-pointer rounded bg-base-100 font-sans text-base-content"
class="bg-base-100 text-base-content w-full cursor-pointer rounded font-sans"
>
<div class="grid grid-cols-5 grid-rows-3">
<div
@@ -159,10 +160,10 @@
/>
<div class="flex-grow text-sm">{theme}</div>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
<div class="w-2 rounded bg-primary" />
<div class="w-2 rounded bg-secondary" />
<div class="w-2 rounded bg-accent" />
<div class="w-2 rounded bg-neutral" />
<div class="bg-primary w-2 rounded" />
<div class="bg-secondary w-2 rounded" />
<div class="bg-accent w-2 rounded" />
<div class="bg-neutral w-2 rounded" />
</div>
</div>
</div>
@@ -217,29 +218,29 @@
<Fa icon={faChevronDown} />
</div>
<div
class="dropdown-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto rounded-box bg-base-200 text-base-content shadow"
class="dropdown-content rounded-box bg-base-200 text-base-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto shadow"
>
<div class="grid grid-cols-1 gap-3 p-3" tabindex="-1">
{#each availableThemes as theme}
<button
class="overflow-hidden rounded-lg text-left outline-base-content"
class="outline-base-content overflow-hidden rounded-lg text-left"
data-set-theme={theme}
on:click={() => (activeTheme = theme)}
on:keydown={() => (activeTheme = theme)}
>
<div
data-theme={theme}
class="w-full cursor-pointer bg-base-100 font-sans text-base-content"
class="bg-base-100 text-base-content w-full cursor-pointer font-sans"
>
<div class="grid grid-cols-5 grid-rows-3">
<div class="col-span-5 row-span-3 row-start-1 flex items-center gap-2 px-4 py-3">
<Fa icon={faCheck} class={activeTheme === theme ? 'visible' : 'invisible'} />
<div class="flex-grow text-sm">{theme}</div>
<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
<div class="w-2 rounded bg-primary" />
<div class="w-2 rounded bg-secondary" />
<div class="w-2 rounded bg-accent" />
<div class="w-2 rounded bg-neutral" />
<div class="bg-primary w-2 rounded" />
<div class="bg-secondary w-2 rounded" />
<div class="bg-accent w-2 rounded" />
<div class="bg-neutral w-2 rounded" />
</div>
</div>
</div>
@@ -266,7 +267,7 @@
</label>
<ul
tabindex="-1"
class="menu dropdown-content z-[1] mt-3 rounded-box bg-base-300 p-2 shadow"
class="menu dropdown-content rounded-box bg-base-300 z-[1] mt-3 p-2 shadow"
>
<li class="menu-title">
{$pocketbase.authStore.isAdmin

22
frontend/tailwind.config.js
View File

@@ -15,9 +15,7 @@ export default {
primary: '#55BCD9',
secondary: '#D4A35C',
'primary-content': '#ffffff'
}
},
{
},
dark: {
...themes['dark'],
primary: '#55BCD9',
@@ -26,15 +24,25 @@ export default {
'--rounded-btn': '1.9rem',
'--tab-border': '2px',
'--tab-radius': '.5rem'
}
},
{
},
cupcake: {
...themes['cupcake'],
primary: '#55BCD9',
secondary: '#D4A35C',
'primary-content': '#ffffff'
}
},
colorful: {
...themes['light'],
primary: '#00bdf8',
secondary: '#009aff',
accent: '#00b3a2',
neutral: '#161200',
'base-100': '#ffffff',
info: '#00c5dc',
success: '#00d892',
warning: '#f77800',
error: '#f36165'
},
},
'bumblebee',
'emerald',