/* ============================================================= Dark mode — applied when is set. Pure CSS overrides on top of the watercolor token set. Loaded site-wide via responsive.css → enhance.js sets the attr. ============================================================= */ /* Auto-dark when user prefers it AND has not set an explicit choice. We honor the explicit choice (data-theme) via the rules further below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --watercolor-paper: #0e1814; --watercolor-warm-bg: #0a1410; --watercolor-deep-paper: #061410; --watercolor-ink: #d6e5dc; --watercolor-ink-soft: #98aea4; --jade-mist: rgba(94, 242, 194, 0.12); --pearl-white: #1a2622; --pearl-cream: #14201c; --pearl-sand: #1f2a26; } :root:not([data-theme="light"]) body { background: var(--watercolor-paper) !important; color: var(--watercolor-ink); } :root:not([data-theme="light"]) .page-watercolor::before { opacity: 0.06 !important; } :root:not([data-theme="light"]) .watercolor-card, :root:not([data-theme="light"]) .glass-card, :root:not([data-theme="light"]) .article-card, :root:not([data-theme="light"]) .section-card, :root:not([data-theme="light"]) .sec-card, :root:not([data-theme="light"]) .form-wrap, :root:not([data-theme="light"]) .article-head, :root:not([data-theme="light"]) .article-body, :root:not([data-theme="light"]) .toc-box, :root:not([data-theme="light"]) .pn-link, :root:not([data-theme="light"]) .related a, :root:not([data-theme="light"]) .bento, :root:not([data-theme="light"]) .verdict-card, :root:not([data-theme="light"]) .positioning-card, :root:not([data-theme="light"]) .feature-card, :root:not([data-theme="light"]) .pain-card, :root:not([data-theme="light"]) .plan-recommend, :root:not([data-theme="light"]) .cost-card, :root:not([data-theme="light"]) .migration-card, :root:not([data-theme="light"]) .when-card, :root:not([data-theme="light"]) .case-cta, :root:not([data-theme="light"]) .compare-cta { background: rgba(20, 32, 28, 0.7) !important; border-color: rgba(94, 242, 194, 0.18) !important; color: var(--watercolor-ink) !important; } } /* Explicit dark mode (user toggled) — same overrides */ html[data-theme="dark"] { --watercolor-paper: #0e1814; --watercolor-warm-bg: #0a1410; --watercolor-deep-paper: #061410; --watercolor-ink: #d6e5dc; --watercolor-ink-soft: #98aea4; --jade-mist: rgba(94, 242, 194, 0.12); --pearl-white: #1a2622; --pearl-cream: #14201c; --pearl-sand: #1f2a26; color-scheme: dark; } html[data-theme="dark"] body { background: var(--watercolor-paper) !important; color: var(--watercolor-ink) !important; } html[data-theme="dark"] .page-watercolor { background: var(--watercolor-paper) !important; } html[data-theme="dark"] .page-watercolor::before { opacity: 0.06 !important; } html[data-theme="dark"] .watercolor-card, html[data-theme="dark"] .glass-card, html[data-theme="dark"] .article-card, html[data-theme="dark"] .section-card, html[data-theme="dark"] .sec-card, html[data-theme="dark"] .form-wrap, html[data-theme="dark"] .article-head, html[data-theme="dark"] .article-body, html[data-theme="dark"] .toc-box, html[data-theme="dark"] .pn-link, html[data-theme="dark"] .related a, html[data-theme="dark"] .bento, html[data-theme="dark"] .verdict-card, html[data-theme="dark"] .positioning-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .pain-card, html[data-theme="dark"] .plan-recommend, html[data-theme="dark"] .cost-card, html[data-theme="dark"] .migration-card, html[data-theme="dark"] .when-card, html[data-theme="dark"] .case-cta, html[data-theme="dark"] .compare-cta, html[data-theme="dark"] nav[data-scroll-aware] { background: rgba(20, 32, 28, 0.7) !important; border-color: rgba(94, 242, 194, 0.18) !important; color: var(--watercolor-ink) !important; } html[data-theme="dark"] nav[data-scroll-aware] { background: rgba(10, 22, 18, 0.85) !important; } html[data-theme="dark"] .article-body h2 { border-bottom-color: rgba(94, 242, 194, 0.45) !important; } html[data-theme="dark"] .article-body code { background: rgba(94, 242, 194, 0.12); color: var(--watercolor-ink); } html[data-theme="dark"] .share-btn { background: rgba(94, 242, 194, 0.12); border-color: rgba(94, 242, 194, 0.32); color: #5ef2c2; } /* Print stylesheet — beautiful printed articles */ @media print { nav, footer, .site-footer, #ros-theme-toggle, #ros-back-top, #ros-scroll-progress, .share-row, .article-cta, .toc-box, .prevnext, .related, .breadcrumb { display: none !important; } body, .page-watercolor, .article-wrap, .article-body { background: #fff !important; color: #000 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: none !important; } .article-head, .article-body { border: none !important; padding: 0 !important; background: #fff !important; } .article-body h2, .article-body h3 { page-break-after: avoid; border-bottom: 1px solid #ccc !important; color: #000 !important; } .article-body p, .article-body li { page-break-inside: avoid; color: #000 !important; } a { color: #000 !important; text-decoration: underline !important; } a.plugin-link::after { content: " (" attr(href) ")"; font-size: 11px; color: #666; } }