added option to include custom color on qr image url

frontend/src/lib/components/QR.svelte

@@ -2,6 +2,7 @@
 	import QRCode from 'qrcode'
 	import Button from './ui/button/button.svelte'
 	import { toast } from 'svelte-sonner'
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 
 	export let background = '#fff'
 	export let color = '#000'
@@ -62,8 +63,17 @@
 <div class="flex w-full gap-4">
 	<Button class="w-full" on:click={copyImageToClipboard}
 		>Copy Image</Button>
-	<Button
-		class="w-full"
-		href={`/api/shortener/${code}/qr`}
-		target="_blank">QR Link</Button>
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger asChild let:builder>
+			<Button builders={[builder]} class="w-full">QR Link</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content>
+			<DropdownMenu.Item
+				href={`/api/shortener/${code}/qr`}
+				target="_blank">Standard</DropdownMenu.Item>
+			<DropdownMenu.Item
+				href={`/api/shortener/${code}/qr?color=true`}
+				target="_blank">With Color</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
 </div>

frontend/src/routes/api/shortener/[id]/qr/+server.ts

@@ -1,13 +1,45 @@
+import { db } from '$lib/db'
+import { setting, shortener, user } from '$lib/db/schema'
+import { eq } from 'drizzle-orm'
 import type { RequestHandler } from './$types'
 import QRCode from 'qrcode'
+import { redirect } from '@sveltejs/kit'
 
 const shortenerUrl = Bun.env.PUBLIC_SHORTENER_URL ?? 'shortener.url'
 
 export const GET: RequestHandler = async (event) => {
 	const shortenerId = event.params.id
+	const color = event.url.searchParams.get('color')
+	const shortenerWithUserSetting = await db
+		.select()
+		.from(shortener)
+		.where(eq(shortener.code, shortenerId))
+		.leftJoin(user, eq(shortener.userId, user.id))
+		.leftJoin(setting, eq(setting.userId, user.id))
+
+	if (shortenerWithUserSetting.length == 0) {
+		redirect(303, '/')
+	}
+
+	let colorSetting = {}
+	if (color === 'true' && shortenerWithUserSetting[0].setting) {
+		colorSetting = {
+			color: {
+				light: shortenerWithUserSetting[0].setting.qr_background,
+				dark: shortenerWithUserSetting[0].setting.qr_foreground,
+			},
+		}
+	}
+
 	const image = await QRCode.toBuffer(
 		shortenerUrl + '/' + shortenerId,
-		{ type: 'png', errorCorrectionLevel: 'L', margin: 1, scale: 20 },
+		{
+			type: 'png',
+			errorCorrectionLevel: 'L',
+			margin: 1,
+			scale: 20,
+			...colorSetting,
+		},
 	)
 
 	return new Response(image, {