hexolan/stocklet
1
0
Fork 0
mirror of https://github.com/hexolan/stocklet.git synced 2026-03-27 03:54:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat (web): light/dark logo assets

Browse Source 
fix: light/dark mode toggling

todo: implement a light theme
This commit is contained in:
Declan Teevan
2025-08-19 15:07:04 +01:00
parent 6d82886270
commit befca6144b
10 changed files with 186 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/LightDarkMode.svelte
View File

@@ -6,6 +6,7 @@
$effect(() => {
const mode = localStorage.getItem('mode') || 'light';
checked = mode === 'dark';
document.documentElement.setAttribute('data-mode', mode);
});
const onCheckedChange = (event: { checked: boolean }) => {

20
web/src/components/Navbar.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
import { Navigation } from '@skeletonlabs/skeleton-svelte';
</script>
<header class="border-b border-surface-200-800 bg-surface-100-900">
<div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<a href="/" class="flex items-center gap-2 font-semibold">
<img src="/assets/logo.svg" alt="Stocklet" class="h-8 w-auto dark:hidden" />
<img src="/assets/logo-light.svg" alt="Stocklet" class="h-8 w-auto hidden dark:block" />
</a>
<Navigation.Bar classes="bg-transparent width-auto h-12 p-0">
<Navigation.Tile href="/" label="Home" />
<Navigation.Tile href="#" label="Products" />
<Navigation.Tile href="#" label="Orders" />
<Navigation.Tile href="#" label="Account" />
</Navigation.Bar>
</div>
</div>
</header>