Fix theme color opacity
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user