axel/wol-dash
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
axel 2025-04-12 01:02:59 +02:00
parent a62722d312
commit fec1cdb561
9 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/forms/InputSelect.svelte
View File

@ -40,7 +40,7 @@
<label for={name} class="block w-1/3 min-w-[300px]">
<p>{label}</p>
{#if sublabel}
<p class="text-sm text-neutral-400">{sublabel}</p>
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
{/if}
</label>
<select multiple name={name} class="hidden">
@ -49,7 +49,7 @@
{/each}
</select>
<div class="relative flex gap-10 items-center h-fit rounded border border-gray-300 shadow-sm pl-4 pr-2 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
<div class="relative flex gap-10 items-center h-fit rounded border border-gray-300 dark:border-neutral-800 shadow-sm pl-4 pr-2 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
{#if selectData.length == 0}
<p>None available</p>
{:else}
@ -59,12 +59,12 @@
{/if}
{#if expanded}
<ul transition:slide onmouseleave={() => focused = false} onmouseenter={() => focused = true} class="absolute flex flex-col gap-2 top-[calc(100%+10px)] z-1 left-0 w-full max-h-40 overflow-y-scroll bg-white rounded border border-gray-300 shadow-sm p-2 text-xs">
<ul transition:slide onmouseleave={() => focused = false} onmouseenter={() => focused = true} class="absolute flex flex-col gap-2 top-[calc(100%+10px)] z-1 left-0 w-full max-h-40 overflow-y-scroll bg-white dark:bg-neutral-950 rounded border border-gray-300 dark:border-neutral-800 shadow-sm p-2 text-xs">
<div class="flex gap-2 items-center">
<IconSearch class="text-neutral-400"/>
<input type="text" placeholder="Search..." bind:value={search} class="block w-full text-sm !outline-none transition-all duration-300 ease-in-out border-transparent focus:border-b-2 focus:border-indigo-500">
</div>
<div class="w-full h-px bg-neutral-200"></div>
<div class="w-full h-px bg-neutral-200 dark:bg-neutral-700"></div>
{#each search ? selectData.filter(d => d.name.toLowerCase().includes(search.toLowerCase())) : selectData as el}
<Button Icon={el.selected ? IconMinus : IconPlus} type="button" extra="!p-1 !text-xs !rounded-sm w-full !border-none" onclick={() => {el.selected = !el.selected}} inverted={!el.selected}>{el.name}</Button>
{/each}

4
src/lib/components/forms/InputText.svelte
View File

@ -12,9 +12,9 @@
<label for={name} class="block w-1/3 min-w-[300px]">
<p>{label}</p>
{#if sublabel}
<p class="text-sm text-neutral-400">{sublabel}</p>
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
{/if}
</label>
<input id={name} name={name} type="text" defaultValue={defaultValue} {...others}
class="block h-fit rounded border border-gray-300 shadow-sm px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
class="block h-fit rounded border border-gray-300 dark:border-neutral-800 shadow-sm px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>

6
src/lib/components/forms/InputToggle.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import IconCheck from "~icons/tabler/check";
import IconX from "~icons/tabler/x";
import Button from "../ui/Button.svelte";
import IconCheck from "~icons/tabler/check";
import IconX from "~icons/tabler/x";
let {
label,
@ -17,7 +17,7 @@
<label for={name} class="block w-1/3 min-w-[300px]">
<p>{label}</p>
{#if sublabel.length > 0}
<p class="text-sm text-neutral-400">{sublabel}</p>
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
{/if}
</label>

2
src/lib/components/resources/ResourceCard.svelte
View File

@ -6,7 +6,7 @@
} = $props();
</script>
<div class="flex gap-10 justify-between items-center rounded border border-neutral-200 py-4 px-6 shadow">
<div class="flex gap-10 justify-between items-center rounded border border-neutral-200 dark:border-neutral-800 py-4 px-6 shadow">
<div>
<p class="font-medium">{title}</p>
<p class="text-neutral-400">{subtitle}</p>

4
src/lib/components/resources/ResourceEditPage.svelte
View File

@ -19,14 +19,14 @@
});
</script>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full text-neutral-700 dark:text-neutral-300">
<ResourcePageHeader title={heading}>
<Button Icon={IconChevronLeft} onclick={() => history.back()} inverted>Back</Button>
</ResourcePageHeader>
<HorizontalSpacer/>
<div class="text-sm text-neutral-700 flex-1 overflow-scroll">
<div class="text-sm flex-1 overflow-scroll">
{@render children()}
</div>

4
src/lib/components/resources/ResourceListPage.svelte
View File

@ -9,14 +9,14 @@
} = $props();
</script>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full text-neutral-700 dark:text-neutral-300">
<ResourcePageHeader title={heading}>
{@render actionSnippet()}
</ResourcePageHeader>
<HorizontalSpacer/>
<div class="text-sm text-neutral-700 flex-1 overflow-scroll">
<div class="text-sm flex-1 overflow-scroll">
{@render contentSnippet()}
</div>
</div>

6
src/lib/components/ui/Button.svelte
View File

@ -24,12 +24,12 @@
"normal": {
"danger": "bg-red-500 hover:bg-red-600 text-white border border-transparent",
"success": "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent",
"primary": "bg-neutral-800 hover:bg-neutral-600 text-white border border-transparent",
"primary": "bg-neutral-800 dark:bg-neutral-700 hover:bg-neutral-600 text-white border border-transparent",
},
"inverted": {
"danger": "bg-white hover:bg-red-100 text-red-500 border border-red-500",
"danger": "bg-white dark:bg-black hover:bg-red-100 dark:hover:bg-red-950 text-red-500 border border-red-500",
"success": "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500",
"primary": "bg-white hover:bg-neutral-100 text-neutral-800 border border-neutral-800",
"primary": "bg-white dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-800 dark:text-neutral-200 border border-neutral-800",
},
};

2
src/lib/components/ui/HorizontalSpacer.svelte
View File

@ -1 +1 @@
<div class="w-full h-px bg-neutral-200 my-4"></div>
<div class="w-full h-px bg-neutral-200 dark:bg-neutral-800 my-4"></div>

10
src/routes/dashboard/+layout.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import IconHome from "~icons/tabler/home";
import IconLogout2 from "~icons/tabler/logout2";
import IconUsers from "~icons/tabler/users";
import IconUsersGroup from "~icons/tabler/users-group";
import IconLogout2 from "~icons/tabler/logout2";
let { children, data } = $props();
@ -30,13 +30,13 @@
<div class="flex min-h-screen overflow-hidden">
<!-- Sidebar -->
<div id="sidebar" class="h-screen w-64 bg-neutral-100 transform translate-x-0 transition-transform duration-300 ease-in-out z-40 text-neutral-700 text-sm border-r border-neutral-200">
<div id="sidebar" class="h-screen w-64 bg-neutral-100 dark:bg-neutral-900 transform translate-x-0 transition-transform duration-300 ease-in-out z-40 text-neutral-700 dark:text-neutral-300 text-sm border-r border-neutral-200 dark:border-neutral-800">
<div class="p-4 flex flex-col h-full">
<ul class="flex-1">
{#each links as link}
{#if data.user.admin || !link.admin}
<li class="mb-2">
<a class="block flex items-center p-2 bg-transparent hover:bg-neutral-200 transition-all cursor-pointer rounded" href={link.href}>
<a class="block flex items-center p-2 bg-transparent hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded" href={link.href}>
<link.icon class="mr-2"/>
{link.name}
</a>
@ -47,13 +47,13 @@
<div class="p-2 flex w-full justify-between items-center">
<p>Signed in as <span class="underline underline-offset-4">{data.user.name}</span></p>
<a data-sveltekit-preload-data="tap" href="/logout" class="block p-2 bg-transparent hover:bg-neutral-200 transition-all cursor-pointer rounded"><IconLogout2/></a>
<a data-sveltekit-preload-data="tap" href="/logout" class="block p-2 bg-transparent hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded"><IconLogout2/></a>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6 bg-white w-full h-screen">
<div class="flex-1 p-6 bg-white dark:bg-neutral-950 w-full h-screen">
{@render children()}
</div>
</div>