useweb/streba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme toggle with dark map style and mapterhorn terrain

Browse Source
This commit is contained in:
Vincent van der Wal
2026-07-22 11:26:26 +02:00
parent addef8b78e
commit bca5154459
5 changed files with 199 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+48 -2
View File
@@ -2,6 +2,15 @@
import '@fontsource-variable/inter';
import '../app.css';
import { page } from '$app/state';
import { theme } from '$lib/theme.svelte';
const themeTitle = $derived(
theme.pref === 'auto'
? 'Theme: follows your system - click for light'
: theme.pref === 'light'
? 'Theme: light - click for dark'
: 'Theme: dark - click to follow your system'
);
let { children, data } = $props();
@@ -46,6 +55,25 @@
<a href="/signup" class="btn signup-btn">Sign up</a>
</div>
{/if}
<button class="theme-toggle" onclick={() => theme.cycle()} title={themeTitle} aria-label={themeTitle}>
{#if theme.pref === 'auto'}
<svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" />
<path d="M12 3 a9 9 0 0 1 0 18 Z" fill="currentColor" />
</svg>
{:else if theme.pref === 'light'}
<svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true">
<circle cx="12" cy="12" r="4.5" fill="currentColor" />
<g stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1" />
</g>
</svg>
{:else}
<svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true">
<path d="M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z" fill="currentColor" />
</svg>
{/if}
</button>
</nav>
</header>
@@ -71,10 +99,10 @@
height: 3.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
gap: 0.75rem;
}
.wordmark {
margin-right: auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
@@ -112,6 +140,24 @@
padding: 0.35rem 0.85rem;
font-size: 0.85rem;
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.theme-toggle:hover {
background: var(--wash);
color: var(--text-primary);
}
.user {
display: flex;
align-items: center;