/* ========================================================================== Dark Mode Overrides Works by redefining the site's existing CSS variables (see root-style.blade.php) when . No changes to the base style.css/influencer.css are required. ========================================================================== */ [data-theme="dark"] { --heading-color: #EAEAF2; --paragraph-color: #C7C7D6; --body-color: #ADABBE; --text-color: #EAEAF2; --nav-color: #C7C7D6; --color12: #EAEAF2; /* "deep_black_text" - overwhelmingly used as text, must go light */ --section-bg-1: #14141f; --section-bg-2: #181826; --border-color: #2A2A3A; --border-color-2: #34343F; /* light pastel backgrounds used throughout the page builder sections */ --color1: #2A2A3A; --color4: #2A2A3A; /* generic light-gray background */ --color5: #181826; --color6: #2A2A3A; /* bg-primary-two */ --color7: #181826; /* bg-primary-one - the FAQ/stats/process section background */ --color15: #1F1F2C; --bg-gradient: linear-gradient(90deg, #14141f 0%, #181826 50%, #14141f 100%); } /* Base page background/text */ [data-theme="dark"] body { background-color: #0E0E16; } /* Header / generic "white surface" utility background */ [data-theme="dark"] .header, [data-theme="dark"] .bg_white, [data-theme="dark"] .influencer-header { background-color: #14141F !important; } /* Page-builder sections sometimes get a custom background color baked in as an inline style="background-color:..." attribute (set via the page builder's color picker) instead of relying on the bg-primary-one/two default class. Inline styles normally beat external CSS, so these need !important on the actual section wrapper itself to win regardless of how the color was set. */ [data-theme="dark"] .influencer-customer-satification, [data-theme="dark"] .influencer-market-place, [data-theme="dark"] .influencer-faq-section, [data-theme="dark"] .bg-primary-one, [data-theme="dark"] .bg-primary-two { background-color: #181826 !important; } [data-theme="dark"] .banner-area-three, [data-theme="dark"] .section-bg-gradient, [data-theme="dark"] .influencer_banner { background: linear-gradient(90deg, #14141f 0%, #181826 50%, #14141f 100%) !important; } /* Footer's background is (oddly) set via var(--text-color) in the base theme, the same variable used for "black_text" headings elsewhere. Since that variable had to flip to a light color for text to be readable on dark backgrounds, the footer needs its own explicit override here so it doesn't inherit that same light value as its background. */ [data-theme="dark"] .influencer-footer.custom_footer { background: #020418 !important; } /* Navbar icon buttons (chat, notification, bookmark) hard-code their circle background as a literal light-gray hex value rather than a variable, while their icon color uses var(--heading-color) - which we flip to light. Light icon + untouched light-gray circle = invisible icon. Give the circle a dark background to match. */ [data-theme="dark"] .navbar-right-chat, [data-theme="dark"] .navbar-right-notification-icon, [data-theme="dark"] .nav-right-bookmark-icon { background-color: #2A2A3A !important; } /* ========================================================================== Logged-in dashboard area (Dashboard, Wallet, My Orders, My Proposals, etc). This is a structurally separate template family from the public homepage, built around two reused card wrappers that hard-code background:#fff. ========================================================================== */ [data-theme="dark"] .single-profile-settings, [data-theme="dark"] .profile-settings-menu-inner { background-color: #181826 !important; } /* --white / --color0 are used for BOTH backgrounds and text (e.g. white text on colored buttons), so we don't touch those variables globally. Instead, every class confirmed to use them as a background gets a targeted override here. */ [data-theme="dark"] .single-pricing, [data-theme="dark"] .contact-info, [data-theme="dark"] .subsription-btn, [data-theme="dark"] .aboutNumber-item-icon, [data-theme="dark"] .header-global-search, [data-theme="dark"] .global-search-notUpdate .global-search-result-inner, [data-theme="dark"] .header-global-search.active .display_search_result, [data-theme="dark"] .header-global-search-close:hover, [data-theme="dark"] .inf-custom-input, [data-theme="dark"] .inf-input-group .input-group-text, [data-theme="dark"] .influencer_card, [data-theme="dark"] .inf-job-card, [data-theme="dark"] .inf-price-plan-card, [data-theme="dark"] .image-upload-btn, [data-theme="dark"] .pricing_type, [data-theme="dark"] .inf-faq-item, [data-theme="dark"] .small-images-wraper { background-color: #181826 !important; background: #181826 !important; color: var(--paragraph-color); } /* Form fields */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form--control { background-color: #181826 !important; border-color: #34343F !important; color: var(--text-color) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #7C7A8C; } /* Dark-mode toggle button: swap which icon is visible */ .dark-mode-icon-moon { display: none; } .dark-mode-icon-sun { display: inline-block; } [data-theme="dark"] .dark-mode-icon-sun { display: none; } [data-theme="dark"] .dark-mode-icon-moon { display: inline-block; } /* ========================================================================== NOTE FOR FUTURE TOUCH-UPS: This now covers: page background, header, body/heading/paragraph text, borders, form fields, the bg-primary-one/two pastel section backgrounds (FAQ, stats, "how it works"), the hero gradient, and the white-background card components (pricing, job cards, influencer cards, FAQ items, etc). --white and --color0 were deliberately left untouched at the variable level since they're used for both backgrounds AND text (e.g. white text on a colored button) - every background usage of them was instead given a specific class override above. If you find another card/section still showing a light background, find its class name in influencer.css/ style.css (search for "var(--white)" or "var(--color0)"), confirm it's a background (not text) usage, and add that class to the selector list above the same way the others were added. ========================================================================== */