/** * Dark Mode * ระบบติดตามผู้ป่วยนิติจิตเวช — FMH90 * * Activated by [data-theme="dark"] on * Toggle saved in localStorage('theme') */ /* ============================================ DARK MODE — Override CSS Variables ============================================ */ [data-theme="dark"] { /* Backgrounds */ --white: #1a1a2e; --gray-50: #16213e; --gray-100: #1a1a2e; --gray-200: #2a2a4a; --gray-300: #3a3a5a; --gray-400: #6a6a8a; /* Text */ --gray-500: #9a9aba; --gray-600: #b0b0d0; --gray-700: #d0d0e8; --gray-800: #e8e8f0; --gray-900: #f0f0f8; /* Glassmorphism */ --glass-bg: rgba(26, 26, 46, 0.92); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Primary — slightly lighter for dark bg */ --primary: #00897b; --primary-light: #26a69a; --primary-lighter: #4db6ac; --primary-dark: #004d40; color-scheme: dark; } /* Body */ [data-theme="dark"] body { background-color: #0f0f23; color: #e0e0f0; } /* Sidebar */ [data-theme="dark"] .sidebar { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-right-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sidebar .nav-link { color: #b0b0d0; } [data-theme="dark"] .sidebar .nav-link:hover, [data-theme="dark"] .sidebar .nav-link.active { color: #fff; background: rgba(0, 137, 123, 0.2); } [data-theme="dark"] .sidebar .sidebar-section-label { color: #6a6a8a; } /* Header */ [data-theme="dark"] .main-header { background: rgba(26, 26, 46, 0.95) !important; border-bottom-color: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); } /* Cards */ [data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .info-card { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.06); color: #e0e0f0; } [data-theme="dark"] .card-header { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Tables */ [data-theme="dark"] .table { color: #d0d0e8; } [data-theme="dark"] .table th { background: rgba(0, 137, 123, 0.15); color: #b0d0cc; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .table td { border-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .table-hover > tbody > tr:hover { background: rgba(0, 137, 123, 0.08); } /* DataTables */ [data-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #e0e0f0; } [data-theme="dark"] .dataTables_info { color: #9a9aba; } [data-theme="dark"] .page-item .page-link { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.08); color: #b0b0d0; } [data-theme="dark"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #e0e0f0; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #2a2a4a; border-color: var(--primary); color: #e0e0f0; box-shadow: 0 0 0 0.2rem rgba(0, 137, 123, 0.25); } [data-theme="dark"] .form-control::placeholder { color: #6a6a8a; } [data-theme="dark"] .form-label { color: #b0b0d0; } [data-theme="dark"] .input-group-text { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #9a9aba; } /* Modals */ [data-theme="dark"] .modal-content { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.08); color: #e0e0f0; } [data-theme="dark"] .modal-header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .modal-footer { border-top-color: rgba(255, 255, 255, 0.06); } /* Buttons */ [data-theme="dark"] .btn-outline-secondary { color: #b0b0d0; border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.08); color: #e0e0f0; } [data-theme="dark"] .btn-light { background: #2a2a4a; border-color: rgba(255, 255, 255, 0.1); color: #e0e0f0; } /* Badges */ [data-theme="dark"] .badge.bg-light { background: #2a2a4a !important; color: #e0e0f0 !important; } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .dropdown-item { color: #d0d0e8; } [data-theme="dark"] .dropdown-item:hover { background: rgba(0, 137, 123, 0.12); color: #fff; } [data-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.06); } /* Alerts */ [data-theme="dark"] .alert { border-color: rgba(255, 255, 255, 0.08); } /* Footer */ [data-theme="dark"] .main-footer { background: rgba(26, 26, 46, 0.95); border-top-color: rgba(255, 255, 255, 0.06); color: #9a9aba; } /* Bottom Navigation */ [data-theme="dark"] .mobile-bottom-nav { background: rgba(26, 26, 46, 0.95); border-top-color: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); } [data-theme="dark"] .bottom-nav-item { color: #6a6a8a; } [data-theme="dark"] .bottom-nav-item.active { color: #4db6ac; } /* Mobile Card View */ [data-theme="dark"] .mobile-card-view .patient-card { background: #1e1e3a; border-color: rgba(255, 255, 255, 0.06); } /* Bottom Sheet */ [data-theme="dark"] .bottom-sheet { background: #1e1e3a; } [data-theme="dark"] .bottom-sheet-header { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Page content */ [data-theme="dark"] .page-content { background: #0f0f23; } /* Breadcrumb */ [data-theme="dark"] .breadcrumb-item a { color: #9a9aba; } [data-theme="dark"] .breadcrumb-item.active { color: #6a6a8a; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a5a; } /* Skeleton loading */ [data-theme="dark"] .skeleton { background: #2a2a4a; } [data-theme="dark"] .skeleton-card { background: #1e1e3a; } /* ============================================ Dark Mode Toggle Button ============================================ */ .dark-mode-toggle { position: relative; width: 44px; height: 24px; background: #cbd5e1; border: none; border-radius: 12px; cursor: pointer; transition: background 0.3s ease; padding: 0; flex-shrink: 0; } .dark-mode-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .dark-mode-toggle { background: #00897b; } [data-theme="dark"] .dark-mode-toggle::after { transform: translateX(20px); } .dark-mode-icon { font-size: 0.85rem; color: var(--gray-500); transition: color 0.3s ease; } [data-theme="dark"] .dark-mode-icon { color: #ffd700; } /* ============================================ TOP LOADING BAR (NProgress style) ============================================ */ .top-loading-bar { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, #26a69a, #00e5ff, #26a69a); background-size: 200% 100%; z-index: 99999; transition: width 0.4s ease; animation: loading-bar-shimmer 1.5s linear infinite; pointer-events: none; } .top-loading-bar.active { width: 85%; } .top-loading-bar.done { width: 100%; opacity: 0; transition: width 0.2s ease, opacity 0.4s ease 0.2s; } @keyframes loading-bar-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } [data-theme="dark"] .top-loading-bar { background: linear-gradient(90deg, #4db6ac, #00e5ff, #4db6ac); background-size: 200% 100%; animation: loading-bar-shimmer 1.5s linear infinite; } /* ============================================ PAGE TRANSITIONS ============================================ */ .page-content { animation: page-fade-in 0.3s ease-out; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .page-exit { opacity: 0; transform: translateY(-8px); transition: opacity 0.15s ease, transform 0.15s ease; } @media (prefers-reduced-motion: reduce) { .page-content { animation: none; } .page-exit { transition: none; } .top-loading-bar { animation: none; } } /* ============================================ Auto Dark Mode (system preference) ============================================ */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { /* Only apply if user hasn't explicitly chosen */ } }