/* ========================================================= TechDaily — Dark Mode Applied via [data-theme="dark"] on , set by JS based on the customizer default (auto/light/dark) and the user's toggle, persisted with the "auto" state falling back to prefers-color-scheme. ========================================================= */ [data-theme="dark"] { --color-ink: #f5f6f8; --color-body: #c9ccd3; --color-muted: #8a8f9c; --color-border: #2a2d36; --color-surface: #1a1c22; --color-background: #101216; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .news-card__media-placeholder { background: linear-gradient(135deg, #23262e, #16181d); } [data-theme="dark"] .bookmark-btn { background: rgba(26, 28, 34, 0.9); color: var(--color-ink); } [data-theme="dark"] .search-field, [data-theme="dark"] .search-filter, [data-theme="dark"] .newsletter-form input[type="email"] { background: var(--color-surface); border-color: var(--color-border); color: var(--color-body); } [data-theme="dark"] img:not(.avatar) { filter: brightness(0.92) contrast(1.02); } /* Respect system preference only when the customizer/user hasn't chosen explicitly. */ @media (prefers-color-scheme: dark) { html[data-theme-preference="auto"]:not([data-theme="light"]) { --color-ink: #f5f6f8; --color-body: #c9ccd3; --color-muted: #8a8f9c; --color-border: #2a2d36; --color-surface: #1a1c22; --color-background: #101216; } }