/* ============================================================= DARK MODE — AamirSEOTools Theme Applied via [data-theme="dark"] on element Toggled by JS and saved to localStorage ============================================================= */ /* ── CSS Custom Properties: Dark Theme ── */ [data-theme="dark"] { --ast-bg-color: #0F172A; --ast-bg-secondary: #1E293B; --ast-bg-tertiary: #334155; --ast-text-color: #E2E8F0; --ast-text-light: #94A3B8; --ast-heading-color: #F1F5F9; --ast-border-color: #334155; --ast-header-bg: #1E293B; --ast-footer-bg: #0F172A; --ast-footer-text: #CBD5E1; --ast-link-color: #60A5FA; --ast-link-hover: #93C5FD; --ast-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --ast-shadow-md: 0 4px 6px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); --ast-shadow-lg: 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.4); --ast-input-bg: #1E293B; --ast-card-bg: #1E293B; } /* ── Smooth Transition on All Color Changes ── */ [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important; } /* ── Base ── */ [data-theme="dark"] body { background-color: var(--ast-bg-color); color: var(--ast-text-color); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--ast-heading-color); } [data-theme="dark"] a { color: var(--ast-link-color); } [data-theme="dark"] a:hover { color: var(--ast-link-hover); } /* ── Navigation ── */ [data-theme="dark"] #ast-header { background: var(--ast-header-bg); border-bottom: 1px solid var(--ast-border-color); box-shadow: 0 2px 8px rgba(0,0,0,.5); } [data-theme="dark"] .ast-primary-nav a { color: var(--ast-text-color); } [data-theme="dark"] .ast-primary-nav a:hover, [data-theme="dark"] .ast-primary-nav .current-menu-item > a { background: var(--ast-bg-tertiary); color: #60A5FA; } [data-theme="dark"] .ast-primary-nav .sub-menu { background: var(--ast-bg-secondary); border-color: var(--ast-border-color); box-shadow: 0 8px 24px rgba(0,0,0,.6); } [data-theme="dark"] .ast-primary-nav .sub-menu li { border-bottom-color: var(--ast-border-color); } [data-theme="dark"] .ast-site-title { color: #60A5FA; } [data-theme="dark"] .ast-site-tagline { color: var(--ast-text-light); } [data-theme="dark"] .ast-mobile-toggle { color: var(--ast-text-color); } /* Bootstrap Navbar dark override */ [data-theme="dark"] .navbar { background-color: var(--ast-header-bg) !important; border-bottom: 1px solid var(--ast-border-color); } [data-theme="dark"] .navbar-brand, [data-theme="dark"] .nav-link { color: var(--ast-text-color) !important; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #60A5FA !important; } [data-theme="dark"] .navbar-toggler { border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } [data-theme="dark"] .dropdown-menu { background-color: var(--ast-bg-secondary); border-color: var(--ast-border-color); box-shadow: 0 8px 24px rgba(0,0,0,.5); } [data-theme="dark"] .dropdown-item { color: var(--ast-text-color); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--ast-bg-tertiary); color: #60A5FA; } [data-theme="dark"] .dropdown-divider { border-color: var(--ast-border-color); } /* ── Search Bar ── */ [data-theme="dark"] .ast-header-search input, [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--ast-input-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #60A5FA; box-shadow: 0 0 0 3px rgba(96,165,250,.2); background-color: var(--ast-input-bg); color: var(--ast-text-color); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--ast-text-light); } /* Bootstrap form controls */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--ast-input-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--ast-input-bg); border-color: #60A5FA; color: var(--ast-text-color); box-shadow: 0 0 0 0.25rem rgba(96,165,250,.25); } /* ── Cards ── */ [data-theme="dark"] .ast-tool-card, [data-theme="dark"] .ast-post-card, [data-theme="dark"] .ast-widget { background: var(--ast-card-bg); border-color: var(--ast-border-color); box-shadow: var(--ast-shadow); } [data-theme="dark"] .ast-tool-card:hover, [data-theme="dark"] .ast-post-card:hover { border-color: #60A5FA; box-shadow: var(--ast-shadow-lg); } [data-theme="dark"] .ast-tool-card p, [data-theme="dark"] .ast-post-card-excerpt { color: var(--ast-text-light); } /* Bootstrap cards */ [data-theme="dark"] .card { background-color: var(--ast-card-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--ast-bg-tertiary); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .card-body { color: var(--ast-text-color); } /* ── Breadcrumbs ── */ [data-theme="dark"] .ast-breadcrumbs { background: var(--ast-bg-secondary); } [data-theme="dark"] .ast-breadcrumbs a { color: #60A5FA; } [data-theme="dark"] .ast-breadcrumbs span[aria-current] { color: var(--ast-text-light); } /* ── Widget Areas ── */ [data-theme="dark"] .ast-widget-title { background: var(--ast-bg-tertiary); border-bottom-color: var(--ast-border-color); color: var(--ast-heading-color); } [data-theme="dark"] .widget ul li { border-bottom-color: var(--ast-border-color); } [data-theme="dark"] .widget ul li a { color: var(--ast-text-color); } [data-theme="dark"] .widget ul li a:hover { color: #60A5FA; } /* ── Sidebar ── */ [data-theme="dark"] .ast-sidebar-sticky, [data-theme="dark"] aside { color: var(--ast-text-color); } /* ── TOC ── */ [data-theme="dark"] .ast-toc { background: var(--ast-bg-secondary); border-color: var(--ast-border-color); } [data-theme="dark"] .ast-toc a { color: #60A5FA; } /* ── Alert Boxes ── */ [data-theme="dark"] .ast-alert-info { background: #1E3A5F; border-color: #3B82F6; color: #93C5FD; } [data-theme="dark"] .ast-alert-success { background: #14532D; border-color: #22C55E; color: #86EFAC; } [data-theme="dark"] .ast-alert-warning { background: #451A03; border-color: #F59E0B; color: #FCD34D; } [data-theme="dark"] .ast-alert-danger { background: #4C0519; border-color: #F43F5E; color: #FDA4AF; } /* Bootstrap alerts dark */ [data-theme="dark"] .alert-primary { background-color: #1E3A5F; border-color: #3B82F6; color: #93C5FD; } [data-theme="dark"] .alert-success { background-color: #14532D; border-color: #22C55E; color: #86EFAC; } [data-theme="dark"] .alert-warning { background-color: #451A03; border-color: #F59E0B; color: #FCD34D; } [data-theme="dark"] .alert-danger { background-color: #4C0519; border-color: #F43F5E; color: #FDA4AF; } /* ── Tables ── */ [data-theme="dark"] .ast-entry-content table { border-color: var(--ast-border-color); } [data-theme="dark"] .ast-entry-content th { background: var(--ast-bg-secondary); color: var(--ast-heading-color); border-color: var(--ast-border-color); } [data-theme="dark"] .ast-entry-content td { border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .ast-entry-content tr:nth-child(even) td { background: var(--ast-bg-secondary); } /* Bootstrap tables */ [data-theme="dark"] .table { --bs-table-bg: var(--ast-card-bg); --bs-table-striped-bg: var(--ast-bg-secondary); --bs-table-hover-bg: var(--ast-bg-tertiary); --bs-table-border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--ast-border-color); } /* ── Entry Content ── */ [data-theme="dark"] .ast-entry-content blockquote { background: var(--ast-bg-secondary); border-left-color: #60A5FA; color: var(--ast-text-color); } [data-theme="dark"] .ast-entry-content code { background: var(--ast-bg-tertiary); color: #93C5FD; } [data-theme="dark"] .ast-entry-content pre { background: #0F172A; border: 1px solid var(--ast-border-color); } /* ── Tags ── */ [data-theme="dark"] .ast-entry-tags a { background: var(--ast-bg-secondary); color: var(--ast-text-color); border-color: var(--ast-border-color); } [data-theme="dark"] .ast-entry-tags a:hover { background: #2563EB; color: #fff; border-color: #2563EB; } /* ── Post Card Meta ── */ [data-theme="dark"] .ast-post-card-meta { color: var(--ast-text-light); } [data-theme="dark"] .ast-post-card-footer { border-top-color: var(--ast-border-color); } [data-theme="dark"] .ast-post-card h2 a, [data-theme="dark"] .ast-post-card h3 a { color: var(--ast-heading-color); } [data-theme="dark"] .ast-post-card h2 a:hover, [data-theme="dark"] .ast-post-card h3 a:hover { color: #60A5FA; } /* ── Pagination ── */ [data-theme="dark"] .ast-pagination a, [data-theme="dark"] .ast-pagination span { background: var(--ast-card-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .ast-pagination a:hover { background: #2563EB; border-color: #2563EB; color: #fff; } [data-theme="dark"] .ast-pagination .current { background: #2563EB; border-color: #2563EB; color: #fff; } /* ── Comments ── */ [data-theme="dark"] .ast-comments { border-top-color: var(--ast-border-color); } [data-theme="dark"] .comment { background: var(--ast-bg-secondary); border: 1px solid var(--ast-border-color); } [data-theme="dark"] .comment-meta { color: var(--ast-text-light); } [data-theme="dark"] .comment-form input, [data-theme="dark"] .comment-form textarea { background: var(--ast-input-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .comment-form label { color: var(--ast-heading-color); } /* ── Hero Section ── */ [data-theme="dark"] .ast-hero { background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%); } /* ── Footer ── */ [data-theme="dark"] #ast-footer { background: #070F1A; color: var(--ast-footer-text); border-top: 1px solid var(--ast-border-color); } [data-theme="dark"] .ast-footer-widget h4 { color: #F1F5F9; } [data-theme="dark"] .ast-footer-widget p { color: var(--ast-text-light); } [data-theme="dark"] .ast-footer-widget ul li a { color: var(--ast-text-light); } [data-theme="dark"] .ast-footer-widget ul li a:hover { color: #F59E0B; } [data-theme="dark"] .ast-footer-bottom { border-top-color: rgba(255,255,255,.07); color: var(--ast-text-light); } [data-theme="dark"] .ast-footer-bottom a { color: var(--ast-text-light); } [data-theme="dark"] .ast-footer-bottom a:hover { color: #F59E0B; } [data-theme="dark"] .ast-footer-social a { background: rgba(255,255,255,.08); } [data-theme="dark"] .ast-footer-social a:hover { background: #2563EB; } /* ── Dark Mode Toggle Button ── */ [data-theme="dark"] #ast-dark-mode-toggle { color: #FCD34D; } [data-theme="dark"] #ast-dark-mode-toggle .icon-sun { display: inline-block; } [data-theme="dark"] #ast-dark-mode-toggle .icon-moon { display: none; } [data-theme="light"] #ast-dark-mode-toggle .icon-sun { display: none; } [data-theme="light"] #ast-dark-mode-toggle .icon-moon { display: inline-block; } html:not([data-theme]) #ast-dark-mode-toggle .icon-sun { display: none; } html:not([data-theme]) #ast-dark-mode-toggle .icon-moon { display: inline-block; } /* ── Back to Top ── */ [data-theme="dark"] #ast-back-to-top { background: #2563EB; box-shadow: 0 4px 12px rgba(37,99,235,.5); } /* ── Cookie Consent ── */ [data-theme="dark"] #ast-cookie-banner { background: #1E293B; border-top: 1px solid var(--ast-border-color); color: var(--ast-text-color); } /* ── Bootstrap Modal ── */ [data-theme="dark"] .modal-content { background-color: var(--ast-card-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--ast-border-color); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── Bootstrap List Groups ── */ [data-theme="dark"] .list-group-item { background-color: var(--ast-card-bg); border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .list-group-item:hover { background-color: var(--ast-bg-tertiary); } [data-theme="dark"] .list-group-item.active { background-color: #2563EB; border-color: #2563EB; } /* ── Badges ── */ [data-theme="dark"] .badge.bg-secondary { background-color: var(--ast-bg-tertiary) !important; color: var(--ast-text-color) !important; } /* ── Progress Bars ── */ [data-theme="dark"] .progress { background-color: var(--ast-bg-tertiary); } /* ── Accordion ── */ [data-theme="dark"] .accordion-item { background-color: var(--ast-card-bg); border-color: var(--ast-border-color); } [data-theme="dark"] .accordion-button { background-color: var(--ast-bg-secondary); color: var(--ast-text-color); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #1E3A5F; color: #93C5FD; } [data-theme="dark"] .accordion-button::after { filter: invert(1); } [data-theme="dark"] .accordion-body { background-color: var(--ast-card-bg); color: var(--ast-text-color); } /* ── Tabs ── */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--ast-border-color); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--ast-text-light); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--ast-border-color); color: var(--ast-text-color); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--ast-card-bg); border-color: var(--ast-border-color) var(--ast-border-color) var(--ast-card-bg); color: #60A5FA; } [data-theme="dark"] .tab-content { background: var(--ast-card-bg); border: 1px solid var(--ast-border-color); border-top: none; } /* ── Scrollbar (Webkit) ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--ast-bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ast-bg-tertiary); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ── Selection Color ── */ [data-theme="dark"] ::selection { background: rgba(96,165,250,.3); color: var(--ast-heading-color); } /* ── Horizontal Rule ── */ [data-theme="dark"] hr { border-color: var(--ast-border-color); opacity: 1; } /* ── Adblock Notice ── */ [data-theme="dark"] #ast-adblock-notice { background: #1C1917; border: 1px solid #78350F; color: #FCD34D; }