/* Dark mode. Bootstrap 5.3 switches its own components (cards, accordion, form-control, modals, text-muted, borders) off data-bs-theme="dark" on ; this file only re-colours the custom rules in main.css, header.css and footer.css that hardcode light colours. Palette mirrors X's dark theme. */ [data-bs-theme="dark"] { --tv-bg: #000000; --tv-surface: #16181c; --tv-surface-2: #1e2126; --tv-border: #2f3336; --tv-text: #e7e9ea; --tv-muted: #71767b; } [data-bs-theme="dark"] body { background-color: var(--tv-bg); color: var(--tv-text); } /* Site shell */ [data-bs-theme="dark"] .site-header { background: var(--tv-bg); border-bottom: 1px solid var(--tv-border); } [data-bs-theme="dark"] .site-header-logo img { filter: invert(1); } [data-bs-theme="dark"] .site-header-nav a { color: var(--tv-text); } [data-bs-theme="dark"] .site-header-nav a:hover { color: #ffffff; } [data-bs-theme="dark"] .site-header-nav a { border-color: var(--tv-border); } [data-bs-theme="dark"] .site-header-menu { color: var(--tv-text); } [data-bs-theme="dark"] .footer { color: var(--tv-text); border-top-color: var(--tv-border); } [data-bs-theme="dark"] .footer-brand-row, [data-bs-theme="dark"] .footer-bottom { border-color: var(--tv-border); } [data-bs-theme="dark"] .footer-logo, [data-bs-theme="dark"] .footer-section h3, [data-bs-theme="dark"] .copyright .brand-name { color: var(--tv-text); } [data-bs-theme="dark"] .footer-tagline, [data-bs-theme="dark"] .footer-meta, [data-bs-theme="dark"] .copyright, [data-bs-theme="dark"] .footer-links a, [data-bs-theme="dark"] .footer-bottom-links a { color: #a0a5aa; } [data-bs-theme="dark"] .footer-links a:hover, [data-bs-theme="dark"] .footer-bottom-links a:hover { color: #ffffff; } /* Theme toggle (light mode styling lives here too so header.css stays untouched) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e0e0e0; background: transparent; color: #000000; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; } .theme-toggle:hover { background: rgba(0, 0, 0, 0.06); } .theme-toggle .bi-sun-fill { display: none; } [data-bs-theme="dark"] .theme-toggle { border-color: var(--tv-border); color: var(--tv-text); } [data-bs-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .theme-toggle .bi-moon-fill { display: none; } [data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline; } /* Mode selectors and input bar */ [data-bs-theme="dark"] .option-selector, [data-bs-theme="dark"] .sub-option-selector { background-color: var(--tv-surface); border-color: var(--tv-border); box-shadow: none; } [data-bs-theme="dark"] .option-btn, [data-bs-theme="dark"] .sub-option-btn { color: var(--tv-muted); } [data-bs-theme="dark"] .option-btn.active, [data-bs-theme="dark"] .sub-option-btn.active { color: #ffffff; } /* The input container only has inline styles, hence :has() + !important */ [data-bs-theme="dark"] div:has(> #twitterUrl) { background-color: var(--tv-surface) !important; border-color: var(--tv-border) !important; } [data-bs-theme="dark"] #twitterUrl { color: var(--tv-text); } [data-bs-theme="dark"] #twitterUrl::placeholder { color: var(--tv-muted); } [data-bs-theme="dark"] #pasteButton, [data-bs-theme="dark"] #clearButton, [data-bs-theme="dark"] #downloadButton { border-color: var(--tv-border) !important; } [data-bs-theme="dark"] .btn-nav { border-color: var(--tv-bg); } [data-bs-theme="dark"] .notice-content { background-color: rgba(29, 161, 242, 0.12); color: #8ecdf7; } /* Profile card */ [data-bs-theme="dark"] .profile-card { background-color: var(--tv-bg); border-color: var(--tv-border); } [data-bs-theme="dark"] .profile-avatar { border-color: var(--tv-bg); background-color: var(--tv-bg); } [data-bs-theme="dark"] .profile-action-btn, [data-bs-theme="dark"] .profile-download-btn { background-color: var(--tv-bg); border-color: var(--tv-border); color: var(--tv-text); } [data-bs-theme="dark"] .profile-action-btn:hover { background-color: rgba(231, 233, 234, 0.1); color: var(--tv-text); } [data-bs-theme="dark"] .profile-name, [data-bs-theme="dark"] .profile-bio, [data-bs-theme="dark"] .stat-value { color: var(--tv-text); } [data-bs-theme="dark"] .profile-username, [data-bs-theme="dark"] .profile-meta-item, [data-bs-theme="dark"] .profile-meta-item i, [data-bs-theme="dark"] .stat-label, [data-bs-theme="dark"] .tweet-time { color: var(--tv-muted); } [data-bs-theme="dark"] .profile-download-actions, [data-bs-theme="dark"] .tweet-download-buttons { border-top-color: var(--tv-border); } /* Tweets, quotes, search results, media */ [data-bs-theme="dark"] .tweet-card, [data-bs-theme="dark"] .user-card, [data-bs-theme="dark"] .grid-item, [data-bs-theme="dark"] .grid-item-small, [data-bs-theme="dark"] .media-item, [data-bs-theme="dark"] .quoted-media-item, [data-bs-theme="dark"] .tweet-stats-section { background-color: var(--tv-bg); border-color: var(--tv-border) !important; } [data-bs-theme="dark"] .tweet-card:hover { background-color: rgba(255, 255, 255, 0.03); } [data-bs-theme="dark"] .user-card img { border-color: var(--tv-border); } [data-bs-theme="dark"] .user-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } [data-bs-theme="dark"] .tweet-author-name, [data-bs-theme="dark"] .tweet-text, [data-bs-theme="dark"] .quoted-author-name, [data-bs-theme="dark"] .quoted-tweet-text { color: var(--tv-text); } [data-bs-theme="dark"] .tweet-author-username, [data-bs-theme="dark"] .tweet-time-separator, [data-bs-theme="dark"] .tweet-timestamp, [data-bs-theme="dark"] .tweet-stat, [data-bs-theme="dark"] .quoted-author-username, [data-bs-theme="dark"] .quoted-time-separator, [data-bs-theme="dark"] .quoted-timestamp { color: var(--tv-muted); } [data-bs-theme="dark"] .quoted-tweet-card { border-color: var(--tv-border); } [data-bs-theme="dark"] .quoted-tweet-card:hover { background-color: rgba(255, 255, 255, 0.03); } [data-bs-theme="dark"] .quoted-tweet-section, [data-bs-theme="dark"] .search-header, [data-bs-theme="dark"] .tweet-header-section, [data-bs-theme="dark"] .stat-card, [data-bs-theme="dark"] .media-item-container video { background-color: var(--tv-surface) !important; } [data-bs-theme="dark"] .media-item-container { border-color: var(--tv-border); } [data-bs-theme="dark"] .media-item img, [data-bs-theme="dark"] .media-item video, [data-bs-theme="dark"] .quoted-media-item img, [data-bs-theme="dark"] .quoted-media-item video, [data-bs-theme="dark"] .gif-video, [data-bs-theme="dark"] .gif-video-small { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .stat-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); } /* Captcha modal */ [data-bs-theme="dark"] .captcha-modal-content { background-color: var(--tv-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); } [data-bs-theme="dark"] .captcha-modal-header h5 { color: var(--tv-text); } [data-bs-theme="dark"] .captcha-modal-header p { color: var(--tv-muted); } /* Landing content */ [data-bs-theme="dark"] .hover-shadow:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .6) !important; }