/* * Theme System for AI Insights Platform * * Two themes available: * 1. TradEnterprise (default): Traditional enterprise light theme * 2. AIDARK: Contemporary dark theme inspired by modern AI tools * * Theme is controlled via data-theme attribute on tag * Set via environment variable: APP_THEME=AIDARK or APP_THEME=TradEnterprise */ /* ============================================================ TRADENTERPRISE THEME (Default Light Theme) ============================================================ */ :root, body[data-theme="TradEnterprise"] { /* Background colors */ --bg-primary: #f4f6f9; --bg-secondary: #ffffff; --bg-tertiary: #f8f9fa; /* Border colors */ --border-subtle: #dfe6e9; --border-emphasis: #cbd5e1; /* Text colors */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; /* Brand/accent colors */ --accent-ai: #2563eb; --accent-ai-light: #bfdbfe; --accent-ai-bg: rgba(37, 99, 235, 0.08); /* Status colors */ --success: #2e7d32; --success-bg: #d4edda; --success-border: #c3e6cb; --warning: #f59e0b; --warning-bg: #fff3cd; --warning-border: #ffeeba; --danger: #c0392b; --danger-bg: #f8d7da; --danger-border: #f5c6cb; /* Component-specific colors */ --card-bg: #ffffff; --card-border: #e2e8f0; --card-shadow: rgba(15, 23, 42, 0.06); --input-bg: #ffffff; --input-border: #dfe6e9; --input-focus-border: #2563eb; --table-header-bg: #f8fafc; --table-row-hover: #fbfcfd; --table-border: #e2e8f0; /* Chat-specific colors */ --chat-bg: #fbfcfd; --chat-border: #ecf0f1; --chat-bubble-user-bg: #eff6ff; --chat-bubble-user-border: #bfdbfe; --chat-bubble-assistant-bg: #ffffff; --chat-bubble-assistant-border: #e2e8f0; } /* ============================================================ AIDARK THEME (Contemporary Dark Theme) ============================================================ */ body[data-theme="AIDARK"] { /* Core backgrounds - GitHub-inspired dark */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1f2630; /* Borders - subtle but visible */ --border-subtle: #30363d; --border-emphasis: #444c56; /* Text colors - high contrast for readability */ --text-primary: #e6edf3; --text-secondary: #c9d1d9; --text-muted: #b5bcc7; /* Brand/accent - modern blue */ --accent-ai: #3b82f6; --accent-ai-light: #60a5fa; --accent-ai-bg: rgba(59, 130, 246, 0.15); /* Status colors - vibrant but not harsh */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.15); --success-border: rgba(34, 197, 94, 0.3); --warning: #facc15; --warning-bg: rgba(250, 204, 21, 0.15); --warning-border: rgba(250, 204, 21, 0.3); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.15); --danger-border: rgba(239, 68, 68, 0.3); /* Component-specific colors */ --card-bg: #161b22; --card-border: #30363d; --card-shadow: rgba(0, 0, 0, 0.3); --input-bg: #0d1117; --input-border: #30363d; --input-focus-border: #3b82f6; --table-header-bg: #161b22; --table-row-hover: #1f2630; --table-border: #30363d; /* Chat-specific colors for native dark feel */ --chat-bg: #0d1117; --chat-border: #30363d; --chat-bubble-user-bg: rgba(59, 130, 246, 0.12); --chat-bubble-user-border: rgba(59, 130, 246, 0.3); --chat-bubble-assistant-bg: #1f2630; --chat-bubble-assistant-border: #30363d; } /* ============================================================ GLOBAL THEME APPLICATION ============================================================ */ /* Apply theme colors to body */ body { background-color: var(--bg-primary); color: var(--text-primary); } /* Subtle gradient background for AIDARK theme */ body[data-theme="AIDARK"] { background: linear-gradient(135deg, #0f1419 0%, #0d1117 50%, #0a0e13 100%); background-attachment: fixed; } /* Cards and panels */ .ai-chat-prompts, .ai-chat-panel, .survey-spec-wizard, .page-header, .data-source-card, .connection-profile-card { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 1px 2px var(--card-shadow); } /* Page header dark theme */ body[data-theme="AIDARK"] .page-header { background: linear-gradient(135deg, #161b22 0%, #1f2630 60%); border-color: #30363d; } body[data-theme="AIDARK"] .page-header h1 { color: var(--text-primary); } body[data-theme="AIDARK"] .page-header h1 i { color: var(--accent-ai); } body[data-theme="AIDARK"] .page-header p { color: var(--text-secondary); } /* Text elements */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } p, span, div { color: var(--text-secondary); } .text-muted, .ai-chat-hero__sub, .ai-chat-bubble__meta, .wizard-help { color: var(--text-muted); } /* Borders */ .tabs, .wizard-steps, .ai-chat-settings { border-color: var(--border-subtle); } /* Inputs and forms */ input, textarea, select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } input:focus, textarea:focus, select:focus { border-color: var(--input-focus-border); } /* Buttons */ .btn-primary { background-color: var(--accent-ai); border-color: var(--accent-ai); color: #ffffff; } .btn-primary:hover { background-color: var(--accent-ai-light); } .btn-secondary { background-color: var(--bg-tertiary); border-color: var(--border-subtle); color: var(--text-primary); } /* Status indicators */ .ai-status--success, .wizard-status--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); } .ai-status--error, .wizard-status--error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } .ai-status--running { background: var(--bg-tertiary); border-color: var(--border-subtle); } /* Chat transcript */ .ai-chat-transcript { background: var(--chat-bg); border-color: var(--chat-border); } /* Chat bubbles */ .ai-chat-bubble--user .ai-chat-bubble__inner { background: var(--chat-bubble-user-bg); border-color: var(--chat-bubble-user-border); } .ai-chat-bubble--assistant .ai-chat-bubble__inner { background: var(--chat-bubble-assistant-bg); border-color: var(--chat-bubble-assistant-border); } /* Streaming animation for dark mode */ body[data-theme="AIDARK"] .ai-chat-status--thinking { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08)); border-color: rgba(59, 130, 246, 0.4); color: #60a5fa; box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18); } body[data-theme="AIDARK"] .ai-chat-status__spark { border-color: rgba(59, 130, 246, 0.3); border-top-color: #3b82f6; } /* Tables */ .ai-chat-table, .survey-spec-preview__table { color: var(--text-primary); } .ai-chat-table th, .survey-spec-preview__table th { background: var(--table-header-bg); border-color: var(--table-border); color: var(--text-primary); } .ai-chat-table td, .survey-spec-preview__table td { border-color: var(--table-border); color: var(--text-secondary); } .ai-chat-table tr:hover td, .survey-spec-preview__table tr:hover td { background: var(--table-row-hover); } /* Zebra striping for dark mode tables */ body[data-theme="AIDARK"] .ai-chat-table tbody tr:nth-child(even) td { background: var(--bg-secondary); } body[data-theme="AIDARK"] .ai-chat-table tbody tr:nth-child(odd) td { background: var(--bg-tertiary); } body[data-theme="AIDARK"] .ai-chat-table tbody tr:hover td { background: #252c38 !important; } /* Heatmap cells with subtle glow (dark mode) */ body[data-theme="AIDARK"] .heatmap-cell { box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08)); } /* Table wrapper */ .ai-chat-tablewrap { background: var(--card-bg); border-color: var(--card-border); } /* Modals and overlays */ .ai-chat-overlay__panel, .app-dialog { background: var(--card-bg); border-color: var(--card-border); } body[data-theme="AIDARK"] .ai-chat-overlay__backdrop { background: rgba(13, 17, 23, 0.75); } .ai-chat-overlay__header, .app-dialog__header { background: var(--bg-tertiary); border-color: var(--border-subtle); } .ai-chat-overlay__title, .app-dialog__title { color: var(--text-primary); } /* Tabs */ .tab-button { color: var(--text-muted); } .tab-button:hover { color: var(--text-primary); background-color: var(--bg-tertiary); } .tab-button.active { color: var(--accent-ai); background: var(--accent-ai-bg); } /* Navbar and branding */ body[data-theme="AIDARK"] .navbar { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle); } body[data-theme="AIDARK"] .branding-banner { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); } /* Make sure links are visible in dark mode */ body[data-theme="AIDARK"] a { color: var(--accent-ai-light); } body[data-theme="AIDARK"] a:hover { color: #93c5fd; } /* Code blocks and pre-formatted text */ body[data-theme="AIDARK"] code, body[data-theme="AIDARK"] pre { background: var(--bg-tertiary); color: #e6edf3; border: 1px solid var(--border-subtle); } /* Scrollbar styling for dark mode */ body[data-theme="AIDARK"] ::-webkit-scrollbar { width: 10px; height: 10px; } body[data-theme="AIDARK"] ::-webkit-scrollbar-track { background: var(--bg-secondary); } body[data-theme="AIDARK"] ::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 5px; } body[data-theme="AIDARK"] ::-webkit-scrollbar-thumb:hover { background: var(--border-emphasis); } /* Ensure proper contrast for icons */ body[data-theme="AIDARK"] .fa, body[data-theme="AIDARK"] .fas, body[data-theme="AIDARK"] .far { color: var(--text-muted); } body[data-theme="AIDARK"] .btn-primary .fa, body[data-theme="AIDARK"] .btn-primary .fas { color: #ffffff; } /* Loading spinner */ body[data-theme="AIDARK"] .loading-spinner { border-color: var(--border-subtle); border-top-color: var(--accent-ai); } /* Badges and pills */ .ai-usage-summary__pill, .ai-chat-badge, .ai-chat-sql-badge { background: var(--bg-tertiary); border-color: var(--border-subtle); color: var(--text-primary); } /* Settings panels */ .ai-chat-settings__panel { background: var(--bg-tertiary); border-color: var(--border-subtle); } /* Chart suggestions */ .ai-chat-chart-suggestions { background: var(--card-bg); border-color: var(--card-border); } .ai-chat-chart-suggestions__header { background: var(--bg-tertiary); border-color: var(--border-subtle); } .ai-chat-chart-link { background: var(--bg-tertiary); border-color: var(--border-subtle); color: var(--text-primary); } body[data-theme="AIDARK"] .ai-chat-chart-link:hover { border-color: var(--accent-ai); box-shadow: 0 8px 18px rgba(59, 130, 246, 0.15); } /* Report sections */ .ai-report__section { background: var(--card-bg); border-color: var(--card-border); } .ai-report__section--footer { background: var(--bg-tertiary); } /* Prevent placeholder text from being too dark in dark mode */ body[data-theme="AIDARK"] ::placeholder { color: var(--text-muted); opacity: 0.7; } /* Fix menu options visibility in dark mode */ body[data-theme="AIDARK"] .menu-option { background-color: var(--bg-tertiary); color: var(--text-primary); } body[data-theme="AIDARK"] .menu-option:hover { background-color: var(--bg-secondary); } /* Data sources grid cards */ body[data-theme="AIDARK"] .data-source-card, body[data-theme="AIDARK"] .connection-profile-card { background: var(--card-bg); border-color: var(--card-border); } body[data-theme="AIDARK"] .data-source-card:hover, body[data-theme="AIDARK"] .connection-profile-card:hover { border-color: var(--border-emphasis); box-shadow: 0 4px 12px var(--card-shadow); } /* Organization name styling */ body[data-theme="AIDARK"] .organization-name { color: var(--text-muted); font-size: 12px; font-weight: 600; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 4px; padding: 2px 8px; } /* Button and form styling for both themes */ .btn-primary, button[type="submit"], button[type="button"] { transition: all 0.2s ease; } /* Ensure inputs have proper styling in both themes */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]), textarea, select { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); padding: 10px 12px; border-radius: 6px; font-size: 14px; transition: all 0.2s ease; font-family: inherit; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--input-focus-border); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } body[data-theme="AIDARK"] input:focus, body[data-theme="AIDARK"] textarea:focus, body[data-theme="AIDARK"] select:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } /* Select dropdown styling */ body[data-theme="AIDARK"] select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e6edf3' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; appearance: none; } body[data-theme="AIDARK"] select:hover { border-color: var(--border-emphasis); } /* File input styling */ body[data-theme="AIDARK"] input[type="file"] { color: var(--text-muted); } body[data-theme="AIDARK"] input[type="file"]::file-selector-button { background-color: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); cursor: pointer; padding: 4px 12px; border-radius: 4px; transition: all 0.2s ease; } body[data-theme="AIDARK"] input[type="file"]::file-selector-button:hover { background-color: var(--border-subtle); border-color: var(--border-emphasis); }