/* Dark theme: colour tokens, the theme toggle and component fixes. Loaded after dark-mode.generated.css (built by scripts/build-dark-mode.mjs), which maps every hard-coded colour. theme.js sets from the saved choice or the system setting. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --ink: #ecebe8; --muted: #a8a39b; --line: #34312c; --paper: #121110; --soft: #1d1b18; --accent: #ecebe8; --warm: #e39a62; background: var(--paper); } /* The border shorthand in the generated rules draws every side of the tick, turning it into a diamond. Restore the two-sided tick: dark on the light selected check, white on the green saved check. */ :root[data-theme="dark"] .cloud-media-picker__item.is-selected .cloud-media-picker__check::after { border: solid #2e2e2e; border-width: 0 2px 2px 0; } /* The saved state keeps a green background, so its check must stay white in dark mode. */ :root[data-theme="dark"] .cloud-media-picker__item.is-saved .cloud-media-picker__check::after { border: solid #fff; border-width: 0 2px 2px 0; } :root[data-theme="dark"] body[data-page-type="homepage"] { --paper: #111111; --soft: #1c1c1c; --line: #2b2b2b; --muted: #9b9b9b; --warm: #d9d9d9; } /* ---------- theme toggle (added to the header nav by theme.js) ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .theme-toggle:hover { color: var(--ink); background: var(--soft); } .theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .theme-toggle svg { display: block; } /* ---------- images with baked-in light backgrounds ---------- */ .hero__cloud-art--dark { display: none; } :root[data-theme="dark"] .hero__cloud-art:not(.hero__cloud-art--dark) { display: none; } :root[data-theme="dark"] .hero__cloud-art--dark { display: block; } /* Rounded app-icon tiles hide the white corners of the square PNG logos. */ :root[data-theme="dark"] :is(.brand img, .pricing-source-icon, .how-to-platform-logo, .headline-source-logo img, .headline-logo) { border-radius: 22%; } :root[data-theme="dark"] :is(.seo-process-card img, .step-card img, article img[src*="assets/step-"]) { border-radius: 14px; } /* ---------- homepage extension demo: dark frame, sample sites keep their own look ---------- */ :root[data-theme="dark"] .ext-demo { --xd-ink: #ecebe8; --xd-muted: #9b9b9b; --xd-line: #2b2b2b; } :root[data-theme="dark"] .ext-demo__tabs button { color: #a3a3a3; } :root[data-theme="dark"] .ext-demo__tabs button:hover { color: #ecebe8; background: #1c1c1c; } :root[data-theme="dark"] .ext-demo__tabs button[aria-selected="true"] { color: #ecebe8; background: #1f1f1f; border-color: #333; box-shadow: none; } :root[data-theme="dark"] .ext-demo__tabs button span { color: #777; } :root[data-theme="dark"] .xd-platform { background: #1a1a1a; border-color: #2e2e2e; color: #b5b5b5; } :root[data-theme="dark"] .xd-platform:hover { color: #ecebe8; border-color: #444; } :root[data-theme="dark"] .xd-platform[aria-pressed="true"] { color: #ecebe8; border-color: #ecebe8; box-shadow: 0 0 0 1px #ecebe8 inset; } :root[data-theme="dark"] .xd-guide__step { background: #1f1f1f; color: #9b9b9b; } :root[data-theme="dark"] .xd-guide__step.is-done { background: #1d2a1c; color: #9fd49b; } :root[data-theme="dark"] .xd-guide__replay { background: #1a1a1a; border-color: #333; color: #cfcfcf; } :root[data-theme="dark"] .xd-guide__next { background: #ecebe8; border-color: #ecebe8; color: #111; } :root[data-theme="dark"] .xd-window { border-color: #2e2e2e; background: #1a1a1a; box-shadow: 0 30px 60px -30px #000c; } :root[data-theme="dark"] .xd-chrome { background: #202020; } :root[data-theme="dark"] .xd-tab { background: #2b2b2b; color: #d4d4d4; } :root[data-theme="dark"] .xd-toolbar { background: #2b2b2b; border-bottom-color: #1a1a1a; } :root[data-theme="dark"] .xd-address { background: #1d1d1d; color: #c4c4c4; } :root[data-theme="dark"] .xd-ext-btn:hover, :root[data-theme="dark"] .xd-ext-btn.is-open { background: #3a3a3a; } :root[data-theme="dark"] .xd-ext-btn img { border-radius: 5px; } :root[data-theme="dark"] .xd-shelf { background: #171717; border-color: #2b2b2b; } :root[data-theme="dark"] .xd-shelf__empty { border-color: #333; color: #8a8a8a; } :root[data-theme="dark"] .xd-file { background: #1f1f1f; border-color: #2e2e2e; } :root[data-theme="dark"] .xd-file__meta small, :root[data-theme="dark"] .xd-file__size { color: #9b9b9b; } :root[data-theme="dark"] .xd-file.is-fresh { animation-name: xd-land-dark; } @keyframes xd-land-dark { from { opacity: 0; transform: translateY(-14px) scale(.96); background: #1d2a1c; } } :root[data-theme="dark"] .ext-demo__fineprint { color: #777; } :root[data-theme="dark"] .ext-demo__cta .button--secondary { background: #1c1c1c; border-color: #333; color: #ecebe8; }