fix(player): captcha canvas colors follow theme CSS variables (theme-2)

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);
@@ -58,7 +79,7 @@ function drawCaptcha() {
     ctx.translate(x, y);
     ctx.rotate((Math.random() - 0.5) * 0.35);
     ctx.font = `bold ${15 + Math.random() * 4}px 'Courier New', monospace`;
-    ctx.fillStyle = `rgba(240, 216, 117, ${0.85 + Math.random() * 0.15})`;
+    ctx.fillStyle = withAlpha(charBase, 0.85 + Math.random() * 0.15);
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     ctx.fillText(code.value[i], 0, 0);

apps/player/src/styles.css

@@ -33,6 +33,9 @@
   --odds-accent: #F8971F;
   --odds-accent-light: #FBBF24;
   --odds-accent-soft: rgba(248, 151, 31, 0.1);
+  --captcha-canvas-bg: #E8EDF2;
+  --captcha-char: #003D6B;
+  --captcha-noise-rgb: 0, 61, 107;
 }
 
 /* ── Global resets ── */