/* ============================================================ NEWVIB DARK MODE CSS Applied via: [data-theme="dark"] on ============================================================ */ /* ── Dark Mode Toggle Button ─────────────────────────────── */ .nv-dark-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--nv-radius); color: var(--nv-ink); background: transparent; border: none; cursor: pointer; transition: background 0.2s var(--nv-ease), color 0.2s var(--nv-ease), transform 0.2s var(--nv-ease-out); position: relative; } .nv-dark-toggle:hover { background: var(--nv-cream); transform: rotate(15deg); } .nv-dark-toggle:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 3px; } /* Show/hide sun and moon icons */ .nv-dark-toggle__sun { display: none; } .nv-dark-toggle__moon { display: block; } [data-theme="dark"] .nv-dark-toggle__sun { display: block; } [data-theme="dark"] .nv-dark-toggle__moon { display: none; } /* Icon transition */ .nv-dark-toggle svg { transition: transform 0.35s var(--nv-ease-out), opacity 0.25s var(--nv-ease); } .nv-dark-toggle:hover svg { transform: rotate(20deg) scale(1.1); } /* ── Dark Mode Color Overrides ───────────────────────────── */ [data-theme="dark"] { --nv-ink: #F0EDE6; --nv-paper: #111111; --nv-cream: #1C1C1C; --nv-accent: #E8504A; --nv-accent-alt: #E8A838; --nv-gold: #C4A96E; --nv-slate: #B5B5C0; --nv-muted: #6E6E7A; --nv-border: #2C2C2C; --nv-overlay: rgba(0,0,0,0.82); color-scheme: dark; } /* ── Base ────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #111111; color: #F0EDE6; } /* ── Top Bar ─────────────────────────────────────────────── */ [data-theme="dark"] .nv-topbar { background: #000; border-bottom: 1px solid #1E1E1E; } /* ── Header ──────────────────────────────────────────────── */ [data-theme="dark"] .nv-header { background: rgba(17,17,17,0.95); border-bottom-color: #2C2C2C; } [data-theme="dark"] .nv-header.nv-header--scrolled { background: rgba(17,17,17,0.88); } [data-theme="dark"] .nv-site-title__name { color: #F0EDE6; } [data-theme="dark"] .nv-site-title__desc { color: #6E6E7A; } /* ── Primary Nav ─────────────────────────────────────────── */ [data-theme="dark"] .nv-primary-nav { background: #111111; border-top-color: #2C2C2C; } [data-theme="dark"] .nv-nav-link { color: #B5B5C0; } [data-theme="dark"] .nv-nav-link:hover { color: #E8504A; } [data-theme="dark"] .current-menu-item > .nv-nav-link { color: #E8504A; } [data-theme="dark"] .sub-menu { background: #1C1C1C; border-color: #2C2C2C; } [data-theme="dark"] .sub-menu a { color: #B5B5C0; } [data-theme="dark"] .sub-menu a:hover { color: #E8504A; } /* ── Post Cards ──────────────────────────────────────────── */ [data-theme="dark"] .nv-post-card { background: #1C1C1C; border-color: #2C2C2C; } [data-theme="dark"] .nv-post-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.5); } [data-theme="dark"] .nv-post-card__title a { color: #F0EDE6; } [data-theme="dark"] .nv-post-card__title a:hover { color: #E8504A; } [data-theme="dark"] .nv-post-card__excerpt { color: #B5B5C0; } [data-theme="dark"] .nv-post-card__meta { color: #6E6E7A; border-top-color: #2C2C2C; } /* ── Category Section ────────────────────────────────────── */ [data-theme="dark"] .nv-category-card { background: #1C1C1C; border-color: #2C2C2C; } /* ── Editor Picks Section ────────────────────────────────── */ [data-theme="dark"] .nv-editor-picks { background: #1C1C1C; } /* ── Single Post ─────────────────────────────────────────── */ [data-theme="dark"] .nv-single-post__title { color: #F0EDE6; } [data-theme="dark"] .nv-single-post__deck { color: #B5B5C0; border-left-color: #E8504A; } [data-theme="dark"] .nv-single-post__meta { border-top-color: #2C2C2C; border-bottom-color: #2C2C2C; } [data-theme="dark"] .nv-single-post__meta-group { color: #6E6E7A; } [data-theme="dark"] .nv-single-post__author-avatar { border-color: #2C2C2C; } /* ── Article Content ─────────────────────────────────────── */ [data-theme="dark"] .nv-content { color: #B5B5C0; } [data-theme="dark"] .nv-content h2, [data-theme="dark"] .nv-content h3, [data-theme="dark"] .nv-content h4 { color: #F0EDE6; border-top-color: #2C2C2C; } [data-theme="dark"] .nv-content blockquote { background: #1C1C1C; border-left-color: #E8504A; color: #F0EDE6; } [data-theme="dark"] .nv-content a { color: #E8504A; } [data-theme="dark"] .nv-content code { background: #2C2C2C; color: #E8504A; } [data-theme="dark"] .nv-content pre { background: #000; color: #B5B5C0; } [data-theme="dark"] .nv-content th { background: #1C1C1C; } [data-theme="dark"] .nv-content td, [data-theme="dark"] .nv-content th { border-color: #2C2C2C; } [data-theme="dark"] .nv-content tr:nth-child(even) td { background: #1C1C1C; } [data-theme="dark"] .nv-content hr { border-top-color: #2C2C2C; } /* Drop cap */ [data-theme="dark"] .nv-drop-cap { color: #E8504A; } /* ── Author Box ──────────────────────────────────────────── */ [data-theme="dark"] .nv-author-box { background: #1C1C1C; border-color: #2C2C2C; } [data-theme="dark"] .nv-author-box__name a { color: #F0EDE6; } [data-theme="dark"] .nv-author-box__bio { color: #B5B5C0; } [data-theme="dark"] .nv-author-box__avatar-img { border-color: #2C2C2C; } /* ── Post Navigation ─────────────────────────────────────── */ [data-theme="dark"] .nv-post-nav__link { background: #1C1C1C; border-color: #2C2C2C; } [data-theme="dark"] .nv-post-nav__title { color: #F0EDE6; } /* ── Tags ────────────────────────────────────────────────── */ [data-theme="dark"] .nv-tag-link { background: #1C1C1C; border-color: #2C2C2C; color: #B5B5C0; } [data-theme="dark"] .nv-tag-link:hover { background: #E8504A; color: #fff; border-color: #E8504A; } /* ── Sidebar & Widgets ───────────────────────────────────── */ [data-theme="dark"] .nv-widget__title { color: #F0EDE6; border-bottom-color: #2C2C2C; } [data-theme="dark"] .nv-widget-post { border-bottom-color: #2C2C2C; } [data-theme="dark"] .nv-widget-post__title a { color: #F0EDE6; } [data-theme="dark"] .nv-widget-post__date { color: #6E6E7A; } [data-theme="dark"] .nv-widget-categories a { color: #B5B5C0; border-bottom-color: #2C2C2C; } [data-theme="dark"] .nv-widget-categories .count { background: #2C2C2C; color: #6E6E7A; } /* ── Search ──────────────────────────────────────────────── */ [data-theme="dark"] .search-field { background: #1C1C1C; border-color: #2C2C2C; color: #F0EDE6; } [data-theme="dark"] .search-field:focus { border-color: #E8504A; } [data-theme="dark"] .nv-search-modal__inner { background: #1C1C1C; } /* ── Page & Archive Headers ──────────────────────────────── */ [data-theme="dark"] .nv-archive-header__title { color: #F0EDE6; } [data-theme="dark"] .nv-archive-header__desc { color: #6E6E7A; } [data-theme="dark"] .nv-cat-header__count { color: #6E6E7A; } /* ── Section Headers ─────────────────────────────────────── */ [data-theme="dark"] .nv-section__header { border-bottom-color: #2C2C2C; } [data-theme="dark"] .nv-section__title { color: #F0EDE6; } /* ── Breadcrumbs ─────────────────────────────────────────── */ [data-theme="dark"] .nv-breadcrumbs__link { color: #6E6E7A; } [data-theme="dark"] .nv-breadcrumbs__current { color: #F0EDE6; } [data-theme="dark"] .nv-breadcrumbs__sep { color: #2C2C2C; } /* ── Pagination ──────────────────────────────────────────── */ [data-theme="dark"] .nv-pagination__item a { color: #F0EDE6; border-color: #2C2C2C; } [data-theme="dark"] .nv-pagination__item a:hover, [data-theme="dark"] .nv-pagination__item--current span { background: #E8504A; border-color: #E8504A; color: #fff; } /* ── Trending ────────────────────────────────────────────── */ [data-theme="dark"] .nv-trending-item:hover { background: #1C1C1C; } [data-theme="dark"] .nv-trending-item__rank { color: #2C2C2C; } [data-theme="dark"] .nv-trending-item:hover .nv-trending-item__rank { color: #E8504A; } [data-theme="dark"] .nv-trending-item__title a { color: #F0EDE6; } /* ── Sub cats ────────────────────────────────────────────── */ [data-theme="dark"] .nv-sub-cat-link { background: #1C1C1C; border-color: #2C2C2C; color: #B5B5C0; } [data-theme="dark"] .nv-sub-cat-link:hover { background: #F0EDE6; color: #111111; border-color: #F0EDE6; } [data-theme="dark"] .nv-sub-cat-link__count { background: #2C2C2C; } /* ── Mobile nav ──────────────────────────────────────────── */ [data-theme="dark"] .nv-mobile-nav__drawer { background: #1C1C1C; } [data-theme="dark"] .nv-mobile-nav__menu li a { color: #F0EDE6; border-bottom-color: #2C2C2C; } /* ── Error page ──────────────────────────────────────────── */ [data-theme="dark"] .nv-error-page__number { color: #1C1C1C; -webkit-text-stroke-color: #2C2C2C; } /* ── Comments ────────────────────────────────────────────── */ [data-theme="dark"] .comment-form input, [data-theme="dark"] .comment-form textarea { background: #1C1C1C; border-color: #2C2C2C; color: #F0EDE6; } [data-theme="dark"] .comment-form input:focus, [data-theme="dark"] .comment-form textarea:focus { border-color: #E8504A; } /* ── Footer ──────────────────────────────────────────────── */ [data-theme="dark"] .nv-footer { background: #000000; } [data-theme="dark"] .nv-footer__top { border-bottom-color: rgba(255,255,255,0.05); } /* ── Page links ──────────────────────────────────────────── */ [data-theme="dark"] .nv-page-links__item a { border-color: #2C2C2C; color: #B5B5C0; } /* ── Above footer ────────────────────────────────────────── */ [data-theme="dark"] .nv-above-footer { border-top-color: #2C2C2C; } /* ── Scroll top ──────────────────────────────────────────── */ [data-theme="dark"] .nv-scroll-top { background: #F0EDE6; color: #111111; } [data-theme="dark"] .nv-scroll-top:hover { background: #E8504A; color: #fff; } /* ── Related posts ───────────────────────────────────────── */ [data-theme="dark"] .nv-related-posts { border-top-color: #2C2C2C; } [data-theme="dark"] .nv-related-posts__title { color: #F0EDE6; } /* ── Smooth transition for theme switch ──────────────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* Disable transition on initial load (prevent flash) */ .nv-no-transition *, .nv-no-transition *::before, .nv-no-transition *::after { transition: none !important; } /* ── Image handling in dark mode ─────────────────────────── */ [data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(0.92) contrast(1.02); } [data-theme="dark"] .nv-hero__slide-img, [data-theme="dark"] .nv-post-overlay__img, [data-theme="dark"] .nv-editor-pick__thumb img { filter: brightness(0.88) contrast(1.05); }