37 lines
1021 B
Svelte
37 lines
1021 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import ThemeBackground from '$lib/components/themes/ThemeBackground.svelte';
|
|
import { hexToRgba } from '$lib/utils/colors';
|
|
import { themeStore } from '$lib/stores/theme.svelte';
|
|
|
|
let {
|
|
children,
|
|
maxWidth = '6xl',
|
|
theme = null,
|
|
themeColor = null
|
|
}: {
|
|
children: Snippet;
|
|
maxWidth?: string;
|
|
theme?: string | null;
|
|
themeColor?: string | null;
|
|
} = $props();
|
|
|
|
const backgroundStyle = $derived.by(() => {
|
|
if (!themeColor) return '';
|
|
|
|
const isDark = themeStore.getResolvedTheme() === 'dark';
|
|
const tintedColor = hexToRgba(themeColor, 0.15);
|
|
|
|
return isDark
|
|
? `background: linear-gradient(${tintedColor}, ${tintedColor}), #000000;`
|
|
: `background-color: ${tintedColor};`;
|
|
});
|
|
</script>
|
|
|
|
<div class="min-h-screen p-4 md:p-8 relative overflow-hidden" style={backgroundStyle}>
|
|
<ThemeBackground themeName={theme} color={themeColor} />
|
|
<div class="max-w-{maxWidth} mx-auto space-y-6 relative z-10">
|
|
{@render children()}
|
|
</div>
|
|
</div>
|