From 50d9f943db08c2f731ad886bae906c49c3aba7dd Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 29 Jul 2026 16:29:14 +0500
Subject: [PATCH] Fix theme color opacity

---
 src/vk_parser_app/templates/base.html | 74 +++++++++++++--------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/vk_parser_app/templates/base.html b/src/vk_parser_app/templates/base.html
index d6f0f9f..ec071e6 100644
--- a/src/vk_parser_app/templates/base.html
+++ b/src/vk_parser_app/templates/base.html
@@ -31,20 +31,20 @@
           },
           colors: {
             app: {
-              bg: 'var(--app-bg)',
-              surface: 'var(--app-surface)',
-              surfaceHover: 'var(--app-surface-hover)',
-              border: 'var(--app-border)',
-              borderFocus: 'var(--app-border-focus)',
-              primary: 'var(--app-primary)',
-              primaryHover: 'var(--app-primary-hover)',
-              textMain: 'var(--app-text-main)',
-              textMuted: 'var(--app-text-muted)',
-              success: 'var(--app-success)',
+              bg: 'rgb(var(--app-bg) / <alpha-value>)',
+              surface: 'rgb(var(--app-surface) / <alpha-value>)',
+              surfaceHover: 'rgb(var(--app-surface-hover) / <alpha-value>)',
+              border: 'rgb(var(--app-border) / <alpha-value>)',
+              borderFocus: 'rgb(var(--app-border-focus) / <alpha-value>)',
+              primary: 'rgb(var(--app-primary) / <alpha-value>)',
+              primaryHover: 'rgb(var(--app-primary-hover) / <alpha-value>)',
+              textMain: 'rgb(var(--app-text-main) / <alpha-value>)',
+              textMuted: 'rgb(var(--app-text-muted) / <alpha-value>)',
+              success: 'rgb(var(--app-success) / <alpha-value>)',
               successBg: 'var(--app-success-bg)',
-              warning: 'var(--app-warning)',
+              warning: 'rgb(var(--app-warning) / <alpha-value>)',
               warningBg: 'var(--app-warning-bg)',
-              error: 'var(--app-error)',
+              error: 'rgb(var(--app-error) / <alpha-value>)',
               errorBg: 'var(--app-error-bg)',
             }
           },
@@ -65,40 +65,40 @@
 
   <style>
     :root {
-      --app-bg: #F8FAFC;
-      --app-surface: #FFFFFF;
-      --app-surface-hover: #E2E8F0;
-      --app-border: #CBD5E1;
-      --app-border-focus: #94A3B8;
-      --app-primary: #2563EB;
-      --app-primary-hover: #1D4ED8;
-      --app-text-main: #0F172A;
-      --app-text-muted: #64748B;
-      --app-success: #059669;
+      --app-bg: 248 250 252;
+      --app-surface: 255 255 255;
+      --app-surface-hover: 226 232 240;
+      --app-border: 203 213 225;
+      --app-border-focus: 148 163 184;
+      --app-primary: 37 99 235;
+      --app-primary-hover: 29 78 216;
+      --app-text-main: 15 23 42;
+      --app-text-muted: 100 116 139;
+      --app-success: 5 150 105;
       --app-success-bg: rgba(5, 150, 105, 0.1);
-      --app-warning: #D97706;
+      --app-warning: 217 119 6;
       --app-warning-bg: rgba(217, 119, 6, 0.1);
-      --app-error: #DC2626;
+      --app-error: 220 38 38;
       --app-error-bg: rgba(220, 38, 38, 0.1);
     }
     .dark {
-      --app-bg: #0F172A;
-      --app-surface: #1E293B;
-      --app-surface-hover: #334155;
-      --app-border: #334155;
-      --app-border-focus: #475569;
-      --app-primary: #3B82F6;
-      --app-primary-hover: #2563EB;
-      --app-text-main: #F8FAFC;
-      --app-text-muted: #94A3B8;
-      --app-success: #10B981;
+      --app-bg: 15 23 42;
+      --app-surface: 30 41 59;
+      --app-surface-hover: 51 65 85;
+      --app-border: 51 65 85;
+      --app-border-focus: 71 85 105;
+      --app-primary: 59 130 246;
+      --app-primary-hover: 37 99 235;
+      --app-text-main: 248 250 252;
+      --app-text-muted: 148 163 184;
+      --app-success: 16 185 129;
       --app-success-bg: rgba(16, 185, 129, 0.1);
-      --app-warning: #F59E0B;
+      --app-warning: 245 158 11;
       --app-warning-bg: rgba(245, 158, 11, 0.1);
-      --app-error: #EF4444;
+      --app-error: 239 68 68;
       --app-error-bg: rgba(239, 68, 68, 0.1);
     }
-    :root:not(.dark) .text-white { color: var(--app-text-main) !important; }
+    :root:not(.dark) .text-white { color: rgb(var(--app-text-main)) !important; }
   </style>
 
   <style type="text/tailwindcss">