/** * Medium Pro - Dark Mode Variables Override * Triggered by [data-theme="dark"] on the tag */ [data-theme="dark"] { --bg-color: #121212; --text-color: #e4e4e4; --text-muted: #8e8e8e; --text-light: #5a5a5a; --border-color: #2c2c2c; --border-hover: #3d3d3d; --primary-color: #32a852; /* Slightly brighter green for dark bg */ --primary-hover: #4ae872; --card-bg: #1e1e1e; --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.6); --error-color: #ff6b6b; } /* Dim images slightly in dark mode to reduce eye strain */ [data-theme="dark"] img { opacity: 0.85; transition: opacity 0.3s ease; } [data-theme="dark"] img:hover { opacity: 1; } /* Handle specific dropdown & hover overlaps smoothly in dark mode */ [data-theme="dark"] .search-result-item:hover { background-color: #2a2a2a; }