From c443289877e362aeb64ebc88ee6dfbca076d5604 Mon Sep 17 00:00:00 2001
From: dj-oyu <68707227+dj-oyu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 06:43:17 +0900
Subject: [PATCH] fix: add dark mode fallbacks and remove color-mix for
 compatibility

- Add @media (prefers-color-scheme: dark) with dark fallback values
  for when Telegram theme variables are not available (testing/preview)
- Remove color-mix() for skill selection highlight (not supported in
  all WebView versions)
- All runtime colors use Telegram theme variables which automatically
  adapt to light/dark mode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 pkg/miniapp/static/index.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/pkg/miniapp/static/index.html b/pkg/miniapp/static/index.html
index 7a0cefea5..aa722e737 100644
--- a/pkg/miniapp/static/index.html
+++ b/pkg/miniapp/static/index.html
@@ -19,6 +19,18 @@
     --pending-phase: var(--hint);
   }
 
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: var(--tg-theme-bg-color, #1c1c1e);
+      --text: var(--tg-theme-text-color, #ffffff);
+      --hint: var(--tg-theme-hint-color, #8e8e93);
+      --link: var(--tg-theme-link-color, #5ac8fa);
+      --btn: var(--tg-theme-button-color, #5ac8fa);
+      --btn-text: var(--tg-theme-button-text-color, #ffffff);
+      --secondary-bg: var(--tg-theme-secondary-bg-color, #2c2c2e);
+    }
+  }
+
   * { box-sizing: border-box; margin: 0; padding: 0; }
 
   body {
@@ -184,7 +196,7 @@
   }
 
   .skill-item:active { transform: scale(0.97); }
-  .skill-item.selected { border-color: var(--btn); background: color-mix(in srgb, var(--btn) 8%, var(--bg)); }
+  .skill-item.selected { border-color: var(--btn); }
 
   .skill-body { flex: 1; min-width: 0; }