/* ========================================================== * VTL Theme — Light/Dark CSS Variables * ========================================================== * Drop-in template cho Accounting / Diary / AI. * * Cách dùng: * 1. Copy file này vào public/assets/css/theme.css (load TRƯỚC app.css) * 2. Toggle theme bằng cách set hoặc "light" * 3. CSS của sub-app dùng các var bên dưới — KHÔNG hard-code màu * * Mặc định: light. Đổi data-theme="dark" để switch. * * JS toggle (tham khảo, đặt trong layout): * * ========================================================== */ :root, :root[data-theme="light"] { /* Brand (giống nhau cả 2 mode) */ --brand-primary: #e67e22; --brand-primary-hover: #b45309; --brand-secondary: #f59e0b; --brand-accent: #fef3c7; /* Surfaces */ --bg-primary: #ffffff; --bg-elevated: #fafafa; --bg-hover: #f3f4f6; --bg-input: #ffffff; --bg-disabled: #f9fafb; /* Borders */ --border: #e5e7eb; --border-strong: #d1d5db; --border-focus: #e67e22; /* Text */ --text-primary: #1a1a1a; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-on-brand: #ffffff; /* text trên nền cam */ --text-link: #e67e22; /* Status (giữ nguyên cả 2 mode) */ --color-success: #10b981; --color-success-bg: #d1fae5; --color-warning: #f59e0b; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-bg: #fee2e2; --color-info: #3b82f6; --color-info-bg: #dbeafe; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10); /* Logo asset (load conditional) */ --logo-full: url('/assets/img/vtl-logo-full-light.jpg'); --logo-icon: url('/assets/img/vtl-logo-icon.jpg'); } :root[data-theme="dark"] { /* Brand (giữ nguyên) */ --brand-primary: #e67e22; --brand-primary-hover: #f59e0b; /* sáng hơn trên nền tối */ --brand-secondary: #f59e0b; --brand-accent: #4a3814; /* amber-bg-dark variant */ /* Surfaces */ --bg-primary: #0f0f10; --bg-elevated: #1a1a1c; --bg-hover: #26262a; --bg-input: #1a1a1c; --bg-disabled: #2e2e32; /* Borders */ --border: #2e2e32; --border-strong: #3a3a40; --border-focus: #f59e0b; /* Text */ --text-primary: #f0f0f0; --text-secondary: #a0a0a8; --text-tertiary: #6b6b73; --text-on-brand: #1a1a1a; /* text trên nền cam vẫn đen vì cam đủ sáng */ --text-link: #f59e0b; /* Status (đậm hơn cho nền tối) */ --color-success: #34d399; --color-success-bg: #064e3b; --color-warning: #fbbf24; --color-warning-bg: #451a03; --color-danger: #f87171; --color-danger-bg: #450a0a; --color-info: #60a5fa; --color-info-bg: #1e3a8a; /* Shadows (subtle hơn cho dark) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6); /* Logo asset (dùng bản dark) */ --logo-full: url('/assets/img/vtl-logo-full-dark.jpg'); --logo-icon: url('/assets/img/vtl-logo-icon.jpg'); } /* ========================================================== * Reset cơ bản dùng var * ========================================================== */ html, body { background: var(--bg-primary); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--text-link); text-decoration: none; } a:hover { color: var(--brand-primary-hover); text-decoration: underline; } /* ========================================================== * Component patterns (gợi ý — tự điều chỉnh tuỳ app) * ========================================================== */ .btn-primary { background: var(--brand-primary); color: var(--text-on-brand); border: 1px solid var(--brand-primary); } .btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } .card { background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .card-hover:hover { background: var(--bg-hover); } .badge-green { background: var(--color-success-bg); color: var(--color-success); } .badge-yellow { background: var(--color-warning-bg); color: var(--color-warning); } .badge-red { background: var(--color-danger-bg); color: var(--color-danger); } .badge-blue { background: var(--color-info-bg); color: var(--color-info); } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-left: 3px solid var(--color-warning); } input, select, textarea { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); } input:focus, select:focus, textarea:focus { border-color: var(--border-focus); outline: 2px solid var(--brand-accent); outline-offset: -2px; } /* ========================================================== * Theme toggle button (component pattern) * ========================================================== */ .theme-toggle { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; padding: 6px 10px; border-radius: 6px; font-size: 13px; } .theme-toggle:hover { background: var(--bg-hover); } /* Show appropriate icon */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; }