/* ============================================ SoccerVit Dark Mode Styles Appended after style.css — uses [data-theme="dark"] attribute on ============================================ */ /* Dark Mode Color Variables */ [data-theme="dark"] { --dm-bg: #0f1923; --dm-bg-secondary: #1a2332; --dm-bg-card: #1e2d3d; --dm-text: #e4e6eb; --dm-text-muted: #8b949e; --dm-border: #2d3a4a; --dm-primary: #4da3ff; --dm-shadow: rgba(0, 0, 0, 0.3); } /* Body & Global */ [data-theme="dark"] body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* Header */ [data-theme="dark"] .header-section, [data-theme="dark"] header { background-color: var(--dm-bg-secondary) !important; border-bottom: 1px solid var(--dm-border); } [data-theme="dark"] .header-section .header-wrapper { background-color: var(--dm-bg-secondary) !important; } /* Navigation */ [data-theme="dark"] .main-menu ul li a, [data-theme="dark"] nav ul li a { color: var(--dm-text) !important; } /* Cards & Sections */ [data-theme="dark"] .sports-schedule-section, [data-theme="dark"] .playing-bet-section, [data-theme="dark"] .subscription-section, [data-theme="dark"] .working-process-section, [data-theme="dark"] .testimonial-section, [data-theme="dark"] section { background-color: var(--dm-bg) !important; } [data-theme="dark"] .schedule-wrapper, [data-theme="dark"] .single-schedule, [data-theme="dark"] .card, [data-theme="dark"] .plan-card, [data-theme="dark"] .dashboard-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Tables */ [data-theme="dark"] .table, [data-theme="dark"] table { color: var(--dm-text) !important; --bs-table-bg: var(--dm-bg-card); --bs-table-border-color: var(--dm-border); } [data-theme="dark"] .table thead, [data-theme="dark"] thead { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text) !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(255, 255, 255, 0.02); color: var(--dm-text) !important; } [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > thead > tr > th { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* Tabs / Nav Pills */ [data-theme="dark"] .nav-tabs, [data-theme="dark"] .category-tabs { border-color: var(--dm-border) !important; } [data-theme="dark"] .nav-tabs .nav-link, [data-theme="dark"] .category-tab { color: var(--dm-text-muted) !important; } [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .category-tab.active { background-color: var(--dm-primary) !important; color: #fff !important; } /* Text */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .section-title h2 { color: var(--dm-text) !important; } [data-theme="dark"] p, [data-theme="dark"] .text-muted, [data-theme="dark"] span { color: var(--dm-text-muted) !important; } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted) !important; } /* Search Bar */ [data-theme="dark"] .search-bar .search-icon, [data-theme="dark"] .search-bar .search-clear { color: var(--dm-text-muted); } [data-theme="dark"] .search-bar .search-clear:hover { color: var(--dm-text); } [data-theme="dark"] .search-bar input { border-color: var(--dm-border) !important; } [data-theme="dark"] .search-bar .search-results-count { color: var(--dm-text-muted); } [data-theme="dark"] .date-search-btn { border-color: var(--dm-primary) !important; color: var(--dm-primary) !important; } [data-theme="dark"] .today-btn { border-color: var(--dm-primary) !important; color: var(--dm-primary) !important; } /* Alerts */ [data-theme="dark"] .alert { border-color: var(--dm-border) !important; } [data-theme="dark"] .alert-success { background-color: rgba(40, 167, 69, 0.15) !important; } [data-theme="dark"] .alert-warning { background-color: rgba(255, 193, 7, 0.15) !important; } [data-theme="dark"] .alert-info { background-color: rgba(23, 162, 184, 0.15) !important; } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .footer-section { background-color: #0a1018 !important; } /* Modals */ [data-theme="dark"] .modal-content { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--dm-border) !important; } /* Dropdown */ [data-theme="dark"] .dropdown-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .dropdown-item { color: var(--dm-text) !important; } [data-theme="dark"] .dropdown-item:hover { background-color: var(--dm-bg-secondary) !important; } /* Prediction specific */ [data-theme="dark"] .prediction-container, [data-theme="dark"] #predictions-container { background-color: var(--dm-bg-card) !important; } [data-theme="dark"] .date-nav { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .ad-container img { opacity: 0.9; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg) !important; } /* ============================================ Dark Mode Toggle Button Style ============================================ */ #darkModeToggle { position: fixed; bottom: 90px; right: 30px; z-index: 9998; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } #darkModeToggle:hover { transform: scale(1.1); } /* Light mode appearance */ [data-theme="light"] #darkModeToggle, html:not([data-theme]) #darkModeToggle { background: #1a2332; color: #ffd700; } /* Dark mode appearance */ [data-theme="dark"] #darkModeToggle { background: #ffffff; color: #f59e0b; }