/* ============================================================ ValueIndex — Dark Mode Applied via data-theme="dark" on ============================================================ */ [data-theme="dark"] { --main-bg-color: #151c26; } [data-theme="dark"] body { background-color: #151c26; color: #e8e8e8; } /* Header */ [data-theme="dark"] #header { background-color: #151c26; } [data-theme="dark"] #header_row { background-color: #151c26; } /* Stock cards */ [data-theme="dark"] .stock { background-color: #1e2735; border-color: #2a3444; } [data-theme="dark"] .stock hr { background-color: #2a3444; } [data-theme="dark"] .stock_ticker { color: #8b95a3; } [data-theme="dark"] .stock_stats > div > div:first-child { color: #8b95a3; } [data-theme="dark"] .stock_name { color: #e8e8e8; } [data-theme="dark"] .stock_price { color: #e8e8e8; } [data-theme="dark"] .stock_open_profile > a > div { color: #000; } /* User dropdown */ [data-theme="dark"] .custom-select { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] .select-trigger { background-color: #1e2735; color: #e8e8e8; } [data-theme="dark"] .select-options { background-color: #1e2735; border-color: #2a3444; } [data-theme="dark"] .select-options .option { color: #e8e8e8; } [data-theme="dark"] .select-options .option:hover { background-color: #2a3444; } [data-theme="dark"] .separator hr { background-color: #2a3444; border-color: #2a3444; } [data-theme="dark"] #user_name { color: #e8e8e8; } /* Bell */ [data-theme="dark"] .bell-select { background-color: #1e2735; border-color: #2a3444; } [data-theme="dark"] .bell-select-options { background-color: #1e2735; border-color: #2a3444; } [data-theme="dark"] .bell-select-options .option { color: #e8e8e8; } [data-theme="dark"] .bell-select-options .option:hover { background-color: #2a3444; } /* Dashboard controls */ [data-theme="dark"] #controls { background-color: #151c26; color: #e8e8e8; } [data-theme="dark"] .custom-select.dashboard { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } /* Search */ [data-theme="dark"] #search input { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] #search input::placeholder { color: #8b95a3; } /* Filter container */ [data-theme="dark"] #filter_container { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] .filter-section { border-color: #2a3444; } [data-theme="dark"] .filter-label { color: #8b95a3; } /* Stock info page */ [data-theme="dark"] #stock_info, [data-theme="dark"] #stock_detail, [data-theme="dark"] .stock_detail_card { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] .tab { background-color: #1e2735; color: #e8e8e8; border-color: #2a3444; } [data-theme="dark"] .tab.active { background-color: #ffc919; color: #000; } /* Profile / preferences pages */ [data-theme="dark"] #form .row { border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] .name { color: #e8e8e8; } [data-theme="dark"] .choose { color: #8b95a3; } [data-theme="dark"] .pref-select { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] .pref-select-options { background-color: #1e2735; border-color: #2a3444; } [data-theme="dark"] .pref-select-options .option:hover { background-color: #2a3444; } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } /* Footer */ [data-theme="dark"] #footer, [data-theme="dark"] footer { background-color: #0f1319; border-color: #2a3444; color: #8b95a3; } [data-theme="dark"] #footer a, [data-theme="dark"] footer a { color: #8b95a3; } [data-theme="dark"] #footer h3, [data-theme="dark"] footer h3 { color: #e8e8e8; } /* Page titles */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #e8e8e8; } [data-theme="dark"] p { color: #8b95a3; } /* Gradient overlay */ [data-theme="dark"] #gradient { background: linear-gradient(to top, #151c26, transparent); } /* Logo — invert black logo to white */ [data-theme="dark"] img[src*="LogoBlack"], [data-theme="dark"] img[src*="ValueIndex"] { filter: invert(1) hue-rotate(180deg) brightness(2); } /* Watchlist title */ [data-theme="dark"] #title h1, [data-theme="dark"] #title h2 { color: #e8e8e8; } /* SVG icon strokes */ [data-theme="dark"] #back path, [data-theme="dark"] #bell path, [data-theme="dark"] .select-options .option svg path, [data-theme="dark"] .select-options .option svg rect { stroke: #e8e8e8; } [data-theme="dark"] .arrows svg path { fill: #e8e8e8; } /* Admin page */ [data-theme="dark"] table { background-color: #1e2735; color: #e8e8e8; } [data-theme="dark"] thead { background-color: #ffc919; } [data-theme="dark"] tbody td { border-color: #2a3444; color: #e8e8e8; } [data-theme="dark"] tbody tr:hover { background-color: #2a3444; } [data-theme="dark"] .stat-card { background-color: #1e2735; color: #e8e8e8; } [data-theme="dark"] .chart-card { background-color: #1e2735; } [data-theme="dark"] select.role-select { background-color: #1e2735; border-color: #2a3444; color: #e8e8e8; } /* Prevent flash of wrong theme */ [data-theme="dark"] * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ── Bell / notification button ── */ [data-theme="dark"] .bell-select-trigger span { background-color: #1e2735 !important; border-color: #2a3444 !important; } [data-theme="dark"] .bell-select-trigger span svg path { stroke: #e8e8e8 !important; } [data-theme="dark"] .bell-select-options { background-color: #1e2735 !important; border-color: #2a3444 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .bell-select-options .option { color: #e8e8e8 !important; } [data-theme="dark"] .bell-select-options .option:hover { background-color: #2a3444 !important; } /* ── User dropdown trigger ── */ [data-theme="dark"] .custom-select { background-color: #1e2735 !important; border-color: #2a3444 !important; } [data-theme="dark"] .custom-select.closed { border-radius: 40px !important; } [data-theme="dark"] .custom-select.open { border-color: #2a3444 !important; border-bottom-color: transparent !important; } [data-theme="dark"] .custom-select.dashboard { border-color: #2a3444 !important; } [data-theme="dark"] #user_photo { background-color: #2a3444 !important; border-color: #2a3444 !important; } [data-theme="dark"] #user_name { color: #e8e8e8 !important; } /* ── Dropdown arrow ── */ [data-theme="dark"] .select-trigger .arrows svg path { fill: #e8e8e8 !important; } /* ── Dropdown options panel ── */ [data-theme="dark"] .select-options { background-color: #1e2735 !important; border-color: #2a3444 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; outline: none !important; } [data-theme="dark"] .custom-select.dashboard .select-options { border-color: #2a3444 !important; } [data-theme="dark"] .select-options .option { color: #e8e8e8 !important; } [data-theme="dark"] .select-options .option:hover { background-color: #2a3444 !important; } [data-theme="dark"] .select-options .separator hr { background-color: #2a3444 !important; } [data-theme="dark"] .select-options .option svg path { stroke: #e8e8e8 !important; } /* ── Back button ── */ [data-theme="dark"] #header_row span#back { background-color: #1e2735 !important; border-color: #2a3444 !important; } [data-theme="dark"] #header_row span#back svg path { stroke: #e8e8e8 !important; fill: #e8e8e8 !important; } /* ── Dashboard controls (Filters, Watchlist buttons) ── */ [data-theme="dark"] #controls { background-color: #151c26 !important; } [data-theme="dark"] #filters, [data-theme="dark"] #filters > div, [data-theme="dark"] .filter-trigger, [data-theme="dark"] #watchlist-control, [data-theme="dark"] #watchlist-control > div { background-color: #1e2735 !important; border-color: #2a3444 !important; color: #e8e8e8 !important; } [data-theme="dark"] #filters svg path, [data-theme="dark"] #filters svg circle, [data-theme="dark"] #watchlist-control svg path { stroke: #e8e8e8 !important; fill: none !important; } /* ── Sort by dropdown ── */ [data-theme="dark"] .custom-select-wrapper .custom-select { background-color: #1e2735 !important; border-color: #2a3444 !important; color: #e8e8e8 !important; } /* ── Mini chart white background fix ── */ [data-theme="dark"] .stock_chart > div { background-color: #1e2735 !important; } /* ── Filters button (#filters) ── */ [data-theme="dark"] #filters { background-color: #1e2735 !important; border-color: #2a3444 !important; color: #e8e8e8 !important; } [data-theme="dark"] #filters svg path { fill: #e8e8e8 !important; } /* ── Watchlist button (#watchlist) ── */ [data-theme="dark"] #watchlist { background-color: #1e2735 !important; border-color: #2a3444 !important; color: #e8e8e8 !important; } [data-theme="dark"] #watchlist svg path { stroke: #e8e8e8 !important; } /* ── Sort dropdown (#sort, #custom-select-sort) ── */ [data-theme="dark"] #sort { color: #e8e8e8 !important; } [data-theme="dark"] #custom-select-sort { background-color: #1e2735 !important; border-color: #2a3444 !important; color: #e8e8e8 !important; } [data-theme="dark"] #custom-select-sort .select-trigger { color: #e8e8e8 !important; } [data-theme="dark"] #custom-select-sort .select-options { background-color: #1e2735 !important; border-color: #2a3444 !important; } [data-theme="dark"] #custom-select-sort .select-options .option { color: #e8e8e8 !important; } [data-theme="dark"] #custom-select-sort .select-options .option:hover { background-color: #2a3444 !important; } [data-theme="dark"] #custom-select-sort .arrows svg path { fill: #e8e8e8 !important; } /* ── Filters controls panel (#filters-controls) ── */ [data-theme="dark"] #filters-controls { background-color: #1e2735 !important; border-color: #2a3444 !important; color: #e8e8e8 !important; } [data-theme="dark"] #filters-controls .row { border-color: #2a3444 !important; color: #e8e8e8 !important; } [data-theme="dark"] #filters-controls input[type="checkbox"] { accent-color: #ffc919; } /* ── Sort by label text ── */ [data-theme="dark"] #controls_row { color: #e8e8e8 !important; } /* ── "Sort By:" label ── */ [data-theme="dark"] #sort > div:first-child { color: #8b95a3 !important; } /* ── Search box input (dashboard + stock-list) ── */ [data-theme="dark"] #search-box input { background-color: #1e2735 !important; border-color: #ffc919 !important; color: #e8e8e8 !important; } [data-theme="dark"] #search-box input::placeholder { color: #8b95a3 !important; } [data-theme="dark"] #search-box svg path { fill: #e8e8e8 !important; } /* ── Hidden search submit button (white rectangle) ── */ [data-theme="dark"] #search-box button[type="submit"] { background-color: transparent !important; background: transparent !important; border: none !important; } [data-theme="dark"] #search-box button[type="submit"] svg path { fill: #e8e8e8 !important; } /* ── Watchlist button — target anchor inside ── */ [data-theme="dark"] #watchlist { background-color: #1e2735 !important; border-color: #2a3444 !important; } [data-theme="dark"] #watchlist a { color: #e8e8e8 !important; } [data-theme="dark"] #watchlist svg path { stroke: #e8e8e8 !important; fill: none !important; }