/* Cartbeat site theme ยท light/dark via data-theme on */ :root, [data-theme="light"] { color-scheme: light; --ink: #111318; --sub: #6b7280; --line: #e7e7ec; --bg: #f4f4f6; --card: #fff; --input-bg: #fff; --green: #16a34a; --accent: #111318; --accent-fg: #fff; --ghost-bg: #fff; --inbox-bg: #fafafa; --preview-shell: #e8e8ec; --iframe-bg: #fff; --shadow: rgba(14, 16, 21, 0.22); --link-underline: #d1d5db; --pill-open-bg: #eff6ff; --pill-open-fg: #1d4ed8; --pill-click-bg: #f0fdf4; --pill-click-fg: #15803d; --pill-sent-bg: #f4f4f5; --pill-sent-fg: #52525b; --banner-sandbox-bg: #fefce8; --banner-sandbox-border: #fde68a; --banner-sandbox-fg: #a16207; --banner-trial-bg: #eff6ff; --banner-trial-border: #bfdbfe; --banner-trial-fg: #1d4ed8; --banner-expired-bg: #fef2f2; --banner-expired-border: #fecaca; --banner-expired-fg: #b91c1c; --banner-active-bg: #f0fdf4; --banner-active-border: #bbf7d0; --banner-active-fg: #15803d; --banner-ai-bg: #eff6ff; --banner-ai-border: #bfdbfe; --banner-ai-fg: #1d4ed8; --banner-sms-bg: #f5f3ff; --banner-sms-border: #ddd6fe; --banner-sms-fg: #6d28d9; --email-copy-bg: #f8f6f1; --email-copy-border: #e8e2d6; --email-copy-input-bg: #fff; --email-copy-input-border: #d9d0c0; --email-copy-focus: #b45309; --email-copy-badge-bg: #fef3c7; --email-copy-badge-fg: #92400e; --app-only-bg: #f4f4f6; --app-only-border: #e7e7ec; --app-only-badge-bg: #f4f4f5; --app-only-badge-fg: #52525b; } [data-theme="dark"] { color-scheme: dark; --ink: #f4f4f5; --sub: #a1a1aa; --line: #3f3f46; --bg: #0f1014; --card: #18181b; --input-bg: #27272a; --green: #22c55e; --accent: #f4f4f5; --accent-fg: #18181b; --ghost-bg: #27272a; --inbox-bg: #1f1f23; --preview-shell: #09090b; --iframe-bg: #fff; --shadow: rgba(0, 0, 0, 0.45); --link-underline: #52525b; --pill-open-bg: #1e3a5f; --pill-open-fg: #93c5fd; --pill-click-bg: #14532d; --pill-click-fg: #86efac; --pill-sent-bg: #3f3f46; --pill-sent-fg: #d4d4d8; --banner-sandbox-bg: #422006; --banner-sandbox-border: #854d0e; --banner-sandbox-fg: #fde68a; --banner-trial-bg: #1e3a5f; --banner-trial-border: #1d4ed8; --banner-trial-fg: #bfdbfe; --banner-expired-bg: #450a0a; --banner-expired-border: #b91c1c; --banner-expired-fg: #fecaca; --banner-active-bg: #14532d; --banner-active-border: #16a34a; --banner-active-fg: #bbf7d0; --banner-ai-bg: #1e3a5f; --banner-ai-border: #1d4ed8; --banner-ai-fg: #bfdbfe; --banner-sms-bg: #2e1065; --banner-sms-border: #6d28d9; --banner-sms-fg: #ddd6fe; --email-copy-bg: #1c1914; --email-copy-border: #44403c; --email-copy-input-bg: #292524; --email-copy-input-border: #57534e; --email-copy-focus: #fbbf24; --email-copy-badge-bg: #422006; --email-copy-badge-fg: #fde68a; --app-only-bg: #18181b; --app-only-border: #3f3f46; --app-only-badge-bg: #27272a; --app-only-badge-fg: #a1a1aa; } html[data-theme="light"] body.page-landing { --bg: #fff; } .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--ghost-bg); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--sub); } .theme-toggle .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }