/* ============================================================ RDW WhatsApp - Theme System (Light / Dark) Applies when has class="dark" ============================================================ */ /* ---------- Custom scrollbar (dark) ---------- */ html.dark ::-webkit-scrollbar-track { background: #1e2740; } html.dark ::-webkit-scrollbar-thumb { background: #3b4a6b; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4e6090; } /* ---------- Body / page background ---------- */ html.dark body { background-color: #0f111a !important; color: #e2e8f0; } /* ---------- Sidebar ---------- */ html.dark #main-sidebar { background-color: #111827 !important; } html.dark #main-sidebar .bg-blue-900 { background-color: #0d1117 !important; } html.dark #main-sidebar .border-blue-700 { border-color: #1f2d45 !important; } html.dark #main-sidebar .hover\:bg-blue-700:hover { background-color: #1a2744 !important; } /* ---------- Header ---------- */ html.dark header.bg-white { background-color: #16213e !important; border-bottom: 1px solid #1e2d45; } html.dark #header-title { color: #e2e8f0 !important; } html.dark #whatsapp-header-status { background-color: #1e293b !important; border-color: #2d3f5f !important; color: #94a3b8 !important; } /* ---------- Main content area ---------- */ html.dark .flex-1.overflow-y-auto { background-color: #0f111a; } /* ---------- Cards / panels (bg-white) ---------- */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-gray-50 { background-color: #172032 !important; } html.dark .bg-gray-100 { background-color: #131c2d !important; } /* ---------- Borders ---------- */ html.dark .border-gray-100 { border-color: #243050 !important; } html.dark .border-gray-200 { border-color: #2d3f5f !important; } html.dark .border-gray-300 { border-color: #334468 !important; } /* ---------- Text ---------- */ html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #94a3b8 !important; } html.dark .text-gray-500 { color: #64748b !important; } html.dark .text-gray-400 { color: #475569 !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: #172032 !important; border-color: #2d3f5f !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #475569 !important; } html.dark input:focus:not([type="checkbox"]):not([type="radio"]), html.dark textarea:focus, html.dark select:focus { background-color: #1e293b !important; } /* ---------- Buttons (generic light) ---------- */ html.dark .bg-gray-100.hover\:bg-gray-200, html.dark button.bg-gray-100 { background-color: #1e293b !important; color: #94a3b8 !important; } html.dark .bg-white.border.border-gray-300 { background-color: #1e293b !important; color: #94a3b8 !important; border-color: #334468 !important; } /* ---------- Conversations panel ---------- */ html.dark #conversations-tab .bg-gray-50 { background-color: #131c2d !important; } html.dark #conversations-tab .bg-white { background-color: #1e293b !important; } html.dark #conversations-tab .border-gray-200 { border-color: #2d3f5f !important; } /* Conv tabs active */ html.dark .conv-tab-btn.active { color: #60a5fa !important; border-bottom-color: #60a5fa !important; } /* ---------- Chat window ---------- */ html.dark #chat-view { background-color: #131c2d !important; } html.dark #chat-messages { background-color: #131c2d !important; } html.dark .p-3.bg-gray-100.border-t { background-color: #172032 !important; border-color: #2d3f5f !important; } html.dark #chat-input { background-color: #1e293b !important; color: #e2e8f0 !important; } html.dark #chat-input:focus { background-color: #243050 !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: #1a4731 !important; color: #d1fae5 !important; border: none !important; } html.dark .chat-bubble-received { background-color: #2a2a3e !important; color: #e2e8f0 !important; border: 1px solid #3b4a6b !important; } html.dark .chat-bubble-meta { color: #94a3b8 !important; } /* ---------- Chat header ---------- */ html.dark #chat-view .h-16.bg-white { background-color: #16213e !important; } html.dark #chat-contact-name { color: #e2e8f0 !important; } html.dark #chat-contact-number { color: #64748b !important; } /* ---------- Quick reply & flow dropdowns ---------- */ html.dark #quick-reply-dropdown, html.dark #flow-send-dropdown { background-color: #1e293b !important; border-color: #2d3f5f !important; } html.dark #quick-reply-dropdown-list > div, html.dark #flow-send-dropdown-list > div { color: #cbd5e1 !important; } html.dark #quick-reply-dropdown-list > div:hover, html.dark #flow-send-dropdown-list > div:hover { background-color: #172032 !important; } /* ---------- Modals ---------- */ html.dark [id$="-modal"] > div { background-color: #1e293b !important; } html.dark [id$="-modal"] .bg-gray-50 { background-color: #172032 !important; } html.dark [id$="-modal"] .bg-white { background-color: #1e293b !important; } html.dark [id$="-modal"] .border-gray-200 { border-color: #2d3f5f !important; } /* Rule modal body */ html.dark #rule-modal .bg-gray-100 { background-color: #131c2d !important; } html.dark #rule-modal .bg-white.p-4 { background-color: #1e293b !important; } /* ---------- Tables ---------- */ html.dark table thead tr { background-color: #172032 !important; } html.dark table tbody tr { background-color: #1e293b !important; } html.dark table tbody tr:nth-child(even) { background-color: #172032 !important; } html.dark table th { color: #94a3b8 !important; border-color: #2d3f5f !important; } html.dark table td { color: #cbd5e1 !important; border-color: #2d3f5f !important; } /* ---------- Badges / status pills ---------- */ html.dark .bg-gray-100.rounded-full { background-color: #1e293b !important; } /* ---------- Profile contact panel ---------- */ html.dark #contact-profile-panel { background-color: #16213e !important; border-color: #2d3f5f !important; } html.dark #contact-profile-panel .bg-gray-50 { background-color: #172032 !important; } html.dark #contact-profile-panel .border-gray-100 { border-color: #243050 !important; } html.dark #contact-profile-panel .bg-gray-100 { background-color: #131c2d !important; } /* ---------- Automation toggle bg ---------- */ html.dark .bg-gray-50.rounded-xl { background-color: #172032 !important; } /* ---------- Code snippets ---------- */ html.dark code.bg-gray-100 { background-color: #243050 !important; color: #93c5fd !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: #172032 !important; border-color: #2d3f5f !important; } html.dark .theme-card.selected { border-color: #60a5fa !important; } html.dark .theme-card .text-gray-700 { color: #cbd5e1 !important; } html.dark .theme-card .text-gray-500 { color: #64748b !important; }