/* * dark-mode.css — TechAgro Dark Mode * ------------------------------------- * Activated by adding "dark-mode" class to (and for flash prevention). * Loaded on every page via functions.php. */ /* ─── GLOBAL ──────────────────────────────────────────────────────────────── */ html.dark-mode, body.dark-mode { background-color: #0f1a14; color: #e8f0ea; /* Re-declare all variables for dark mode — everything using these will update automatically */ --color-bg: #0f1a14; --color-white: #1a2a1f; --color-text-dark: #e8f0ea; --color-text-mid: #a0b8a8; --color-text-light: #6a8a72; --color-border: #2a3d2f; --color-green-pale: #162012; --color-green-light: #74c69d; --card-bg: #1a2a1f; --card-border: 1.5px solid #2D6A4F; --card-shadow-idle: 4px 4px 0px 0px #2D6A4F; } /* Smooth transition when switching modes */ body, body * { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* But don't animate images or transforms (looks bad) */ body img, body .ta-post-card { transition: transform var(--card-transition), box-shadow var(--card-transition); } /* ─── LINKS ───────────────────────────────────────────────────────────────── */ body.dark-mode a { color: var(--color-text-dark); } /* ─── POST CARDS ──────────────────────────────────────────────────────────── */ body.dark-mode .ta-post-card { background: var(--card-bg); border: 1px solid #2D6A4F; } body.dark-mode .ta-post-card:hover { border-color: transparent; } body.dark-mode .ta-post-card__title { color: var(--color-text-dark); } body.dark-mode .ta-post-card__title:hover { color: var(--color-green-light); } body.dark-mode .ta-post-card__excerpt { color: var(--color-text-mid); } body.dark-mode .ta-post-card__excerpt:hover { color: var(--color-text-dark); } body.dark-mode .ta-post-card__date { color: var(--color-text-light); } /* ─── SIDEBAR ─────────────────────────────────────────────────────────────── */ body.dark-mode .ta-sidebar { border-left-color: var(--color-border); } body.dark-mode .ta-sidebar__search form { background: #1a2a1f; border-color: var(--color-border); } body.dark-mode .ta-sidebar__search input[type="search"] { color: var(--color-text-dark); background: transparent; } body.dark-mode .ta-sidebar__search input[type="search"]::placeholder { color: var(--color-text-light); } body.dark-mode .ta-sidebar__categories h4 { color: var(--color-green-light); border-bottom-color: var(--color-border); } body.dark-mode .ta-sidebar__categories ul li a { color: var(--color-text-mid); } body.dark-mode .ta-sidebar__categories ul li a:hover { color: var(--color-green-light); } body.dark-mode .ta-sidebar__categories ul li.home-link a { color: var(--color-text-dark); } body.dark-mode .ta-cat-count { color: var(--color-text-light); } /* ─── LOAD MORE BUTTON ────────────────────────────────────────────────────── */ body.dark-mode .ta-load-more-btn { color: var(--color-green-light); border-color: var(--color-green-light); } body.dark-mode .ta-load-more-btn:hover { border-color: transparent; } /* ─── HEADER ──────────────────────────────────────────────────────────────── */ body.dark-mode .ta-header--solid { background-color: #0a1209; border-bottom: 1px solid var(--color-border); } /* Transparent header on homepage stays transparent in dark mode too */ body.dark-mode .ta-header--transparent { background: transparent; } /* ─── ASTRA THEME OVERRIDES ───────────────────────────────────────────────── */ /* * Astra adds its own background and text colors. * We override them here so dark mode works on the whole page, * not just our custom elements. */ body.dark-mode, body.dark-mode .ast-separate-container, body.dark-mode .ast-page-builder-template, body.dark-mode #page, body.dark-mode #content, body.dark-mode .site-content, body.dark-mode .entry-content { background-color: #0f1a14; color: #e8f0ea; } body.dark-mode .ast-container, body.dark-mode .ast-separate-container .ast-article-post, body.dark-mode .ast-separate-container .ast-article-inner { background-color: #0f1a14; } /* Astra header (in case it shows) */ body.dark-mode #masthead, body.dark-mode .site-header { background-color: #0a1209; } /* Astra footer */ body.dark-mode #colophon, body.dark-mode .site-footer, body.dark-mode .footer-widget-area { background-color: #0a1209; border-top-color: var(--color-border); color: var(--color-text-mid); }