/* ========================================================== Dark Mode — aktiviert via data-theme="dark" auf Dunkler Hintergrund, helle Schrift, lesbare Kontraste ========================================================== */ [data-theme="dark"] { --bg-primary: #111827; --bg-secondary: #1F2937; --bg-tertiary: #374151; --text-primary: #F9FAFB; --text-secondary: #D1D5DB; --text-light: #9CA3AF; --border-light: #374151; --border-medium: #4B5563; } /* Body */ [data-theme="dark"] { background-color: #111827 !important; color: #F9FAFB !important; } /* Backgrounds: white/gray -> dark */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: #1F2937 !important; color: #F9FAFB !important; } [data-theme="dark"] .bg-gray-200 { background-color: #374151 !important; color: #F9FAFB !important; } /* Cards & containers with inline bg:white */ [data-theme="dark"] .thai-card, [data-theme="dark"] .nav-thai { background-color: #1F2937 !important; border-color: #374151 !important; } /* Text: dark text -> light text */ [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800 { color: #F9FAFB !important; } [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-600 { color: #D1D5DB !important; } [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400 { color: #9CA3AF !important; } /* Thai-First specific text classes */ [data-theme="dark"] .thai-primary { color: #F9FAFB !important; } [data-theme="dark"] .en-subtitle { color: #9CA3AF !important; } [data-theme="dark"] .nav-item-thai { color: #D1D5DB !important; } [data-theme="dark"] .nav-item-thai:hover { background-color: #374151 !important; color: #F9FAFB !important; } /* Borders */ [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300, [data-theme="dark"] .border-gray-100 { border-color: #374151 !important; } /* Shadows — subtle glow for dark backgrounds */ [data-theme="dark"] .shadow-xl, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow { box-shadow: 0 0 15px rgba(0,0,0,0.4) !important; } /* Inputs, selects, textareas */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #374151 !important; color: #F9FAFB !important; border-color: #4B5563 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #9CA3AF !important; } /* Tables */ [data-theme="dark"] table { border-color: #374151 !important; } [data-theme="dark"] th { background-color: #1F2937 !important; color: #D1D5DB !important; border-color: #374151 !important; } [data-theme="dark"] td { background-color: #111827 !important; color: #F9FAFB !important; border-color: #374151 !important; } /* Week & Month views */ [data-theme="dark"] .mv-cell, [data-theme="dark"] .wv-day-card { background-color: #1F2937 !important; border-color: #374151 !important; color: #F9FAFB !important; } [data-theme="dark"] .mv-cell--today, [data-theme="dark"] .wv-day-card--today { border-color: var(--primary, #14B8A6) !important; } [data-theme="dark"] .mv-day-header { background-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .mv-cell--closed { background-color: #1a1a2e !important; } [data-theme="dark"] .mv-cell--weekend { background-color: #1a202c !important; } /* Links */ [data-theme="dark"] a:not(.header-gradient a):not([class*="bg-"]):not([class*="btn"]) { color: #93C5FD; } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .footer-gradient { background-color: #0F172A !important; } /* Preserve header, images, icons */ [data-theme="dark"] .header-gradient { filter: none !important; } [data-theme="dark"] img, [data-theme="dark"] video, [data-theme="dark"] canvas { filter: none !important; } /* Thai-First template: royal cards */ [data-theme="dark"] .royal-card { background: #1F2937 !important; border-color: #4B5563 !important; } [data-theme="dark"] .royal-card::before { background: linear-gradient(90deg, #C9A84C, #FFD700, #C9A84C) !important; } [data-theme="dark"] .qr-frame-royal { background: #1F2937 !important; border-color: #C9A84C !important; } /* Nav bar (thai-first) */ [data-theme="dark"] .nav-thai { background: #111827 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } /* Lotus icons — preserve their gradients */ [data-theme="dark"] .lotus-icon { filter: none !important; } /* Schedule rows in thai-first */ [data-theme="dark"] [style*="border-bottom:1px solid #e2e8f0"], [data-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"] { border-color: #374151 !important; } /* Inline style overrides for all templates */ [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background:#FFFDF7"], [data-theme="dark"] [style*="background: #FFFDF7"] { background-color: #1F2937 !important; } [data-theme="dark"] [style*="color:#1a1a2e"], [data-theme="dark"] [style*="color: #1a1a2e"], [data-theme="dark"] [style*="color:#1a202c"], [data-theme="dark"] [style*="color: #1a202c"], [data-theme="dark"] [style*="color:#2d3748"], [data-theme="dark"] [style*="color: #2d3748"], [data-theme="dark"] [style*="color:#1f2937"], [data-theme="dark"] [style*="color: #1f2937"] { color: #F9FAFB !important; } [data-theme="dark"] [style*="color:#718096"], [data-theme="dark"] [style*="color: #718096"], [data-theme="dark"] [style*="color:#4a5568"], [data-theme="dark"] [style*="color: #4a5568"] { color: #9CA3AF !important; } /* Text color contrast fixes for dark mode (WCAG AA 4.5:1) */ [data-theme="dark"] .text-green-600 { color: #34D399 !important; } /* 8.05:1 on #1F2937 */ [data-theme="dark"] .text-red-600 { color: #FCA5A5 !important; } /* 8.25:1 on #1F2937 */ [data-theme="dark"] .text-red-400 { color: #FCA5A5 !important; } [data-theme="dark"] .text-yellow-400 { color: #FCD34D !important; } /* Tailwind colored backgrounds -> dark equivalents */ [data-theme="dark"] .bg-yellow-50 { background-color: #362a16 !important; } [data-theme="dark"] .bg-green-50 { background-color: #14291e !important; } [data-theme="dark"] .bg-red-50 { background-color: #2d1515 !important; } [data-theme="dark"] .bg-blue-50 { background-color: #152038 !important; } [data-theme="dark"] .bg-orange-50 { background-color: #2d2014 !important; } [data-theme="dark"] .bg-teal-50 { background-color: #0f2926 !important; } [data-theme="dark"] .bg-indigo-50 { background-color: #1a1838 !important; } [data-theme="dark"] .bg-purple-50 { background-color: #201530 !important; } /* Thai-First template: week schedule rows */ [data-theme="dark"] .week-row-royal { border-color: #374151 !important; } [data-theme="dark"] .week-row-royal:hover { background: #374151 !important; } /* Today highlight row */ [data-theme="dark"] .week-row-royal.today-row { background: #1a2332 !important; } /* Modern template: gradient backgrounds */ [data-theme="dark"] [style*="background: linear-gradient(135deg, #f8fafc"], [data-theme="dark"] [style*="background:linear-gradient(135deg, #f8fafc"] { background: #111827 !important; } /* Light gradient overrides */ [data-theme="dark"] [style*="background: linear-gradient(135deg, #FFFDF7"], [data-theme="dark"] [style*="background:linear-gradient(135deg, #FFFDF7"] { background: #1F2937 !important; } [data-theme="dark"] [style*="background:#FDF8EC"], [data-theme="dark"] [style*="background: #FDF8EC"] { background-color: #2a2315 !important; }