Fix theme color opacity

This commit is contained in:
Your Name
2026-07-29 16:29:14 +05:00
parent 682329ddfa
commit 50d9f943db
+37 -37
View File
@@ -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">