✨ QR-Code adapts to darkmode

classquiz/routers/utils.py

@@ -23,16 +23,19 @@ router = APIRouter()
 
 
 @router.get("/qr/{quiz_pin}")
-async def get_qr(quiz_pin: str):
+async def get_qr(quiz_pin: str, dark_mode: bool = False):
     """
     Get QR code for quiz
     """
     qr = qrcode.QRCode(image_factory=qrcode.image.svg.SvgPathImage, version=1, box_size=20, border=0)
-    qr.add_data(f"{settings.root_address}/play?pin={quiz_pin}")
+    qr.add_data(f"{settings.root_address}/play?pin={quiz_pin}&ref=Qr")
     buf = io.BytesIO()
     qr.make(fit=True)
     qr.make_image(fill_color="black", back_color="white").save(buf, "SVG")
-    return Response(content=buf.getvalue(), media_type="image/svg+xml")
+    data = buf.getvalue()
+    if dark_mode:
+        data = data.replace(b'fill="#000000"', b'fill="#ffffff"')
+    return Response(content=data, media_type="image/svg+xml")
 
 
 class IpResponse(BaseModel):

frontend/src/routes/admin/+page.svelte

@@ -11,6 +11,7 @@
 	import { navbarVisible } from '$lib/stores';
 	import type { PlayerAnswer, Player } from '$lib/admin.ts';
 	import SomeAdminScreen from '$lib/admin.svelte';
+	import { browser } from '$app/env';
 
 	navbarVisible.set(false);
 
@@ -85,6 +86,14 @@
 	const request_answer_export = async () => {
 		await socket.emit('get_export_token');
 	};
+
+	let darkMode = false;
+	if (browser) {
+		darkMode =
+			localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches);
+	}
 </script>
 
 <svelte:window on:beforeunload={confirmUnload} />
@@ -113,7 +122,7 @@
 {:else if !game_started}
 	<img
 		alt="QR code to join the game"
-		src="/api/v1/utils/qr/{quiz_data.game_pin}"
+		src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
 		class="block mx-auto w-1/6"
 	/>
 	<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>