From e28e641739b9420189e69f2b7faddff0b919f4c2 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 10 Feb 2026 14:53:00 +0100
Subject: [PATCH] feat(settings/touchScreen): color circles based on app color

---
 .../Settings/BottomScreen/Menus/TouchScreen/TapTap.vue       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
index d1c5828..114bac3 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -2,6 +2,7 @@
 import { useLocalStorage } from "@vueuse/core";
 import gsap from "gsap";
 
+const app = useAppStore();
 const store = useSettingsStore();
 const achievements = useAchievementsStore();
 const confirmationModal = useConfirmationModal();
@@ -344,7 +345,7 @@ onRender((ctx) => {
     // draw circles and rings
     for (const circle of circles) {
       ctx.globalAlpha = animation.circlesOpacity;
-      ctx.fillStyle = "#fb0000";
+      ctx.fillStyle = app.color.hex;
       fillCirclePixelated(ctx, circle.x, circle.y, circle.radius);
 
       ctx.fillStyle = "#fbfafa";
@@ -353,7 +354,7 @@ onRender((ctx) => {
 
     for (const ring of rings) {
       ctx.globalAlpha = ring.alpha * animation.circlesOpacity;
-      ctx.fillStyle = "#fb0000";
+      ctx.fillStyle = app.color.hex;
       strokeCirclePixelated(
         ctx,
         ring.x,