From b91aa74be13cdf7794d900846c67d116398ade6e Mon Sep 17 00:00:00 2001
From: Mars <3361409208a@gmail.com>
Date: Tue, 23 Jun 2026 14:34:12 +0800
Subject: [PATCH] fix(player): captcha canvas colors follow theme CSS variables
 (theme-3)

---
 apps/player/src/components/RobotVerify.vue | 27 +++++++++++++++++++---
 apps/player/src/styles.css                 |  3 +++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/player/src/components/RobotVerify.vue b/apps/player/src/components/RobotVerify.vue
index 8dc4324..bd66452 100644
--- a/apps/player/src/components/RobotVerify.vue
+++ b/apps/player/src/components/RobotVerify.vue
@@ -15,6 +15,23 @@ const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
 const CANVAS_W = 96;
 const CANVAS_H = 36;
 
+function cssVar(name: string, fallback: string): string {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+function withAlpha(color: string, alpha: number): string {
+  const c = color.trim();
+  const rgb = c.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+  if (rgb) return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
+  const hex = c.match(/^#([0-9a-f]{6})$/i);
+  if (hex) {
+    const n = parseInt(hex[1], 16);
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+  }
+  return c;
+}
+
 function generateCode() {
   let result = '';
   for (let i = 0; i < 4; i++) {
@@ -31,18 +48,22 @@ function drawCaptcha() {
   const ctx = canvas.getContext('2d');
   if (!ctx) return;
 
-  ctx.fillStyle = '#0d0d0d';
+  const bg = cssVar('--captcha-canvas-bg', '#0d0d0d');
+  const charBase = cssVar('--captcha-char', '#f0d875');
+  const noiseRgb = cssVar('--captcha-noise-rgb', '255, 255, 255');
+
+  ctx.fillStyle = bg;
   ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
 
   for (let i = 0; i < 20; i++) {
-    ctx.fillStyle = `rgba(255, 255, 255, ${0.03 + Math.random() * 0.06})`;
+    ctx.fillStyle = `rgba(${noiseRgb}, ${0.03 + Math.random() * 0.06})`;
     ctx.beginPath();
     ctx.arc(Math.random() * CANVAS_W, Math.random() * CANVAS_H, Math.random() * 1.8, 0, Math.PI * 2);
     ctx.fill();
   }
 
   for (let i = 0; i < 3; i++) {
-    ctx.strokeStyle = `rgba(255, 255, 255, ${0.06 + Math.random() * 0.08})`;
+    ctx.strokeStyle = `rgba(${noiseRgb}, ${0.06 + Math.random() * 0.08})`;
     ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.moveTo(Math.random() * CANVAS_W, Math.random() * CANVAS_H);
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index 4842623..1d4cb98 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -24,6 +24,9 @@
   --bg-hover: #345E70;
   --bg-elevated: #2C5364;
   --bg-input: #162D36;
+  --captcha-canvas-bg: #162D36;
+  --captcha-char: #F4A261;
+  --captcha-noise-rgb: 255, 255, 255;
   --bg-glass: rgba(15, 32, 39, 0.85);
 
   --text: #FFFFFF;