/* ============================================ TRADEBUDDY LIGHT THEME Activated via: ============================================ */ html[data-theme="light"] { /* Primary Brand Colors - slightly darker for contrast on white */ --tb-primary: hsla(199, 89%, 42%, 1); --tb-primary-dark: hsla(199, 89%, 34%, 1); --tb-primary-light: hsla(199, 93%, 50%, 1); --tb-primary-alpha: hsla(199, 89%, 42%, 0.08); /* Accent Colors */ --tb-accent: hsla(187, 95%, 35%, 1); --tb-accent-light: hsla(187, 85%, 42%, 1); --tb-accent-alpha: hsla(187, 95%, 35%, 0.08); /* Light Theme Backgrounds */ --tb-bg-darker: hsla(220, 20%, 97%, 1); --tb-bg-dark: hsla(220, 14%, 93%, 1); --tb-bg-card: hsla(0, 0%, 100%, 1); --tb-bg-light: hsla(220, 14%, 96%, 1); --tb-bg-white: hsla(0, 0%, 100%, 1); --tb-bg-overlay: hsla(0, 0%, 100%, 0.95); /* Light Theme Text */ --tb-text-primary: hsla(222, 47%, 11%, 1); --tb-text-secondary: hsla(215, 20%, 35%, 1); --tb-text-muted: hsla(215, 15%, 55%, 1); --tb-text-dark: hsla(222, 47%, 11%, 1); --tb-text-white: hsla(0, 0%, 100%, 1); /* Light Theme Borders */ --tb-border: hsla(220, 13%, 88%, 1); --tb-border-light: hsla(220, 13%, 92%, 1); --tb-border-dark: hsla(220, 13%, 82%, 1); --tb-border-alpha: hsla(220, 13%, 88%, 0.5); /* Status Colors - slightly adjusted for light bg contrast */ --tb-success: hsla(160, 84%, 32%, 1); --tb-success-alpha: hsla(160, 84%, 32%, 0.08); --tb-danger: hsla(0, 84%, 50%, 1); --tb-danger-alpha: hsla(0, 84%, 50%, 0.08); --tb-warning: hsla(38, 92%, 45%, 1); --tb-warning-alpha: hsla(38, 92%, 45%, 0.08); --tb-info: hsla(187, 95%, 35%, 1); --tb-info-alpha: hsla(187, 95%, 35%, 0.08); /* Shadows - lighter for white backgrounds */ --tb-shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.06); --tb-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.08); --tb-shadow-md: 0 6px 12px hsla(0, 0%, 0%, 0.10); --tb-shadow-lg: 0 10px 25px hsla(0, 0%, 0%, 0.12); --tb-shadow-xl: 0 20px 40px hsla(0, 0%, 0%, 0.15); } /* ============================================ COMPONENT OVERRIDES FOR LIGHT MODE These target hardcoded colors in base.html ============================================ */ /* Top header bar - lighter gradient */ html[data-theme="light"] .top-header { background: linear-gradient(135deg, hsla(199, 89%, 34%, 0.95) 0%, hsla(199, 89%, 42%, 0.95) 100%); } /* Main navigation bar */ html[data-theme="light"] .main-nav { background: hsla(0, 0%, 100%, 0.95); border-bottom: 1px solid hsla(220, 13%, 88%, 1); } /* Nav item hover - hardcoded rgba in base.html */ html[data-theme="light"] .nav-item:hover { background: hsla(199, 89%, 42%, 0.08); } /* Nav dropdown item hover */ html[data-theme="light"] .nav-dropdown-item:hover { background: hsla(199, 89%, 42%, 0.08); } /* Nav dropdown menu box shadow */ html[data-theme="light"] .nav-dropdown-menu { box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.12); } /* Back-to-home nav button */ html[data-theme="light"] .nav-item.back-to-home { background: hsla(220, 14%, 96%, 1); border-color: hsla(220, 13%, 88%, 1); } html[data-theme="light"] .nav-item.back-to-home:hover { background: hsla(0, 0%, 100%, 1); } /* Context switcher */ html[data-theme="light"] .context-switcher-link { color: hsla(215, 20%, 35%, 1) !important; } /* Scrollbar */ html[data-theme="light"] ::-webkit-scrollbar-track { background: hsla(220, 14%, 96%, 1); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: hsla(220, 13%, 82%, 1); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: hsla(215, 15%, 55%, 1); } /* Broker selector */ html[data-theme="light"] .broker-selector { background: hsla(0, 0%, 100%, 1); border-color: hsla(220, 13%, 88%, 1); color: hsla(222, 47%, 11%, 1); } /* User menu */ html[data-theme="light"] .user-menu-dropdown { background: hsla(0, 0%, 100%, 1) !important; box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.12); } /* Tables */ html[data-theme="light"] .table { color: hsla(222, 47%, 11%, 1) !important; } html[data-theme="light"] .table thead th { background-color: hsla(220, 14%, 96%, 1) !important; color: hsla(215, 15%, 55%, 1) !important; border-color: hsla(220, 13%, 88%, 1) !important; } html[data-theme="light"] .table td { border-color: hsla(220, 13%, 92%, 1) !important; } html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: hsla(220, 14%, 98%, 1) !important; } html[data-theme="light"] .table-hover > tbody > tr:hover > * { background-color: hsla(199, 89%, 42%, 0.05) !important; } /* Form controls */ html[data-theme="light"] .form-control, html[data-theme="light"] .form-select { background-color: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 88%, 1) !important; color: hsla(222, 47%, 11%, 1) !important; } html[data-theme="light"] .form-control:focus, html[data-theme="light"] .form-select:focus { border-color: hsla(199, 89%, 42%, 1) !important; box-shadow: 0 0 0 3px hsla(199, 89%, 42%, 0.15) !important; } html[data-theme="light"] .form-control::placeholder { color: hsla(215, 15%, 65%, 1) !important; } /* Badges - ensure readability */ html[data-theme="light"] .badge.bg-dark { background-color: hsla(222, 47%, 20%, 1) !important; } /* Alerts - light mode versions */ html[data-theme="light"] .alert-info { background-color: hsla(187, 95%, 35%, 0.08) !important; border-color: hsla(187, 95%, 35%, 0.2) !important; } html[data-theme="light"] .alert-success { background-color: hsla(160, 84%, 32%, 0.08) !important; border-color: hsla(160, 84%, 32%, 0.2) !important; } html[data-theme="light"] .alert-warning { background-color: hsla(38, 92%, 45%, 0.08) !important; border-color: hsla(38, 92%, 45%, 0.2) !important; } html[data-theme="light"] .alert-danger { background-color: hsla(0, 84%, 50%, 0.08) !important; border-color: hsla(0, 84%, 50%, 0.2) !important; } /* Modals */ html[data-theme="light"] .modal-content { background-color: hsla(0, 0%, 100%, 1) !important; box-shadow: 0 10px 40px hsla(0, 0%, 0%, 0.15); } html[data-theme="light"] .modal-header, html[data-theme="light"] .modal-footer { border-color: hsla(220, 13%, 92%, 1) !important; } /* Toast notifications */ html[data-theme="light"] .toast { background-color: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 88%, 1) !important; box-shadow: 0 8px 25px hsla(0, 0%, 0%, 0.12); } /* Chart canvas - transparent bg */ html[data-theme="light"] canvas { background-color: transparent !important; } /* Dropdown menu items - active state stays same since it uses variables */ /* Header icon buttons */ html[data-theme="light"] .header-icon-btn { color: hsla(0, 0%, 100%, 1); } /* Market status badges */ html[data-theme="light"] .market-status { background: hsla(0, 0%, 100%, 0.15); } /* Stat boxes and metric cards */ html[data-theme="light"] .stat-card, html[data-theme="light"] .metric-box { background: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 88%, 1) !important; } /* Code/pre blocks */ html[data-theme="light"] pre, html[data-theme="light"] code { background-color: hsla(220, 14%, 96%, 1) !important; color: hsla(222, 47%, 20%, 1) !important; } /* List groups */ html[data-theme="light"] .list-group-item { background-color: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 92%, 1) !important; color: hsla(222, 47%, 11%, 1) !important; } /* Pagination */ html[data-theme="light"] .page-link { background-color: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 88%, 1) !important; color: hsla(199, 89%, 42%, 1) !important; } html[data-theme="light"] .page-item.active .page-link { background-color: hsla(199, 89%, 42%, 1) !important; border-color: hsla(199, 89%, 42%, 1) !important; color: white !important; } /* Accordion */ html[data-theme="light"] .accordion-item { background-color: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 88%, 1) !important; } html[data-theme="light"] .accordion-button { background-color: hsla(220, 14%, 96%, 1) !important; color: hsla(222, 47%, 11%, 1) !important; } html[data-theme="light"] .accordion-button:not(.collapsed) { background-color: hsla(199, 89%, 42%, 0.08) !important; color: hsla(199, 89%, 42%, 1) !important; } /* Nav tabs (used in settings, options settings etc) */ html[data-theme="light"] .nav-tabs .nav-link { color: hsla(215, 20%, 35%, 1) !important; } html[data-theme="light"] .nav-tabs .nav-link.active { background-color: hsla(0, 0%, 100%, 1) !important; border-color: hsla(220, 13%, 88%, 1) hsla(220, 13%, 88%, 1) hsla(0, 0%, 100%, 1) !important; color: hsla(199, 89%, 42%, 1) !important; } /* Progress bars */ html[data-theme="light"] .progress { background-color: hsla(220, 14%, 93%, 1) !important; } /* Bottom tab bar light mode */ html[data-theme="light"] .bottom-tab-bar { background: hsla(0, 0%, 100%, 1); border-color: hsla(220, 13%, 88%, 1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } html[data-theme="light"] .bottom-tab-item { color: hsla(215, 20%, 50%, 1); } html[data-theme="light"] .bottom-tab-item:hover { color: hsla(215, 20%, 25%, 1); background: hsla(220, 14%, 96%, 1); } html[data-theme="light"] .bottom-tab-item.active { background: hsla(199, 89%, 48%, 1); color: white; } /* New stat cards light mode */ html[data-theme="light"] .new-stat-card { background: hsla(0, 0%, 100%, 1); border-color: hsla(220, 13%, 88%, 1); } /* Dashboard cards light mode */ html[data-theme="light"] .dashboard-card { background: hsla(0, 0%, 100%, 1); border-color: hsla(220, 13%, 88%, 1); } /* Position mini cards light mode */ html[data-theme="light"] .position-mini-card { background: hsla(220, 14%, 96%, 1); border-color: hsla(220, 13%, 88%, 1); } html[data-theme="light"] .position-mini-card:hover { border-color: hsla(199, 89%, 48%, 1); } /* Nav dropdown light mode */ html[data-theme="light"] .nav-dropdown-menu { background: hsla(0, 0%, 100%, 1); border-color: hsla(220, 13%, 88%, 1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } html[data-theme="light"] .nav-dropdown-item:hover { background: hsla(199, 89%, 48%, 0.08); }