/** * Medium Pro - Dark Mode Variables Override * Triggered by [data-theme="dark"] on the tag */ [data-theme="dark"] { --bg-color: #121115; --text-color: #ffffff; --text-muted: #dddbdb; --text-light: #dddbdb; --border-color: #3C3A49; --border-hover: #4e4c5c; --card-bg: #23222B; --primary-color: #A163E9; --primary-hover: #b886f2; --btn-secondary: #2A3C4D; --shadow-soft: none; --shadow-hover: none; --error-color: #ff6b6b; } /* Portfolio Specific Deep Dark Overrides */ [data-theme="dark"] body.post-type-archive-project { --bg-color: #121115; --card-bg: #23222B; --border-color: #3C3A49; } [data-theme="dark"] .project-modal-overlay { background: #121115; } [data-theme="dark"] .modal-sidebar-panel, [data-theme="dark"] .modal-main-panel, [data-theme="dark"] .modal-block-panel { --card-bg: #23222B; } /* 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; }