/* Shared theme toggle widget + theme-aware tokens for previews Usage: - Include this stylesheet AFTER colors_and_type.css - Include _theme-toggle.js (deferred or at end of body) - Set data-theme="light" or "dark" on (default: light) - Use var(--pv-bg), var(--pv-surface), var(--pv-text), etc. instead of hardcoded */ :root, :root[data-theme="light"], html[data-theme="light"], body[data-theme="light"] { --pv-bg: #ffffff; --pv-surface: #ffffff; --pv-surface-2: #f9fafb; --pv-surface-3: #f3f4f6; --pv-border: #e5e7eb; --pv-border-soft: #f3f4f6; --pv-text: #111827; --pv-text-2: #6b7280; --pv-text-3: #9ca3af; --pv-bar: #f3f4f6; } :root[data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] { --pv-bg: #0a0a0a; --pv-surface: #171717; --pv-surface-2: #0f0f0f; --pv-surface-3: #1f1f1f; --pv-border: #262626; --pv-border-soft: #1f1f1f; --pv-text: #fafafa; --pv-text-2: #a1a1aa; --pv-text-3: #6b7280; --pv-bar: #262626; } /* Make html element track theme too so html, body { background } cascades correctly */ html[data-theme="dark"] { background: var(--pv-bg); color-scheme: dark; } html[data-theme="light"] { background: var(--pv-bg); color-scheme: light; } /* Explicit body painting — overrides inline `html, body { background: ... }` rules in preview files where token resolution alone wasn't repainting body. */ body[data-theme="dark"] { background: var(--pv-bg) !important; color: var(--pv-text); } body[data-theme="light"] { background: var(--pv-bg) !important; color: var(--pv-text); } /* No transitions on body — they confused getComputedStyle timing in tests and offer little value here. Keep instant theme swap. */ /* The toggle widget */ .pv-theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 9999; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9999px; background: rgba(255,255,255,0.85); border: 1px solid #e5e7eb; box-shadow: 0 4px 10px -3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--nb-font-sans, system-ui); } body[data-theme="dark"] .pv-theme-toggle, html[data-theme="dark"] .pv-theme-toggle { background: rgba(23,23,23,0.85); border-color: #262626; box-shadow: 0 4px 10px -3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); } .pv-theme-toggle button { appearance: none; border: 0; background: transparent; color: #6b7280; font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; padding: 5px 11px; border-radius: 9999px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s, color .15s; } .pv-theme-toggle button:hover { color: #111827; } body[data-theme="dark"] .pv-theme-toggle button, html[data-theme="dark"] .pv-theme-toggle button { color: #9ca3af; } body[data-theme="dark"] .pv-theme-toggle button:hover, html[data-theme="dark"] .pv-theme-toggle button:hover { color: #fafafa; } .pv-theme-toggle button[aria-pressed="true"] { background: #111827; color: #fff; } body[data-theme="dark"] .pv-theme-toggle button[aria-pressed="true"], html[data-theme="dark"] .pv-theme-toggle button[aria-pressed="true"] { background: #fafafa; color: #0a0a0a; } .pv-theme-toggle svg { width: 11px; height: 11px; }