/* ═══════════════════════════════════════════════════ dark-mode.css — Dark Mode Theme ใช้ attribute [data-theme="dark"] ที่ ═══════════════════════════════════════════════════ */ /* ─── Variables ─── */ html[data-theme="dark"] { --primary: #4a90d9; --primary-dark: #0d3b7a; --primary-light: #6ba9e8; --accent: #e8c96d; --accent-light: #f5d98a; --secondary: #1e2a3f; --text-main: #e4ebf5; --text-muted: #94a3b8; --bg-body: #0f172a; --bg-card: #1a2336; --border: #2d3b54; --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 20px rgba(0,0,0,.4); --shadow-lg: 0 8px 40px rgba(0,0,0,.5); } /* ─── Base ─── */ html[data-theme="dark"] body { background: var(--bg-body); color: var(--text-main); } html[data-theme="dark"] a { color: var(--primary-light); } html[data-theme="dark"] a:hover { color: var(--accent); } /* ─── Header ─── */ html[data-theme="dark"] .site-header { background: #061a3a; border-bottom: 1px solid var(--border); } html[data-theme="dark"] .main-nav { background: #081f44; } html[data-theme="dark"] .topbar { background: #04132b; border-bottom-color: var(--accent); } /* ─── Cards ─── */ html[data-theme="dark"] .card, html[data-theme="dark"] .bg-white { background: var(--bg-card) !important; border-color: var(--border); color: var(--text-main); } html[data-theme="dark"] .card .card-title { color: #d0dcf0; } html[data-theme="dark"] .card-img-placeholder { background: linear-gradient(135deg, #1e2a3f 0%, #2d3b54 100%); color: #4a90d9; } /* ─── Badges ─── */ html[data-theme="dark"] .badge-news { background: rgba(74,144,217,.2); color: #6ba9e8; } html[data-theme="dark"] .badge-announce { background: rgba(255,193,7,.15); color: #ffd54f; } html[data-theme="dark"] .badge-activity { background: rgba(16,185,129,.15); color: #4ade80; } /* ─── Section Title ─── */ html[data-theme="dark"] .section-title { color: var(--primary-light); border-bottom-color: var(--accent); } html[data-theme="dark"] .section-title i { color: var(--accent); } /* ─── News List ─── */ html[data-theme="dark"] .news-list-item { border-bottom-color: var(--border); } html[data-theme="dark"] .news-list-placeholder { background: var(--secondary); color: var(--primary-light); } html[data-theme="dark"] .news-list-title { color: var(--text-main); } /* ─── Content ─── */ html[data-theme="dark"] .news-detail-content { color: #cbd5e1; } html[data-theme="dark"] .news-detail-content h2, html[data-theme="dark"] .news-detail-content h3, html[data-theme="dark"] .news-detail-content h4 { color: var(--primary-light); } html[data-theme="dark"] .msg-modal-body, html[data-theme="dark"] .msg-text { background: #0d1a2e; color: #cbd5e1; } /* ─── Tables ─── */ html[data-theme="dark"] .table, html[data-theme="dark"] .admin-table { color: var(--text-main); border-color: var(--border); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--bg-card); color: var(--text-main); border-bottom-color: var(--border); } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #22304a; } html[data-theme="dark"] .admin-table th { background: #0d1a2e; color: var(--primary-light); } /* ─── Forms ─── */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background: #0d1a2e; color: var(--text-main); border-color: var(--border); } html[data-theme="dark"] .form-control::placeholder { color: #64748b; } html[data-theme="dark"] .input-group-text { background: #1a2336; color: var(--primary-light); border-color: var(--border); } /* ─── Alerts ─── */ html[data-theme="dark"] .alert-info { background: #0c2d48; color: #a5d8ff; border-color: #1e4a6d; } html[data-theme="dark"] .alert-warning { background: #3d2f0a; color: #fde68a; border-color: #78350f; } html[data-theme="dark"] .alert-danger { background: #450a0a; color: #fecaca; border-color: #7f1d1d; } html[data-theme="dark"] .alert-success { background: #052e16; color: #bbf7d0; border-color: #14532d; } /* ─── Footer ─── */ html[data-theme="dark"] .site-footer { background: #04132b; } html[data-theme="dark"] .footer-links a, html[data-theme="dark"] .footer-contact a { color: #94a3b8; } /* ─── Modal ─── */ html[data-theme="dark"] .modal-content { background: var(--bg-card); color: var(--text-main); } /* ─── Dropdown ─── */ html[data-theme="dark"] .dropdown-menu { background: var(--bg-card); border-color: var(--border); } html[data-theme="dark"] .dropdown-item { color: var(--text-main); } html[data-theme="dark"] .dropdown-item:hover { background: #22304a; color: var(--primary-light); } html[data-theme="dark"] .dropdown-header { color: var(--accent-light); } /* ─── Sidebar (admin) ─── */ html[data-theme="dark"] .admin-main { background: #0a1226; } html[data-theme="dark"] .admin-topbar { background: #0d1a2e; color: var(--text-main); border-bottom: 1px solid var(--border); } /* ─── Breadcrumb ─── */ html[data-theme="dark"] .page-hero .breadcrumb-item a, html[data-theme="dark"] .page-hero .breadcrumb-item { color: rgba(228,235,245,.7); } /* ─── FAQ Accordion ─── */ html[data-theme="dark"] .faq-accordion .accordion-button { background: var(--bg-card); color: var(--text-main); } html[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed) { background: #0c2d48; color: var(--primary-light); } html[data-theme="dark"] .faq-accordion .accordion-body { background: var(--bg-card); color: #cbd5e1; } /* ─── Scrollbar ─── */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a1226; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--primary); } /* ─── Transition ─── */ html, body, .card, .site-header, .main-nav, .site-footer { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }