Fix theme color opacity

src/vk_parser_app/templates/base.html

@@ -31,20 +31,20 @@
           },
           colors: {
             app: {
-              bg: 'var(--app-bg)',
+              bg: 'rgb(var(--app-bg) / <alpha-value>)',
-              surface: 'var(--app-surface)',
+              surface: 'rgb(var(--app-surface) / <alpha-value>)',
-              surfaceHover: 'var(--app-surface-hover)',
+              surfaceHover: 'rgb(var(--app-surface-hover) / <alpha-value>)',
-              border: 'var(--app-border)',
+              border: 'rgb(var(--app-border) / <alpha-value>)',
-              borderFocus: 'var(--app-border-focus)',
+              borderFocus: 'rgb(var(--app-border-focus) / <alpha-value>)',
-              primary: 'var(--app-primary)',
+              primary: 'rgb(var(--app-primary) / <alpha-value>)',
-              primaryHover: 'var(--app-primary-hover)',
+              primaryHover: 'rgb(var(--app-primary-hover) / <alpha-value>)',
-              textMain: 'var(--app-text-main)',
+              textMain: 'rgb(var(--app-text-main) / <alpha-value>)',
-              textMuted: 'var(--app-text-muted)',
+              textMuted: 'rgb(var(--app-text-muted) / <alpha-value>)',
-              success: 'var(--app-success)',
+              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-bg: 248 250 252;
-      --app-surface: #FFFFFF;
+      --app-surface: 255 255 255;
-      --app-surface-hover: #E2E8F0;
+      --app-surface-hover: 226 232 240;
-      --app-border: #CBD5E1;
+      --app-border: 203 213 225;
-      --app-border-focus: #94A3B8;
+      --app-border-focus: 148 163 184;
-      --app-primary: #2563EB;
+      --app-primary: 37 99 235;
-      --app-primary-hover: #1D4ED8;
+      --app-primary-hover: 29 78 216;
-      --app-text-main: #0F172A;
+      --app-text-main: 15 23 42;
-      --app-text-muted: #64748B;
+      --app-text-muted: 100 116 139;
-      --app-success: #059669;
+      --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-bg: 15 23 42;
-      --app-surface: #1E293B;
+      --app-surface: 30 41 59;
-      --app-surface-hover: #334155;
+      --app-surface-hover: 51 65 85;
-      --app-border: #334155;
+      --app-border: 51 65 85;
-      --app-border-focus: #475569;
+      --app-border-focus: 71 85 105;
-      --app-primary: #3B82F6;
+      --app-primary: 59 130 246;
-      --app-primary-hover: #2563EB;
+      --app-primary-hover: 37 99 235;
-      --app-text-main: #F8FAFC;
+      --app-text-main: 248 250 252;
-      --app-text-muted: #94A3B8;
+      --app-text-muted: 148 163 184;
-      --app-success: #10B981;
+      --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">