small fixes

src/lib/website/EditableProfile.svelte

···
 
 	<div
 		class={[
-			'flex flex-col gap-4 pt-16 pb-8',
+			'flex flex-col gap-4 pt-16 pb-4',
 			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
 		]}
 	>
···
 				/>
 			{/if}
 		</div>
-
-		<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
 
 		{#if !hideBlento}
 			<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />

src/lib/website/EditableWebsite.svelte

···
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
-	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
+	import { SelectThemePopover } from '$lib/components/select-theme';
 	import EditBar from './EditBar.svelte';
 	import SaveModal from './SaveModal.svelte';
 	import FloatingEditButton from './FloatingEditButton.svelte';
···
 
 	// Check if floating login button will be visible (to hide MadeWithBlento)
 	const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
+
+	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
+	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
+
+	function updateTheme(newAccent: string, newBase: string) {
+		data.publication.preferences ??= {};
+		data.publication.preferences.accentColor = newAccent;
+		data.publication.preferences.baseColor = newBase;
+		data = { ...data };
+	}
 
 	let imageDragOver = $state(false);
 
···
 			]}
 		>
 			{#if getHideProfileSection(data)}
-				<Button
-					size="icon"
-					variant="ghost"
-					onclick={() => {
-						data.publication.preferences ??= {};
-						data.publication.preferences.hideProfileSection = false;
-						data = { ...data };
-					}}
-					class="pointer-events-auto absolute top-2 left-2 z-20"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-6"
+				<div class="pointer-events-auto absolute top-2 left-2 z-20 flex gap-2">
+					<Button
+						size="icon"
+						variant="ghost"
+						onclick={() => {
+							data.publication.preferences ??= {};
+							data.publication.preferences.hideProfileSection = false;
+							data = { ...data };
+						}}
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-						/>
-					</svg>
-				</Button>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-6"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+							/>
+						</svg>
+					</Button>
+					<SelectThemePopover
+						{accentColor}
+						{baseColor}
+						onchanged={(newAccent, newBase) => updateTheme(newAccent, newBase)}
+					/>
+				</div>
 			{/if}
 			<div class="pointer-events-none"></div>
 			<!-- svelte-ignore a11y_no_static_element_interactions -->

src/lib/website/Profile.svelte

···
 >
 	<div
 		class={[
-			'flex flex-col gap-4 pt-16 pb-8',
+			'flex flex-col gap-4 pt-16 pb-4',
 			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
 		]}
 	>