/* HITONET Theme System Light mode is default, dark mode when .dark class on */ :root { /* ===== LIGHT THEME (Default) ===== */ /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: #f3f4f6; --bg-active: #e5e7eb; /* Text */ --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #9ca3af; --text-inverse: #ffffff; /* Borders */ --border-primary: #e5e7eb; --border-secondary: #d1d5db; --border-focus: #000000; /* Buttons */ --btn-primary-bg: #000000; --btn-primary-text: #ffffff; --btn-primary-hover: #1f2937; --btn-secondary-bg: #f3f4f6; --btn-secondary-text: #374151; --btn-secondary-hover: #e5e7eb; /* Cards/Panels */ --card-bg: #ffffff; --card-border: #e5e7eb; --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* Code blocks */ --code-bg: #f3f4f6; --code-text: #1f2937; --code-block-bg: #1f2937; --code-block-text: #f9fafb; --code-header-bg: #111827; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-border: #e5e7eb; --sidebar-item-hover: #f3f4f6; --sidebar-item-active: #f3f4f6; /* Chat specific */ --chat-bg: #ffffff; --chat-input-bg: #f9fafb; --chat-input-border: #d1d5db; --chat-user-bubble: #000000; --chat-user-text: #ffffff; --chat-assistant-bubble: transparent; --chat-assistant-text: #111827; /* Status colors */ --success: #10b981; --success-bg: #ecfdf5; --warning: #f59e0b; --warning-bg: #fffbeb; --error: #ef4444; --error-bg: #fef2f2; --info: #3b82f6; --info-bg: #eff6ff; /* Scrollbar */ --scrollbar-track: #f3f4f6; --scrollbar-thumb: #d1d5db; --scrollbar-thumb-hover: #9ca3af; /* Modal/Overlay */ --overlay-bg: transparent; --modal-bg: #ffffff; } /* ===== DARK THEME ===== */ html.dark { /* Backgrounds */ --bg-primary: #141414; --bg-secondary: #1a1a1a; --bg-tertiary: #252525; --bg-elevated: #2a2a2a; --bg-input: #1e1e1e; --bg-hover: #333333; --bg-active: #404040; /* Text */ --text-primary: #e5e5e5; --text-secondary: #a0a0a0; --text-tertiary: #808080; --text-muted: #666666; --text-inverse: #000000; /* Borders */ --border-primary: #2a2a2a; --border-secondary: #333333; --border-focus: #ffffff; /* Buttons */ --btn-primary-bg: #404040; --btn-primary-text: #f5f5f5; --btn-primary-hover: #4a4a4a; --btn-secondary-bg: #2a2a2a; --btn-secondary-text: #e5e5e5; --btn-secondary-hover: #333333; /* Cards/Panels */ --card-bg: #1a1a1a; --card-border: #333333; --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); /* Code blocks */ --code-bg: #2a2a2a; --code-text: #e5e5e5; --code-block-bg: #1a1a1a; --code-block-text: #e5e5e5; --code-header-bg: #252525; /* Sidebar */ --sidebar-bg: #1a1a1a; --sidebar-border: #2a2a2a; --sidebar-item-hover: #252525; --sidebar-item-active: #2a2a2a; /* Chat specific */ --chat-bg: #141414; --chat-input-bg: #1e1e1e; --chat-input-border: #333333; --chat-user-bubble: #2a2a2a; --chat-user-text: #ffffff; --chat-assistant-bubble: transparent; --chat-assistant-text: #e5e5e5; /* Status colors (slightly adjusted for dark) */ --success: #10b981; --success-bg: rgba(16, 185, 129, 0.1); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.1); --error: #ef4444; --error-bg: rgba(239, 68, 68, 0.1); --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.1); /* Scrollbar */ --scrollbar-track: #1a1a1a; --scrollbar-thumb: #333333; --scrollbar-thumb-hover: #4a4a4a; /* Modal/Overlay */ --overlay-bg: transparent; --modal-bg: #1a1a1a; } /* ===== Base Styles Using Variables ===== */ /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Selection */ ::selection { background: var(--btn-primary-bg); color: var(--btn-primary-text); } /* Focus rings */ .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--border-focus); } /* ===== Utility Classes ===== */ /* Backgrounds */ .bg-theme-primary { background-color: var(--bg-primary); } .bg-theme-secondary { background-color: var(--bg-secondary); } .bg-theme-tertiary { background-color: var(--bg-tertiary); } .bg-theme-elevated { background-color: var(--bg-elevated); } .bg-theme-input { background-color: var(--bg-input); } .bg-theme-hover:hover { background-color: var(--bg-hover); } .bg-theme-card { background-color: var(--card-bg); } /* Text */ .text-theme-primary { color: var(--text-primary); } .text-theme-secondary { color: var(--text-secondary); } .text-theme-tertiary { color: var(--text-tertiary); } .text-theme-muted { color: var(--text-muted); } /* Borders */ .border-theme-primary { border-color: var(--border-primary); } .border-theme-secondary { border-color: var(--border-secondary); } /* Buttons */ .btn-theme-primary { background-color: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; } .btn-theme-primary:hover { background-color: var(--btn-primary-hover) !important; } /* Explicit dark mode button override */ html.dark .btn-theme-primary { background-color: #404040 !important; color: #f5f5f5 !important; } html.dark .btn-theme-primary:hover { background-color: #4a4a4a !important; } .btn-theme-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); } .btn-theme-secondary:hover { background-color: var(--btn-secondary-hover); } /* Cards */ .card-theme { background-color: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } /* Inputs */ .input-theme { background-color: var(--bg-input); border-color: var(--border-secondary); color: var(--text-primary); } .input-theme:focus { border-color: var(--border-focus); outline: none; } .input-theme::placeholder { color: var(--text-muted); } /* Sidebar */ .sidebar-theme { background-color: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); color: var(--text-primary); } /* Light mode sidebar - clean white */ :root .sidebar-theme { background-color: #ffffff; border-right-color: #e5e7eb; } /* Dark mode sidebar */ html.dark .sidebar-theme { background-color: #141414; border-right-color: #2a2a2a; } .sidebar-item-theme { color: var(--text-secondary); } .sidebar-item-theme:hover { background-color: var(--sidebar-item-hover); color: var(--text-primary); } .sidebar-item-theme.active { background-color: var(--sidebar-item-active); color: var(--text-primary); font-weight: 500; } /* Light mode sidebar items */ :root .sidebar-item-theme { color: #374151; } :root .sidebar-item-theme:hover { background-color: #f3f4f6; color: #111827; } :root .sidebar-item-theme.active { background-color: #f3f4f6; color: #111827; } /* Dark mode sidebar items */ html.dark .sidebar-item-theme { color: #a0a0a0; } html.dark .sidebar-item-theme:hover { background-color: #252525; color: #e5e5e5; } html.dark .sidebar-item-theme.active { background-color: #2a2a2a; color: #e5e5e5; } /* Hover utilities */ .hover\:bg-theme-hover:hover { background-color: var(--bg-hover); } .hover\:text-theme-primary:hover { color: var(--text-primary); } .hover\:text-theme-secondary:hover { color: var(--text-secondary); } .hover\:border-theme-hover:hover { border-color: var(--bg-active); } /* Text inverse for dark-on-light / light-on-dark */ .text-theme-inverse { color: var(--text-inverse); } /* Placeholder for theme-aware inputs */ .placeholder-theme-muted::placeholder { color: var(--text-muted); } /* Modal - Glassmorphism effect */ .modal-overlay-theme { background-color: var(--overlay-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .modal-theme { background-color: var(--modal-bg); } /* Logo switching */ .logo-light { display: block; } .logo-dark { display: none; } .dark .logo-light { display: none; } .dark .logo-dark { display: block; } /* ===== Dark Mode Overrides for Tailwind classes ===== */ /* These apply in dark mode to override hardcoded Tailwind colors */ /* Using html.dark for higher specificity over Tailwind */ /* Backgrounds */ html.dark .bg-white { background-color: var(--card-bg) !important; } html.dark .bg-gray-50 { background-color: var(--bg-tertiary) !important; } html.dark .bg-gray-100 { background-color: var(--bg-elevated) !important; } html.dark .bg-gray-200 { background-color: var(--bg-hover) !important; } /* Text colors - HIGH PRIORITY */ html.dark .text-gray-900, html.dark .text-gray-800 { color: #e5e5e5 !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: #a0a0a0 !important; } html.dark .text-gray-500, html.dark .text-gray-400 { color: #808080 !important; } html.dark .text-black { color: #e5e5e5 !important; } /* Keep dark text on amber/gold buttons in dark mode */ html.dark .from-amber-400.text-gray-900, html.dark .from-amber-500.text-gray-900, html.dark [class*="from-amber"].text-gray-900 { color: #111827 !important; } /* Borders */ html.dark .border-gray-200, html.dark .border-gray-100 { border-color: #2a2a2a !important; } html.dark .border-gray-300 { border-color: #333333 !important; } /* Buttons - black becomes white in dark mode */ html.dark .bg-black { background-color: #ffffff !important; color: #000000 !important; } html.dark .bg-black:hover { background-color: #e5e5e5 !important; } /* Inputs */ html.dark input, html.dark select, html.dark textarea { background-color: #1e1e1e !important; border-color: #333333 !important; color: #e5e5e5 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #666666 !important; } /* Table overrides */ html.dark table { background-color: #1a1a1a; } html.dark th { background-color: #1e1e1e !important; color: #e5e5e5 !important; } html.dark td { color: #e5e5e5 !important; border-color: #2a2a2a !important; } /* Card shadow override */ html.dark .card-shadow, html.dark .shadow-lg, html.dark .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3) !important; } /* Hover states - make them more visible */ html.dark .hover\:bg-gray-100:hover { background-color: #333333 !important; } html.dark .hover\:bg-gray-50:hover { background-color: #2a2a2a !important; } html.dark .hover\:bg-gray-200:hover { background-color: #404040 !important; } html.dark .hover\:text-gray-900:hover, html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-black:hover { color: #ffffff !important; } html.dark .hover\:border-black:hover { border-color: #ffffff !important; } html.dark .hover\:border-gray-300:hover { border-color: #4a4a4a !important; } html.dark .hover\:bg-gray-800:hover { background-color: #d0d0d0 !important; } /* Interactive element hover enhancements */ html.dark a:hover { color: #ffffff !important; } html.dark button:hover:not([disabled]) { filter: brightness(1.1); } html.dark .card-theme:hover { border-color: #404040; } /* Link hover in dark mode */ html.dark a.text-theme-secondary:hover, html.dark a.text-theme-muted:hover { color: #e5e5e5 !important; } /* Nav items hover */ html.dark nav a:hover { background-color: #333333 !important; color: #ffffff !important; } /* Focus states */ html.dark .focus\:border-black:focus { border-color: #ffffff !important; } html.dark .focus\:ring-black:focus { --tw-ring-color: #ffffff !important; } /* Gradient overrides */ html.dark .bg-gradient-to-r.from-black { background: linear-gradient(to right, #1e1e1e, #252525) !important; } /* Chat conversation items - keep dark in both themes for sidebar consistency */ .conversation-item:hover { background-color: var(--bg-hover) !important; } .conversation-item.active, .conversation-item[data-active="true"] { background-color: var(--bg-hover) !important; } /* Hardcoded color overrides for JS templates */ .dark .hover\:bg-\[\#2a2a2a\]:hover { background-color: var(--bg-hover) !important; } .dark .hover\:bg-\[\#3a3a3a\]:hover { background-color: var(--bg-active) !important; } .dark .bg-\[\#2a2a2a\] { background-color: var(--bg-hover) !important; } .dark .bg-\[\#3a3a3a\] { background-color: var(--bg-active) !important; } /* ===== Smooth Transitions ===== */ body, .transition-theme { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }