/* ============================================================ RDW WhatsApp - Theme System (Light / Dark) Applies when has class="dark" ============================================================ */ /* ---------- Custom scrollbar (dark) ---------- */ html.dark ::-webkit-scrollbar-track { background: #0b0f1f; } html.dark ::-webkit-scrollbar-thumb { background: #22d3ee; } html.dark ::-webkit-scrollbar-thumb:hover { background: #a78bfa; } /* ---------- Body / page background ---------- */ html.dark body { background-color: #05070a !important; color: #e7ecfb; } /* ---------- Sidebar ---------- */ html.dark #main-sidebar { background-color: #070a14 !important; } html.dark #main-sidebar .bg-blue-900 { background-color: #05070d !important; } html.dark #main-sidebar .border-blue-700 { border-color: #22345a !important; } html.dark #main-sidebar .hover\:bg-blue-700:hover { background-color: #1c2c52 !important; } /* ---------- Header ---------- */ html.dark header.bg-white { background-color: #0e1428 !important; border-bottom: 1px solid #1e2d45; } html.dark #header-title { color: #e7ecfb !important; } html.dark #whatsapp-header-status { background-color: #121a2e !important; border-color: #253656 !important; color: #8b96c4 !important; } /* ---------- Main content area ---------- */ html.dark .flex-1.overflow-y-auto { background-color: #05070a; } /* ---------- Cards / panels (bg-white) ---------- */ html.dark .bg-white { background-color: #121a2e !important; } html.dark .bg-gray-50 { background-color: #0d1326 !important; } html.dark .bg-gray-100 { background-color: #101a30 !important; } /* ---------- Borders ---------- */ html.dark .border-gray-100 { border-color: #1c2740 !important; } html.dark .border-gray-200 { border-color: #253656 !important; } html.dark .border-gray-300 { border-color: #33456b !important; } /* ---------- Text ---------- */ html.dark .text-gray-800 { color: #e7ecfb !important; } html.dark .text-gray-700 { color: #ccd6f2 !important; } html.dark .text-gray-600 { color: #8b96c4 !important; } html.dark .text-gray-500 { color: #7885ab !important; } html.dark .text-gray-400 { color: #57628c !important; } /* ---------- Inputs / Textareas / Selects ---------- */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), html.dark textarea, html.dark select { background-color: #0d1326 !important; border-color: #253656 !important; color: #e7ecfb !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #57628c !important; } html.dark input:focus:not([type="checkbox"]):not([type="radio"]), html.dark textarea:focus, html.dark select:focus { background-color: #121a2e !important; } /* ---------- Buttons (generic light) ---------- */ html.dark .bg-gray-100.hover\:bg-gray-200, html.dark button.bg-gray-100 { background-color: #121a2e !important; color: #8b96c4 !important; } html.dark .bg-white.border.border-gray-300 { background-color: #121a2e !important; color: #8b96c4 !important; border-color: #33456b !important; } /* ---------- Conversations panel ---------- */ html.dark #conversations-tab .bg-gray-50 { background-color: #101a30 !important; } html.dark #conversations-tab .bg-white { background-color: #121a2e !important; } html.dark #conversations-tab .border-gray-200 { border-color: #253656 !important; } /* Conv tabs active */ html.dark .conv-tab-btn.active { color: #22d3ee !important; border-bottom-color: #22d3ee !important; } /* ---------- Chat window ---------- */ html.dark #chat-view { background-color: #101a30 !important; } html.dark #chat-messages { background-color: #101a30 !important; } html.dark .p-3.bg-gray-100.border-t { background-color: #0d1326 !important; border-color: #253656 !important; } html.dark #chat-input { background-color: #121a2e !important; color: #e7ecfb !important; } html.dark #chat-input:focus { background-color: #1c2740 !important; } /* Chat message bubbles - light mode defaults */ .chat-bubble-sent { background-color: #dcf8c6; color: #1a202c; border: none; } .chat-bubble-received { background-color: #ffffff; color: #1a202c; border: 1px solid #e5e7eb; } .chat-bubble-meta { font-size: 10px; color: #6b7280; } /* Chat message bubbles - dark mode */ html.dark .chat-bubble-sent { background-color: #10402f !important; color: #a7f3d0 !important; border: none !important; } html.dark .chat-bubble-received { background-color: #161d33 !important; color: #e7ecfb !important; border: 1px solid #22d3ee !important; } html.dark .chat-bubble-meta { color: #8b96c4 !important; } /* ---------- Chat header ---------- */ html.dark #chat-view .h-16.bg-white { background-color: #0e1428 !important; } html.dark #chat-contact-name { color: #e7ecfb !important; } html.dark #chat-contact-number { color: #7885ab !important; } /* ---------- Quick reply & flow dropdowns ---------- */ html.dark #quick-reply-dropdown, html.dark #flow-send-dropdown { background-color: #121a2e !important; border-color: #253656 !important; } html.dark #quick-reply-dropdown-list > div, html.dark #flow-send-dropdown-list > div { color: #ccd6f2 !important; } html.dark #quick-reply-dropdown-list > div:hover, html.dark #flow-send-dropdown-list > div:hover { background-color: #0d1326 !important; } /* ---------- Modals ---------- */ html.dark [id$="-modal"] > div { background-color: #121a2e !important; } html.dark [id$="-modal"] .bg-gray-50 { background-color: #0d1326 !important; } html.dark [id$="-modal"] .bg-white { background-color: #121a2e !important; } html.dark [id$="-modal"] .border-gray-200 { border-color: #253656 !important; } /* Rule modal body */ html.dark #rule-modal .bg-gray-100 { background-color: #101a30 !important; } html.dark #rule-modal .bg-white.p-4 { background-color: #121a2e !important; } /* ---------- Tables ---------- */ html.dark table thead tr { background-color: #0d1326 !important; } html.dark table tbody tr { background-color: #121a2e !important; } html.dark table tbody tr:nth-child(even) { background-color: #0d1326 !important; } html.dark table th { color: #8b96c4 !important; border-color: #253656 !important; } html.dark table td { color: #ccd6f2 !important; border-color: #253656 !important; } /* ---------- Badges / status pills ---------- */ html.dark .bg-gray-100.rounded-full { background-color: #121a2e !important; } /* ---------- Profile contact panel ---------- */ html.dark #contact-profile-panel { background-color: #0e1428 !important; border-color: #253656 !important; } html.dark #contact-profile-panel .bg-gray-50 { background-color: #0d1326 !important; } html.dark #contact-profile-panel .border-gray-100 { border-color: #1c2740 !important; } html.dark #contact-profile-panel .bg-gray-100 { background-color: #101a30 !important; } /* ---------- Automation toggle bg ---------- */ html.dark .bg-gray-50.rounded-xl { background-color: #0d1326 !important; } /* ---------- Code snippets ---------- */ html.dark code.bg-gray-100 { background-color: #1c2740 !important; color: #67e8f9 !important; } /* ---------- Theme toggle button ---------- */ #theme-toggle-btn { transition: all 0.2s ease; } #theme-toggle-btn:hover { transform: scale(1.1); } /* ---------- Appearance section in settings ---------- */ .theme-card { cursor: pointer; transition: all 0.2s ease; border-width: 2px; } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } .theme-card.selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); } html.dark .theme-card { background-color: #0d1326 !important; border-color: #253656 !important; } html.dark .theme-card.selected { border-color: #22d3ee !important; } html.dark .theme-card .text-gray-700 { color: #ccd6f2 !important; } html.dark .theme-card .text-gray-500 { color: #7885ab !important; } /* ---------- Light-tint accent backgrounds (added for dark futuristic theme) ---------- */ html.dark .bg-green-50 { background-color: rgba(37,211,102,.08) !important; } html.dark .bg-blue-50 { background-color: rgba(34,211,238,.08) !important; } html.dark .bg-red-50 { background-color: rgba(239,68,68,.08) !important; } html.dark .bg-yellow-50 { background-color: rgba(251,191,36,.08) !important; } html.dark .bg-purple-50 { background-color: rgba(167,139,250,.08) !important; } html.dark .bg-indigo-50 { background-color: rgba(167,139,250,.08) !important; } html.dark .bg-pink-50 { background-color: rgba(244,114,182,.08) !important; } /* ---------- Conversations tab full panel (list + chat area) ---------- */ html.dark #conversations-tab { background-color: #05070a !important; } html.dark #conv-list-panel { background-color: #0e1428 !important; border-color: #253656 !important; } html.dark #conversations-list { background-color: #0e1428 !important; } html.dark #conversations-tab .border-r { border-color: #253656 !important; } html.dark #conversations-tab [class*="bg-white"] { background-color: #121a2e !important; } html.dark #conversations-tab [class*="bg-\[#f0f2f5\]"], html.dark #conversations-tab [style*="240, 242, 245"] { background-color: #0d1326 !important; }