/* ========================================================================== MyFoly — dark-mode.css Toggled by adding/removing the ".myfoly-dark" class on (see assets/js/main.js). Only overrides color tokens, never layout, so dark mode stays a pure "skin" on top of main.css. ========================================================================== */ body.myfoly-dark{ --myfoly-ink: #f1f1f4; --myfoly-ink-soft: #b7b9c2; --myfoly-bg: #121317; --myfoly-surface: #1b1d23; --myfoly-border: #2b2d34; } body.myfoly-dark{ color-scheme: dark; } body.myfoly-dark .myfoly-header{ background: var(--myfoly-bg); border-color: var(--myfoly-border); } body.myfoly-dark .myfoly-topbar{ background: #000; } body.myfoly-dark .myfoly-submenu{ background: var(--myfoly-surface); border-color: var(--myfoly-border); box-shadow: 0 14px 30px rgba(0,0,0,.5); } body.myfoly-dark .myfoly-search-toggle, body.myfoly-dark .myfoly-dark-toggle, body.myfoly-dark .myfoly-back-to-top{ background: var(--myfoly-surface); border-color: var(--myfoly-border); color: var(--myfoly-ink); } body.myfoly-dark .myfoly-dark-toggle .fa-moon{ display: none; } body.myfoly-dark .myfoly-dark-toggle .fa-sun{ display: inline-block; } body.myfoly-dark .myfoly-classic-post, body.myfoly-dark .myfoly-news-card, body.myfoly-dark .myfoly-author-bio, body.myfoly-dark #myfoly-toc, body.myfoly-dark .myfoly-toc, body.myfoly-dark .myfoly-archive-header, body.myfoly-dark .navigation.pagination .page-numbers { background: var(--myfoly-surface); border-color: var(--myfoly-border); color: var(--myfoly-ink); } body.myfoly-dark .mag-section-header h2 a { color: var(--myfoly-ink); } body.myfoly-dark .myfoly-single-post__body blockquote{ color: var(--myfoly-ink-soft); } body.myfoly-dark .comment-form input[type="text"], body.myfoly-dark .comment-form input[type="email"], body.myfoly-dark .comment-form textarea{ background: var(--myfoly-surface); border-color: var(--myfoly-border); color: var(--myfoly-ink); } body.myfoly-dark .myfoly-cat-pill{ background: color-mix(in srgb, var(--myfoly-accent) 22%, transparent); } body.myfoly-dark ::selection{ background: var(--myfoly-accent); color: #fff; }